Note: starting in v3, React Navigation has built-in support for use in web sites, including server rendering. This has not yet been widely used in production and we consider this feature to be experimental.
"React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM.
This approach allows you to reuse most of React Navigation on the web because React Native for Web maps React Native primitives like
Text, and others to their equivalents on the web.
The easiest way to get started with this approach is to use to use the Expo CLI web support beta. More information on how to set this up in other projects will follow in the future, help on documenting it is also welcome!
With standard web tools
This approach requires that you rebuild the navigation views for your app (at least until the community builds out an alternative), but allows you to leverage routers and simple navigators that don't require views, like the switch navigator.
To set up a navigator in a React app, (such as one created with create-react-app):
We ship a utility out of the box which automatically sets up an
<a> tag for you with the correct
This is necessary to properly support server rendering, critical for accessibility, and nice to provide a good user experience when the browser displays what URL the link will go to.
When the app is running, the default browser behavior will be blocked and a navigation action will be dispatched instead.
To render a link to the "Profile" route:
Depending on the
path that is set up for the
Profile route, the above link may render to html as
<a href="/people/jamie">Jamie's Profile</a>
You can alternatively provide an
action prop to the
Link, to specify the exact navigation action that will be used to handle this link.
You can use the
handleServerRequest function to get the top-level navigation prop for your app, as well as the current title for this route.
For a full example, see a full server+client React web app here
Custom navigators for the web
The built-in navigator components such as Stack are often not well suited for web sites, so you may want to create custom navigators yourself.
Your view can use
props.descriptors to see the current set of screens, get their navigation object, and see the current navigation options. You should use
SceneView to present your child screen components.
See "Custom Navigators" for more details.
For an example of this, see how the custom
AppView are used from
App.js in the web server example.