React Native components and APIs for the Web.
Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
To install in your app:
npm install --save [email protected] [email protected] react-native-web
Read the Client and Server rendering guide.
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.
Demos:
Example:
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
}
})
Guides:
Exported modules:
- Components
- APIs
Animated
(mirrors React Native)AppRegistry
AppState
AsyncStorage
Dimensions
NativeMethods
NetInfo
PanResponder
(mirrors React Native)PixelRatio
Platform
StyleSheet
React Native for Web is BSD licensed.