cyclejs / react-native

Cycle.js driver that uses React Native to render
MIT License
260 stars 28 forks source link

@cycle/react-native deprecated in favor of @cycle/react? #17

Closed jmatsushita closed 4 years ago

jmatsushita commented 4 years ago

Hi there,

Looking at https://github.com/staltz/manyverse it seems that doing React Native with Cycle.js isn't best done with this module anymore?

Drawing from the code in manyverse, I was able to get things going (including with RN Web and Expo) with only @cycle/react and the following code in App.js of any expo boilerplate:

import { TouchableOpacity, View, Text } from "react-native";
import { h, makeComponent } from "@cycle/react";

const main = function(sources) {
  const inc = Symbol();
  const inc$ = sources.react.select(inc).events("press"); // Press will work in RN and RN Web

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

  const elem$ = count$.map(i =>
    h(TouchableOpacity, { sel: inc }, [
      h(View, [h(Text, {}, `\n\n\n\nCounter: ${i}`)])
    ])
  );

  return {
    react: elem$
  };
};

const App = makeComponent(main); // makeComponent(main, drivers) is also possible.

export default App; // To make Expo happy.
jmatsushita commented 4 years ago

I pieced together a starter kit https://github.com/jmatsushita/cycle-expo-native-kit, forked from https://github.com/codersera-repo/expo-native-starter-kit which "let's you run expo and ejected app together".

It works with the expo tooling, in the browser, and (I haven't tested it yet) should allow to switch back and forth between managed and bare expo workflows (using mocks for RN modules).

staltz commented 4 years ago

Hi @jmatsushita ! If you check the package.json of this library, it actually uses cycle/react. The goal of cycle/react is to solve the component interoperability between React and Cycle.js. The goal of cycle/react-native is to provide a few helper utilities (this is from the readme):

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

So people who want to focus on the Cycle.js style of writing apps can just use cycle/react-native without worrying much about react-native setups such as AppRegistry.registerComponent.

The reason why Manyverse doesnt use cycle/react-native is because it doesn't use AppRegistry but instead uses react-native-navigation, indirectly through cycle-native-navigation. I also didn't use the hyperscript helpers from cycle/react-native.

The starter kit you made looks great! Glad that you're looking to use the Cycle.js architecture with React Native. :)

jmatsushita commented 4 years ago

Thanks @staltz! Reading your blog post https://staltz.com/use-react-in-cyclejs-and-vice-versa.html helped to put things into perspective for me.

Yes I saw that cycle-native-navigation does the registry registration, which doesn't work for an unejected expo app which expects a top level component to be exported in App.js. In any case, hope you can provide advice, for instance your thoughts on https://github.com/jmatsushita/cycle-expo-native-kit/issues/1 would be much welcome!