Any tutorials or blog posts on using ReactNative with Meteor?

I am thinking about switching my Cordova based apps to React Native, to improve the user experience. Are there any good tutorials or blog posts out there with best practices with this combination?

3 Likes

Yes, a bunch: https://medium.com/@spencer_carli
Spencer has a few courses on it that look good, as well: http://learn.handlebarlabs.com/

In my experience using RN is night-and-day better than Cordova, both with performance and developer experience. The number of crazy bugs I ran into with Cordova…

I also highly recommend using expo.io, it simplifies develoment even more so you don’t have to use xcode or android studio, which are the worst parts of developing with react native.

7 Likes

Use expo + apollo that connects to a meteor back-end.

Or expo + react-native-meteor.

Either way, you’ll love using expo to build your react-native app. It’s amazing. Here’s a good course:

4 Likes

@buishi and @a.com: Thanks a lot for that input. Never heard of expo.io before. Sounds promising!

It’s probably the greatest piece of tech I’ve seen this year. Easily.

4 Likes

I was looking at building a mobile app with Meteor just the other day. I’ve been using Blaze all this time and have yet to build a production ready React app.

I started looking at Cordova, but of course there’s a lot of noise around React Native. What’s been your experiance with Cordova? What are the main issues drawing you to React Native?

With your Cordova mobile app, did you build a complete stand alone Meteor application dedicated to the mobile application? Do you have a Meteor application your communicating with too? What are you using from Mobile client to Meteor server – DDP/Web Service?

1 Like

What? :open_mouth: You have to use xcode to build a RN application if not using expo.io?

What is, RN or expo.io?

I purchased this course a week or so back in, to research options for building a Mobile application with Meteor. Does this course include expo.io? This course does not have the Meteor integration unfortunately.

He has two react-native courses, if it’s the more recent one, then it includes expo.

Expo has upgraded recently. The biggest difference is the exp.json (kind of the settings file for your expo projects config) file is now inside of app.json (which is the more “standard” place for configuration in a create-react-native-app).

Expo typically has an upgrade guide in their blog posts:

That larger change happened in v18, I think the course is either v16 or v15? Not sure if the course was updated or not:

Also, join the expo slack channel-- they’re super helpful and can probably help you get by any issues in the course material.

The other big update is react-navigation (used in the course). The options object that you pass in to configure a route is slightly different, but if you check out both the course Q & A forum and also the react-navigation docs, you shouldn’t get too hung up there. It’s not major, some settings that used to be nested objects like

header: {
 visible: false
}

are now a single property

headerVisible: false

and things like that… hope that helps.

As for using Meteor, I have a Meteor back-end with graphql. Then my webapps and react-native apps connect with apollo-client. But if you want pure meteor, you should be able to use the “react-native-meteor” package or maybe the “meteor-client-bundle” (I think is the name). Spencer C. has a lot of blog posts on using meteor with react-native, so once you get the hang of basic expo + react-native, figuring out how to use meteor shouldn’t be a major undertaking. You basically point your rn app to the websocket route. The only downside is I never figured out how to run meteor locally and have expo hit the app… I always pushed it to galaxy and had the app pointed to that URL. There is probably a way to hit your app locally though.

Expo. It (90%+) eliminates dealing with xcode and android studio. It gives you hot reloading on a live device (wireless too, so you can just give a client the development URL and they can literally the same local version you’re running). You can easily publish a permanent link and share that with somebody to test things out (and push updates as needed). It helps with building your files to upload to app stores. It helps handle push notifications. It has an awesome library to tap into native modules super easily. It gives you some really nice console logging interface and error logging. It’s basically how developing react-native apps should be.

Really the only downside is if your use case isn’t covered by their native library. But you can always eject to a normal react-native app, so there doesn’t seem to be any major downside. They’re constantly adding new native modules to the lib (typically with one API for both android and iOS). They use a voting system on which features to add next, so you can even provide feedback and discussion there…

TLDR: It’s amazing.

4 Likes

I completly agree! You should definitly have a look at Expo if you use React Native.

2 Likes

Hi, I found this really helpful : https://themeteorchef.com/tutorials/how-to-build-a-react-native-app-with-meteor

3 Likes

I’m stoked, expo looks amazing @a.com. I’m looking to take the expo + react-native-meteor path. Do you still think this course is worth while (since it doesn’t cover Meteor)?

Is there anything I can watch/read that’s current, and uses expo+react-native-meteor specifically?

Nice article comparing react-native-meteor and meteor-client-bundler. Looks like he has a course on Meteor + React Native – but don’t see expo. Also has a slack channel.

I think the most important question here is: “How much reactivity do I actually need”. Bc if you find that the answer is “very little” then why bother with meteor on the client at all?

2 Likes

I am quite used to Meteor’s Minimongo. What would be the alternatives to store local data in collection-like way?

We use redux. But you can also simply fetch your data in componentDidMount and keep it in the component’s state. Nothing wrong with that. No matter where you fetch/keep your data, the alternative to minimongo is plain js arrays/objects.

I use apollo+meteor to build a webapp (most react-native apps will need a back-end and accounts). Then I use expo + react-native + apollo to build a react-native app that connects to the meteor back-end.

expo actually uses apollo for their app:

I do miss minimongo sometimes and subscriptions require a few extra steps. But overall I like graphql and apollo-client. I get a ton of re-use between the webapp and it’s react-native version.

Then I use redux for “ui state”, then I keep any data coming from the back-end in apollo store.

1 Like

I would just use the Q&A section of that course, most issues you run into will be solved in there.

Otherwise, check out expo blog posts about upgrades:

The big difference is exp.json is now inside app.json

Otherwise, you use react-navigation in that course, and that has some minor updates too. Just keep and eye onthe Q&A section, and also check out react-navigation docs and issues. The differences are relatively minor and deal with names of properties for options you pass routers.

I would just take that course, then when you’re done look into connecting Meteor. Connecting react-native-meteor to an expo app is no different than connecting to a vanilla react-native app. But I’d tackle it one at a time, take the course, then read up on spencers posts, check out spencers boilerplate, and you should be good to go. I typically have two repos, one is the react-native app and the other is a meteor app. React-native-meteor will take a URL for the meteorapp. So you just host the meteor app somewhere, then feed your react-native app that URL, and they talk to eachother just like the browser would (albeit react-native-meteor has some syntax differences).

I’m pretty sure expo (or something like it) will be the future.

The only bummer about react-native is there doesn’t seem to be a truly solid UI library with everything you need (there is no antd or semantic-ui).

and ask stephen to do more react-native content! I’m hoping he does another advanced course with expo

1 Like