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.
React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
See: https://reactnavigation.org/docs/en/getting-started.html
You can also try out the Navigation Playground app to get a sense for some of the tools built in to React Navigation. The "Fundamentals" in the documentation also include examples you can play with.
See the help page.
See our Contributing Guide!
Certainly not! There are other libraries - which, depending on your needs, can be better or worse suited for your project. Read more in the alternative libraries documentation, and read React Navigation's pitch & anti-pitch to understand the tradeoffs.
Web support was not a priority for the 1.0 release, but the architecture of this library allows for it (and it has worked in the past). If you would like to lead this charge, please reach out with your ideas for how to move forward on the RFCs repository and we would be happy to discuss.
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.