Using React Navigation with Functional Components 

React Navigation is a popular library used with React Native for navigation. It helps us to build navigational apps. Here is a quick guide for implementing React Navigation with Functional Components. I have been using react-navigation with Class Components but haven't ever used them with Functional Components. Recently I was working on a small project to learn hooks and came across the issue of using reat-navigation with Functional Component. Unfortunately there was no documentation available on the officail website. I hope this article helps anyone who is looking to setup navigations with functional components.

Note: If you're new to React Navigation, I recommend you to go through their official docs to understand the basics.

Creating A Stack Navigator

Creating a stack navigator is same as that for Class Components. We use the createStackNavigator method and pass objects.

import { createAppContainer, createStackNavigator } from 'react-navigation';

// Importing the screens
import Home from './src/Home';
import Article from './src/Article';

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

const App = createAppContainer(AppNavigator);

export default App;

Create Home Screen (Class Component)

We will create the Home screen by making Class Component to understand the difference.

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

    export default class Home extends React.Component \{

        static navigationOptions = \{
            // Sets the title of the Header
            title: 'Home',
        };

        render () \{
            return (
                <View>
                    <TouchableOpacity
                        onPress=\{()=>\{this.props.navigation.navigate('Article')}}
                    >
                        <Text>Click Here</Text>
                    </TouchableOpacity>
                </View>
            )
        }
    }

    ...

To convert this Class component into a Functional Component the most important thing to keep in mind here 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 call the method on the functional component. The navigation object is passed as a prop.

Create Home Screen (Functional Component)

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

    const Home = (\{navigation}) =>(
        <View>
            <TouchableOpacity
                onPress=\{()=>\{navigation.navigate('Article')}}
            >
                <Text>Click Here</Text>
            </TouchableOpacity>
        </View>
    )

    Home.navigationOptions = () => \{(
        title:'Home'
    )}

    ...

    export default Home

This was a small demo, I hope it will help you!