this.props.navigation vs NavigationActions in react-navigation - react-native

Question

NavigationActions supported below actions but I can't understand what is the usage of each one when we have access to helper functions with this.props.navigation.
navigate
reset
back
init
so why we have to import NavigationActions?
Thanks in Advance.

Answer 1

They all have lots of usage but let me give you couple of examples.
Example 1 setParams
Lets say you have a StackNavigator with 2 screens.
const Navigator = StackNavigator({
Home: { screen: Home },
Items: { screen: Items },
Profile: { screen: Profile }
});
Now lets say you navigated to Items screen and then to Profile screen and you are listing Items according to this.props.navigation.state.params.type. Lets say this type can be set through Profile screen.
When user changed the setting of type you need to re-render Items screen. But when you do this.props.navigation.goBack() from Profile screen, Items screen will not re-render unless you do some change on props or state.
At this position setParams action required. Although you can use this.props.navigation.setParams on Profile screen it will set params for the current screen.
NavigationActions lets you set params for other screens with key property of those screens.
Example 2 reset and navigate
In your app at some point (logout, refresh, notification etc.) you might want to reset the navigation stack and then recreate the stack with the desired position.
When the user receives a notification it is the expected behavior to redirect to the related post/article/message and when user wants to goBack user should redirect to the correct screen. At this point you can simulate the users navigation with combination of reset and navigate actions.
There are a lot more use cases of these actions. But at the end, if you don't need them you don't have to import them. At some point if you need them you will understand how to use them more.

Answer 2

Besides what #bennygenel said, NavigationActions also good to navigate in nested stacks.
For example navigating from a one screen to a screen in different stack.
Example:
index.js
const StackOpportunityNavigator = createStackNavigator(
{
MainOpportunity: OpportunityScreen,
SecondScreen: SecondScreen
},
{
initialRouteName: 'MainOpportunity',
headerMode: 'none',
transitionConfig: () => fromLeft(600)
}
);
const DrawerNavigationOptions = createDrawerNavigator(
{
OpportunityStack: { screen: StackOpportunityNavigator },
History: HistoryScreen
},
{
contentComponent: props => <SideBar {...props} />,
drawerPosition: 'right',
headerMode: 'none',
transitionConfig: () => fromLeft(600)
}
);
const LoginNavigator = createStackNavigator(
{
LoadingScreen: LoadingScreen,
LoginScreen: LoginScreen,
DrawerNavigator: DrawerNavigationOptions
},
{
transitionConfig: () => fromLeft(600),
navigationOptions: {
header: props => <HeaderBar {...props} />
}
}
);
export default LoginNavigator;
Now i can from a LoginScreen.js navigate to MainScreen(OpportunityScreen.js), by writing the whole nested navigation path that needed to be done from one screen to another:
const navigateToMainScreen = NavigationActions.navigate({
routeName: 'DrawerNavigator',
action: NavigationActions.navigate({
routeName: 'OpportunityStack',
action: NavigationActions.navigate({
routeName: 'MainOpportunity'
})
})
});
_this.props.navigation.dispatch(navigateToMainScreen);
Hope it helps :)

Answer 3

Every one of those helper functions map into navigation.dispatch(action), with a different action object from NavigationActions.
There are a few instances where you still need to use them, for example, when using navigate, you can change the navigation hierarchy on more than one level by specifying a sub action to happen on the navigator that you just routed to.
this.props.navigation.navigate("some-root", {param: "value"}, someOtherAction)
Where someOtherAction can be any action object.
You can find more information here.