Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

@react-platform

Cross-platform React interoperability APIs, component wrappers and polyfills for all React (Native) platforms.

This exists primarily as an experimental and unofficial community-led project to explore and help push forward standards and progress for React as a platform.

The project is inspired by and builds on top of Leland’s react-primitives project and Nicolas’s react-native-web. While not integrated with, this may pull ideas/research from reactxp.

Please feel free to post any questions or proposals in issues, or feel free to contact me (via issues/Twitter).

What is @react-platform?

@react-platform is an npm package ecosystem of primitive components and APIs that can be used for cross-platform React codebases/libraries, with polyfills/fallbacks for platforms that don't have appropriate native/JS equivalents.

As an example, @react-platform/native exports React Native components like <ScrollView> and <SafeAreaView> that fallback to <View> on unsupported platforms.

As this is in alpha, all versions are 0.x.x and packages may be deprecated or change in the future. Where possible, we will try our best to follow semantic versioning and issue deprecation notices.

Supported Platforms

Planned Platforms

Getting Started

Example of @react-platform/native, a React Native interoperability layer with polyfills and primitive fallbacks:

npm install --save @react-platform/native

On a React web, React Native or React Sketch.app project:

import { Text, View } from 'react-primitives';
import { ScrollView, SafeAreaView, TextInput } from '@react-platform/native';

export default function HomeScreen() {
  return (
    <ScrollView style={{ flex: 1 }}>
      <SafeAreaView style={{ height: 64 }}>
        <Text>
          Header Here
        </Text>
      </SafeAreaView>
      <View>
        <TextInput initialValue="Hello World" onChangeText={(value) => console.log(value)}>
      </View>
    </ScrollView>
  )
}

Terminology

Bridge

Messaging tunnel between native code and JavaScript/React runtime.

Layout

Yoga layout (native Flexbox port).

Threads

Communication between threads is asynchronous.

UI Thread (Platform UI)

Bridge to layout thread with view.appendChild(RCTView)

Layout Thread (Shadow Tree)

React reconciliation tree.

Bridge to JavaScript thread with [..., createView(id, RCTView, ...)]

JavaScript Thread (React Runtime)

Reading

Talks

Contributing

Open to contributions :)

License

MIT

About

Experimental cross-platform React Native interoperability APIs, component wrappers and polyfills.

Topics

Resources

License

Releases

No releases published
You can’t perform that action at this time.