Navigation Handling in React Native

Hi everyone. I wish you a nice day and good reading. In this article, I will talk about navigation handling in React Native.

Navigator is a tool that enables to route between different screens/pages. At beginning we need to import ‘createStackNavigator’ to our file from “react-navigation-stack”.

In App.js file, we imported createStackNavigator and thencreated a const component using it for utilizing properties of navigator. With the help of ‘createAppContainer’ we enabled our navigator to be able to used.

Let’s show how is its structure should appear:

Be careful about passing the right names needed for initialRouteName and where you dispatch/call those navigation routes in external files. For those cases, pass the names ‘before colon mark’ like HomePage on App.js file.

! Also type of your navigation creator does not have to be ‘const’, you may choose function or class, too.

Using/Calling Those Routes

Let’s suppose we will show and use these navigators in our Home.js file.

In Home.js file, we utilized navigationCreator by connecting with {navigation} prop and with ‘.navigate’ feature. We control this actions with Button or TouchableOpacity. In React Native, Button component can not have any children as we can perform in React. E.g instead a text child, we can use ‘title’ prop of Button. But TouchableOpacity component may have children unlike Button and has a different styling and coloring than Button. For GuestList navigation, I showed how to handle with both Button TouchableOpacity.

Actions are performed by ‘onPress’ properties of TouchableOpacity & Button whic is equivalent to ‘onClick’ in React.

I hope this article will help you . Please do not forget to follow me and support me with claps. See you next articles.