Meteor + React Native integration?

It’s fun to build hybrid apps with native Cordova integration, which is already present in Meteor. However, React Native sounds even better than Cordova. Are there any plans for MDG to build an integration for React Native, just like the present one for Cordova?

11 Likes

They are already working on it, I heard it from the podcast

Interesting - which podcast?

In this subject:
What you guys think about how this integration should be?

I don’t think that it should be like Meteor does with Cordova today, wrapping it inside its own workspace. Would be really nice if MDG develop a NPM package to connect existing React Native apps to existing Meteor apps, almost like the ReactMeteorMixin for React or some sort of container like Relay does.

5 Likes

So in this case, we would still develop the React Native apps separately, with their own build and other tools? Like, we would have two consoles open (for React Native and Meteor), right?

Are you sure he said that? @sashko can you clarify?

IMHO is the better approach,
as @arunoda stated at Say No to Universal Apps, keep things clear about what is client and server code, this also would allow you to move your RN app to something different from Meteor as server-side, for example. Or if you find yourself on a point where RN isn’t fitting your needs, you can do contrary, maintain Meteor as the server and use another solution to build the app.

The integration is actually pretty good right now! I have two React Native apps running with a Meteor backend (badger-app.com if you want to checkout the first).

I really don’t know what Meteor can do to do an ‘integration’. I certainly wouldn’t want them to wrap the CLI tools that are already there… those work great. This means all thats left if to polyfill the meteor client so that you can use minimongo and subscribe/publish with the current JS code. With Reactive GraphQL on the corner I don’t see this happening soon.

Using Redux replaces the functionality that minimongo gives you in the browser. The node DDP adapter allows you to use Meteor subscriptions if you need real time.

A more forward looking approach would be to use meteor-graphql, Lokka (in react-native), and when you need realtime data just fake it by long polling. In the future you can take out long polling and implement the reactive GraphQL that Meteor is working on.

12 Likes

@leocavalcante @SkinnyGeek1010 - insightful comments!

Do you still find it beneficial to use Meteor on the server for native apps?

2 Likes

I would if you don’t care for all the callbacks with Node and are using Mongo anyway. Meteor tends to have an easier setup as well.

For example a one liner install setups up GraphQL, Graphical IDE (debugger), and setup Meteor authorization for Meteor accounts. This would be quite a bit of setup with vanilla Node (express, graphql, grapiql, mongo, middleware).

However, if the newest Node frameworks with async/await are your thing than perhaps Meteor for an API only isn’t so great.

4 Likes

You may want to check out this repo https://github.com/inProgress-team/react-native-meteor

8 Likes

I’m really seeing Meteor now as a Node.js framework (like Express) that glues together Mongo and WebSocket clients with out-of-the-box Pub/Sub via DDP protocol. If you find this useful (I really think it is), then Meteor is good choice.

If you think that you will not benefit from WS in your app and REST endpoints would be better to despite consuming, also exposing an API, I would go for another solution from Express implementations.

7 Likes

VThis is timely for me. I’m new. I’ve been spending most of my time on my collection models sort of waiting for 1.3 and Meteor+React to settle down. I’m almost ready to move on to the view layer, primarily targeting mobile. Redux sounded interesting now we have Mantra as a view layer framework, which sounds even more attractive. Then I read this http://blog.differential.com/meteor-react-native-learning-from-experience/ and grew concerned.

I’d like to hear more about Mantra’s support for React Native @arunoda From Issue #8, it does seem clear. I’m wondering if I should lean more toward Meteor Cordova which seems to work with blaze and less so with React. Will Meteor 1.3 build on Cordova-Blaze, Cordova-React for Meteor Mobile or will Meteor do more to address the limitation with Meteor-ReactNative as highlighted by Carli in the above?. For me, which is safest considering I have not and didn’t plan to invest anytime learning Blaze. For those considering ReactNative , should we take a closer look at Redux or will Mantra work, notwithstanding GraphQL? How about routing, will flow router work, or is react router better suited for react native?

Thanks for bringing this up today.

1 Like

Neither will work for React Native as is, since RN doesn’t have a DOM. The main routers are Navigator and NavigatorIOS.

NavigatorIOS will give you that silky great looking transition and works for simple cases but has been nothing but a hassle for me. It’s also not supported by FB as they don’t use it in their software.

Navigator is running in JS so it can be used on both platforms. It used to be very poorly documented but is now fairly readable. I’m switching to this for the Android app and future iOS.

There are also a few abstractions on Navigator called Ex-Navigator and react-native-router-flux.

Ex-Navigator is very flexible but still needs a lot of boilerplate code (though less than vanilla Navigator.

react-native-router-flux is based on Ex-Navigator but abstracts it into something that looks like React-Router (using nested components) and it also uses simple functions to trigger a new route and plays well with any flux library (in fact it works without any flux installed).
This is the one i’m choosing moving forward. It seems to have the most promise and finally has a more ‘web centric’ router. It also plays well with nested routers if that’s needed.

Hope this helps save someone several hours (or days!)

13 Likes

I’d like to second that an integration with Meteor is trivial and an unnecessary project for MDG to pursue.

I would even say that it’s been more enjoyable for me to build a “Meteor” app with RN because I can iterate so much faster (their build tool is way faster) and I only touch Meteor server code once in a blue moon.

If you want Meteor’s account system to work you will need to look at some sample code that someone from Differential has created. Just Google it and you will find it. Oh wait @jitterbop already shared it.

1 Like

Yeah. For me the biggest issue before I start on this track is accounts. But the repo posted above has the solution.

I was wondering about Facebook and Google accounts with RN. Would it be a lot of work to get that working? Or has anyone already done it?

You can probably leverage some of the already-made oAuth packages that the RN community has put together already:

https://js.coach/react-native?search=facebook
https://js.coach/react-native?search=google
https://js.coach/react-native?search=twitter

@jitterbop

That blog post was published in September of last year, which, in JS time, means it is ancient :slightly_smiling:

But seriously, while those issues are still present, it’s getting easier. @spencercarli has started publishing a new set of posts (read the first one: Easily Connect React Native to a Meteor Server) that takes the same basic approach but it’s now a bit more streamlined and cleaner. There is a 2nd post on React Native authentication coming in the next few days.

Pretty sure there are efforts to get the Meteor client code working in RN, so that you can call Meteor.subscribe, Meteor.loginWithPassword, etc). This is the only one I’m aware of, but it looks like it hasn’t been updated in awhile :frowning:

@SkinnyGeek1010

Those RN router/navigators look really interesting.

6 Likes

Blog post is out: http://blog.differential.com/meteor-authentication-from-react-native/

The repo for it: https://github.com/spencercarli/meteor-react-native-authentication

Also this repo if it hasn’t yet been posted: https://github.com/spencercarli/meteor-todos-react-native

7 Likes

This is amazing. Thanks for sharing!