
Product
Introducing Socket Fix for Safe, Automated Dependency Upgrades
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
@react-navigation/core
Advanced tools
@react-navigation/core is a core utility for building navigation solutions in React Native applications. It provides the essential building blocks for creating navigators, managing navigation state, and handling navigation actions.
Creating a Navigator
This code demonstrates how to create a custom navigator using @react-navigation/core. It uses the `createNavigatorFactory` and `useNavigationBuilder` functions to set up a basic stack navigator.
const { createNavigatorFactory, StackRouter, useNavigationBuilder } = require('@react-navigation/core');
function MyNavigator({ initialRouteName, children, screenOptions }) {
const { state, navigation, descriptors } = useNavigationBuilder(StackRouter, {
initialRouteName,
children,
screenOptions,
});
return (
<NavigationContext.Provider value={navigation}>
<NavigationStateContext.Provider value={state}>
{state.routes.map((route, i) => (
<View key={route.key}>
{descriptors[route.key].render()}
</View>
))}
</NavigationStateContext.Provider>
</NavigationContext.Provider>
);
}
const createMyNavigator = createNavigatorFactory(MyNavigator);
Navigating Between Screens
This code shows how to navigate between screens using the `useNavigation` hook. The `HomeScreen` component includes a button that navigates to the `DetailsScreen` when pressed.
const { NavigationContainer, useNavigation } = require('@react-navigation/core');
function HomeScreen() {
const navigation = useNavigation();
return (
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
);
}
function DetailsScreen() {
return (
<Text>Details Screen</Text>
);
}
const App = () => (
<NavigationContainer>
<MyNavigator>
<Screen name="Home" component={HomeScreen} />
<Screen name="Details" component={DetailsScreen} />
</MyNavigator>
</NavigationContainer>
);
Handling Navigation State
This code demonstrates how to access the current navigation state using the `useNavigationState` hook. The `CurrentRoute` component displays the name of the current route.
const { NavigationContainer, useNavigationState } = require('@react-navigation/core');
function CurrentRoute() {
const route = useNavigationState(state => state.routes[state.index]);
return (
<Text>Current Route: {route.name}</Text>
);
}
const App = () => (
<NavigationContainer>
<MyNavigator>
<Screen name="Home" component={HomeScreen} />
<Screen name="Details" component={DetailsScreen} />
</MyNavigator>
<CurrentRoute />
</NavigationContainer>
);
React Router is a popular library for routing in React applications. It provides a declarative way to navigate between different components and manage application state. Unlike @react-navigation/core, which is designed specifically for React Native, React Router is primarily used for web applications.
Wouter is a minimalist routing library for React. It offers a small and fast alternative to React Router with a similar API. Wouter is designed for simplicity and performance, making it a good choice for smaller projects or those that require a lightweight solution. It is not as feature-rich as @react-navigation/core but can be a good fit for web-based applications.
Reach Router is a small, simple router for React that emphasizes accessibility and simplicity. It provides a straightforward API for defining routes and handling navigation. Reach Router is similar to React Router but focuses more on accessibility and ease of use. It is not specifically designed for React Native, unlike @react-navigation/core.
@react-navigation/core
Core utilities for building navigators independent of the platform.
Open a Terminal in your project's folder and run,
npm install @react-navigation/core
A basic custom navigator bundling a router and a view looks like this:
import {
createNavigatorFactory,
useNavigationBuilder,
} from '@react-navigation/core';
import { StackRouter } from '@react-navigation/routers';
function StackNavigator({ initialRouteName, children, ...rest }) {
const { state, navigation, descriptors, NavigationContent } =
useNavigationBuilder(StackRouter, {
initialRouteName,
children,
});
return (
<NavigationContent>
<StackView
state={state}
navigation={navigation}
descriptors={descriptors}
{...rest}
/>
</NavigationContent>
);
}
export default createNavigatorFactory(StackNavigator);
FAQs
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
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.