Using react-komposer with react-native

[superandrew213]

Has anyone gotten this to work? I am trying to use mantra-core with react-native but get the error that mantra core can't load 'react-composer'. Installing react-composer without mantra-core still causes the same issue.

To replicate, create blank react-native app. Install react-composer and import (import {createApp} from 'react-composer';) it in index.ios.js.

I'm getting the following issue. Already tried the following:

1. The suggested solution on the screenshot.
2. Installing module using npm 2 and 3 and deleting node_modules and installing again.

[arunoda]

I'm also seeing it. Will try to fix.

[superandrew213]

@arunoda ok thanks. Let me know if you need any help. Would like to use mantra on a react-native project.

[arunoda]

Yes. We need some help. If you can find the problem and fix it to work on ReactNative, that's super awesome.

[smooJitter]

@superandrew213, what do you suspect?

[superandrew213]

@smooJitter not sure. Maybe something to do with babel?

[yanivnizry]

+1 for react-native support

[superandrew213]

Has anyone made any progress on this?

[superandrew213]

@arunoda could it have something to do with the html tags like:
<p>Loading...</p>

[superandrew213]

Adding mantra-core and react-composer src manually to project seems to make react-composer available. However now I'm getting this:

[superandrew213]

Removing the option in .babelrc of react-display-name module does remove the error and mantra-core seems to work.

[yanivnizry]

@superandrew213 can you explain which option did you removed ?
I had the same error.

[superandrew213]

@yanivnizry make sure you are using react-display-name v0.0.1. Latest version is using babel 6 and removing the options doesn't work.

react-display-name v0.0.1 has two options. Remove them both.

[yanivnizry]

@superandrew213 thank you.
@arunoda can you please fix this issue in the next versions ?

[arunoda]

Yeah. We can.
@superandrew213 send me a PR

[smooJitter]

I would love to use Mantra via react-native. I know you guys are busy but it would be nice to at least have a small list of complication that would need to be addressed. This repo ( spencercarli/react-native-meteor-boilerplate) provides a framework for connecting to meteor from a react-native client via node-ddp. I also looked at Kadira React Native Demo with GraphQL, which sounds promising but Apollo is still in early stages. For those considering Meteor + Mantra + React-Native prototypes, It would be nice to have a little direction regarding Mantra compatible client / server technologies to support GraphQL and routing (e.g., react-native-router-flux, exNavigator, ExperimentalNavigation). Furthermore how would "context" configurations change.

[superandrew213]

@arunoda it's just a hack. I manually added both mantra-core and react-komposer source into project root dir and imported the manually added react-komposer in mantra-core.

After doing that I got the error with react-display-name babel options. So I went into the module and just removed the options. (Note you have to downgrade react-display-name to v0.01 if it is higher. It doesn't work with the new version).

[arunoda]

@superandrew213 Hmm. If that's the issue, let's try to remove react-display-name. I'll try with it.

[superandrew213]

@arunoda adding "react-native": "./dist/index.js", to package.json fixes everything.

Still need to remove react-display-name from react-simple-di.

Sent you prs.

[arunoda]

That's cool. I'll take this.
May be we can remove that package from react-simple-di.

I'll do a release now and ping you.

[superandrew213]

yep removed it already and sent you pr.

[arunoda]

FYI: Updated mantra-core with updated react-komposer and react-simple-di.
So, you could simply use mantra-core in React native right away.

[superandrew213]

hmm I expected that the react p and pre components would cause an error.

[yanivnizry]

@superandrew213 what are you using for reactivity instead of Tracker ? have you tried https://github.com/aleclarson/tracker

[superandrew213]

Not yet but will check it out. Right now I'm using redux.

[superandrew213]

For now you can set your own react-native loading and error components like so: https://github.com/kadirahq/react-komposer#change-the-loading-component

@arunoda maybe we can use navigator.product === 'ReactNative' to check. What do you think?

[arunoda]

Yeah. We should try to detect that and load appropriate Loading components in RN.
If navigator.product === 'ReactNative' works, we should try to use it.

[superandrew213]

Yes it works, it was added in react-native v0.17.0.
https://github.com/facebook/react-native/releases/tag/v0.17.0

However to show react-native views and text components we might need to add react-native as a dependency.

[arunoda]

Can't we simply get that RN Text component? If not, we should try to add RN as a peer-dependancy.

[superandrew213]

I'm not sure whether you can get the Text component only.

What do you think about this?
superandrew213@64c51e7

[arunoda]

Closing this since, we already support RN. But, we need to provide loading components manually. That's bit of an issue. We could fix this with #8