Expo.io integration

[mihaimodiga]

Expo expects App function (that returns react native components) to be the default export. This is prevents the usage of makeReactNativeDriver function as usual.

[staltz]

I see.

Here's the implementation of makeReactNativeDriver:

function makeReactNativeDriver(appKey) {
  return function reactNativeDriver(sink) {
    const source = new ReactSource()
    const Root = makeCycleReactComponent(() => ({source, sink}))
    AppRegistry.registerComponent(appKey, () => Root)
    return source
  }
}

So it's quite simple. I think in Expo you could just use makeCycleReactComponent or (easier) makeComponent from cyclejs/react. See more here: https://github.com/cyclejs/react#usage

Then you can export the App component.

If this solution works, let me know how exactly you did it. We could update the README with instructions for other people.

[mihaimodiga]

I tested both functions, makeComponent and makeCycleReactComponent .

Everything is displayed properly but click event can not be captured.

If I use the event stream generated by periodic operator, the view is updated accordingly.

import xs from 'xstream';
import {TouchableOpacity, View, Text } from '@cycle/react-native';
import {setup} from '@cycle/run';
import { makeCycleReactComponent, makeComponent, ReactSource  } from '@cycle/react'
import { AppRegistry } from 'react-native'

function main(sources) {
  const inc = Symbol();
  
  // It does NOT work on neither version, no event is captured
  const inc$ = sources.react.select(inc).events('click');

  // It works on both versions
  //const inc$ = xs.periodic(1000)

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

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

  return {
    react: elem$,
  };
}

// Version 1
const reactDriver = (sink) => new ReactSource()

const App = makeComponent(main, {react: reactDriver});

// Version 2
/*const App = makeCycleReactComponent(() => {
  debugger
  const reactDriver = (sink) => new ReactSource();
  const program = setup(main, {react: reactDriver});
  const source = program.sources.react;
  const sink = program.sinks.react;
  const events = {...program.sinks};
  delete events.react;
  for (let name in events) if (name in drivers) delete events[name];
  const dispose = program.run();
  return {source, sink, events, dispose};
});*/

export default App;

[staltz]

Try

const App = makeComponent(main);

not

const App = makeComponent(main, {react: reactDriver});

[mihaimodiga]

I also tried:

const App = makeComponent(main);

I got exactly the same result.

[staltz]

What if click didn't work because there is no click event? Can you try press instead?

[staltz]

@mihaimodiga Did it work?

[mihaimodiga]

@staltz no, it din't worked with press. Btw I also updated expo to the latest version

[mihaimodiga]

@staltz It seems it was a problem with my computer . I assume that Windows firewall blocked some ports. I will investigate more.

I switched to Linux and it runs in browser even with click event. It was necessary to add just 3 lines from to the example. Obviously importing run from @cycle/run and makeReactNativeDriver from @cycle/react-native may be omitted.

import {makeComponent} from '@cycle/react';

// Example Code

const App = makeComponent(main);

export default App;

However when I try to run on device, I got the following error:

Is this just about updating @cycle/react-native library to reflect the latest changes from react-native library?

[staltz]

Probably right! We should remove the deprecated components

[mihaimodiga]

Besides Expo.io integration, it would be very useful to specify in readme.md the react-native version that is compatible with the latest version of @cycle/react-native.

[mihaimodiga]

From node_modules\@cycle\react-native\lib\cjs\index.js I had to comment the following components: ListView, ViewPagerAndroid and WebView in order to be able to run the app on device.

[mihaimodiga]

I noticed that the 'click' event was not identified because I used npm install not only for @cycle\react-native, but also for @cycle/react.

I just uninstalled everything and that I installed just @cycle\react-native.

Now it works as expected!

[PEZO19]

@mihaimodiga thanks a lot, I can confirm everything you said above, happened to me as well on a fresh project. (every step)

I tried and @cycle/react's max compatible version is 1.4.0, from 2.0.0 the clicks do not work as stated above.