React Native for Web

"React Native for Web" brings the platform-agnostic Components and APIs of React Native to the Web.

Browse the interactive documentation or try it out on Glitch.

Features

• Interoperability with ReactDOM components.
• Native-like touch handling.
• Built-in integration with web accessibility APIs.
• Built-in support for LTR and RTL layouts.
• Built-in expressive and reliable subset of CSS.
• Optimized, vendor-prefixed CSS with good runtime performance.
• Server-side rendering of HTML and critical CSS.
• Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.

Quick start

NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6.

Install in your existing app using yarn or npm:

yarn add [email protected] [email protected] react-native-web

Add the react-native-web/babel plugin to your Babel configuration. This will alias react-native to react-native-web and exclude any modules not required by the app.

{
  "plugins": [
    "react-native-web/babel"
  ],
  "presets": [
    "react-native"
  ]
}

See the Getting Started guide for more details.

Documentation

The interactive documentation shows all the supported APIs and Components.

Guides:

• Getting started
• Style
• Accessibility
• Direct manipulation
• Internationalization
• Advanced use
• Known issues

Starter kits

• Glitch
• create-react-app
• react-native-web-starter
• react-native-web-webpack

Example code

import React from 'react'
import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'

// Components
const Card = ({ children }) => <View style={styles.card}>{children}</View>
const Title = ({ children }) => <Text style={styles.title}>{children}</Text>
const Photo = ({ uri }) => <Image source={{ uri }} style={styles.image} />
const App = () => (
  <Card>
    <Title>App Card</Title>
    <Photo uri="/some-photo.jpg" />
  </Card>
)

// Styles
const styles = StyleSheet.create({
  card: {
    flexGrow: 1,
    justifyContent: 'center'
  },
  title: {
    fontSize: '1.25rem',
    fontWeight: 'bold'
  },
  image: {
    height: 40,
    marginVertical: 10,
    width: 40
  }
})

// App registration and rendering
AppRegistry.registerComponent('MyApp', () => App)
AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })

Related projects

• react-primitives
• react-sketchapp
• reactxp
• react-native-web-player

License

React Native for Web is BSD licensed.