react-native-web 0,0,3,8,0,16,7,6 editorconfig eslint travis-ci npm webpack

React Native for Web

2 years after BSD-3-Clause

React Native for Web

Build Status npm version

React Native components and APIs for the Web.

Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.

Overview

"React Native for Web" is a project to bring React Native's building blocks and touch handling to the Web. Read more.

Browse the UI Explorer to see React Native examples running on Web. Or try it out online with React Native for Web: Playground.

Quick start

To install in your app:

npm install --save [email protected] [email protected] react-native-web

Read the Getting Started guide.

Documentation

Guides:

Exported modules:

Why?

There are many different teams at Twitter building web applications with React. We want to share React components, libraries, and APIs between teams…much like the OSS community tries to do. At our scale, this involves dealing with multiple, inter-related problems including: component styles, animation, touch interactions, layout adaptation, accessibility, RTL layout, theming, and build- or server-rendering.

This is hard to do with React DOM, as the components are essentially the same low-level building blocks that the browser provides. However, React Native avoids, solves, or can solve almost all these problems. Central to this is React Native's JavaScript style API (not strictly "CSS-in-JS") which avoids the key problems with CSS by giving up some of the complexity of CSS.

Example code

import React from 'react'
import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'

// Components
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 App = () => (
  <Card>
    <Title>App Card</Title>
    <Photo uri="/some-photo.jpg" />
  </Card>
)

// Styles
const styles = StyleSheet.create({
  card: {
    flexGrow: 1,
    justifyContent: 'center'
  },
  title: {
    fontSize: '1.25rem',
    fontWeight: 'bold'
  },
  image: {
    height: 40,
    marginVertical: 10,
    width: 40
  }
})

// App registration and rendering
AppRegistry.registerComponent('MyApp', () => App)
AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })

Related projects

License

React Native for Web is BSD licensed.

Related Repositories

react-native-web-player

react-native-web-player

Build and run react native apps in your browser! ...

react-native-web-starter

react-native-web-starter

Starter for a React Native for Web project (RN4Web) ...

react-native-web-polyfill

react-native-web-polyfill

A set of classes and react components to make work your react-native app in a br ...

awesome-react-native

awesome-react-native

An "awesome" type curated list of React Native components, news, tools, and lear ...

react-native-web-boilerplate

react-native-web-boilerplate

Unnoficial starter kit for react native web + redux + hot reload ...


Top Contributors

necolas IjzerenHein MonirAbuHilal spicyj cesarandreu Dremora apalm nthtran wyze PaulLeCam phuu vitorbal rofrischmann

Dependencies

package version
animated ^0.2.0
array-find-index ^1.0.2
babel-runtime ^6.23.0
create-react-class ^15.6.0
debounce 1.0.2
deep-assign ^2.0.0
fbjs ^0.8.12
hyphenate-style-name ^1.0.2
inline-style-prefixer ^3.0.6
normalize-css-color ^1.0.2
prop-types ^15.5.10
react-timer-mixin ^0.13.3
dev babel-cli ^6.24.1
babel-core ^6.25.0
babel-eslint ^7.2.3
babel-loader ^7.1.1
babel-plugin-transform-react-remove-prop-types ^0.4.6
babel-preset-react-native ^2.1.0
caniuse-api ^2.0.0
del-cli ^1.1.0
enzyme ^2.9.1
enzyme-to-json ^1.5.1
eslint ^4.2.0
eslint-config-prettier ^2.3.0
eslint-plugin-promise ^3.5.0
eslint-plugin-react ^7.1.0
file-loader ^0.11.2
flow-bin ^0.49.1
jest ^20.0.4
lint-staged ^4.0.1
prettier ^1.5.2
react ^15.6.1
react-dom ^15.6.1
react-test-renderer ^15.6.1
url-loader ^0.5.9
webpack ^3.1.0
webpack-bundle-analyzer ^2.8.2
peer react 15.4.x || 15.5.x || 15.6.x
react-dom 15.4.x || 15.5.x || 15.6.x

Releases

-   0.0.45 zip tar
-   0.0.44 zip tar
-   0.0.43 zip tar
-   0.0.42 zip tar
-   0.0.41 zip tar
-   0.0.40 zip tar
-   0.0.39 zip tar
-   0.0.38 zip tar
-   0.0.37 zip tar
-   0.0.36 zip tar
-   0.0.35 zip tar
-   0.0.34 zip tar
-   0.0.33 zip tar
-   0.0.32 zip tar
-   0.0.31 zip tar
-   0.0.30 zip tar
-   0.0.29 zip tar
-   0.0.28 zip tar
-   0.0.26 zip tar
-   0.0.25 zip tar
-   0.0.24 zip tar
-   0.0.23 zip tar
-   0.0.22 zip tar
-   0.0.21 zip tar
-   0.0.20 zip tar
-   0.0.19 zip tar
-   0.0.18 zip tar
-   0.0.17 zip tar
-   0.0.16 zip tar
-   0.0.15 zip tar