React Native components and APIs for the Web. Flexbox layout and JavaScript styling.
You can try the latest version on CodePen.
To install in your app:
npm install --save react@0.14 react-dom@0.14 react-native-web
All API's, components, and a Web-specific React are provided by the
react-native-web module:
import React, { Image, StyleSheet, Text, View } from 'react-native-web'Client-side rendering requires that you use the module's React export.
React.render is a thin wrapper around ReactDOM.render that renders your
application and the style sheet. Styles are updated if new bundles are loaded
asynchronously.
// client.js
import App from './components/App'
import React from 'react-native-web'
React.render(<App />, document.getElementById('react-root'))Server-side rendering is done by calling React.renderToString or
React.renderToStaticMarkup, the output of both includes the style sheet.
// server.js
import App from './components/App'
import React from 'react-native-web'
const html = React.renderToString(<App />);
const Html = () => (
<html>
<head>
<meta charSet="utf-8" />
<meta content="initial-scale=1,width=device-width" name="viewport" />
</head>
<body>
<div id="react-root" dangerouslySetInnerHTML={{ __html: html }} />
</body>
</html>
)React Native for Web allows you to define styles using
JavaScript, either with inline styles or
StyleSheet.create.
The View component makes it easy to build common layouts with flexbox, such
as stacked and nested boxes with margin and padding. See this guide to
flexbox.
The most common and best supported accessibility
features of the Web are leveraged through 4
props available on most components: accessible, accessibilityLabel,
accessibilityLiveRegion, and accessibilityRole.
More examples can be found in the examples directory.
import React, { Image, StyleSheet, Text, View } from 'react-native-web'
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 styles = StyleSheet.create({
card: {
flexGrow: 1,
justifyContent: 'center'
},
title: {
fontSize: '1.25rem',
fontWeight: 'bold'
},
image: {
height: 40,
marginRight: 10,
width: 40
}
})StyleSheet is a style abstraction that transforms inline styles to CSS on the client or the server. It provides a minimal CSS reset targeting elements and pseudo-elements beyond the reach of React inline styles.
An accessibile image component with support for image resizing, default image, and child content.
(TODO)
A scrollable view with event throttling.
Displays text inline and supports basic press handling.
Accessible single- and multi-line text input via a keyboard.
Touch bindings for press and long press.
The fundamental UI building block using flexbox for layout.
Please read the contribution guidelines. Contributions are welcome!
Thanks to current and past members of the React and React Native teams (in particular Vjeux and Pete Hunt).
Thanks to react-tappable for
backing the current implementation of Touchable.
Copyright (c) 2015 Nicolas Gallagher. Released under the MIT license.