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.

React Native – unlike React DOM – is a comprehensive UI framework for application developers. React Native's components are higher-level building blocks than those provided by React DOM. React Native also provides platform-agnostic JavaScript APIs for animating and styling components, responding to touch events, and interacting with the host environment.

Bringing the React Native APIs and components to the Web allows React Native components to be run on the Web platform. But it also solves several problems facing the React DOM ecosystem: no framework-level animation or styling solution; difficulty sharing and composing UI components (without pulling in their build or runtime dependencies); and the lack of high-level base components.

Quick start

To install in your app:

npm install --save react react-native-web

Read the Client and Server rendering guide.

You can also bootstrap a standard React Native project structure for web by using react-native-web-starter.

Examples

Demos:

• React Native for Web: Playground.
• TicTacToe
• 2048

Sample:

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') })

Documentation

Guides:

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

Exported modules:

• Components
  • ActivityIndicator
  • Image
  • ListView
  • ScrollView
  • Text
  • TextInput
  • TouchableHighlight (mirrors React Native)
  • TouchableOpacity (mirrors React Native)
  • TouchableWithoutFeedback
  • View
• APIs
  • Animated (mirrors React Native)
  • AppRegistry
  • AppState
  • AsyncStorage
  • Dimensions
  • I18nManager
  • NativeMethods
  • NetInfo
  • PanResponder (mirrors React Native)
  • PixelRatio
  • Platform
  • StyleSheet
  • Vibration

License

React Native for Web is BSD licensed.