Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
react-navigation
Advanced tools
React Navigation is a popular library for routing and navigation in React Native applications. It provides a way to navigate between different screens and manage the navigation state in a React Native app.
Stack Navigator
The Stack Navigator allows you to transition between screens and manage navigation history. It is similar to a stack of cards where each new screen is placed on top of the previous one.
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Tab Navigator
The Tab Navigator allows you to create a tab-based navigation where users can switch between different screens by tapping on tabs at the bottom of the screen.
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
Drawer Navigator
The Drawer Navigator provides a side menu navigation where users can swipe from the side of the screen to open a drawer containing navigation options.
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './HomeScreen';
import NotificationsScreen from './NotificationsScreen';
const Drawer = createDrawerNavigator();
function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
export default App;
React Router Native is a version of React Router that works with React Native. It provides a similar API to React Router for web applications, allowing you to define routes and navigate between screens. Compared to React Navigation, React Router Native is more similar to traditional web routing and may be more familiar to developers with a web background.
Learn once, navigate anywhere.
React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
React Navigation is the result of a collaboration between developers from Facebook, Expo and the React community at large: it replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation, React Native's Navigator and NavigationExperimental components.
Since the library is a JS-based solution, to install the latest version of react-navigation you only need to run:
yarn add react-navigation
or
npm install --save react-navigation
To learn how the library work, head to the introduction on the website for a quick tutorial that will cover all the basics - or try it out our expo demo.
A lot of developers poured their knowledge in blog posts, and other repos - we will try to keep here a list of tutorials and resources to help someone who wants to learn about React Navigation and techniques to handle navigation effectively.
As soon as all the tasks here have been completed. You can read more about it in the blog.
(in the meantime, you can find the changelog for every release here)
Head to the issues and do a quick search: if you think you are experiencing a bug chances are somebody already opened an issue for it. If instead you are having more general problems, use Stack Overflow - which is better suited and helps keeping the Issues section of the repo clean. Alternatively you could join the Reactiflux community on Discord where there are React Native and React Navigation channels with helpful people who might be able to answer you.
You should only open a new issue if you believe that you are experiencing a bug or have a feature request, and please follow the dedicated template - it will help everyone helping you (and may get closed if it doesn't).
We are aware that the performances can be improved - we will work on this (keep an eye on the roadmap linked above). In the meantime, please refer to these few issues for specific information regarding:
In particular, refer to this comment (and the one after that) to learn more about how you can try improving the performance of your code.
Glad you ask! This library is a community effort: it can only be great if we all help out in one way or another 😄 . If you feel like you aren't experienced enough using react navigation to contribute, you can still make an impact by:
Responding to one of the open issues. Even if you can't resolve or fully answer a question, asking for more information or clarity on an issue is extremely beneficial for someone to come after you to resolve the issue.
Creating public example repos of navigation problems you have solved.
Answering questions on Stack Overflow. Alternatively, asking questions on Stack Overflow instead of opening an issue.
Answering questions in our Reactiflux channel.
Providing feedback on the open PRs.
If you feel brave enough you can submit a PR: follow the Contributors guide to find out how. If you don't know where to start, check the ones with the label Type: Good First Task
- even fixing a typo in the documentation is a worthy contribution!
No: there are some other libraries - which, depending on your project, can be better or worse suited for your project. They differ in the approach and implementation from react-navigation
, but share the common goal of helping you create a good React Native application; you can find a general round up in the React Native docs.
This library originally planned to support web too - but at the moment it is not a priority for v1.0; a lot of work is necessary to reach it as-is and we had to freeze this support (consider it "experimental").
This library has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
React-navigation is licensed under the BSD 2-clause "Simplified" License.
FAQs
Routing and navigation for your React Native apps
The npm package react-navigation receives a total of 106,456 weekly downloads. As such, react-navigation popularity was classified as popular.
We found that react-navigation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.