React Native for Web
React Native components and APIs for the Web.
Table of contents
Install
npm install --save react react-dom react-native-web
Example
React Native for Web exports its components and a reference to the React
installation. Styles are defined with, and used as JavaScript objects.
Component:
import React, { Image, StyleSheet, Text, View } from 'react-native-web'
const Title = ({ children }) => <Text style={styles.title}>{children}</Text>
const Summary = ({ children }) => (
<View style={styles.text}>
<Text style={styles.subtitle}>{children}</Text>
</View>
)
class App extends React.Component {
render() {
return (
<View style={styles.row}>
<Image
source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
style={styles.image}
/>
<Title>React Native Web</Title>
<Summary>Build high quality web apps using React</Summary>
</View>
)
},
})
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
margin: 40
},
image: {
height: 40,
marginRight: 10,
width: 40,
},
text: {
flex: 1,
justifyContent: 'center'
},
title: {
fontSize: '1.25rem',
fontWeight: 'bold'
},
subtitle: {
fontSize: '1rem'
}
})
Pre-render styles on the server:
// server.js
import App from './components/App'
import React, { StyleSheet } from 'react-native-web'
const html = React.renderToString(<App />);
const css = StyleSheet.renderToString();
const Html = () => (
<html>
<head>
<meta charSet="utf-8" />
<meta content="initial-scale=1,width=device-width" name="viewport" />
<style id="react-stylesheet" dangerouslySetInnerHTML={{ __html: css } />
</head>
<body>
<div id="react-root" dangerouslySetInnerHTML={{ __html: html }} />
</body>
</html>
)
Render styles on the client:
// client.js
import App from './components/App'
import React, { StyleSheet } from 'react-native-web'
import ReactDOM from 'react-dom'
const reactRoot = document.getElementById('react-root')
const reactStyleSheet = document.getElementById('react-stylesheet')
ReactDOM.render(<App />, reactRoot)
reactStyleSheet.textContent = StyleSheet.renderToString()
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.
Styling
React Native for Web relies on styles being defined in JavaScript. Styling components can be achieved with inline styles or the use of StyleSheet.
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.
Media Queries, pseudo-classes, and pseudo-elements
Changing styles and/or the render tree in response to device adaptation can be controlled in JavaScript, e.g., react-media-queries, media-query-fascade, or react-responsive. This has the benefit of co-locating breakpoint-specific DOM and style changes.
Pseudo-classes like :hover and :focus can be implemented with the onHover
and onFocus events.
Pseudo-elements are not supported.
Accessibility
On the Web, assistive technologies derive useful information about the structure, purpose, and interactivity of apps from their HTML elements, attributes, and ARIA in HTML.
The most common and best supported accessibility features of the Web are
exposed as the props: accessible, accessibilityLabel,
accessibilityLiveRegion, and accessibilityRole.
React Native for Web does not provide a way to directly control the rendered
HTML element. The accessibilityRole prop is used to infer an analogous HTML
element to use in addition, where possible. While this may
contradict some ARIA recommendations, it also helps avoid certain HTML5
conformance errors and accessibility anti-patterns (e.g., giving a heading
role to a button element).
For example:
<View accessibilityRole='article' />=><article role='article' />.<View accessibilityRole='banner' />=><header role='banner' />.<View accessibilityRole='button' />=><button type='button' role='button' />.<Text accessibilityRole='link' href='/' />=><a role='link' href='/' />.<View accessibilityRole='main' />=><main role='main' />.
See the component documentation for more details.
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.