React Navigation [Class and Functional Component]

Navigation in mobile application is important as it gives authority to user to change screen on-click. To achieve navigation in React Native we can use React Navigation.

Getting started | React Navigation

React Navigation is a popular library used with React Native for navigation.

Let’s understand how to implement React Navigation with Class Components and Functional Components.

Creating A Stack Navigator

Creating a stack navigator is same in both Class as well as Functional Components i.e., we have to use the createStackNavigator from react-navigation method and pass objects.

import { createAppContainer, createStackNavigator } from "react-navigation"
import Home from "./src/Home"
import Blog from "./src/Blog"

const AppNavigator = createStackNavigator({
    Home: {screen: Home},
    Blog: {screen: Article},
    },
    {
        // Initial Screen
        initalRoute: "Home"
    }
);

const App = createAppContainer(AppNavigator);

export default App;

Create Home Screen (Class Component)

Implementation of Home Screen using Class Component

import React from "react"
import { View, Text, TouchableOpacity } from "react-native"

export default class Home extends React.Component {

    static navigationOptions = {
        title: "Home",
    };

    render () {
        return (
            <View>
                <TouchableOpacity
                    onPress={()=>{this.props.navigation.navigate("Blog")}}
                >
                    <Text>Blog</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

Now to achieve above in a Functional Component the most important thing to keep in mind is that navigationOptions is a static method.

Static methods aren’t called on instances of the class. Instead, they’re called on the class itself.

Since we can’t create instances of Functional Components, we will create the method and pass navigation object as a prop in it.

Create Home Screen (Functional Component)

import React from "react"
import { View, Text, TouchableOpacity } from "react-native"

const Home = ({navigation}) =>(
    <View>
        <TouchableOpacity
            onPress={()=>{navigation.navigate("Blog")}}
        >
            <Text>Blog</Text>
        </TouchableOpacity>
    </View>
)

Home.navigationOptions = () => {(
    title:"Home"
)}

export default Home

Note: – In Class Component this.props.navigation.navigate(“Blog”) and In Functional Component navigation.navigate(“Blog”)

React Navigation | React Navigation

Creating a New Application in React Native – Chandan Rajpurohit

Thank you for reading this article, I really appreciate it. Let me know in case of any queries in the comment section.