https://github.com/elemental-design/react-platform
Experimental cross-platform React Native interoperability APIs, component wrappers and polyfills.
https://github.com/elemental-design/react-platform
cross-platform polyfills react react-figma react-native react-native-macos react-native-windows react-sketchapp
Last synced: 2 months ago
JSON representation
Experimental cross-platform React Native interoperability APIs, component wrappers and polyfills.
- Host: GitHub
- URL: https://github.com/elemental-design/react-platform
- Owner: elemental-design
- License: mit
- Created: 2020-05-15T00:31:31.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-09T20:24:47.000Z (over 1 year ago)
- Last Synced: 2025-03-27T15:21:19.592Z (3 months ago)
- Topics: cross-platform, polyfills, react, react-figma, react-native, react-native-macos, react-native-windows, react-sketchapp
- Language: TypeScript
- Homepage:
- Size: 218 KB
- Stars: 17
- Watchers: 2
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @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`](https://github.com/lelandrichardson/react-primitives) project and Nicolas’s [`react-native-web`](https://github.com/necolas/react-native-web). While not integrated with, this may pull ideas/research from [`reactxp`](https://github.com/microsoft/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 `` and `` that fallback to `` 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`](https://github.com/facebook/react/tree/master/packages/react-dom) – React Web
- [`react-native`](https://github.com/facebook/react-native) – React Native – iOS/Android
- [`react-native-web`](https://github.com/necolas/react-native-web) – React Native Web
- [`react-sketchapp`](https://github.com/airbnb/react-sketchapp) – React Sketch.app
- [`react-figma`](https://github.com/react-figma/react-figma) – React Figma
- [`react-native-windows`](https://github.com/microsoft/react-native-windows) – React Native Windows
- [`react-native-macos`](https://github.com/microsoft/react-native-macos) – React Native macOS (no primitives support yet)
## Planned Platforms
- [`react-native-desktop-qt`](https://github.com/status-im/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:
```sh
npm install --save @react-platform/native
```
On a React web, React Native or React Sketch.app project:
```js
import { Text, View } from 'react-primitives';
import { ScrollView, SafeAreaView, TextInput } from '@react-platform/native';
export default function HomeScreen() {
return (
Header Here
console.log(value)}>
)
}
```
## 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](https://www.youtube.com/watch?v=hNwQPJy-XZY)
- [React Native's New Architecture - Parashuram N](https://www.youtube.com/watch?v=UcqRXTriUVI)
## Contributing
Open to contributions :)
## License
[MIT](./LICENSE.md)