{"id":18541286,"url":"https://github.com/cyclejs/react-native","last_synced_at":"2025-04-05T21:05:20.571Z","repository":{"id":50740853,"uuid":"42538917","full_name":"cyclejs/react-native","owner":"cyclejs","description":"Cycle.js driver that uses React Native to render","archived":false,"fork":false,"pushed_at":"2022-11-04T13:28:04.000Z","size":46,"stargazers_count":260,"open_issues_count":11,"forks_count":28,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-10-30T00:55:13.371Z","etag":null,"topics":[],"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/cyclejs.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}},"created_at":"2015-09-15T18:37:56.000Z","updated_at":"2024-10-13T14:26:08.000Z","dependencies_parsed_at":"2022-09-26T21:31:40.767Z","dependency_job_id":null,"html_url":"https://github.com/cyclejs/react-native","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyclejs","download_url":"https://codeload.github.com/cyclejs/react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247347708,"owners_count":20924443,"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":[],"created_at":"2024-11-06T20:04:33.723Z","updated_at":"2025-04-05T21:05:20.539Z","avatar_url":"https://github.com/cyclejs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cycle React Native\n\n\u003e Cycle.js driver that uses React Native to render\n\n- Provides a driver factory `makeReactNativeDriver`\n- Contains hyperscript helper functions, such as `View()`, `Text()`, etc\n\n```\nnpm install @cycle/react-native\n```\n\n## Example\n\n```js\nimport xs from 'xstream';\nimport {run} from '@cycle/run';\nimport {makeReactNativeDriver, TouchableOpacity, View, Text} from '@cycle/react-native';\n\nfunction main(sources) {\n  const inc = Symbol();\n  const inc$ = sources.react.select(inc).events('press');\n\n  const count$ = inc$.fold(count =\u003e count + 1, 0);\n\n  const elem$ = count$.map(i =\u003e\n    TouchableOpacity(inc, [\n      View([\n        Text(`Counter: ${i}`),\n      ])\n    ]),\n  );\n\n  return {\n    react: elem$,\n  };\n}\n\n// Necessary shim in React Native's JS engine\nglobal.queueMicrotask = fn =\u003e setTimeout(fn, 1);\n\nrun(main, {\n  react: makeReactNativeDriver('MyApp'),\n});\n```\n\n\n## Installation\n\nStart by installing React Native prerequisites (XCode, react-native-cli, watchman).\n\nThen create a React Native project using the CLI.\n\nWhen the project is set up, npm install `@cycle/react-native`, `@cycle/run`, and a stream library like `xstream`, then replace the index.js with something that looks like the example code in this readme.\n\n## API\n\n### `makeReactNativeDriver(appKey)`\n\nReturns a driver that uses React Native to render your Cycle.js app in the native application known by the string `appKey`.\n\n### Hyperscript helpers\n\nImport hyperscript helpers such as `View`, `Text`, `TouchableOpacity`, etc to create React elements to represent the respective built-in native components: `\u003cView\u003e`, `\u003cText\u003e`, `\u003cTouchableOpacity\u003e`, etc.\n\nThe basic usage is `View(props, children)`, but some variations and shortcuts are allowed:\n\n- `View()` becomes `\u003cView/\u003e`\n- `View(props)` becomes `\u003cView {...props}\u003e\u003c/View\u003e`\n- `Text('text content')` becomes `\u003cText\u003etext content\u003c/Text\u003e`\n- `View([child1, child2])`\n- `Text(props, 'text content')`\n- `View(props, [child1, child2])`\n- etc\n\nThere are also shortcuts for (MVI) intent selectors:\n\n- `Touchable(someSymbol)` becomes `h(Touchable, {sel: someSymbol})`\n- `Touchable(sym, props)` becomes `h(Touchable, {sel: sym, ...props})`\n- `Text('myselector', 'text content')`\n- `Touchable('inc', [child])`\n- `Touchable('inc', propsObject, [child])`\n- etc\n\nFor non-built-in components (e.g. third party) components, you can use `h(ThirdPartyComponent)` with `h` from `@cycle/react` or you can build a helper using `makeHelper(ThirdPartyComponent)` with `makeHelper` from `@cycle/react-native`.\n\n## Other native drivers\n\nThis library only covers React components in React Native and View-related rendering. For other native APIs in React Native, use drivers specifically built for those. See the list below:\n\n- [cycle-native-alert](https://gitlab.com/staltz/cycle-native-alert)\n- [cycle-native-asyncstorage](https://gitlab.com/staltz/cycle-native-asyncstorage)\n- [cycle-native-android-local-notification](https://gitlab.com/staltz/cycle-native-android-local-notification)\n- [cycle-native-clipboard](https://gitlab.com/staltz/cycle-native-clipboard)\n- [cycle-native-keyboard](https://gitlab.com/staltz/cycle-native-keyboard)\n- [cycle-native-linking](https://gitlab.com/staltz/cycle-native-linking)\n- [cycle-native-share](https://gitlab.com/staltz/cycle-native-share)\n- [cycle-native-toastandroid](https://gitlab.com/staltz/cycle-native-toastandroid)\n- (please build more of these and add them here!)\n\n## License\n\nMIT, Andre 'Staltz' Medeiros 2018\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyclejs%2Freact-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyclejs%2Freact-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyclejs%2Freact-native/lists"}