React Native for Web

React Native components and APIs for the Web.

Quick start

To install in your app:

npm install --save react@0.14 react-dom@0.14 react-native-web

Or try it on CodePen.

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

Overview

This is a web implementation of React Native components and APIs. The React Native components are good web application building blocks, and provide a common foundation for component libraries.

For example, the View component makes it easy to build common layouts with flexbox, such as stacked and nested boxes with margin and padding. And the StyleSheet API converts styles defined in JavaScript to "atomic" CSS.

Example

More examples can be found in the examples directory.

import React, { 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>
)

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

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

Documentation

Guides:

• Accessibility
• Client and server rendering
• Direct manipulation
• Known issues
• React Native
• Style

Exported modules:

• Components
  • ActivityIndicator
  • Image
  • ListView
  • Portal
  • ScrollView
  • Text
  • TextInput
  • TouchableHighlight
  • TouchableOpacity
  • TouchableWithoutFeedback
  • View
• APIs
  • AppRegistry
  • AppState
  • AsyncStorage
  • Dimensions
  • NativeMethods
  • NetInfo
  • PixelRatio
  • Platform
  • StyleSheet

License

React Native for Web is BSD licensed.