Nicolas Gallagher 25f96ba8ae [fix] StyleSheet prefixing on client and server
A small error from referencing the wrong value caused prefixed values to
be dropped. The patch also updated inline-style-prefixer and turns all
vendor prefixes on by default. This provides the option to drop all the
caniuse and bowser data that inline-style-prefixer uses (probably by
forking the project and removing those dependencies).

Fix #51
2016-02-22 13:55:09 -08:00
2016-02-18 23:03:59 -08:00
2016-02-19 13:17:39 -08:00
2016-02-18 23:03:59 -08:00
2016-02-16 23:43:41 -08:00
2016-02-16 23:43:41 -08:00
2016-02-16 23:43:41 -08:00
2016-02-19 13:17:39 -08:00

React Native for Web

Build Status npm version gzipped size

React Native components and APIs for the Web.

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

Quick start

To install in your app:

npm install --save react@0.14 react-dom@0.14 react-native-web

Read the Client and Server rendering guide.

Overview

This is a web implementation of React Native components and APIs. The React Native components are good web application building blocks, and provide a common foundation for component libraries.

For example, the View component makes it easy to build common layouts with flexbox, such as stacked and nested boxes with margin and padding. And the StyleSheet API converts styles defined in JavaScript to "atomic" CSS.

Examples

Demos:

Example:

import React, { 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>
)

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

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

Documentation

Guides:

Exported modules:

License

React Native for Web is BSD licensed.

S
Description
Cross-platform React UI packages
Readme MIT
94 MiB
Languages
JavaScript 82.3%
CSS 9.5%
HTML 8.2%