elemental-design / react-platform

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

@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

• react-dom – React Web
• react-native – React Native – iOS/Android
• react-native-web – React Native Web
• react-sketchapp – React Sketch.app
• react-figma – React Figma
• react-native-windows – React Native Windows
• react-native-macos – React Native macOS (no primitives support yet)

Planned Platforms

• react-native-desktop-qt – React Native Qt port (Linux/macOS/Windows)

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

• React as a Platform: A path towards a truly cross-platform UI - Leland Richardson
• React Native's New Architecture - Parashuram N

Contributing

Open to contributions :)

License

MIT