Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jmatsushita opened this issue Jan 12, 2020 · 3 comments
Closed

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

jmatsushita opened this issue Jan 12, 2020 · 3 comments

Comments

@jmatsushita
Copy link

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
Copy link
Author

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
Copy link
Member

staltz commented Jan 12, 2020

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. :)

@staltz staltz closed this as completed Jan 12, 2020
@jmatsushita
Copy link
Author

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 jmatsushita/cycle-expo-native-kit#1 would be much welcome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants