ReactNativeWeb
Why React Native Web?
One of the difficult decisions while designing a new application development is its target platform. A mobile app gives you more control and better performance but isn’t as universal as the web. If you’re designing a mobile app, can you afford to support both iOS and Android? What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work on all platforms with minimum time and cost.
We already know how React Native can help you make iOS and Android apps with a shared codebase, without sacrifices in quality. But what about the web? This is exactly the problem the React Native for Web project is trying to solve. Instead of forcing you to maintain two separate code bases for your mobile and web apps.
So, let’s start
React Native Web uses its Web CLI as the main starting point when it comes to development.
React Native Web CLI
A simple CLI tool to start your React Native Web project to develop the same app for iOS, Android, and Web.
Installation
In the CLI, please do execute the following commands to create a sample React Native Web application.
Prerequisites:
To work with iOS and Android, it is recommended to install Xcode and Android Studio (Not required, but it is easy when you are working with production level or large scale project).
iOS Troubleshooting
After setting up above, the web and the android applications work fine, but for iOS, you may need to do some configurations.
While building the Xcode project, you might get the following error,
1. configure: error: in node_modules/react-native/third-party/glog-0.3.4' configure: error: C compiler cannot create executables
below steps can resolve this error,
- under repo: cd node_modules/react-native/third-party/glog-0.3.4
- ../../scripts/ios-configure-glog.sh
At the run time get following error,
2. unknown argument type ‘__attribute__’ in method
modify this file [project_folder]/node_modules/react-native/React/Base/RCTModuleMethod.mm
after this line
return RCTReadString(input, “__attribute__((unused))”) ||
add
RCTReadString(input, “__attribute__((__unused__))”) ||
Once all above configurations completed, if all ok, you may see following screens for the respective platforms (See Figure 2)
Dependencies
Let’s start discussing necessary packages for react-native-web.
At this point, your package.json looks like following,
- react-scripts: contains the scripts used in create-react-app.
- react-dom: allows react-code to be rendered into an HTML page
- react-native-web: the main source of magic in this app. This library will convert our react-native components into web elements.
- react-art: a peer dependency for react-native-web
React Native Web is not supposed to be a way of moving all of your app’s code to the web. Usually, you want (and need) to have a different user experience when it comes to a web application. That is why you may need options for differentiating between the platforms android, iOS, and web. For that, you can use Platformspecific code:
Another option is the separation via file ending. You could create a component with different code specific for each platform and still import it via import TestComponent from './TestComponent'
TestComponent.android.jsfor androidTestComponent.ios.jsfor iOSTestComponent.web.jsfor web- or just any of those as a fallback, so that you have two files (one for web, another for mobile)
Ex: TestComponent.web.js TestComponent.js
React Native Web Navigation
Setting up navigation in react–native–web is challenging as the navigation system works quite differently in apps vs browser.
Navigation — Installation
Open your terminal, navigate to the project folder, and then run the following command:
npm install react-router-native react-router-dom
- react-router-native: routing library for React Native
- react-router-dom: routing library for React on the web
At this point, your package.json looks like following,
Create a few screens
Now, let’s set up a few screens to test our navigation flow:
- First screen
- Second screen
The above is the code for First screen, which is a simple text, and a button. The button when clicked should go directly to the Second screen.
The Second screen is the same as the First screen. Both the screens have a button which takes to the other screen.
Let’s also create react-router-native navigation to connect these two screens together in iOS and Android.
And also create react-router-dom navigation to connect these two screens together on the web.
The First screen is the default screen of this navigation.
Now, in the App.js file, simply render the Route Navigation.
Just run the app, the following screen comes up on display, if everything goes well.
When you click on the Go to Second screen button, it should take you to the second screen.
In the web navigation, it is extremely important to have the change in page reflecting in the URL as well. In the app, there is no way a user can directly jump to a screen other than the default screen, but in the browser it is possible, a user can enter a URL.
In the browser, Go to Second screen button click should change the URL to http://localhost:3000/second
Conclusion
React native web is one awesome library, which is used to run an application on phones or browsers just using a single codebase. React Native for Web make all the possibility to run it’s components and APIs on the web by using React DOM.
The code between Android, iOS, and Web could be mostly shared. Especially libraries like Redux or React Router could be 100% reused. A downside however is that configuring the projects can be very complicated.
References:
- React Native Web Git Hub URL: https://github.com/necolas/react-native-web
