The Navigation Router - The Game-Changing Alternative to React Navigation

The Navigation router is a groundbreaking alternative to the popular React Navigation library, offering a revolutionary approach to scene-based navigation for both React and React Native. With its focus on scene-based navigation, this router empowers developers to take control of their app's UI design, providing the flexibility to build their UI in any way they want.

One of the most notable features of the Navigation router is its seamless integration with React and React Native. Developers no longer need to worry about using different routing libraries for web and mobile development, which streamlines the development process and saves time.

Additionally, the Navigation router provides a seamless user experience. The navigation is 100% native on Android and iOS, ensuring that users feel comfortable and familiar with the navigation elements. On the other hand, developers using React can have whatever URLs they want, allowing them to build their UI as they see fit.

The Navigation Router's Unique Approach

The Navigation Router offers a more native feel to web and mobile applications as it avoids using a single View in its codebase, rendering everything to its native counterpart. Additionally, the Router's use of a CoordinatorLayout provides native collapsing Toolbars and TabBars on Android, with the TabBar component being 100% native on both platforms.

In keeping with its focus on React, the Navigation Router makes every UI element a component. This includes TabBar and NavigationBar components, which can be easily updated using props in the same manner as other React components. Each scene has its own Navigation context, preventing the router from pushing the same scene twice even when double-tapping.

The Navigation Router's focus on the web also ensures that every single navigation is a URL. This provides automatic hyperlinks on all platforms, including for back navigation. Developers can customize the URLs as desired without changing any code, passing strongly-typed data without the need to parse to or from strings.

Overall, the Navigation Router's focus on providing a native, React, and web-friendly experience makes it an innovative choice for developers seeking to create seamless, high-performance applications across multiple platforms.

Using The Navigation Router on React Native.

If you're a developer looking to create a high-performing, fully-native navigation experience for your React Native app, the Navigation router is the solution you've been searching for. This powerful library offers an out-of-the-box experience that rivals that of building a native app without React Native. With its TabBar component rendering to the native UITabBarController from UIKit or the BottomNavigationView from Android's Material Design library, users will feel right at home within your app.

To take advantage of the Navigation router's capabilities, it's important to note that it contains native code. Therefore, to create your application, you must use react-native init or a custom development build of Expo. But with its powerful features and seamless integration, the Navigation router is well worth the effort.

Quick Getting Started

Install the required packages in your React Native project:

npm install navigation navigation-react navigation-react-native

cd ios && pod install && cd ..

The Navigation router is comprised of core utilities that are used by navigators to build the navigation structure for your app. Once you've completed this initial setup, you'll be ready to start writing code with the Navigation router.

Wrapping your app in NavigationHandler

import React from 'react';
import {StateNavigator} from 'navigation';
import {NavigationHandler} from 'navigation-react';
import {NavigationStack} from 'navigation-react-native';

const stateNavigator = new StateNavigator([]);

const App = () => (
  <NavigationHandler stateNavigator={stateNavigator}>
    <NavigationStack></NavigationStack>
  </NavigationHandler>
);

export default App;

To ensure optimal performance in your React Native app, it's recommended that you only use the NavigationHandler once at the root level. Nesting multiple NavigationHandler components should be avoided unless there is a specific use case for doing so. With this in mind, you're now ready to build and run your app on your device or simulator.

Pro Tips

To incorporate Material Design 3 into your Android app, you can configure a Material3 theme in styles.xml. Here's an example:

<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">

Enabling Fabric (The New Architecture)

Enabling the new React Native architecture during pod install is the only difference in setup from the previous architecture.

cd ios && RCT_NEW_ARCH_ENABLED=1 pod install && cd ..

Summary

The Navigation router is a revolutionary library that empowers developers to take control of their app's UI design by offering a groundbreaking approach to scene-based navigation for both React and React Native.

The Navigation router's integration with React and React Native makes it an innovative choice for developers seeking to create seamless, high-performance applications across multiple platforms. Overall, the Navigation router's unique features and powerful capabilities make it a must-have tool for developers looking to create high-performing and fully-native navigation experiences for their React Native apps.

The Navigation router is a worthy alternative to the popular React Navigation library. Its unique approach to scene-based navigation and native feel make it an innovative choice for creating high-performance apps across multiple platforms.