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
Jump ahead:
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 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 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 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.
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.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowJavaScript’s Date API has many limitations. Explore alternative libraries like Moment.js, date-fns, and the new Temporal API.
Explore use cases for using npm vs. npx such as long-term dependency management or temporary tasks and running packages on the fly.
Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.
Build a real-time image background remover in Vue using Transformers.js and WebGPU for client-side processing with privacy and efficiency.