# @cycle/react-native

> Cycle.js driver that uses React Native to render

Latest version **3.0.0** (published 2021-12-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cycle/react-native
pnpm add @cycle/react-native
yarn add @cycle/react-native
bun add @cycle/react-native
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2021-12-13 |
| First published | 2015-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 30 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 257 |
| Author | Andre Staltz |
| Maintainers | staltz, cycle |
| Keywords | react, cyclejs, xstream, mvi, react-native, driver |

## Links

- npm: https://www.npmjs.com/package/@cycle/react-native
- Repository: https://github.com/cyclejs/react-native/tree/master
- Issues: https://github.com/cyclejs/react-native/issues
- npm.io page: https://npm.io/package/@cycle/react-native

## Dependencies (2)

- [xstream](https://npm.io/package/xstream.md) 11.x.x
- [@cycle/react](https://npm.io/package/@cycle/react.md) 2.x

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2021-12-13
- 2.0.0 — 2020-09-02
- 1.4.0 — 2018-07-28
- 1.3.0 — 2018-07-14
- 1.0.0 — 2018-07-12
- 1.0.0-experimental.15 — 2016-06-02
- 1.0.0-experimental.14 — 2016-05-14
- 1.0.0-experimental.13 — 2016-01-19
- 1.0.0-experimental.12 — 2015-11-06
- 1.0.0-experimental.11 — 2015-10-28
- 1.0.0-experimental.10 — 2015-10-28
- 1.0.0-experimental.9 — 2015-10-28
- 1.0.0-experimental.8 — 2015-10-28
- 1.0.0-experimental.7 — 2015-10-28
- 1.0.0-experimental.6 — 2015-10-28
- … 5 more at https://npm.io/package/@cycle/react-native/versions

## README

# Cycle React Native

> Cycle.js driver that uses React Native to render

- Provides a driver factory `makeReactNativeDriver`
- Contains hyperscript helper functions, such as `View()`, `Text()`, etc

```
npm install @cycle/react-native
```

## Example

```js
import xs from 'xstream';
import {run} from '@cycle/run';
import {makeReactNativeDriver, TouchableOpacity, View, Text} from '@cycle/react-native';

function main(sources) {
  const inc = Symbol();
  const inc$ = sources.react.select(inc).events('click');

  const count$ = inc$.fold(count => count + 1, 0);

  const elem$ = count$.map(i =>
    TouchableOpacity(inc, [
      View([
        Text(`Counter: ${i}`),
      ])
    ]),
  );

  return {
    react: elem$,
  };
}

run(main, {
  react: makeReactNativeDriver('MyApp'),
});
```


## Installation

Start by installing React Native prerequisites (XCode, react-native-cli, watchman).

Then create a React Native project using the CLI.

When 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.

## API

### `makeReactNativeDriver(appKey)`

Returns a driver that uses React Native to render your Cycle.js app in the native application known by the string `appKey`.

### Hyperscript helpers

Import hyperscript helpers such as `View`, `Text`, `TouchableOpacity`, etc to create React elements to represent the respective built-in native components: `<View>`, `<Text>`, `<TouchableOpacity>`, etc.

The basic usage is `View(props, children)`, but some variations and shortcuts are allowed:

- `View()` becomes `<View/>`
- `View(props)` becomes `<View {...props}></View>`
- `Text('text content')` becomes `<Text>text content</Text>`
- `View([child1, child2])`
- `Text(props, 'text content')`
- `View(props, [child1, child2])`
- etc

There are also shortcuts for (MVI) intent selectors:

- `Touchable(someSymbol)` becomes `h(Touchable, {sel: someSymbol})`
- `Touchable(sym, props)` becomes `h(Touchable, {sel: sym, ...props})`
- `Text('myselector', 'text content')`
- `Touchable('inc', [child])`
- `Touchable('inc', propsObject, [child])`
- etc

For 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`.

## Other native drivers

This 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:

- [cycle-native-alert](https://gitlab.com/staltz/cycle-native-alert)
- [cycle-native-asyncstorage](https://gitlab.com/staltz/cycle-native-asyncstorage)
- [cycle-native-android-local-notification](https://gitlab.com/staltz/cycle-native-android-local-notification)
- [cycle-native-clipboard](https://gitlab.com/staltz/cycle-native-clipboard)
- [cycle-native-keyboard](https://gitlab.com/staltz/cycle-native-keyboard)
- [cycle-native-linking](https://gitlab.com/staltz/cycle-native-linking)
- [cycle-native-share](https://gitlab.com/staltz/cycle-native-share)
- [cycle-native-toastandroid](https://gitlab.com/staltz/cycle-native-toastandroid)
- (please build more of these and add them here!)

## License

MIT, Andre 'Staltz' Medeiros 2018

---
_Source: https://npm.io/package/@cycle/react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._