React Native for Web

React Native components and APIs for the Web.

Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.

Overview

"React Native for Web" is a project to bring React Native's building blocks and touch handling to the Web.

Browse the UI Explorer to see React Native examples running on Web. Or remix the React Native for Web: Playground on Glitch.

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 react@15.6 react-dom@15.6 react-native-web

Then read the Getting Started guide.

Documentation

The UI Explorer interactively documents all the APIs and Components.

Guides:

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

Starter kits

• create-react-app (on Glitch)
• 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.