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
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

Creating Live React Native Web Demos

Written by 
Cody Pearce
,
Senior Software Engineer
Creating Live React Native Web Demos
blog post background
Recent Posts
Getting Started with Single Sign-On
Choosing the Right State Management Tool for Your React Apps
Accessibility in Focus: The Intersection of Screen Readers, Keyboards, and QA Testing

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

Table of contents

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.

People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.