React Native: a Comprehensive Guide for Startups

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...

Meh, boring.

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.

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.

📖 Brief History of React Native

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.

  • P.S. Some mobile developers may argue and say that they also have tools for quick compilation (like Instant Run for Android or ccache for iOS), especially when it comes to changes in the layout. However, we’ve tried some of them before switching to React Native and can say for sure that their performance is quite poor.

• 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:

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.

Cross-Platform Development

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.

Using RN, Your team can write a single JavaScript codebase and reuse it for both iOS and Android apps at the same time. Sometimes your developers may need to write about 20-30% of native code to implement some features like native UI components, push notifications, deep linking, etc. Anyway, it will take significantly less time than writing the app from scratch.

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.

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.

UI

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.

React Native Elements and React Native Paper are good examples of libraries with many UI elements, include the native ones. Keep on reading to find out a bit more about them in our "toolkit" section!

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.

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 app development company 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:

• Native development implements the imperative approach to programming. It means that developers have to define a sequence of actions and tell the app how exactly it should create a User Interface.
• React Native developers use the declarative programming approach. They tell the app what should be done without describing a specific flow.

As a result, RN Teams write less and simpler code, making the end Product easier to maintain.

Performance

The performance is the most crucial thing for any technology.

People unfamiliar with this framework may erroneously think that React Native apps face critical performance issues just because “they’re not native and written in JavaScript”. While it’s true that native apps usually work a bit faster, in most cases you won’t notice any significant difference.

Moreover, rewriting the existing app or its parts in React Native may even make them work faster! Here’s the example:

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:

• Speed ⏱

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.

• Application size 📦

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?

1. Convert raster/bitmap graphics into vector graphics. For example, PNG into SVG.
2. Compress graphics and images.
3. Use Android App Bundle for Android apps.
4. Convert JSON data into static object IDs.
5. Optimize native libraries (which is crazy but still theoretically is an option).

You may also check this case on reducing React Native app size by 86%.

• Navigation between screens & lists 🔃

The navigation itself is not an issue but rather a part of your app in which some of JS imperfections can be noticed. The thing is that the JavaScript code can’t perform different actions simultaneously. Instead, they’re grouped into a sequence and executed one by one.

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.

Updates

We dedicated a special paragraph to Updates because this process is quite different for Native and React Native apps. Also you can read our react-native-ble-manager tutorial that explains how to handle updates for BLE features effectively.

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.

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! That's why we usually build React Native fitness apps for our clients. Since they may need to update the app's features frequently, React Native offers a flexible and efficient framework for both iOS and Android platforms.

However, if your dev-team changed something in the native code, it will still have to go through the usual “native” review process.

Let’s briefly sum up the key takeaways of this paragraph:

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!

The next group of tools will be helpful if you want to facilitate React Native development and deliver an outstanding Product even faster:

These are specific tools that provide exclusive benefits for Startups and Businesses that have chosen RN as a core technology for their Project:

More info and links can be found in this article:

If we narrow down the search process to a few specific steps, here they are:

1. Define what your task is: whether you need to build a whole application from scratch, implement some UI changes or just fix a few bugs in the existing one.
2. Think of your needs: it may be a freelancer, a full-time in-house or remote developer or an agency.
3. Find a few candidates: use the Internet or recommendations.
4. Choose and hire!

Here are some tips that can help you at each stage!

React Native Agency vs Full-Time Developer vs Freelancer

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

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

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.

Already have the In-House Team that supports your website? We’ve got some good news for you!

Since React Native developers use JavaScript, switching from web development to mobile is not that difficult for them. Look at this as a new opportunity.

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!

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.

Remote Development Team

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:

1. You need to create an MVP for your Startup before building your own In-House Team.
2. You don't need an In-House Team at all and outsourcing is the best option for you.
3. You’re developing a mobile app for your existing offline/web business. It may relate to many industries from real estate and fitness to online meditation courses and eCommerce websites.

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.

Where to find React Native 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!

# 1: Specific Websites

This option works best for freelancers and In-House developers but you may also use it for finding development agencies.

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.

# 2: Social Media

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.

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.

On Twitter, there are a few strategies you can use:

1. Just write a tweet with relevant keywords - “Are there any React Native developers?” or a similar one. Within a day you can get over 20 responses from people who are really interested in work. The good news is that it may be not only freelancers but agencies as well.
2. Searching works great for Twitter, too. You may look for tweets in which people promote their services or select the “People” tab and look for a “React Native Developer” among other users.

# 3: Google

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:

💡 Takeaways

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:

• 2 platforms at once. As a Startup, you probably won't be able to afford two separate dev Teams and will have to choose between shipping your Product first to iOS or Android. With React Native you can build a single codebase that is usually 70-80% reusable for both platforms.
• Faster TTM. While not forgetting about the quality, Startups should deliver their products ASAP so as not to lose momentum. React Native not just allows writing code faster (comparing to the native approach) but also includes such features as hot reloading and over-the-air-updates that make development even faster.
• Your web experience matters. If you have a Team of web pros', switching them to mobile development doesn't seem like a perspective idea. However, since React Native is a JS-based framework, putting your Web Team on RN rails is quite an achievable task.

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!