🚀 What is React Native?
📱 React Native vs Native Development: What’s the Difference for Your Startup?
🛠 The 18 Most Helpful React Native Tools: an Ultimate List for your Team
👨💻 React Native Developers: Where to Find & How to Choose?
💰 How Much Does It Cost to Build a React Native App?
React Native is a huge trend these days. More and more companies are using it to deliver Mobile Products to their customers. Some important guy at some important conference has said that React Native is...
Instead of making this guide just like every other article on the Internet about React Native, we tried to turn it into a 101% useful and really enjoyable handbook for Startups who are just getting started with this technology.
To be honest, we aren’t promising you that after reading this guide you’ll become a React Native guru — this wasn’t our aim. And actually, you don’t need to be. However, we do know that one of the most important things for Startups is not to lose momentum. Choosing the right tech stack for your Product may give you an advantage in the TTM speed or development efficiency.
So at the end of the day, we expect this manual to become a comprehensive why-, when-, how-to-guide for Startup-Teams who are looking for the best Technical Foundation for their product and consider React Native.
Let's figure out whether React Native is a good choice for your Startup (image by Gytis Jonaitis)
Note: if you’re interested in particular sections of this guide, use the content bar at the top of the page for navigation.
Let’s start our journey by looking at what React Native actually is.
Let’s start with the basics:
This is the most common, basic and simple definition of React Native.
What is a framework? It’s a collection of libraries, APIs, toolsets and patterns that make app development easier (and actually even possible in the first place). To put it simply, think of it as a set of methods or rules that provide pre-prepared logic and structure for the mobile application.
React Native is a JS-based framework (image by Maxime Bourgeois)
Unlike other frameworks for cross-platform development, React Native relies on native views which means that at the end you actually get 2 native-like apps. When it comes to UI and platform-specific features, JS is used to write a kind of instructions that are executed by the native views.
This is a huge step forward comparing with HTML-builders like Ionic and Cordova that replace the native app with WebViews and work as a browser inside the app. As you may guess, it leads to poor performance and doesn't provide users with a native feel.
React Native was developed and launched by the Facebook Team in 2015. Not sure they expected to turn the world of mobile development upside down or at least shake it goodly. However, the dynamic of React Native’s popularity speaks for itself:
Quite an impressive growth for something that started as Facebook’s internal hackathon project, isn’t it? Going up like SpaceX’s rockets!
React Native idea was developed out of another Facebook’s innovation - React (a.k.a. ReactJS or React.js). This is a JS framework for creating web user interfaces. It was introduced in 2013, two years before its younger mobile brother was announced.
Actually, the whole concept of React Native was greatly influenced by Facebook’s experience with web development, which they wanted to bring to mobile development as well. You’ll definitely notice this web-mobile interconnection as we’ll be moving down this article.
Some of the native development issues that guys tried to overcome were:
Working with the mobile environment, developers often have to manually define the position and size of all views. For web coders laying things out on the screen is easier.
Managing code changes is also a more time-consuming task for mobile teams. It takes a few moments in the web environment - save new files, reload the browser and you’re all set. Mobile engineers, on the contrary, have to recompile the code even if they’ve just moved a “Hello, <Name>!” text a few pixels right. When working with a large codebase, this may be quite a burden.
Releases are much easier in RN thanks to “Hot Reload” or the so-called Code-Push. At Facebook, they’ve used to update the website twice a day to test new features. Mobile developers face Google and Apple App Stores’ review processes that usually take a few days. And it also goes without saying that many users don’t install updates on the day they were released, so it extends your user testing timeline even more.
The list can go on but these were some of the most crucial differences in web/mobile development for the Facebook Team.
The idea behind React Native was to combine the Experience with Web Development and the User Experience of the Native Mobile Platforms.
How does React Native feel in 2019, 4 years after the launch? Great!
If Google Trends stats wasn’t enough for you, look at its Github progress:
The 14th most starred repository
The 7th most starred repository
~8000 commits in 45 branches
~17,500 commits in 87 branches
Key takeaways of the paragraph:
The native approach is often considered as the most proven, even “classic” way to build mobile applications. For many years it was true - all the alternative development options (like hybrid app development using WebViews) had significant disadvantages if talking about performance.
With React Native it’s possible to achieve native performance but reduce development costs and time. However, if React Native was better than Native in every single moment it would probably become the main way to create mobile applications. Yet, it hasn’t happened so far.
Why? Let’s compare those approaches and find out!
Obviously, the React Native ecosystem isn’t as big as the Native one. What does it mean in practice? For example, React Native developers may be not able to use some third-party components (like APIs and libraries) that are available only in the native environment.
The same is true for the new native devices’ features (remember the introduction of FaceID, for example). While for native iOS/Android developers they are available right away, React Native teams need to wait more time while this functionality will become available for Facebook’s framework as well.
Face ID was such a feature at first but now you can easily implement it in RN (image by Natty Blissful)
However, if your Product relies on third-party components and native features that aren't officially available in React Native now, it's still possible to use them. To do this, developers will have to write special modules, so-called “bridges” in native languages - Java/Kotlin or Swift. After that, both JS and native code will be able to communicate and work together.
React Native is an undoubtful winner in this category since native developers can build apps solely for their platform. So if you want to build native iOS and Android apps, even if they’re identical in everything from features to UI, think of it as of two separate projects. It means you will have to hire/build 2 teams of developers that will build from scratch and maintain 2 native codebases.
On the contrary, React Native is a well-known cross-platform development Monster.
Cross-platform development seems like a tempting perspective for Startups at the pre-MVP Stage who want to deploy their MVP to both platforms. Usually, young teams have limited resources and have to choose between iOS and Android to test their Product. Yet, with React Native you can cover both platforms without running out of funding too early.
React Native is a true king of cross-platform development (image by Caroline Smith)
Moreover, even if you prefer to develop an app for one platform at first, React Native can play its role a bit later when you decide to scale your Product.
If you’re planning to rely on platform-specific design elements (like buttons, animations, navigation patterns, date pickers etc.), native development is just for that. Native Android/iOS communities just have a bigger number of relevant libraries.
Is it a disadvantage of RN? In case you need to access these very specific libraries - probably, yes. However, it's difficult to come up with a real-life case when you must use a particular library and can’t choose out of other UI libraries which React Native is full of.
Sometimes you may also read that the development of complicated UI elements (like animations) is more difficult and time-consuming for RN coders. Our short answer to this: it may be true sometimes but isn’t necessarily so. When working on one of our projects, it seemed even easier to implement the animation using React Native than in the native environment.
Examples of React Native UI elements (image from the React Native Elements website)
Thus, the React Native framework is especially great for MVP development since they don't usually include any complicated UI patterns or elements.
Moreover, since React Native uses the same building blocks as native applications, it usually offers equivalent experience when it comes to UI. In most cases, you may expect native or almost native feel.
Also, RN is a good choice if you need your application to look similar on iOS and Android. While it will be a tricky task for native developers, a React Native Team can more easily keep the same design consistency between both platforms.
Who's the winner from the development perspective? React Native, again!
To put it short, here’s the main difference when it comes to UI development:
As a result, RN Teams write less and simpler code, making the end Product easier to maintain.
The performance is the most crucial thing for any technology.
Moreover, rewriting the existing app or its parts in React Native may even make them work faster! Here’s the example:
💬 Facebook App Case Study
By the time React Native was introduced, the company already had native applications for both iOS and Android. However, they’ve decided to rewrite some parts of the apps and it worked out well!
What are the possible pitfalls of React Native from the development perspective and how to deal with them? Here are a few tips from our experience:
You should be twice careful than a native developer when you work with this framework. Here it’s easier to miss some mistakes that will make the app slower or even freeze.
Yet, if you do everything right, that shouldn’t be a problem.
Moreover, such mistakes are almost unnoticeable for light apps but as the size of an app grows it may become a real pain point. Which leads us to the next pitfall.
React Native vs Native App Development Comparison
As we’ve mentioned, React Native relies on third-party libraries, APIs and native UI components. While they facilitate the development, using too many of such elements can make the app quite heavy.
When you develop a React Native application, a native app will act as a wrapper. Thus, your RN app will consist of the native app itself + the React Native engine that runs the JS code.
So the logic of React Native itself means that it can’t weight less than an identical native application.
What’s to be done?
You may also check this case on reducing React Native app size by 86%.
Thus, navigation between screens is usually added to this sequence when it already contains other tasks. To show an animation, such a process should be done:
User makes an action on the native side ➡️ the request is sent to the React Native side ➡️ here it’s translated into a “do this”-kind of instruction and sent back ➡️ the action itself is performed at the native side.
This is the reason why RN apps sometimes may suffer delays, especially when it comes to animations and navigation between screens.
What’s to be done? Check this post for some solutions!
The possible issue with lists is just the same as with navigation: list scrolling event goes back and forth through the bridge. So adding too many items on a single list and quickly scrolling it is a proven recipe to face performance delays.
We dedicated a special paragraph to Updates because this process is quite different for Native and React Native apps.
To update the application, even if it just means moving a button a few pixels to the left, native developers should recompile the whole app. It takes time. And the more complicated app is, the more time your developers will need.
Moreover, before the new version of the application appears on Apple’s or Google’s App Store, it goes through the review process so the company makes sure your app doesn’t violate their inner rules. It may take up to several days.
And that’s not all! After you get approved and the new version is finally available, for many users it will take a few more days to download it. Just because they just didn’t see it or don’t install updates right away, for example.
CodePush updates in React Native apps
When it comes to React Native, one of the best things about it is over-the-air updates. When developers make any changes to the JS code, they’re immediately shown to users upon the next launch of the app. Just like it works with websites.
It makes React Native framework perfect for A/B testing, not to mention that you can quickly fix bugs so users won’t even notice it.
Just imagine: you find a bug a few hours before the pitch to investors. With React Native you can fix it right away!
However, if your dev-team changed something in the native code, it will still have to go through the usual “native” review process.
🗞 Bloomberg App Case Study
Bloomberg decided to switch to React Native when the technology was just one year old.
Let’s briefly sum up the key takeaways of this paragraph:
React Native Development
Native apps usually work a bit faster but in most cases the difference will be insignificant to your users so they won’t even notice it.
Despite React Native have great overall performance, it's easier here to miss some mistakes that will make the app work slower. Also, RN applications are a bit heavier than their direct Native analogs.
If you stick to native development, there is no way you can build a single app and run it on both iOS and Android. Each platform requires a separate product (= a separate team that will develop and support it).
React Native is perfect for cross-platform development since it allows reusing up to 70-80% of code for both platforms without losing a point in the performance.
Third-party libraries and components
If you stick to the native app development, it’s easy to work with third-party components and native devices’ features.
Not all of the APIs and libraries are available for React Native. However, you still can implement any you need but it will require coding a native module with Java or Swift.
Releasing a new version of the app may be quite a headache. For every change, you should recompile the app and go through Google’s/Apple’s App Store review process which may take up to a few days. After that, your users can download the new version of the app but many of them will do it later.
Due to the over-the-air updates, you can change the JS part of your app right away, just like it works with websites. It makes React Native a way better technology for A/B testing and bug fixing, as well as reduces the time of delivering the new version of the app to users from days to minutes.
There are more UI libraries in the native environment. However, it's more difficult and time-consuming to develop user interfaces since native development implements the imperative approach to programming.
React Native has enough UI libraries to build great UIs. Moreover, it relies on the declarative programming approach so RN Teams write less and simpler code which is good for your Product.
If you’re quite new to React Native (or plan to switch your Web Team to this framework), this list can save you a lot of time. Here we gathered all key technologies that help us:
🎶 SoundCloud App Case Study
SoundCloud’s story is a great example of how fast React Native can be.
Another great thing about this list is that here we’re sharing our first-hand experience. These tools have been in our development toolbox for a while so we picked only the ones that worked well for us. Enjoy!
🔎 Inspect code, prevent & fix bugs
Typescript | Flow
ESLint | TSLint
These tools help to deal with the lack of type system in JS. Despite they’re a bit different (Typescript is a typed superset of JS and Flow - a static type checker), both are used for catching type errors and quick fixes.
Reactotron is a desktop application that inspects React Native apps. It can monitor such things as application states, unexpected error events, API requests and responses, etc.
The next group of tools will be helpful if you want to facilitate React Native development and deliver an outstanding Product even faster:
🚀 Faster implementation
This is a boilerplate generator to create project templates. Works with themes, API testing, components and usage examples.
Helps to implement navigation patterns and elements out of the box. Of course, the tool supports tab bars, stack & drawer navigation, deep linking.
NativeBase | React Native Elements | React Native Paper
A tool used to transform SVGs into react-native-svg components.
Interchangeable UI toolkits that provide you with generic interface components.
These are specific tools that provide exclusive benefits for Startups and Businesses that have chosen RN as a core technology for their Project:
⚙️ React Native’s special tools
Redux, Redux Saga, Deox
This is a free toolchain that introduces its own ecosystem for React Native app development. For example, it provides access to some native APIs, offers a number of UI components and enables over-the-air updates.
This group of tools is needed to facilitate the development of user interfaces. While Redux works as a state container, Redux Saga helps to deal with asynchronous actions. With Deox, the maintenance of this architecture becomes easier.
Visual Studio Code | Atom
Two convenient code editors for React Native development with extra functionality like Github integration and smart autocompletion.
Microsoft’s cloud service for instant app updates. They avoid App Stores’ review processes and are deployed directly to users’ devices.
More info and links can be found in this article:
18 Essential Tools For React Native Development
But what if you’re looking for someone who is already familiar with these technologies and can build a React Native application for your Business or Startup? Where to find one? This is the question we’re going to answer in the next paragraph!
Now as you know what React Native is and how it can be useful for your project, your next question may be “Where can I find rockstar React Native Developers for my Project?”. Who may you look for?
These were just some examples of possible cases.
How to find a Rockstar RN Team? Let's find out! (image by Farhan Fauzan)
If we narrow down the search process to a few specific steps, here they are:
Here are some tips that can help you at each stage!
Let’s start with the idea that there’s no one “correct” answer. Each option is possible in specific cases. What are they? Let’s find out.
Freelancers are good for executing small non-recurring short-term projects. Let’s say that deadlines are on fire and you need to implement a specific SDK that is important for solving the Problem of the customers. Your team is busy handling other critical tasks and simply has no time to build its own expertise on this matter. In such a situation, a freelancer with relevant experience may be an option.
This may also be true for QA, fixing small bugs, updating the UI or building its specific components, etc.
Here’s main benefits and possible pitfalls when working with a freelancer:
In-House Team is needed for Businesses and Startups that are built around the Web or Mobile App. Moreover, the product should be complicated enough to make it reasonable to have an own In-House Team to develop and support it.
Uber, Airbnb and Instagram are great examples of companies that needed In-House Teams for their products, as for them the App is their Core Business.
On the contrary, if you’re developing an app for your offline business, the In-House team may be just unnecessary. For example, let’s imagine that you own a hotel, a real estate agency, a yoga studio or whatever. Then you may need a Mobile or Web App for marketing purposes or to improve customers’ experience and keep in touch with them. In this case, the scope of work isn’t that big to hire a separate full-time In-House Team.
In-House Team may be a good option but consider it really carefully (image by Ben Lueders)
Already have the In-House Team that supports your website? We’ve got some good news for you!
Your Web Team (or its part) can switch to mobile development without learning native mobile languages like Swift or Kotlin. However, you will likely need a platform-specific developer to implement specific parts of the code. The good news is that this part of the development can be outsourced. Or you can outstaff such a developer.
Moreover, React Native will be an especially good choice for your In-House Web Team if they’ve built your website with React - another Facebook’s framework but for web development.
Looking for examples? Townske app is a good case to study!
🗺 Townske App Case Study
Townske was a social city guides startup for travellers to let them create their own handbooks. The guys started with a website developed using the React framework.
However, building an In-House Team for a Startup is always a tricky task since you should look not only for the pros' from the development perspective. These people should also be really passionate about your Product. Just like you are. After all, the Team you build is the Company you build.
Therefore, while you're building your perfect In-House Team, a Remote Agency may be an option.
Outsourcing to a Remote Dev Agency is another common option. It’s going to work best for mid- and long-term projects. Some of the most typical cases to hire a React Native mobile development company are:
What are the main advantages of working with a RN Dev Agency?
However, as we’ve mentioned, agencies are usually looking for mid- and large-size projects with enough funding to cover expenses and bring them revenue.
How to Find & Hire Top React Developers?
Now, when you have a pretty clear image of whom and when to hire, the next reasonable question will be “where?”. Let’s be short and get down to business!
This option works best for freelancers and In-House developers but you may also use it for finding development agencies.
For In-House Developers
For Remote Teams
Type of website
Freelance boards and professional communities
Job boards and relocation agencies
Development Agencies Lists
Upwork, Freelancer, Guru, Stackoverflow
Glassdor, Indeed, RelocateMe
On freelance boards, you can either post a job offer and wait for developers to reach you or carry out a search on your own.
If you’re looking for an In-House developer on job boards, your main strategy is to post a job since you can’t surf through the list of users on your own.
On the contrary, agency listings as Clutch don’t allow you posting work offers but are convenient for searching. For example, here is a page that includes companies working with React Native. Among other things, here you can check their expertise, hourly rates and reviews.
Social networking platforms are also a great place to reach out to your potential developers or even agencies.
Here I mean not only LinkedIn but Facebook and Twitter as well.
On Linkedin, all you have to do is just search. Type “React Native Developer” or “React JS Developer” and look through the search results. To narrow them down even more, use filters by language, location etc. By the way, with the location filter it’s possible to find developers from your city to hire them in your In-House Team.
How to find React Native developers in Linkedin
On Facebook, the most obvious way to find a developer is to write a post with relevant keywords (like “looking for a React Native developer”). Then others will be able to find and share it, increasing your chances to find a good candidate.
Alternatively, you can try your luck in specific communities like “React Native Jobs” and others. They are rapidly growing and unite both experienced React Native developers and newbies so the pool of candidates is quite big.
React Native Jobs community
On Twitter, there are a few strategies you can use:
Twitter is also an option when you look for RN Developers (shots from Twitter)
Through Google, you can look for both separate developers and agencies. The workflows will be a bit different, however.
If you’re looking for a Remote Team, start your search with a specific request regarding your needs.
For example, let’s imagine that you want to build a Headspace-like meditation app. Then you may google something like “build a meditation app react native” - links on the results page will lead to agencies’ websites, just like below:
Looking for individual developers may seem a little more complicated. You will need to use Google search tools.
Finally, you will get a list of developers that match your search request.
Don’t underestimate the importance of your connections.
If you’re friends with someone from the startup/mobile/web community, maybe they’ve already faced the same challenges as you and can share a good contact with you!
Moreover, such recommendations can be considered as the most reliable and trustworthy source of information. Who will advocate a developer who disappeared, failed deadlines or lied about his experience?
If you're at the early financing stage (FFF, Seed A/B etc.), costs will be a super crucial matter.
Development costs will greatly vary from project to project. Even the costs to build applications within the same category (for example, car rental apps) may be quite different depending on features the client wants to see in his app.
However, we’ve worked on projects in different fields and prepared estimates for them. Notice that these are only rough estimates just to give you at least some perspective of what the development costs may be.
We used an average hourly rate for Eastern Europe which is $40/hour. For Agencies from Western Europe or North America the rate is probably going to be higher for the same scope of work.
To get an accurate estimate for your own project, please, drop us a line with some details!
The types of apps are clickable and lead to related articles.
Front-End Part of MVPs Estimated in Hours
Using React Native
📱 App Type
⏳ Approximate Hours
🧘♂️ Meditation App Like Headspace or Calm
We hope now you see React Native not as Terra Incognita but rather as a tempting opportunity for your Startup Product. Let's recall the main benefits of choosing RN to build a Product for your Customers:
Any questions left? Or you need a reliable Tech Partner with RN experience for your Product? Hit the button below, drop us a line and we'll show you some RN Magic!
Was it helpful?
How We at Stormotion Maintain Products After Release
What Stormotion's Project Management Flow Looks Like
How to Integrate a Mobile App Analytics Tool
Our clients say
When I was working with Stormotion, I forgot they were an external agency. They put such effort into my product it might as well have been their own. I’ve never worked with such a client-focused company before.
Alexander Wolff, CPO