@react-navigation/core

What is @react-navigation/core?

@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.

What are @react-navigation/core's main functionalities?

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>
);

Other packages similar to @react-navigation/core

react-router

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

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

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.

README

@react-navigation/core

Core utilities for building navigators independent of the platform.

Installation

Open a Terminal in your project's folder and run,

npm install @react-navigation/core

Usage

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);