Nicolas Gallagher
924dc36d4a
**Problem** StyleSheet's implementation was overly complex. It required `flattenStyle` to use `expandStyle`, and couldn't support mapping React Native style props to CSS properties without also exposing those CSS properties in the API. **Response** - `flattenStyle` is concerned only with flattening style objects. - `StyleSheetRegistry` is responsible for registering styles, mapping the React Native style prop to DOM props, and generating the CSS for the backing style element. - `StyleSheetRegistry` uses a simpler approach to caching styles and generating style sheet strings. It also drops the unobfuscated class names from development mode, as the React Dev Tools can provide a better debugging experience (pending a fix to allow props/styles to be changed from the dev tools). - `StyleSheet` will fall back to inline styles if it doesn't think a style sheet has been rendered into the document. The relationship is currently only implicit. This should be revisited. - `StyleSheet` exports `renderToString` as part of the documented API. - Fix processing of `transformMatrix` and add tests for `processTransform`. - Fix `input[type=search]` rendering in Safari by using `display:none` on its pseudo-elements. - Add support for `textDecorationLine` and `textAlignVertical`. - Note the `View` hack to conditionally apply the `flex-shrink:0` reset from css-layout. This is required because React Native's approach to resolving `style` is to give precendence to long-hand styles (e.g., `flexShrink`) over short-hand styles (e.g., `flex`). This means the `View` reset overrides any `flex:1` declaration. To get around this, `flexShrink` is only set in `View` if `flex` is not set.
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@0.14 react-dom@0.14 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
ActivityIndicatorImageListViewPortalScrollViewTextTextInputTouchableHighlight(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.