p-react-native-web
v0.2.2
Published
Preact/React Native for Web
Downloads
2
Maintainers
Readme
P/React Native for Web
Different from the react-native-web
- Remove the ResponderEventPlugin
- Use JSS for stylesheet manager
- Support media query
- Suppoer pseudo style: (:hover etc)
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.
Browse the UI Explorer to see React Native examples running on Web. Or try it out online with React Native for Web: Playground.
Quick start
To install in your app:
npm install --save [email protected] [email protected] react-native-web
Read the Getting Started guide.
Documentation
Guides:
Exported modules:
- Components
ActivityIndicator
Button
Image
ListView
ProgressBar
ScrollView
Switch
Text
TextInput
TouchableHighlight
(mirrors React Native)TouchableOpacity
(mirrors React Native)TouchableWithoutFeedback
View
- APIs
Animated
(mirrors React Native)AppRegistry
AppState
AsyncStorage
Clipboard
Dimensions
I18nManager
NativeMethods
NetInfo
PanResponder
(mirrors React Native)PixelRatio
Platform
StyleSheet
Vibration
Why?
There are many different teams at Twitter building web applications with React. We want to share React components, libraries, and APIs between teams…much like the OSS community tries to do. At our scale, this involves dealing with multiple, inter-related problems including: component styles, animation, touch interactions, layout adaptation, accessibility, RTL layout, theming, and build- or server-rendering.
This is hard to do with React DOM, as the components are essentially the same low-level building blocks that the browser provides. However, React Native avoids, solves, or can solve almost all these problems. 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.
Example code
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') })
Related projects
License
React Native for Web is BSD licensed.