Skip to main content

Navigate

All navigation within the app is accomplished using React Navigation. We adhere to the default navigation options without any overrides, custom navigators, or special configurations. This approach allows us to stay aligned with the latest releases of React Navigation, ensuring that we can swiftly adopt any new features and improvements.

All navigation-related configurations and navigators are neatly organized within the src/navigation folder. Here's a brief overview:

Root file (Application.{js, tsx})​

This serves as the root navigator, which is responsible for handling the initial navigation of the application. It's a simple stack navigator that includes the Startup screen and an Example screen.

The workflow is designed so that when the application launches, the user is initially presented with the Startup screen. This screen takes on the responsibility of loading essential application data, such as user profiles and settings. Once this data is loaded, the Startup screen facilitates navigation to the Example screen.

As your application evolves, you have the flexibility to extend this file by adding more screens and navigators.

Not a fan of the structure ?

Please note that this navigation structure is intentionally kept simple, providing you with a foundational structure that you can build upon. You can either add your own navigators or, if you prefer, replace the existing structure with your own custom navigation.

Using typescript​

It's crucial not to overlook the creation of types for your navigation parameters. This practice helps prevent errors and enhances autocompletion. You can define these types in the @/navigation/types.ts file.

For more in-depth information on this topic, please refer to the React Navigation documentation.

Advanced usage​

To gain a deeper understanding of the various navigators and their usage in React Navigation, We recommend following the React Navigation documentation's "Getting Started" section. This resource provides comprehensive information and examples that will help you become proficient in using different navigation options in your React Native application.