Skip to content

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

License

Notifications You must be signed in to change notification settings

elemental-design/react-platform

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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