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.

A JavaScript-based framework that can do this sounds pretty exciting, as it opens many new frontiers for front-end developers! Also, React Native is a multi platform framework which is another killer feature. Cross platform engines, frameworks and languages is kinda like big trend lately: Unity, WebAssembly… now it’s React Native. It seems like everyone wants to be versatile these days.

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!

Hi guys!

Hello!

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?

A: Yes. The idea to develop an app for two or even three platforms was in the air for a while. We discussed it within the company multiple times. When Michael came to our Spanish office, it seemed like the right moment to move forward with making it real. He knows JavaScript and React really well and here is a mobile developer (me) sitting right beside him. Besides, many customers want their projects on React Native now. It’s like being at right place and at right time.

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?

M: Tons of pros. The major advantage of React Native app development is the ability to write Android and iOS apps for people who know JavaScript. And there are a lot of JS-heads around the world! There were some predecessors of React Native, who also tried to achieve this goal. But they (the majority of them) ended up using WebView and HTML-elements, which had a major performance problem. React Native app is based on the native components and this makes it closer to a native mobile app.

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.

M: By the way, as you mentioned npm — there are many JavaScript libraries created by its huge community which you can use to build React Native apps.

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:

  • allows sharing JavaScript code between both Android and iOS apps almost without losing native UI experience;
  • 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!