React Navigation:
React Native Navigation is used for managing the presentation and transition between multiple screens. There are a number of different open-source navigation libraries available.
JavaScript implementation, we don’t have to worry about linking iOS and Android dependencies. We can install it to our app by using
JavaScript implementation, we don’t have to worry about linking iOS and Android dependencies. We can install it to our app by using
yarn : yarn add react-navigation
Stack Navigation:
In Stack Navigation, a user to navigate from one screen to another by pushing the new screen to the top of the stack. The user can also pop the current screen off the stack in order to return to the previous screen. In both iOS and Android, a back button at the top of the navigation bar is how a user usually navigates back to a previous screen by removing the current screen off the stack. On Android devices, there is also a physical or soft key back button at the bottom of the device screen that also allows you to go back on any application.
With this navigation flow, only one screen is visible at any given time. We can think of the entire navigation stack as an ordered array of screens, with the last element being the screen that is currently visible and the first element being the root screen.
StackNavigator() generates a higher-order component that provides each of our screens with a navigation prop. This prop serves as the interface between our screen components and the React Navigation library.
The navigation prop provides us with the following:
1. navigate: Method to allow us to navigate between screens. With a StackNavigator, this method pushes the new screen on top of the current stack.
2. state: Object that returns the name and identifier of the current route as well as its parameters.
3. setParams: Method to change the current screen’s parameters.
4. goBack: Method that allows us to navigate to a previous screen. For StackNavigator, this pops the current screen (or number of screens) until the specified screen is reached within the stack.
Example:
__________________________________________
import React,{Component} from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{marginBottom:50,color:'green',fontSize:15}}>First Screen</Text>
<Button
title="Next"
onPress={() => this.props.navigation.navigate('Profile')}
/>
</View>
);
}
}
class ProfileScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Profile Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
Profile: ProfileScreen
},
{
initialRouteName: "Home"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component {
render() {
return <AppContainer />;
}
}
_____________________________________________________________________________________
Output:
