React Native for Web
React Native components and APIs for the Web. Flexbox layout and JavaScript styling.
Table of contents
Quick start
You can try the latest version on CodePen.
To install in your app:
npm install --save [email protected] [email protected] react-native-web
Overview
Importing
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
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
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>
)Styling
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.
Accessibility
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.
Example
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
}
})APIs
StyleSheet
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.
Components
Image
An accessibile image component with support for image resizing, default image, and child content.
ListView
(TODO)
ScrollView
A scrollable view with event throttling.
Text
Displays text inline and supports basic press handling.
TextInput
Accessible single- and multi-line text input via a keyboard.
Touchable
Touch bindings for press and long press.
View
The fundamental UI building block using flexbox for layout.
Contributing
Please read the contribution guidelines. Contributions are welcome!
Thanks
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.
License
Copyright (c) 2015 Nicolas Gallagher. Released under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent