Skip to content

React Native for Web: A framework for building Native Web Apps

License

Notifications You must be signed in to change notification settings

thaingo/react-native-web

 
 

Repository files navigation

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.

Overview

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

React Native provides a foundational layer to support interoperable, zero-configuration React component development. This is missing from React's web ecosystem where OSS components rely on inline styles (usually without vendor prefixes), or require build tool configuration. This project allows components built upon React Native to be run on the Web, and it manages all component styling out-of-the-box.

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

Quick start

To install in your app:

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

Read the Client and Server rendering guide.

Examples

Demos:

Sample:

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>
)

// 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') })

Documentation

Guides:

Exported modules:

License

React Native for Web is BSD licensed.

About

React Native for Web: A framework for building Native Web Apps

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%