3fd29697c0
Using `inline-block` breaks text overflow truncation in nested `Text` components. Fix gh-19
React Native for Web
React Native components and APIs for the Web. ~17.7 KB minified and gzipped.
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.
Components
Image
An accessibile image component with support for image resizing, default image, and child content.
ListView
(TODO)
ScrollView
(TODO)
Text
Displays text as an inline block 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.
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.
Styling components can be achieved with inline styles or the use of StyleSheet.
Accessibility
Major accessibility features are available through the following props:
accessible, accessibilityLabel, accessibilityLiveRegion, and
accessibilityRole. The accessibilityRole prop is used to determine the
rendered DOM element. For example:
<View accessibilityRole='banner' />=><header role='banner' />.<View accessibilityRole='button' />=><button type='button' role='button' />.<Text accessibilityRole='link' href='/' />=><a role='link' href='/' />.
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.