Army of Two, or How We Developed Memoryzer App on React Native
Originally published on the Anadea blog: Army of Two, or How We Developed Memoryzer App on React Native.
Guess what happens if we put a mobile developer, front-end developer and React Native together? The answer is Memoryzer project! That’s a simple iOS and Android game for memory training. What makes it interesting is using React Native as the foundation of the whole application.
I got a chance to talk with the Memoryzer team: Artem Dubrov, an Android developer, and Michael Tsypkin, a front-end engineer. Let’s learn about their experience with building this React Native Android and iOS app!
Please tell me a bit about your recent collaboration.
M: Well, we had some free time and decided…
A: You should say, “We had some free time and our boss decided that we decided!” (laughs) Now let’s put jokes aside. The actual idea is pretty old: we wanted to see how one person can develop an application for both iOS and Android. Michael and I wanted to try out a couple of technologies, such as React Native, Native Script and Xamarin. We read about all three tools and decided to stick with React Native.
So, Memoryzer is a multi platform app, right?
M: We started with a single code for both versions. There are separate modules for running iOS or Android app, but we made it launch from one file. All application logic and rendering were written on JS in one place for all versions and this file contains everything, which means that everything is identical in both iOS and Android. A few details and adjustments are required for bringing an app for a current platform, but everything else is made like it’s made on React. You can’t really tell the difference from web app.
What’s the pros of React Native?
A: From my point of view, the main profit is the speed of development. Surely, React Native is a front-end dev’s thing. Redux, patterns and other familiar front-end elements are here. As for Android developers, they definitely need some time to adapt, to look at syntax, npm libraries and stuff like that.
What is React Native good for?
A: Well, from Android point of view, you’ll have to do a lot if you want to develop something huge and serious. You’ll have to understand how redux works, how to adjust activities, turnarounds and all that stuff. It’ll take some time BUT! If your task is to build a simple prototype for both platforms, upload it to app stores and see user feedback, React Native is the fastest way to do it. So if you have a front-end developer and mobile developer, take React Native and go ahead!
M: Yeah, I think that mobile engineers play a support role here, React Native is best for JS guys. We would recommend using it for simple applications, like a mobile version of website, for weather, news, etc. Instagram is a good example of the app created with React Native. It works well for applications with rich business logic but without complex graphics and other specific tasks. For example, it could be banking, social networking, chatting apps. They may have a lot of forms, lists and controls but don’t have complex graphics, calculations or many platform specific features. And it’s also good for quick prototyping — when we want to test our idea on different platforms within a minimal budget.
Can we use one design for both iOS and Android versions of React Native app?
A: You can. It’ll render your custom design images with imageview, but it will also bring native iOS or Android elements.
M: React Native lets you use native components of both platforms with a single piece of code and it also allows using one design for all versions with a single piece of code as well. So if you need different native-looking components of the platform, you can do that. If you need identical design for all versions, you can create one and use it, just like we did in Memoryzer. By the way, the app is already available on Google Play. Try it out!
So, React Native:
- gives the possibility to run one application on both platforms almost without losing native UI experience.
It’s good for making simple applications (which makes hybrid apps useless) and fast prototyping. If that is what you’ve been looking for — go ahead and give React Native a try!
Thanks for reading and stay tuned to Anadea blog for more exciting app development stories and IT news from all around the world!