{"id":21816629,"url":"https://github.com/elemental-design/react-platform","last_synced_at":"2025-04-14T01:15:34.519Z","repository":{"id":42041748,"uuid":"264057089","full_name":"elemental-design/react-platform","owner":"elemental-design","description":"Experimental cross-platform React Native interoperability APIs, component wrappers and polyfills.","archived":false,"fork":false,"pushed_at":"2024-02-09T20:24:47.000Z","size":223,"stargazers_count":17,"open_issues_count":18,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T15:21:19.592Z","etag":null,"topics":["cross-platform","polyfills","react","react-figma","react-native","react-native-macos","react-native-windows","react-sketchapp"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elemental-design.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-05-15T00:31:31.000Z","updated_at":"2024-09-07T01:12:00.000Z","dependencies_parsed_at":"2024-02-09T21:29:38.395Z","dependency_job_id":"89e8ed80-45ac-4fa4-90b6-97ca264ea015","html_url":"https://github.com/elemental-design/react-platform","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"69a5bd2baa046ebddc3382aadf75c18f87a6f7f8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elemental-design%2Freact-platform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elemental-design%2Freact-platform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elemental-design%2Freact-platform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elemental-design%2Freact-platform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elemental-design","download_url":"https://codeload.github.com/elemental-design/react-platform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654027,"owners_count":21140236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-platform","polyfills","react","react-figma","react-native","react-native-macos","react-native-windows","react-sketchapp"],"created_at":"2024-11-27T15:35:39.036Z","updated_at":"2025-04-14T01:15:34.493Z","avatar_url":"https://github.com/elemental-design.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @react-platform\n\nCross-platform React interoperability APIs, component wrappers and polyfills for all React (Native) platforms.\n\nThis exists primarily as an **experimental** and **unofficial** community-led project to explore and help push forward standards and progress for **React as a platform**.\n\nThe 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).\n\nPlease feel free to post any questions or proposals in issues, or feel free to contact me (via issues/Twitter).\n\n## What is `@react-platform`?\n\n`@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. \n\nAs an example, `@react-platform/native` exports React Native components like `\u003cScrollView\u003e` and `\u003cSafeAreaView\u003e` that fallback to `\u003cView\u003e` on unsupported platforms.\n\nAs 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.\n\n## Supported Platforms\n\n- [`react-dom`](https://github.com/facebook/react/tree/master/packages/react-dom) – React Web\n- [`react-native`](https://github.com/facebook/react-native) – React Native – iOS/Android\n- [`react-native-web`](https://github.com/necolas/react-native-web) – React Native Web\n- [`react-sketchapp`](https://github.com/airbnb/react-sketchapp) – React Sketch.app\n- [`react-figma`](https://github.com/react-figma/react-figma) – React Figma\n- [`react-native-windows`](https://github.com/microsoft/react-native-windows) – React Native Windows\n- [`react-native-macos`](https://github.com/microsoft/react-native-macos) – React Native macOS (no primitives support yet)\n\n## Planned Platforms\n\n- [`react-native-desktop-qt`](https://github.com/status-im/react-native-desktop-qt) – React Native Qt port (Linux/macOS/Windows)\n\n## Getting Started\n\nExample of `@react-platform/native`, a React Native interoperability layer with polyfills and primitive fallbacks:\n\n```sh\nnpm install --save @react-platform/native\n```\n\nOn a React web, React Native or React Sketch.app project:\n\n```js\nimport { Text, View } from 'react-primitives';\nimport { ScrollView, SafeAreaView, TextInput } from '@react-platform/native';\n\nexport default function HomeScreen() {\n  return (\n    \u003cScrollView style={{ flex: 1 }}\u003e\n      \u003cSafeAreaView style={{ height: 64 }}\u003e\n        \u003cText\u003e\n          Header Here\n        \u003c/Text\u003e\n      \u003c/SafeAreaView\u003e\n      \u003cView\u003e\n        \u003cTextInput initialValue=\"Hello World\" onChangeText={(value) =\u003e console.log(value)}\u003e\n      \u003c/View\u003e\n    \u003c/ScrollView\u003e\n  )\n}\n```\n\n## Terminology\n\n### Bridge\n\nMessaging tunnel between native code and JavaScript/React runtime.\n\n### Layout\n\nYoga layout (native Flexbox port).\n\n### Threads\n\nCommunication between threads is asynchronous.\n\n#### UI Thread (Platform UI)\n\nBridge to layout thread with `view.appendChild(RCTView)`\n\n#### Layout Thread (Shadow Tree)\n\nReact reconciliation tree.\n\nBridge to JavaScript thread with `[..., createView(id, RCTView, ...)]`\n\n#### JavaScript Thread (React Runtime)\n\n## Reading\n\n**Talks**\n\n- [React as a Platform: A path towards a truly cross-platform UI - Leland Richardson](https://www.youtube.com/watch?v=hNwQPJy-XZY)\n- [React Native's New Architecture - Parashuram N](https://www.youtube.com/watch?v=UcqRXTriUVI)\n\n\n## Contributing\n\nOpen to contributions :)\n\n## License\n\n[MIT](./LICENSE.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felemental-design%2Freact-platform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felemental-design%2Freact-platform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felemental-design%2Freact-platform/lists"}