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. Read more.

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

• React Native examples running on Web
• React Native for Web: Playground.

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
  • Switch
  • 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

Why?

React Native is a comprehensive JavaScript framework for building application user interfaces. It provides high-level, platform-agnostic components and APIs – e.g., Text, View, Touchable*, Animated, StyleSheet - that simplify working with layout, gestures, animations, and styles. The entire React Native ecosystem can depend on these shared building blocks.

In contrast, the React DOM ecosystem is limited by the lack of a higher-level framework. At Twitter, we want to seamlessly author and share React component libraries between different Web applications (with increasing interest from product teams for multi-platform solutions). This goal draws together multiple, inter-related problems including: styling, animation, gestures, themes, viewport adaptation, accessibility, diverse build processes, and RTL layouts.

Almost all these problems are avoided, solved, or can be solved in React Native. Central to this is React Native's JavaScript style API (not strictly "CSS-in-JS") which avoids the key problems with CSS. By giving up some of the complexity of CSS it also provides a reliable surface for style composition, animation, gestures, server-side rendering, RTL layout; and removes the requirement for CSS-specific build tools.

Bringing the React Native APIs and components to the Web has the added benefit of allowing teams to explore code-sharing between Native and Web platforms.

Related projects

• react-native-web-starter
• react-native-web-player
• react-web
• react-native-for-web

License

React Native for Web is BSD licensed.