React Navigation on Web

React Navigation has built-in support for the Web platform. This allows you to use the same navigation logic in your React Native app as well as on the web.

The @react-navigation/native package can be used on Web without any additional dependencies. However, the built-in navigators require using React Native for Web to work on the web.

Pre-requisites

While Web support works out of the box, there are some things to configure to ensure a good experience on the web:

1. Configure linking

   Configuring linking allows React Navigation to integrate with the browser's URL bar, using the same configuration as for deep linking in React Native. This is crucial for web apps to have proper URLs for each screen.

   Automatic links are already enabled by default when using Static configuration. So if you're using static configuration, you don't need to do anything to enable linking.

2. Use Button or Link components

   You may be familiar with using navigation.navigate to navigate between screens. But it's important to avoid using it when supporting the web. Instead, use the Link or Button components (or your own with useLinkProps) to navigate between screens.

   This ensures that an anchor tag is rendered which provides the expected behavior on the web.

3. Server rendering

   Currently, React Navigation works best with fully client-side rendered apps.

   Limited server-side rendering support is available. So you can optionally choose to server render your app - however it requires using React's server rendering APIs on your server directly, so it's not straightforward.

4. Adapt to web-specific behavior

   Depending on your app's requirements and design, you may also want to tweak some of the navigators' behavior on the web. For example:

   • Change backBehavior to fullHistory for tabs and drawer on the web to always push a new entry to the browser history.
   • Use sidebars on larger screens instead of bottom tabs - while not specific to web, responsive design much more important on the web.

note

In React Navigation 4, it was necessary to install a separate package called @react-navigation/web to use web integration. This package is no longer needed in recent versions of React Navigation. If you have it installed, make sure to uninstall it to avoid conflicts.

Lazy loading screens

By default, screen components are bundled in the main bundle. This can lead to a large bundle size if you have many screens. It's important to keep the bundle size small on the web for faster loading times.

To reduce the bundle size, you can use dynamic import() with React.lazy to lazy load screens:

Static

import { Suspense, lazy } from 'react';

const MyStack = createNativeStackNavigator({
  screenLayout: ({ children }) => (
    <Suspense fallback={<Loading />}>{children}</Suspense>
  ),
  screens: {
    Home: {
      component: lazy(() => import('./HomeScreen')),
    },
    Profile: {
      component: lazy(() => import('./ProfileScreen')),
    },
  },
});

Dynamic

import { Suspense, lazy } from 'react';

const HomeScreen = lazy(() => import('./HomeScreen'));
const ProfileScreen = lazy(() => import('./ProfileScreen'));

function MyStack() {
  return (
    <Stack.Navigator
      screenLayout={({ children }) =>