An Introduction to React Native Web

Three years ago, I was a native Android developer who used Java language to develop mobile apps. Later, I switched to react native because developing apps for both android and ios with a single code base is possible with it. Now, react native is not limited to just mobile apps, you can even create web apps using it.

React Native Web is a popular library that helps to run react native components and APIs on the web browser. In simple words, it can help you to use the same code for android, ios and web. Let’s check how to use react native web with a simple example.

First of all, create a new react project on your PC.

npx create-react-app reactnative-webapp

Navigate to the project folder and run the following library to install react native web library.

npm install react-native-web

Test everything okay by running the project.

npm start

Your browser will open the link http://localhost:3000/and you can see a web page as given in the screenshot.

Now, open App.js file and edit to create a basic Hello World react native web app. Just use the same code you write for a react native app.

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';



export default class App extends Component {

  render() {
   return (
    <View style={styles.container}>
    <Text style={styles.text}>Hello world</Text>
    </View>
      );
    } 
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 10,
  },
  text: {
    fontSize: 30
  },
});

Save and you will see the output as given below.

As you see, it’s pretty the same as writing react native app. You can go through supported APIs and components here.

This is just an introduction to react native web. I will be posting more about react native web in the coming days.