77f72aa129
This fixes several issues with 'StyleSheet' and simplifies the implementation. 1. The generated style sheet could render after an apps existing style sheets, potentially overwriting certain 'html' and 'body' styles. To fix this, the style sheet is now rendered first in the document head. 2. 'StyleSheet' didn't make it easy to render app shells on the server. The prerendered style sheet would contain classnames that didn't apply to the client-generated style sheet (in part because the class names were not generated as a hash of the declaration). When the client initialized, server-rendered parts of the page could become unstyled. To fix this 'StyleSheet' uses inline styles by default and a few predefined CSS rules where inline styles are not possible. 3. Even with the strategy of mapping declarations to unique CSS rules, very large apps can produce very large style sheets. For example, twitter.com would produce a gzipped style sheet ~30 KB. Issues related to this are also alleviated by using inline styles. 4. 'StyleSheet' didn't really work unless you rendered an app using 'AppRegistry'. To fix this, 'StyleSheet' now handles injection of the DOM style sheet. Using inline styles doesn't appear to have any serious performance problems compared to using single classes (ref #110). Fix #90 Fix #106
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 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
ActivityIndicatorImageListViewScrollViewTextTextInputTouchableHighlight(mirrors React Native)TouchableOpacity(mirrors React Native)TouchableWithoutFeedbackView
- APIs
Animated(mirrors React Native)AppRegistryAppStateAsyncStorageDimensionsNativeMethodsNetInfoPanResponder(mirrors React Native)PixelRatioPlatformStyleSheet
License
React Native for Web is BSD licensed.