Creating Company name search app with React Native
TL;DR; I have created a Company name search app using React Native in just 3 days. I loved the React component composition and CSS-like styling. You can download it here for free.
Beginning
I have a great chunk of experience working with web technologies, both front-end and back-end. However, I have been eyeing mobile app development for the past four years.
I have created various mobile apps for my experiments with Arduino (an open-source electronics platform). For example, I produced both a smart house control app for iOS, as well as a DIY RC car controller with accelerometer for Android. I really enjoyed the process while making them, but I really missed goodies from web development and the workflows I was used to. A lot of things seemed over-complicated, such as layout creation and text styling.
I have received quite a few recommendations to try PhoneGap/Cordova, but I was never a fan of apps living in the web views. I could usually tell the difference between native apps and apps created with web technologies, which mimic native behavior.
I was incredibly excited when I watched React.js Conf recording about React Native. The React Native way of doing things simply seemed very natural to me. I loved the idea that you could write your app code in Javascript while still enjoying the benefits of native components and having a great performance.
App idea
First and foremost, a little background information: I work for an awesome company called Formations Factory. We provide the best rated company formation services in the UK ,and we incorporate 36,000 new companies each year.
Quite recently we got the idea to create a company name search app. This app needed to perform only one function and do it well — check if a company name is available for registration in the UK. We have direct access to Companies House, so we can search through its entire directory of live companies to provide users with the most accurate possible results.
I volunteered to create this app and suggested to use React Native. From my research, it seemed like a best way to build a great app using a short period of time. Also, I was reading about React Native quite a lot recently, and so I was eager to try it out.
The process
The process of making this app was very straightforward. Our app development consisted of four short stages: prototyping, design, development and testing. It only took us three days to produce the application, and seven more days to get our app reviewed by Apple and published in the App Store. Here’s what the finished app looks like:
The good
Flexbox and styling
I never enjoyed building mobile user interfaces in my previous experiences with Android and iOS. It used to take ages to get decent results. Yet when I tried building layouts with React Native, I was stunned. It was so much better than building layouts in xCode or Android Studio. Flexbox makes it so easy to build the most common UI components, such as stacked and nested boxes with margin and padding. Also, text styling was so much simpler compared to iOS’s NSAttributedString. To be honest, in the beginning it was difficult to think “in flexbox”; but after a few tutorials and reading the flexbox documentation, I was able to implement almost any layout one could think of.
Hot code reload
This is one of my favourite features here. I was used to apps recompilation step while doing iOS and Android development. It was mostly okay, but from time to time it was slow and I was annoyed because I was used to hot code reload in web development. In React Native, your new input position or updated font size is just Cmd+S away, which is a huge productivity boost.
Code reuse
I managed to reuse the business logic from our company incorporation form, and it saved me a few hours. There is a lot of buzz surrounding how it’s possible to share app code in React Native between iOS and Android, but I could not find anything about code sharing between mobile apps and web apps.
In complex, multi-platform projects, code reuse between mobile and web apps could save a lot of money and time. Nobody wants to rewrite the same business logic or API clients from app to app.
The bad
While using React Native I came across only one bad thing: the lack of CSS media queries equivalent or size classes in the iOS auto layout. It is difficult to use the same style rules for both phone and tablet devices and get a good result. Our company name search app design was really font size sensitive. For example, we could not retain same font size values in iPhone 4S as we had in iPhone 6S. My quick solution to this problem was to check on which device the app runs and modify certain styling rules accordingly. It worked really well in our situation, but I am not sure if this is a best way to solve this problem.
Conclusion
The “react way” of doing things proved to be the easiest way to create apps so far. I believe it is a future of mobile app development. Sure, there will always be some things that are better made with Swift/Obj-C or Java, but for many cases React Native will be good enough — at least for me it was.
