No Partying Mariachis

    @cross2d/react-native-web

    0.1.5 • Public • Published

    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 react@15.4 react-dom@15.4 react-native-web
    

    Read the Getting Started guide.

    Alternatively, you can quickly setup a local project using create-react-app (which supports react-native-web out-of-the-box once installed) and react-native-web-starter.

    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: a common way to handle style, animation, touch, viewport adaptation, accessibility, themes, RTL layout, and 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 facing Web teams. 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.

    Install

    npm i @cross2d/react-native-web

    DownloadsWeekly Downloads

    3

    Version

    0.1.5

    License

    BSD-3-Clause

    Last publish

    Collaborators

    • colin3dmax