react-native-web-buffer
v0.0.21
Published
React Native for Web
Downloads
4
Maintainers
Readme
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 provides a foundational layer to support interoperable, zero-configuration React component development. This is missing from React's web ecosystem where OSS components rely on inline styles (usually without vendor prefixes), or require build tool configuration. This project allows components built upon React Native to be run on the Web, and it manages all component styling out-of-the-box.
For example, the View
component makes it easy to build
cross-browser layouts with flexbox, such as stacked and nested boxes with
margin and padding. And the StyleSheet
API converts
styles defined in JavaScript into "Atomic CSS".
Quick start
To install in your app:
npm install --save [email protected] [email protected] react-native-web
Read the Client and Server rendering guide.
Examples
Demos:
Sample:
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>
)
// 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
Portal
ScrollView
Text
TextInput
TouchableHighlight
(mirrors React Native)TouchableOpacity
(mirrors React Native)TouchableWithoutFeedback
View
- APIs
Animated
(mirrors React Native)AppRegistry
AppState
AsyncStorage
Dimensions
NativeMethods
NetInfo
PanResponder
(mirrors React Native)PixelRatio
Platform
StyleSheet
License
React Native for Web is BSD licensed.