React Native Elements just like on mobile can be used in your web projects. This is possible using react-native-web. We'll highlight how to set this up using create-react-app.
Why do I have to set this up?
On the web, you can usually use UI libraries directly from npm without any additional setup. However in react-native, it's a bit different.
Create React App
Create React App is a very popular framework for building react applications. Unfortunately it doesn't allow much customization of the build setup. To accomplish this we'll be making use of react-app-rewired and customize-cra.
After creating a new create-react-app project, run the following commands.
Secondly, create a
config-overrides.js file in the root of your project.
Also you should keep in mind that not all of React Native components are implemented for web-platform out-of-box.
Modal component is not yet implemented in
react-native-web. Therefore, to use some of our components
you may need to install additional third-party libraries that implement the missing functionality.
Modal implementation is required.
Lastly, change your scripts in
package.json to use react-app-rewired:
At this point your app can start. However trying to use any components that use icons, will not show them. In your App.js, load these fonts as you would on the web with a style tag.
The full setup of the guide can be found at https://github.com/react-native-elements/create-react-app-example.