React Native components and APIs for the Web.
npm install --save react react-dom react-native-web
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()StyleSheet is a style abstraction that transforms inline styles to CSS on the client or the server. It provides a minimal CSS reset.
An accessibile image component with support for image resizing, default image, and child content.
(TODO)
A scrollable view with event throttling.
Displays text as an inline block 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.
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.
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.
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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent