// @4.x
import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
/** ---------Screens----------- */
import HomeScreen from "../Containers/HomeScreen";
import ProfileScreen from "../Containers/ProfileScreen";
import LoginScreen from "../Containers/LoginScreen";
const StackNavigator = createStackNavigator(
{
initialRouteName: "Home"
},
{
Home: {
screen: HomeScreen
},
Login: {
screen: LoginScreen,
headerMode: "none",
},
Profile: {
screen: ProfileScreen
}
);
export default createAppContainer(StackNavigator);
In RN5, We can create a dynamically configured navigation component. The new way to create a new routing components as much like as follows,
// @5.x
import React from "react"
import { View, Text, Button } from "react-native"
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"
const Stack = createStackNavigator()
const HomeScreen = () => {
return (
<View style={styles.containerStyle}>
<Text style={styles.title}>Home Screen</Text>
</View>
)
}
const ProfileScreen = ({ navigation }) => {
return (
<View style={styles.containerStyle}>
<Text style={styles.title}>Profile Screen</Text>
<Button
onClick={() => navigation.navigate('Root')}
>
Home
</Button>
</View>
)
}
const AppNavigation = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="home">
<Stack.Screen name="home" component={HomeScreen} />
<Stack.Screen name="profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default AppNavigation;
New hooks
There are several hooks concepts are implemented in react navigation 5. Hooks are great for stateful logic and code organization.
Example,
import { useRoute } from "@react-navigation/native"
const AboutScreen = ({ navigation }) => {
const route = useRoute()
return (
<View
style={{
justifyContent: "space-around",
flex: 1,
alignItems: "center",
}}
>
{/* Display the RouteName here */}
<Text style={styles.title}>{route.name}</Text>
</View>
)
}
This customized hooks used to perform certain actions. such a nice feature to reduce out code time.
Dynamic options
Changing Navigation options dynamically is quite hard. This is the most requested feature by the community for a long time. With older versions of react-navigation we had to define static options. and there was no way to change this dynamically.
static navigationOptions = {
title: "Sign In",
header: null,
mode: "modal",
headerMode: "none"
};
In RN5,
const AppNavigation = ({ }) => {
let auth = {
authenticated: true,
user: {
email: "user@mail.com",
username: "John",
},
}
let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile"
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
title: ProfileScreenTitle,
headerTintColor: "#4aa3ba",
headerStyle: {
backgroundColor: darkModeOn ? "#000" : "#fff",
},
}}
/>
<Stack.Screen name="About" component={AboutScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
It lets us easily set screen options based on props, state or context without messing with params. Instead of using static options, we can call it anytime to configure the screen like this,
navigation.setOptions({
headerRight: () => (
<DoneButton
onPress={async () => {
await saveNote();
navigation.replace('Notes');
}}
/>
),
})
New theming API
It wasn't easy to customize the colours used by the built-in components such as header, tab bar etc. without extra code or repetition. RN5 support basic them changing feature where you could specify whether to use a light or dark theme.
Without using extra code you can changing themes dynamically by using simple theme provider objects.
import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
const MyTheme = {
...DefaultTheme,
dark: false,
colors: {
primary: 'rgb(255, 45, 85)',
background: 'rgb(242, 242, 242)',
card: 'rgb(255, 255, 255)',
text: 'rgb(28, 28, 30)',
border: 'rgb(199, 199, 204)',
},
};
export default function App() {
return (
<NavigationContainer theme={MyTheme}>
{/* content */}
</NavigationContainer>
);
}
Redux DevTools integration
You can easily debugging along with current navigation state using React Native Debugger or Redux Devtools Extension. Surprisingly, you don't need to use redux for it and it works without any extra setup.
This new React Navigation 5 great to move on dynamic things. Its really help full for Their users to develop such a dynamic navigations. If this is really help full for you please add a comments below.
