Morioh
Login
React Native Tutorial

React Native Tutorial

1 year ago

Top 4 React Native Routing Libraries that You Should Know

React Native routing libraries are an essential tool for developers. This tutorial will show you top 4 React Native routing libraries: react-native-router-flux, React Navigation, React Native Redux Router, and React Router Native. We’ll explore their features, use cases, and how they differ from one another to help you make an informed decision when choosing a routing library for your next React Native project.

Navigation plays a vital role in the overall user experience for mobile applications. Since navigation determines how users move through and interact with an app, it’s critical that developers choose the right routing library for their React Native projects. With the abundance of options available, it can be overwhelming to decide which library best suits your needs.

Whether you’re a seasoned developer or just getting started with React Native, this article will provide valuable information on how to navigate through the world of routing libraries and make an informed decision on which is the best option for your next project.

In this post, we’ll take a close look at some of the most popular React Native routing libraries. We’ll explore their features, use cases, and how they differ from one another to help you make an informed decision when choosing a routing library for your next React Native project.

N.B., to get the most out of this article, you should have a basic understanding of how to set up a bare-bones React Native project. Otherwise, you may find it helpful to refer to the docs

Contents:

  • react-native-router-flux
  • React Navigation
  • React Native Redux Router
  • React Router Native

react-native-router-flux

react-native-router-flux is a popular routing library for React Native. It is a simple and easy-to-use router that allows developers to navigate between different scenes in their app. A key feature is its stack-based navigation system, where each scene is added to the top of the stack and the back button pops the current scene off the stack.

To use react-native-router-flux in your application, you’ll need to wrap your entire app with the Router component. Within the Router component, you can define different scenes using the Scene component. Each scene is given a unique key, which is used to navigate to that particular scene:

import {Router, Scene} from 'react-native-router-flux';

const App = () => {
    return (
        <Router>
            <Scene key="home" component={HomeScreen} title="Home" />
            <Scene key="about" component={AboutScreen} title="About" />
        </Router>
    );
}

To navigate to a specific scene, you can use the Actions.key() method, where key is the unique key of the scene you want to navigate to:

import {Actions} from 'react-native-router-flux';

const handlePress = () => {
    Actions.about();
}

react-native-router-flux also supports passing props to a scene when navigating to it, like so:

Actions.about({title: 'About Us', data: 'Some data'});

To pop a scene off the stack, you can use the Actions.pop() method:

Actions.pop();

react-native-router-flux does not support deep linking or nested navigation natively, but you can use React Native’s Linking API.

Overall, react-native-router-flux is a great option for developers who want a simple and easy-to-use router for their React Native app. Its stack-based navigation system makes it easy to understand and use, and it is well-documented with clear instructions and examples. However, it may not be suitable for larger, more complex apps that require deep linking or nested navigation.

React Navigation

React Navigation is a popular choice among developers for handling routing and navigation in React Native applications due to its flexibility and ease of use.

A key feature of React Navigation is its ability to handle deep linking, allowing users to directly open a specific page within an app by clicking on a link. This can be useful for directing users to a specific piece of content or for handling push notifications.

React Navigation also supports nested navigation. This allows for multiple levels of navigation within an app, such as a bottom tab navigator within a stack navigator. Nested navigation can be useful for organizing complex apps with multiple screens.

Here’s an example of how to set up a stack navigator using React Navigation:

// In App.js in a new project

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

In this example, we’re importing the NavigationContainer function from the @react-navigation/native package. The NavigationContainer is a vital component in managing navigation within an app. It holds the navigation state and controls the navigation tree.

It is important to include this component as a wrapper for all navigators in the application. It is typically rendered at the highest level of the app, such as in the main App.js file.

We then define two screens, HomeScreen and DetailsScreen, and add them to the navigator as routes.

The createNativeStackNavigator is a function that returns an object with two components, Screen and Navigator, which are used to configure the navigator. The Navigator component should have Screen components as its children to define the routes.

To move to a specific scene, the navigation.navigate method can be utilized. The navigation prop, which is passed to every Screen component in the React Native stack navigator, has a navigate function that can be used to navigate to the desired scene:

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

To go back, you can use the navigation.goBack method, like os:

navigation.goBack()

React Navigation offers a powerful and easy-to-use solution for handling navigation within a React Native app. With its support for deep linking and nested navigation, it can be used to create complex and well-organized apps.

React Native Redux Router

React Native Redux Router is another powerful React Native routing library. It’s built on top of React Navigation and allows for easy integration with the Redux store. It also supports deep linking and nested navigation.

Here’s an important notice from the creator of React Native Redux Router:

“I’ve decided to stop supporting this component in favor of a new release, react-native-router-flux. The new version doesn’t depend on concrete Flux/Redux implementation and will allow you to build nested navigators easily. Also, it allows you to intercept route ‘actions’ from your store(s).”

Here’s an example of how to set up navigation using React Native Redux Router:

import {Router, routerReducer, Route, Container, Animations, Schema} from 'react-native-redux-router';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux/native';
import {NavBar, NavBarModal} from './components/NavBar';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

let store = createStore(combineReducers({routerReducer}));

function App() {
        return (
            <Provider store={store}>
                <Router>
                    <Schema name="modal" sceneConfig={Animations.FlatFloatFromBottom} navBar={NavBarModal} />
                    <Schema name="default" sceneConfig={Animations.FlatFloatFromRight} navBar={NavBar}/>
                    <Route name="home" component={HomeScreen} schema="default"/>
                    <Route name="details" component={DetailsScreen} schema="modal"/>
                </Router>

            </Provider>
        )
}

In the above code, we first import all the necessary components and functions from the required libraries. Next, we created a store using the createStore function and the combineReducers function, passing in the routerReducer.

The schema defines how to present a specific route. For example, consider the following route:

<Route name="details" component={HomeScreen} schema="modal" />

When a user navigates to the "details" route, it will be presented using the "modal" schema, which includes a specific animation (Animations.FlatFloatFromBottom) and navigation bar component (NavBarModal).

So, when the user navigates to the "details" route, the app will present the DetailsScreen component with a floating animation that starts from the bottom of the screen, and the navigation bar at the top will use the NavBarModal component.

To navigate to a specific screen, you can use the Actions.key() method, where key is the unique key of the screen you want to navigate to:

import {Actions} from 'react-native-redux-router';

const handlePress = () => {
    Actions.details;
}

React Native Redux Router also supports passing props to a screen when navigating to it, like so:

Actions.details({title: 'About Us', data: 'Some data'});

The React Native Redux Router library does not provide inbuilt support for deep linking and nested navigation.

React Router Native

React Router is a popular routing library for React web applications, and we can also use it in React Native applications with some additional setup.

To use React Router in your React Native app, you need to wrap your entire app in a Router component and define your routes using the Route component:

import { NativeRouter, Switch, Route } from "react-router-native"; 
import Home from "./HomeScreen"; 
import DetailsScreen from "./DetailsScreen"; 

function App(){ 
    return( 
              <NativeRouter> 
                <Switch> 
                  <Route exact path="/" component={HomeScreen} /> 
                  <Route exact path="/details" component={Products} /> 
                </Switch> 
              </NativeRouter> 
          ); 
      } 
}

To navigate to a specific route, you can use the useHistory Hook:

const HomeScreen = () => {
    const history = useHistory();

    const handlePress = () => {
        history.push('/details');
    }

    return (
        <div>
            <button onPress={handlePress}>Go to Details</button>
        </div>
    );
}

We could also do this using the React Native Link component, like so:

function HomeScreen() {
  return (
    <View>
      <Link to="/details">
        <Text>Go to Details</Text>
      </Link>
    </View>
  );
}

A <Link> component in React Router Native provides a means for users to navigate to different views with a tap, similar to how <a> elements function in a web application. In React Router Native, the <Link> is represented by a TouchableHighlight.

React Router Native does support deep linking and nested navigation, allowing you to handle more complex routing scenarios in your app. It also provides a simple and flexible API for handling routing in your React Native app. However, it may require some additional setup compared to other routing libraries like React Navigation.

Conclusion

React Native routing libraries are an essential tool for developers. The libraries discussed in this article, react-native-router-flux, React Navigation, React Native Redux Router, and React Router Native, are all popular options that offer a variety of features and approaches to navigation.

In the end, the choice of which React Native routing library to use depends on the specific needs of your project. It’s important to consider factors such as the size and complexity of your app, as well as your team’s experience and preferences. By understanding the features and benefits of each library, you can make an informed decision and create a seamless navigation experience for your users.

Source: https://blog.logrocket.com

#reactnative

Top 4 React Native Routing Libraries that You Should Know
5.60 GEEK