Has anyone tried this?
I can’t tell, but it seems like it might be somewhat new. I’m curious to find out how well it works. It looks ok, but can it compete with Ionic? If it can, I think React might be more appropirate for hybrid apps that are meant to behave like native apps, than Angular is.
I’ve played with it a bit and it seems to work well. It’s prob on par with ionic. I haven’t used it in a project and usually you can’t tell how bad it is until your 80% done. The small or less complex the app is the better it will feel and the easier to develop.
You can also save the demo app to your home screen and try it out.
It’s hard for me to compare it with ionic as I’ve only used ionic on android which always feels different with scrolling.
However React Native is 10x easier to work with and being native is pretty fast out of the box
Integrating this “Reapp” will be in the same way like we already do with React?
Yep! It would work like any other React app. However there’s a small catch when using their docs… you’ll have to expose all the required modules in the Browserify config since Meteor doesn’t have ES6 modules yet.
An alternative to exposing globals would be to use something like meteor-webpack-react that bypasses the Meteor build system and uses ES6 modules and basically drops a bundle in the meteor client/server folders (though this is for advanced usage)
You’ll also want to use their reapp-ui since you won’t be using their build tool or cordova builder (presumably)
Good point. You could make the case, though, that mobile apps of the type that would use something like Ionic or Reapp should be simple, single-purpose apps.
Oh. I may have been mislead by the name, then. I thought React Native was something you interfaced with from Objective-C or Swift. If that’s not the case, how does it fit into the stack?
So it’s kind of both. The app has a JavaScript runtime and you never have to touch Objective-C or Java (on Android) unless you’re making a library that uses native code. In this regard it’s similar to Cordova were you’re always working in JavaScript. It’s not using HTML but uses CSS flexbox and <View>'s instead of <div>'s and <Text> instead of <span>'s.
However it’s not running NodeJS so if any libs depend on the browser you either have to pollyfill them or it won’t work. This means that taking the Meteor client bundle code and dropping it in React Native works until it hits an un-pollyfilled method. This is a bummer and is something that’s being worked on by a few people. The last time I checked the on ready event listeners were the first thing that threw.
You can also use DDP methods by using the NodeJS DDP adapter. However this is a little un-ruly. If you need realtime data today, then it’s worth the hassle and ugle code. You’ll still get realtime updates.
However for my app there didn’t need to be realtime and I was already using Flux so I setup a REST API with custom endpoints that pretty much mirrored the publications. When it becomes feasible to use the Meteor client it will be an easy swap on the app. There’s even a nice package that exposes a REST API for each collection and supports basic auth.
For my app the increased productivity over Cordova and the increased performance outweighed the inconvenience of not subscribing to realtime data.
By <View> and <Text>, do you mean it uses another SGML-based spec, like JSX?
I’m sorry I’m not getting it yet; I’ve never built a native mobile app, so I don’t know much about that. So if it’s not running in a NodeJS container and doesn’t use Cordova, what is it running in/on? I guess what I mean is, what is the middleware between it and iOS or Android? Or is that what React-Native is – a cross-platform runtime for building hybrid apps with React.js?
Thanks for being so patient. I have endless questions.
Ah so this is prob. a great video to watch. It explains the differences 
https://www.youtube.com/watch?v=KVZ-P-ZI6W4
By and , do you mean it uses another SGML-based spec, like JSX?
They’re just React components. Under the covers it uses the iOS or Android way of making a box. Then you can use flexbox to style it. From the developers point the <View>. if you wanted to do the same in the browser (I don’t know why, maybe to share components) you could do this:
<View>
<div>
{this.children}
</div>
</View>
And then you could literally drop any React Native views into a web browser! This is just an example, you really wouldn’t do this unless you needed to share them with a browser app for some reason.
React Native is also ‘learn once, write many’ instead of Cordova’s ‘write once’ strategy. I learned React first and could switch to React-Native with 1 day of overview! Try that with native!
Hi there! I know it is a while ago, but this is still an issue it seems. I like to follow the Browserify path. Can you please explain in a bit more detail how you can expose all the required modules in the Browserify config, as you state above?
Not sure, I no longer use Browserify and I think it’s different in 1.2. Also someone else tried to get reapp running with it and failed (another post somewhere). The only way to use it cleanly is to use one of the webpack options… the kickerstarter one may be the easiest.
Thanks for the speedy reply! I’ll give it a try with webpack then. Do you mean this with the kickstarter https://github.com/thereactivestack/kickstart-simple?
What do you currently use for mobile apps? MDG is moving away from Blaze, which means that Meteor-Ionic is no longer maintained, but they don’t offer an alternative for React as far as I can see.
Yep that’s the one. Jedwards has one too but it takes an approach of being completely decoupled, where as the kickstart one is very integrated into the Meteor build tool. (I use the jedwards one myself).
I’m using React Native with a Meteor backend but as far as Cordova I would say Reapp is the best bet. It’s maintained by the JS community and not a few people (like Meteor Ionic).
As a bonus you’ll also get ES6 modules so whenever MDG finally switches to Webpack and ES6 modules (1.3?) then your migration will be trivial (perhaps some import differences). It’ll be much easier to get to the vast array of React components as well (like http:react.parts)
Awesome, I’ll give it a try!
Just FYI, I’ve got it working with webpack now: https://github.com/pors/meteor-reapp
Thanks for pointing me in the right direction.
Awesome! How do you like ES6 modules so far? That’s my fav. feature 
Yeah I love it. Nice and clean. I normally hack in Python and it has the same feel to it.
Hi @SkinnyGeek1010 i’m banging my head against the wall trying to use ‘require’ to expose global reapp-ui exports in meteor browserify config but can’t get it to work. Do you have a working implementation of meteor + reapp using this method I could see, or any advice? I’ve used this method for other npm packages like react-bootstrap before.
I use React Native for mobile apps but you most likely want to try out the latest 1.3 beta for reapp. I think you’ll have less overall pain doing this way (ideally when 1.3 is out that would be best but it should be far enough along to start building).
It seems Reapp is dying, I started building an alternative: https://github.com/pors/reactionic/. Demo is here: http://pors.github.io/reactionic/#demo
If anyone would like to help out, that would be awesome! @SkinnyGeek1010 maybe? 
I think the reason that Reapp is dying is because React Native is so much more of a compelling alternative. RN does everything Reapp does but better.
Cool project, keep up the good work! For me using Angular was the largest pain with Ionic.