wkh237 / react-native-web

React Native for Web

React Native for Web

"React Native for Web" brings React Native's building blocks and touch handling to the Web.

• UI Explorer and documentation.
• React Native for Web: Playground using create-react-app.

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

Then read the Getting Started guide.

Documentation

The UI Explorer interactively documents all the supported 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.