IOS

Android

Web

WebView

React

WEBVIEW

SERVER

JS bundle

REACT

YOUR APP

LOCAL

FILE

STORAGE

NATIVE CONTROLLER

LOCAL

FILE

STORAGE

JS bundle

REACT NATIVE

YOUR APP

React + WebView

React Native

PC

Mobile Browser

IOS

Android

IOS

Android

Windows

let style={
    backgroundColor: 
    `rgb(${r},${g},100)`,
    width: 1,
    height: 1,

    display:'inline-block'
};

let style = {
    backgroundColor: 
    `rgb(${r},${g},100)`, 
    width: 1, 
    height: 1
};

React

React-Native

for (let r = 0; r < 255; r = r + 10) {
    green[r] = [];
    for (let g = 0; g < 255; g++) {
        cnt++;
        green[r].push(<div  key={`s${r}-${g}`} 
                      style={...} />)
    }
    red.push(<div  key={`v${r}`}>{green[r]}</div> )
}

React cycle

for (let r = 0; r < 255; r = r + 10) {
    green[r] = [];
    for (let g = 0; g < 255; g++) {
        cnt++;
        green[r].push(<View key={`s${r}-${g}`}
                      style={...} />)
    }
    red.push(<View key={`v${r}`}>{green[r]}</View>)
}

React Native cycle

render() {
    let {R, G, B} = this.state;
    return <View 
        style={{
            height: 500, 
            backgroundColor: `rgb(${R},${G},${B})`
           }}/>;
}

render() {
    let {R, G, B} = this.state;
    return <div 
        style={{
            height: 500, 
            backgroundColor: `rgb(${R},${G},${B})`
           }}/>;
}

React Render

React Native Render

Re-Render

Transitions

Animations

Transitions

Animations

React + WebView

React Native

Custom API

or

Framework

Cordova

Components

window.mobileApi.scanQR();

document.mobileApi.pushNotification(data);

Devices

Render

Animations

Native API

$8 000

$12 000

$38 000 - $70 000

Cost

GPU