“React Native for Web” makes it possible to run React Native components and APIs on the web using React DOM.
It is as simple as that!!
So, if you have an app and you want to build a web version of it, or if you are planning to build a website along with an app, you should definitely learn React native web.
Setting up navigation in react–native–web is challenging as the navigation system works quite differently in apps vs browser.
In this article, we’ll set up the most popular react-navigation on to react-native-web.
Using React navigation in react native web
React navigation is the most famous library for navigation in react–native. In this section, we’ll try to integrate react-navigation in react–native–web.
Prerequisite
For this setup, we’ll be using expo as the platform on which we’ll be building our react–native app, which will run on android, ios, and the web.
Make sure you have expo-cli installed already.
To set up your codebase using expo, check this GitHub link [master branch]. Simply clone the branch and do run expo start
If you are looking for a quick code, then you can check this GitHub link [NOTE: the branch is react–navigation–setup and not master.]
Installation
Run the following command to install react–navigation along with other needed packages including react–navigation–stack.
Navigation in React native web
Two ecosystems for one platform
Using React Native for creating web apps isn’t simple, and not just because of the restrictions we need to fit it — it’s like native and web are still two separate worlds. Even if it’s already possible to use one codebase and run it everywhere, that code is full of conditions that can be run in one environment but not in another.
The same could be said of the libraries we can use to develop a react-native-web app.
Thanks for reading this
Top comments (0)