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:
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:
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.