FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade

Creating Live React Native Web Demos

Written by 
Cody Pearce
,
Mid-Level Software Engineer
Creating Live React Native Web Demos
blog post background
Outsourcing Delivery Models
Nearshore Software Development Basics: Development Teams in Latin America
Nearshore Plus: An Innovative Approach to Nearshore Software Development

Live demos allow developers to preview components without requiring them to go through the manual process of downloading, installing, and displaying each component individually.

While Snack.expo.io is a great service that can render react-native on the web, it can be frustratingly slow and unreliable. Instead, we can render react-native components with react-native-web, and use react-live to allow live editing. React-live loads faster, is more reliable, and allows much more control over both the editor and the component preview.

Set Up React Native Web

To start, clone this simple react-native-web template:
https://github.com/codypearce/react-native-web-simple

-- CODE keep-markup --
git clone git@github.com:codypearce/react-native-web-simple.git
cd react-native-web-simple
npm i
npm start

The app should be running on port 8080. If there are no errors, “Hello World” will be displayed on the page.

Note: The key to running react-native on the web is found in the webpack.config.js file. The code below tells webpack to replace all instances of react-native with react-native-web components.

-- CODE language-jsx keep-markup --
...
**resolve: {  
    /* auto resolves any react-native import as react-native-web */  
    alias: {    
        "react-native": "react-native-web"  
    },  
    extensions: [".web.js", ".js"]
},**
...

You should now be able to add react-native components to App.js. However, not all react-native components are supported yet. All supported components are listed here: https://github.com/necolas/react-native-web.

Create a component to demo

We'll need a component to display in our live demo, so let's recreate this image of Toad using React Native.

We can recreate Toad using only <view></view> components. So first, we need to import <view></view> at the top of App.js.

-- CODE language-jsx keep-markup --
import { View } from ‘react-native’

Next, replace <text>Hello World</text> in the App.js render method with the JSX below:

-- CODE language-jsx keep-markup --
<view style="{styles.body}"></view>
        <view style="{styles.Toad}"></view>
            <view style="{styles.Toad__head}"></view>
                <view style="{[styles.Toad__spot," styles.toad__spot__left]}=""></view>
                <view style="{[styles.Toad__spot," styles.toad__spot__top]}=""></view>
                <view style="{[styles.Toad__spot," styles.toad__spot__right]}=""></view>
            

            <view style="{styles.Toad__face}"></view>
                <view style="{styles.Toad__faceFeatures}"></view>
                    <view style="{[styles.Toad__eye," styles.toad__eye__left]}=""></view>
                    <view style="{[styles.Toad__eye," styles.toad__eye__right]}=""></view>
                    <view style="{[styles.Toad__mouth]}"></view>
                        <view style="{styles.Toad__tongue}"></view>
                    
                 
            
       

React Native requires all styles to be created using StyleSheet, so we need to import the StyleSheet component from react-native.

-- CODE language-jsx keep-markup --
import { View, Stylesheet } from ‘react-native’

Add the following styles to the bottom of the page.

-- CODE language-jsx keep-markup --
/* Functions Mode looks like: */
const styles = StyleSheet.create({  
    body: {    
        height: "400px",    
        display: "flex",    
        alignItems: "center",    
        justifyContent: "center",    
        overflow: "hidden"  
    },  
    Toad: {    
        position: "relative"  
    },  
    Toad__head: {    
        width: "300px",    
        height: "275px",    
        backgroundColor: "white",    
        borderWidth: 4,    
        borderColor: "black",    
        borderBottomLeftRadius: 175,    
        borderBottomRightRadius: 175,    
        borderTopRightRadius: 250,    
        borderTopLeftRadius: 250,    
        position: "relative",    
        overflow: "hidden"  },  
    Toad__spot: {    
        height: "125px",    
        width: "125px",    
        backgroundColor: "#c4292b",    
        borderRadius: "100%",    
        position: "absolute"  },  
    Toad__spot__left: {    
        height: "140px",    
        left: "-50px",    
        top: "80px"  
       },  
    Toad__spot__top: {    
         left: "88px",    
         top: "0px"  },  
    Toad__spot__right: {    
         height: "140px",    
         right: "-50px",    
         top: "80px"  },  
    Toad__forehead: {    
         height: "4px",  
         width: "135px",    
         backgroundColor: "black",    
         position: "absolute",    
         left: "87px",    
         bottom: "110px",    
         zIndex: "10",    
         borderRadius: "100%"  
        },
    Toad__face: {    
        height: "160px",    
        width: "150px",    
        backgroundColor: "#f0caa5",    
        position: "absolute",    
        left: "75px",    
        bottom: "-50px",    
        borderBottomLeftRadius: 80,    
        borderBottomRightRadius: 80,    
        borderTopRightRadius: 60,  
        borderTopLeftRadius: 60,    
        borderWidth: 4,    
        borderColor: "black"  },  
   Toad__faceFeatures: {    
        width: "100%",    
        height: "100%",    
        position: "relative",    
        borderBottomLeftRadius: 80,    
        borderBottomRightRadius: 80,    
        borderTopRightRadius: 40,    
        borderTopLeftRadius: 40  },  
   Toad__eye: {    
        height: "35px",    
        width: "15px",    
        backgroundColor: "#222",    
        position: "absolute",    
        borderRadius: "100%",    top: "35px"  },  
    Toad__eye__left: {    
        left: "30%"  },  
    Toad__eye__right: {    
        left: "60%"  },  
    Toad__mouth: {    
        height: "40px",    
        width: "60px",    
        backgroundColor: "#9f4148",    
        borderBottomLeftRadius: 30,    
        borderBottomRightRadius: 30,    
        borderTopRightRadius: 4,    
        borderTopLeftRadius: 4,    
        position: "absolute",  
       left: "calc(75px - 32px)",    
        top: "95px",    
        overflow: "hidden"  },  
    Toad__tongue: {    
        height: "30px",    
        width: "60px",    
        backgroundColor: "#d26b74",    
        borderRadius: "100px",    
        marginTop: "20px"  
    }
});

Now, you should see Toad recreated with <view>.</view>

Implementing React-live

First install:

-- CODE  keep-markup --
npm install react-live

Then import all the available components in App.js:

-- CODE language-jsx keep-markup --
import {  
    LiveProvider,  
    LiveEditor,  
    LiveError,  
    LivePreview
} from 'react-live'

Next, comment out the Toad code and add the following to the render method below the commented out Toad code:

-- CODE language-jsx keep-markup --
<liveprovider code="<strong>This is a live Component</strong>"></liveprovider>
    <livepreview></livepreview>
    <liveeditor></liveeditor>
    <liveerror></liveerror>

You should see the bolded "This is a live Component" text with the JSX below it. If you edit the JSX, the text or component will update in real time. The <liveprovider></liveprovider> simply takes a string of JSX in the code prop and renders that JSX in the <livepreview> </livepreview>component.
The <liveeditor> </liveeditor>component displays the string of JSX as JSX.
Finally, the <liveerror></liveerror> component will show any errors that occurred.

Render Toad Live

Uncomment the Toad code from above, copy it, and create a string at the top of the page with the full Toad code. Add the Toad styles above the JSX:

-- CODE language-jsx keep-markup --
const toad =`  
    const styles = StyleSheet.create({    
        /* full style object */
    })
<view style="{styles.body}"></view>
    <view style="{styles.Toad}"></view>
        <view style="{styles.Toad__head}"></view>
            <view style="{[styles.Toad__spot," styles.toad__spot__left]}=""></view>
            <view style="{[styles.Toad__spot," styles.toad__spot__top]}=""></view>
            <view style="{[styles.Toad__spot," styles.toad__spot__right]}=""></view>
        
    <view style="{styles.Toad__face}"></view>
        <view style="{styles.Toad__faceFeatures}"></view>
        <view style="{[styles.Toad__eye," styles.toad__eye__left]}=""></view>
        <view style="{[styles.Toad__eye," styles.toad__eye__right]}=""></view>
        <view style="{[styles.Toad__mouth]}"></view>
            <view style="{styles.Toad__tongue}"></view>
        
    
  

Now update the <liveprovider></liveprovider> with the toad JSX string.

-- CODE language-jsx keep-markup --
<liveprovider code="{toad}"></liveprovider>
    <livepreview></livepreview>
    <liveeditor></liveeditor>
    <liveerror></liveerror>

There should be a syntax error shown at the bottom of the page within the <liveerror></liveerror> component because react-live is trying to evaluate the JSX inline and running into a style object. To fix this, first add the noInline prop to the <liveprovider></liveprovider>:

-- CODE language-jsx keep-markup --
<liveprovider code="{toad}" noinline=""></liveprovider>
    <livepreview></livepreview>
    <liveeditor></liveeditor>
    <liveerror></liveerror>

Then wrap the Toad JSX in a render() within the string:

-- CODE language-jsx keep-markup --
const toad = `
  const styles = StyleSheet.create({
     // full style object
   })
render(
    <view style="{styles.body}"></view>
        <view style="{styles.Toad}"></view>
            <view style="{styles.Toad__head}"></view>
            <view style="{[styles.Toad__spot," styles.toad__spot__left]}=""></view>
            <view style="{[styles.Toad__spot," styles.toad__spot__top]}=""></view>
            <view style="{[styles.Toad__spot," styles.toad__spot__right]}=""></view>
        

     <view style="{styles.Toad__face}"></view>
            <view style="{styles.Toad__faceFeatures}"></view>
                <view style="{[styles.Toad__eye," styles.toad__eye__left]}=""></view>
                <view style="{[styles.Toad__eye," styles.toad__eye__right]}=""></view>
                <view style="{[styles.Toad__mouth]}"></view>
                    <view style="{styles.Toad__tongue}"></view>
                 
            
    
    
  );
`;

Scrolling to the bottom of the page again you will see another error “ReferenceError: View is not defined”. By default, react-live does not have references to react-native components, so we need to provide react-live with a reference to both <view> and StyleSheet to render properly. We can do this with the scope prop which allows the code passed into the code prop access variables and components.</view>

Update <liveprovider></liveprovider> as follows:

-- CODE language-jsx keep-markup --
<liveprovider code="{toad}" noinline="" scope="{{" view,="" stylesheet="" }}=""></liveprovider>
    <livepreview></livepreview>
    <liveeditor></liveeditor>
    <liveerror></liveerror>

You should see Toad nested inside the <livepreview> and all the Toad JSX and styles below. Since this is a live component, you can change the styles or JSX see them update in real time. Try changing Toad's colors or head size, and watch the image update in real time. Check out the react-live docs to learn how to customize the LiveEditor and LivePreview </livepreview>https://github.com/FormidableLabs/react-live.

---

At FullStack Labs, we pride ourselves on our ability to push the capabilities of cutting-edge frameworks like React Native. Interested in learning more about using React Native on the web? Contact us.

Cody Pearce
Written by
Cody Pearce
Cody Pearce

As a Software Engineer at FullStack Labs I get the opportunity to work on a variety of projects using cutting-edge technologies. Most recently I've been focused on web development using React.js and mobile development using React Native. Prior to FullStack I was a front end developer at TechMonster. I hold a BA, with a double major in Philosophy and Physics from Ohio Wesleyan University.

FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project. Contact us below for a free consultation with our CEO.
Projects start at $50,000.

company name
name
email
phone
Type of project
Reason for contact
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.