Recompose: React-native

[almeynman]

Does the library work with react-native?

[acdlite]

Not sure, good question! There's nothing web-specific to Recompose, so it should work, but I haven't confirmed.

[esamattis]

Currently it doesn't because it imports module react which is not available in React Native.

But my guess is that it will start working after https://github.com/facebook/react-native/issues/2985 is resolved.

[oliviertassinari]

https://github.com/facebook/react-native/issues/2985 is now resolved.

[esamattis]

Just waiting for a release :)

[rclai]

This doesn't seem to be working still (or now?):

TransformError: /my-app/node_modules/change-emitter/lib/index.js: 
Couldn't find preset "es2015" relative to directory "/my-app/node_modules/change-emitter"

I'm using the following versions:

"react": "^15.1.0",
"react-native": "^0.27.2",

[tmpethick]

@rclai I got it working by removing my .babelrc file and installing:

npm install babel-preset-es2015 --save
npm install babel-preset-react --save

[rclai]

I don't have a .babelrc though. Is it supposed to be in the root folder or is it somewhere else? I tried installing those packages anyway, but it's still giving me the same error.

Edit: Oh never mind, I had to restart the packager.

[1st8]

Unfortunately react-native has a problem when using the official babel-preset-react-native together with babel-preset-react-es2015. https://github.com/facebook/react-native/issues/5747
Importing individual files does work for recompose, though.

So instead of

import { compose, lifecycle, withState, branch, renderComponent } from 'recompose';

you would have to do

import compose from 'recompose/compose';
import lifecycle from 'recompose/lifecycle';
import withState from 'recompose/withState';
import branch from 'recompose/branch';
import renderComponent from 'recompose/renderComponent';

[migueloller]

The reason why it's not currently working in React Native is because of https://github.com/acdlite/change-emitter/issues/2.

As soon as that is published, it will work.

[Minishlink]

The fix has been waiting on the master branch for _6 (SIX) months_. What are you waiting for? ping @acdlite

[migueloller]

@Minishlink, I'm sure that @acdlite is extremely busy with his work and given that he is a a contributor to various OSS projects probably has notifications turned off. 😕

I tried pinging him on Twitter a few months back but that didn't help at the time. Maybe we can ping him again?

[migueloller]

For now I've fallen back to having a small script that patches the package.json every time I run npm install. Which is suboptimal, of course.

[Minishlink]

@migueloller Sure, let's ping him on Twitter. recompose is a pretty neat tool, so it's quite disappointing when you stumble upon this small issue.

By the way, I found a way to circumvent the problem by adding babel-preset-es2015 to my dependencies. Hope this helps!

[migueloller]

@Minishlink, I just reached out via Twitter and it was released! 🙌

Thanks @acdlite!

[Minishlink]

@migueloller Does this fix your issue? Not for me. :/

[istarkov]

@Minishlink have you tried clean npm install? I think dependency should be updated even without recompose update. But if you use yarn (not sure about package managers for native) seems like the simplest way is to update recompose. I can do that if needed.

[Minishlink]

@istarkov I did a yarn upgradeand change-emitter was indeed at the new version (0.1.3) so it seems there was another issue. Adding babel-preset-es2015 to my dependencies fixes the problem. One thing to note is that the issue happens when react-native packages a bundle for release, not for debug.

[prontiol]

Updated package still fails with Couldn't find preset "es2015" error.

[migueloller]

@Minishlink and @prontiol, I looked into this and it seems that because the package still published a .babelrc there is an issue. I'll try sending another PR to change-emitter so that this can be fixed.

[pbassut]

Same issue here. Couldn't find preset "es2015"

[pbassut]

Any quick fix for this until the package is published?

[migueloller]

@pbassut, yes. Simply delete node_modules/change-emitter/.babelrc.

[Minishlink]

Thanks @migueloller!

[istarkov]

Guys I've fixed change-emitter and seems like recompose reinstall should fix a problem
(change-emitter version 0.1.5 does not contain .babelrc)

[migueloller]

@istarkov, thanks!

I also saw that you have another PR in there (https://github.com/acdlite/change-emitter/pull/7). If you merge the PR that I had made previously (https://github.com/acdlite/change-emitter/pull/5) that would fix that issue as well by using files in the package.json.

[istarkov]

@migueloller I'm reading what is files in package.json havent seen before that files can be used instead of npmignore, will merge I think ;-)

[laxgoalie392]

I'm completely new to this library and I tried installing it tonight (through a react-native app). I started to get very excited about it... except that functions do not seem to be passed through. I just installed it and I just created this app through create-react-native-app so I should be up to the latest and greatest. I get no errors, just missing properties. Am I doing something wrong? I'd really like to start developing apps using this library!

export default compose(
    withState('value', 'updateValue', '2'),
    withHandlers({
        loginWithGoogle2: (props) =>
            event => console.log(event)
    }),
)((props) => {
    console.log('props', props);
    return <Text>test</Text>;
});

returns only props {"value":"2"}

[istarkov]

Is any rn playground exists like https://snack.expo.io but with ability to import npm modules?

[laxgoalie392]

@istarkov not that i'm aware of. Just googled around for one. I can create a barebones github project if you want. it shouldn't be that hard to run if you have a mac

[istarkov]

I will create it myself, not a big problem.

[istarkov]

I've just created react-native example, all works as expected
https://github.com/istarkov/recompose-native-test/blob/master/App.js
@laxgoalie392 you can check, install, play

[laxgoalie392]

@istarkov ok i see where my problems are and it is in fact working as expected!

I had originally had the following code and the issue was that event seems to be a massive object that was locking up everything. logging something simple worked.

withHandlers({
        loginWithGoogle: (props) => (event) => console.log('event', event),
    }),

But that lead me to log what was being passed as a function in the render phase... unfortunately, react-native logs functions as null which caused my confusion :_( They don't even show up as a property on an object when logged.

Anyways, I'm really excited to use this library and transform the way i currently write code! Thanks a lot!

[istarkov]

@laxgoalie392 thank you, now I know how to create and test react-native with recompose ;-)