react-native-web tutorial quickstart

Neil Agarwal — Sat, 10 Aug 2019 19:49:21 +0000

So after not finding an updated or proper getting started guide to react-native-web, I decided to create this.

TLDR

To get things going,

create-react-app my-app
yarn add react-native-web

Now in src/index.web.js (create if doesn't exist)

// index.web.js

import App from './App';
import { AppRegistry } from 'react-native';
import * as serviceWorker from './serviceWorker';

// register the app
AppRegistry.registerComponent('App', () => App);

AppRegistry.runApplication('App', {
    initialProps: {},
    rootTag: document.getElementById('root')
});

serviceWorker.unregister();

Then delete src/App.js and create src/App.js again

// App.js
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

// react-native-web is aliased to react-native automatically by create-react-app

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>
                    Welcome to react-native-web
                </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: "center",
        height: "100vh",
        backgroundColor: "black",
        justifyContent: "center"
    },
    text: {
        fontSize: 40,
        color: "silver"
    }
})

Then just yarn start and you should view that on the browser on localhost:3000

But, what's react-native-web?

According to necolas's github,

React Native for Web makes it possible to run React Native components and APIs on the web using React DOM. Check out the live demo of the React Native examples running on the web.

Write once, render anywhere: interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.

Who is using React Native in production web apps? Twitter, Major League Soccer, Flipkart, Uber, The Times, DataCamp.

DEV Community: Neil Agarwal

react-native-web tutorial quickstart

TLDR

But, what's react-native-web?