Skip to content

Navigation module

Jump to bottom
Dmitry Usik edited this page Apr 3, 2022 · 11 revisions

🤔 Intro

Basically, there are 2 main navigation libraries for bare react-native projects, react-navigation, and react-native-navigation. Each of them has its own benefits. If we shortly compare them, react-native-navigation provides us with the full native implementation of the navigation. All the navigation views and screens are implemented natively. On the other hand, react-navigation is implemented mostly on the JS side using a couple of native libraries in order to boost the performance. Of course, it's important to make the right choice, but simply put, react-navigation is more stable, more flexible, and configurable. In the future, it'll endure react-native-navigation. So, react-navigation is used in this project.

Navigation stacks

Try to decompose the stacks of the screens. For example, if your application has multiple roles, then each role should have its own stack. The authentication process could also have its own stack.

Reccomendations

Try to follow the next recommendations in order to follow the best practices:

  • Keep all the screens in the screens folder.
  • Try to keep the components that represent screens clean and simple. Don't implement any complex logic, these should be just simple files.
  • Don't put any large objects to navigation params. These should be some primitive variables.
  • Don't put navigation params to the child components. They can be obtained using the useRoute hook in child components.
  • If a screen contains some title then send it through the navigation params and then display it in the stack navigator.

📱 New screen

In order to add a new screen, follow the next steps:

  1. Add a new constant that represents the screen to the config.ts file. You can check the example for countries module;
  2. Add a new navigation params type to the types.ts file. Check the examples for countries module. It should be undefined if the screen doesn't receive any params;
  3. Add navigation and route types to the types.ts file. Check the examples for countries module;
  4. Create a new component that represents a screen and import it in the root index.ts file. You can use CountriesScreen as an example;
  5. Import screen name and navigation params to ApplicationParams;
  6. Register a new screen in the stack navigator. Check the example for ApplicationStack.ts.

Clone this wiki locally