How We Built a Photo App For Jewelry With React Native

When you love your work, you don’t want to stop learning new things. It is always exciting and, at the same time, challenging to try new technologies.

Being already well-experienced with React in front-end development, the next logical step forward for us was to make friends with React Native (RN).

This relatively new, but quickly evolving technology couldn’t help attracting our attention. We were eager to add the project performed with RN to our portfolio, so it seemed that we were just waiting for the right time to jump on the train. And fate gave us this chance.

In this article, we would like to share our experience of creating an app with RN.

What is React Native?

If you follow tech news, you should be aware of cross-platform development. In one of our previous articles, we wrote about the pros and cons of Native vs Hybrid development, and only skimmed React Native as a new opponent to each of these approaches.

This technology was invented by Facebook in 2013 for internal purposes and, two years later, was announced open-source and available for a wide audience. In 2021, according to Statista, it was the most popular cross-platform mobile framework since 2019:

Statista

React Native allows users to create applications that are quick to develop (like hybrids) and, at the same time, as good in appearance and performance as native iOS and Android apps. With RN, you build mobile apps using only JavaScript that is rendered to a native platform code, and an end-user receives an app that actually runs in this native code. Such an approach makes the application look natively and allows it to run very fast.

There are such famous names as Facebook, Instagram, and Skype that are fully or partially written with RN for both iOS and Android platforms.

[Image by Facebook.github.io]

Why You Will Love React Native

React Native is a great technology that is our future in cross-platform development. What we love about RN is:

1. The JavaScript code is converted to the native platform language.

You simply write everything in JS and it is rendered to the iOS or Android code. About 85% of code can be shared across the platforms, and the code itself is more concise and maintainable, which makes changes quicker. This also leads to a higher quality of applications.

Some apps are now rewritten from native languages into React Native JavaScript, which allows for scaling up and maintaining the apps more quickly and easily.

2. A high percentage of React web app code can be reused.

If you already have a web app in React, it is easy to migrate it to the RN mobile app, escaping the necessity to create it from scratch.

3. No headache about screen dimensions.

It takes a lot of project time to draw UI for different screen sizes, especially if you deal with Android apps. To escape this headache, RN uses Flexbox technology for layout. This allows adapting the layout to all device screen sizes, saving a huge amount of time for development.

4. Fewer developers are needed. With the efforts of only one front-end developer, it is possible to build brilliant applications, almost indistinguishable from native iOS or Android apps. So, you don’t need to hire separate developers, for example, to build your own photo app for each platform. This can significantly save your budget.

Case Study: A Photo App In React Native

One day, we received a request to develop a photo application for a client in the jewelry industry, which seemed like the right opportunity to start our journey with RN.

To sell jewelry online, the seller needed to upload decent photos and videos that showed the items from different sides.

“67% of consumers pay high attention to image quality while making a purchase online. The quality of photos highly influences the conversion,” - BigCommerce reports

Usually, to create such images, sellers need an expensive professional camera, flashes, backgrounds, and a lot of editing efforts. The process of gif or panorama video creation would imply that you have to turn the item by yourself to shoot it from different sides and then edit the photos or video in a movie-making app.

[Image by Amazon]

Our client invented the solution for their business that allows them to make quality photos simply using a smartphone. The solution is composed of a turntable inside of a lightbox, paired with an application to take photos, videos, and gifs of jewelry automatically. They needed to develop a photo app for iPhone and Android devices.

The app includes the following features:

• photo-taking
• gif-making (in several modes)
• video shooting (360-degree, front/side view)
• camera effects
• gallery of images
• finding turntable devices via Bluetooth

A user puts a jewelry item on the turntable in the lightbox, connects to the turntable (via a mobile app on his smartphone or tablet), selects the shooting mode (photo, gif, or video), sets the parameters (exposure, zooming, focus), rotates the turntable to the necessary starting point and launches the app. The rotation mechanism is activated and, after the shoot is over, the image, gif, or video are saved to the image gallery.

[Image by Amazon]

The client wanted to have the app quickly delivered to the market while being as good as native apps. So, we chose to React Native as the most appropriate technology that allowed for the combination of these two conditions. Otherwise, we would have needed to create an Android photo app and a copy for iOS, which would have increased the price and terms of development.

Challenges with React Native

It took about three months to complete our project, most of which was spent on the pre-development period to study React Native peculiarities connected with the project and understand how to combat the development challenges.

1. Missing Components

RN uses ready-made native components but, as the technology is still raw, not all components are available. This was the biggest challenge on the “turntable” project, as there were no official components for camera and Bluetooth.

Thanks to the great RN community, after a scrupulous search on GitHub, we managed to find the appropriate and well-tested “react-native-camera” and “react-native-ble-plx” components that we enhanced to meet our requirements. By writing native Android and iOS code, we created a gif-making tool, flash-effect, Bluetooth mechanism, etc.

This actually took the biggest part of the project time. Thus, we proved the idea that RN can be combined with the native language code in case unique features are necessary.

2. Image Gallery Challenge

Another challenge that we bumped into was connected with a gallery of images for our app. The Android and iOS app galleries are similar in UI and behavior; however, the mechanism of how data is extracted from the platforms is different. To combat this challenge, we created a “fork” to explain how the camera component should behave on Android and iPhone.

Now the app runs perfectly and we received a valuable experience that allowed us to come to our personal conclusions and get insights about RN. This project was an exciting experience!

How to Apply This to Your Business

React Native is a quickly maturing technology that allows benefiting from the perfect formula: quick development with good quality for less money.

It will fit your project if you need:

• to design a custom app from scratch for multiple mobile platforms
• migration from a ready React web app to mobile
• to quickly test a startup idea on the market
• a combination of RN and iOS/Android platform languages in one app.

Why Hire a React Native Developer?

1. You get a highly efficient application with great native UI and performance, almost as good as the native ones.
2. You need only one developer who will write one code base that will be rendered to multiple mobile platforms.
3. Instead of waiting for years, in the case of native development, you may get your app ready in a couple of months.
4. You don’t need to hire expensive iOS and Android developers.
5. You can quickly get your existing React web app migrated to the RN mobile app.

Co-author: Alexander Kotov, Frontend Developer at Greenice.net. Alexander works with such technologies as Native JS, jQuery, React, and Redux and has recently become a great admirer of React Native.