Skip to content

chandu0101/react-native-web

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native for Web

Build Status npm version

The core React Native components adapted and expanded upon for the web, backed by a precomputed CSS library. ~21KB minified and gzipped.

Table of contents

Install

npm install --save react react-native-web

Use

React Native for Web exports its components and a reference to the React installation. Styles are authored in JavaScript as plain objects.

import React, { View } from 'react-native-web'

class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.root} />
    )
  }
}

const styles = {
  root: {
    borderColor: 'currentcolor'
    borderWidth: '5px',
    flexDirection: 'row'
    height: '5em'
  }
}

Components

An accessibile image component with support for image resizing, default image, and child content.

(TODO)

(TODO)

Touch bindings for swipe gestures.

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.

Styling

React Native for Web provides a mechanism to declare all your styles in JavaScript within your components. 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.

Authoring style is no different to the existing use of inline styles in React, but most inline styles are converted to single-purpose class names. The current implementation includes 300+ precomputed CSS declarations (~4.5KB gzipped) that covers many common property-value pairs. A more sophisticated build-time implementation may produce a slightly larger CSS file for large apps, and fall back to fewer inline styles. Read more about the styling strategy.

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

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}
        />
        <View style={styles.text}>
          <Text style={styles.title}>
            React Native Web
          </Text>
          <Text style={styles.subtitle}>
            Build high quality web apps using React
          </Text>
        </View>
      </View>
    )
  },
})

const styles = {
  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'
  }
}

Combine and override style objects:

import baseStyle from './baseStyle'

const buttonStyle = {
  ...baseStyle,
  backgroundColor: '#333',
  color: '#fff'
}

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), and Tobias Koppers for Webpack and CSS loader.

Thanks to react-swipeable for the current implementation of Swipeable, and to react-tappable for backing the current implementation of Touchable.

License

Copyright (c) 2015 Nicolas Gallagher. Released under the MIT license.

About

React Native Web: A framework for building web apps

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 73.4%
  • CSS 26.1%
  • HTML 0.5%