DEV Community: tomgrabski

Costs of Hiring React Native Agency vs Developer

tomgrabski — Thu, 19 Aug 2021 11:23:34 +0000

Introduction

The entire process of mobile app development consist of many steps, and choosing the right technology for a specific case is one of the crucial decision.

This is why there were probably quite a few reasons you choose cross-platform development, and added React Native to your tech stack.

The last question is: Is it better to outsource the work to a specialized agency, rent a single React Native developer as a team augmentation, or hire an in-house developer and start building an internal team?

Should I hire a React Native Developer, or an Agency?

To decide between hiring an in-house React Native developer and outsourcing the work to React Native agency, you should consider the costs of each option and their pros and cons.

Often these pros and cons can be translated into costs that can’t be expressed in monetary terms but have even higher value – for example, the cost may be your time that’s better spent elsewhere. Or in some cases, choosing one option may cost you more in monetary terms, but you will save time that’s worth more.

Now, without further ado, let’s move to the relevant part of the article.

Hiring React Native Agency

Outsourcing the React Native development might be a great solution if:

It will be a one-time project
You don’t plan future updates
You don’t have React Native experience
There is no plan to build an in-house team (yet)
You’re just building a PoC that might be canceled

Pros and Cons of hiring an Agency

Even if one of the situations above doesn’t apply to you, the list of pros and cons of hiring React Native agency is still worth reading.

Pros of hiring React Native agency

Bureaucracy limited to the minimum
Clarity regarding the final cost
Budget planning is more efficient (i.e., no unexpected leaves or vacancies)
More options to find highly-skilled people
No need to spend time micromanaging
No long-term commitment (when the project is finished, so is the cooperation)
Ability to get technical consultations
You are able to take advantage of past agency experience in similar projects
Ability to scale up and down the external team quickly
Access to a whole team of architects and seniors, not just one person.

Cons of hiring React Native agency

Possible language barrier (i.e. if you are a native English speaker and the other side isn’t)
Slower communication and feedback (these difficulties may time zones)
Possible security and confidentiality risks
Agency’s marketing skills can turn out to be better than development skills
Messy code can make you dependent on further agency work
Not building inhouse competencies

Costs of hiring React Native agency per city

Let’s look at the rates and total costs of choosing React Native agency from different cities in Europe and the United States.

City	Average hourly rate	Total annual cost
London	£90 – £250	£172 800 – £480 000
Berlin	€94 – €245	€180 480 – €470 400
Amsterdam	€94 – €245	€180 480 – €470 400
Helsinki	€82 – €175	€157 440 – €336 000
Oslo	€82 – €175	€157 440 – €336 000
New York	$139 – $279	$266 880 – $535 680
San Francisco	$209 – $489	$401 280 – $938 880
Eastern Europe (Pagepro)	£40 – £75	£76 800 – £144 000

Hiring In-house React Native Developer

Hiring an in-house React Native developer might be a great solution for you if:

It will be an ongoing project or many projects
You already have or want to start building an in-house team
You are planning to update the application in the future
There is someone (or you) that have some React Native experience

Pros and Cons of hiring in-house developers

If you are not convinced to outsourcing all the work, the pros and cons of hiring a React Native developer might be a deciding factor to start building an internal team.

Pros of hiring an in-house React Native developer (or entire team)

Easier communication (sometimes even face-to-face on a daily basis)
Higher team engagement and dedication
Fast feedback and the possibility to make quick changes
Better management, control, and coordination
No language barriers

Cons of hiring an in-house developer (or entire team)

High and complex costs (more on those below)
Time-consuming management
Long and costly recruitment process
Unpredictable vacancy needs (dismisses, sickness, parental, etc.)
Risk of professional burnout
Motivation that comes and goes
Necessity of fighting for good employees with other companies
Limited growth opportunities for in-house developers

Costs of hiring a React Native developer

The cost of hiring a React Native developer is much more complex than outsourcing work to the agency. You must think about the actual cost of hiring a React Native developer. As the research of Joe Hadzima showed, the actual cost of hiring an employee equals his or her salary multiplied by 1.25-1.4.

The actual cost consists of:

Basic salary
Recruitment expenses
Employee benefits
Space and equipment

Recruitment expenses

The entire recruitment process is demanding, and it can take a lot of time and effort. What about the costs? Sometimes, they are hard to measure, but let’s try to list all of the things you have to consider when hiring a single developer.

The list consists of:

Costs of a headhunter, HR agency or HR department – depending on your recruitment approach
Costs of job advertisement
Time spend on interviews and managing the recruitment process
Cost of relocation if the developer needs to move from another city

Employee benefits

Let’s be clear – some of these benefits are regulated by law, and some are demanded by developers. And these days, the latter ones are hard to omit because of the huge fight for good employees.

These benefits include:

Social security
Healthcare
Retirement contribution
Holiday
Days off (parental, personal, sick days)
Memberships (gym, cinema tickets, etc.)
Free food
Training budget
Playrooms (chill rooms, quiet rooms, etc.)

Space and equipment

Developers need to have well-equipped workstations, and this equipment includes:

Comfortable chairs
Regulated desks
One or two monitors
Laptop
Additional keyboard

Now, knowing what else we need to include (apart from basic salary) to get the actual cost of hiring a single React Native developer, let’s make some calculations.

In-house developer cost comparison per city

City	Hourly rate	Salary	Total cost (x1.4)
London	£45 – £125	£86 400 – £240 000	£120 960 – £336 000
Berlin	€47 – €123	€90 240 – €236 160	€126 336 – €330 624
Amsterdam	€47 – €123	€90 240 – €236 160	€126 336 – €330 624
Helsinki	€41 – €88	€78 720 – €168 960	€110 208 – €236 544
Oslo	€41 – €88	€78 720 – €168 960	€110 208 – €236 544
New York	$70 – $139	$134 400 – $266 880	$188 160 – $373 632
San Francisco	$104 – $244	$199 680 – $468 480	$279 552 – $655 872

Head-to-head comparison between hiring a React Native developer and an Agency

General comparison

Before diving into numbers, check which option – React Native agency or React Native developer – is better in which scenario.

Pros and cons (comparison)

Cost comparison

Is it more cost-effective to hire React Native agency or an in-house React Native developer? Take a look at bald figures.

Costs of hiring React Native agency vs in-house hiring per city

City	React Native Agency (starting from)	React Native Developer	Difference
London	$240 635	$168 445	$72 190
Berlin	$213 900	$149 730	$64 170
Amsterdam	$213 900	$149 730	$64 170
Helsinki	$187 160	$131 010	$56 150
Oslo	$187 160	$131 010	$56 150
New York	$267 370	$187 160	$80 210
San Francisco	$401 060	$280 740	$120 320
Eastern Europe (Pagepro)	$106 949	£171 118 Avg. from all cities	$64 169

Summary

If you don’t have too much React Native experience and don’t have a team, it’s always worth asking an experienced CTO for advice or book a free agency consultation (you can book one by clicking here).

If you want to build an IT team soon or in the future, remember that agencies often help build internal competencies during project implementation. That’s exactly how we helped Gorilla Agency – you can read the case study here.

On the other hand, if you have React Native experience and you need full-time support and engagement in product development, it’s definitely better to scale up an in-house team by hiring developers.

How to Choose React Native Development Agency?

tomgrabski — Tue, 10 Aug 2021 19:57:51 +0000

Introduction

Nowadays, having a mobile application seems like a must in many industries. It allows for much closer contact with clients, engaging them on many levels and responding to their needs almost as soon as they occur.

However, many companies that plan to build an application do not sufficiently know and understand what building an app actually entails. But more importantly, they don’t realize how far technology went in recent years.

Since cross-platform development came into existence, it made building mobile applications easier, faster, and more accessible in almost every domain.

Because almost everyone uses at least a few applications to handle daily business, acquire information, do shopping, communication, etc., technology must continuously look for (and find) increasingly easy ways of building these applications to answer the ever-changing trends.

One of these technologies is React Native, with the growing popularity and many possibilities.

React Native means:

Faster mobile development
Building applications on Android and iOS with one codebase
Vast possibilities of implementing ready-to-use solutions
Quality for much less money
On-demand support from massive community
And much more

The questions remain:

How to start?
What do I need?
Where to start planning the development process?
How long will it take?
How much will it cost?
And more

So now, let’s say you do like React Native, and you decided to hire React Native agency for your next mobile project. You are looking for an experienced agency that will help you with the development process from top to bottom, 360, and help you understand what's important at each stage and step you will make.

What we recommend you to do is to have face-to-face interviews with them.

Let's go over a few points that will help you to better prepare for such an interview.

How to run an interview with React Native agency?

An interview is an essential part while hiring the agency. It will help you fill in the blanks and decide whether they are trustworthy and knowledgeable or not. However, you will get much more out of such an interview if you will get yourself prepared. Otherwise, such a meeting could become a huge waste of time for both sides.

You can follow our five-step list to prepare for such an interview.

Step 1: Specify needs and budget.

What features and functionalities do you want your application to have? It might be a great idea to note down all of them in order of importance. This way, you will make sure that you won’t miss anything crucial in turning your idea into a working product.

It will also help you with staying on budget while building at least the MVP of your application. And specifying a budget is the next thing for you to do after identifying the needs. Be aware that you might have to spend more money than you predicted or wanted to if the project is complex or due to users’ feedback or ideas that emerged during the ideation phase.

However, a good agency will give you at least a ballpark estimate (or, in some cases, even a fixed price) during an interview. If the project is complex, be prepared for other options like time-and-material. It will give you many flexible possibilities.

Be aware that your budget may not cover implementing all the features and functionalities you wanted in the first place. To deal with this situation, you can either create a prototype (or MVP) or rethink the to-do list and remove some points for now.

Step 2: Check the React Native agency’s website.

Treat the agency’s website like their bigger business card with all crucial information instead of just contact details. While browsing through such a website, focus on:

Agency’s specialisation – the best-case scenario is that it’s React Native agency. It might indicate they know what they are doing. However, don’t let it be a deciding factor – even if it’s not written with big letters on a home page, it doesn’t mean the agency doesn’t know how to work with React Native.
Size of dev team – you don’t want to be dependent on one or two developers – even if your project is relatively small.
Localisation – find out where the agency is based and if it matches your time zone. If not, make sure that it won’t be a problem for you.

Step 3: Check the agency’s portfolio.

Look for projects involving React Native and check if there are similar projects to yours. What’s also important is if the agency did projects in the same niche because it will help them understand you better.

Step 4: Read reviews and testimonials.

Don’t believe everything the agency will say just because they say it. Verify their words by reading reviews and testimonials on a website or, even better, on portals like Clutch. You can go even further and contact clients directly to ask for an honest opinion.

Reviews and testimonials posted on independent portals like Clutch are even more trustworthy than those on the agency’s website. It’s because the agency isn’t collecting them.

Step 5: Prepare a list of questions.

If you are satisfied with what you have learned about agency or agencies, now it’s time to prepare a list of general and technical questions. Such a list will help you decide whether you are talking with a competent agency or an agency that just pretends to be competent.

Extra: Step 6: Observe how fast do they reply

How fast a salesperson will contact you after you leave your message? Is a salesperson clear about the next step you need to take? How often is she following you up and how she is leading the conversation further?

It's another sign of having a process worked out. In other words, experience and professionalism.

Questions to ask a React Native Agency

To make sure your agency is the right fit, we definitely recommend asking them both general questions, as well as the ones closer to their technical process and approach.

Here's a helpful list of questions, and a small explanation of what you should expect.

Partnership, collaboration, and quality assurance

How to make sure you will get what you want?

Good partnerships are not afraid of difficult questions.

These questions will help you understand what can you expect from the agency while working together and how they approach quality and delivery assurance.

Communication:

How will the communication between us look like? What’s your preferred way of communication?
How would you structure the cooperation (considering we are working on multiple projects)?
How do you approach the option of occasionally visiting us in our office for consultation sessions? (Assuming the Covid situation allows for this).

Understanding your business:

How will you ensure you understand our business requirements?
What do you do to make sure you meet the business requirements when developing features?
If we would switch places, what measures would you put in place to make sure that services are delivered in the best quality possible and that the outcome meets the requirements?

Team assembling:

How do you shape teams? How are skills distributed across the team?
What about choosing people for the project considering roles and responsibilities?
How long can we expect to work with specific team members? How do you approach turnover?
What do you do when we are not satisfied with the work of one of your team members?
How do you make sure that work performed by each team member is of the same high quality?

Technical questions

Without any React Native development experience, asking technical questions may be challenging. However, in this case, if you want the Agency to be a trustworthy partner, you may want to learn how do they explain technical stuff to others.

To help you with that part, we prepared some questions that could uncover possible threats.

1. Does your agency have a standard code development process? How would you integrate that with our processes?

For example, at Pagepro, we do have our own code standards, but we are very agile and adaptive if it's required.
We work with many companies, and we are used to adapting to the client's standards.

2. What automation testing strategies have you utilized and would recommend?

At Pagepro, we usually do have a separate team that writes the automation tests (E2E).
If the project is logic heavy, we can provide the unit tests with a continuous integration solution to make sure we don't have any regression.

3. How do you approach assuring a product and the code quality? What do you do to ensure the code written by you is future-proof?

At Pagepro, for example, we make sure everything is named correctly and readable (variables, functions etc) so the code is self-descriptive.

We use TypeScript which is somehow making sure we won't accidentally break the app when we change 1 thing in the code (compilation errors). If the code is not declaring its intention, we add extra comments about it so if we come back to that code in a few months we will understand that.
We do code reviews with some requirements, so you can't merge the code that is not approved by others.

We are also making a pull requests, but before merging it into a master branch, another developer has to review it.

On top of that, we use Expo SDK so the packages we are using to develop our project are well tested and stable. This is how we minimize the possibility of using an invalid package and the problem with developing/update application in future.

And finally, we use linters, so each and every developer working on the project, writes the code in the same way

4. How do you ensure documentation is adequately updated and revised during technology changes and iterations?

We update the documents each time we change something important that includes extra work or required making the project work correctly, including:

adding environment variables
creating extra account to make something work
situations that need to do extra setup manually
situations when we've changed our standards

Additional tips

Talk with at least a few agencies – don’t choose the first one you talk with, even if everything seems great. Such an approach has a few benefits:

A more in-depth insight into the average rates
Information about what can you expect of cooperation with an agency
Overview of standards and best practices of good agencies

Check average rates – it helps you with two things. Firstly, you will know if your budget allows for it and what can you expect for the money you can spend. Secondly, you won’t overpay for a project.

Verify provided information – bear in mind that it has never been easier for agencies to look more skilled and experienced than they are. For example, you can check LinkedIn profiles of developers working for the agency or talk directly with previous clients to double-check some obtained information.

Double-check technical skills – don’t be afraid to ask for a trial project or some code samples. The other option is a technical interview or conversation with at least one developer on their side.

Core Web Vitals: How to Measure and Improve Them?

tomgrabski — Thu, 29 Jul 2021 07:11:08 +0000

What are Web Vitals?

Web Vitals are the new standard introduced by Google – a collection of metrics against which websites are now rated. This standard puts more emphasis on user experience and website performance. Web vitals is a much stricter rating system than the previous one.

We can check the website rating on PageSpeed Insights, and many people may think that the result we get is the actual result of the page speed. The reality is a bit different. The website doesn't have to be the fastest to have the best score. It must be fast and friendly enough so users can move around pleasantly and comfortably.

For now, the Web Vitals metric focuses mainly on three aspects of user experience:

Loading
Interactivity
Visual stability

Web Vitals Metrics:

Largest Contentful Paint
First Input Delay
Cumulative Layout Shift

Largest Contentful Paint

Largest Contentful Paint (LCP) measures how long it takes to load the largest element visible on the page. The element can be, for example, text, image, video. The LCP is valid if it lasts less than 2.5s. If it lasts from 2.5s to 4s, it needs improvement. The result above 4s is a bad result which significantly lowers the page rating.

How to improve the LCP score?

Server optimisation
Caching
Establish third-party connections early:
- third-party server requests can also negatively impact the LCP (mainly when they are needed to display critical content on the page). Using rel="preconnect" to tell the browser that the site will connect as soon as possible may help in this situation.
CSS optimisation
- for example - try not to nest selectors
  - .h1 {} is better than .container > .h1 {}
Putting critical CSS code into HTML
- the critical CSS code is the code that is needed to display the first page view properly. It's best to add this code inline in the <style> tag and put it in <head>
Remove unused CSS or use loadCSS to load files asynchronously
JavaScript optimisation
Reduce JavaScript payloads with code splitting
Optimise and compress images
- lazy-loading
- use pictures with alternative formats such as .webp
- reduce the size of photos/images
Optimise web fonts
- for example – use font-display: swap

First Input Delay

FID measures the time browser needs to react to the first interaction on the user’s part (handling events, e.g. clicking a button). A good time is under 100ms. The result above 300ms is very weak and requires improvement. In PageSpeed Insights, Time to Interactive is sort of FID.

How to improve the FID score?

Remove unused JS
Delay for third party scripts load
JavaScript optimisation
Delay loading scripts that are not required for the correct display of the website

Cumulative Layout Shift

CLS is an indicator of visual stability, which measures the sum of the shifts of all layout elements not related to the user's interaction. Shift happens when the browser suddenly reads page elements that move another element. And such shifts are often more annoying than slow page loading.

An example of this is a pop-up advertisement that moves a button that we wanted to click on the page, but unfortunately, we clicked an ad. Google rightly believes that these are malicious solutions that lead to clicks on unwanted links. A good result is below 0.1. If the result is over 0.25, it needs improvement.

Example

How to improve the CLS score?

Elements visible in the page loading area should have a declared height and width, so they don’t change their size when content loads.
Use font-display: swap for the text visibility in the loading area.
Avoid adding ads or add them in a fixed-size container.

How to measure Web Vitals?

To check whether our website meets Web Vitals’ requirements, we can use Google PageSpeed Insights and Google Search Console. There is one more way – a Google Chrome plugin for measuring Web Vitals, but the results are often deceptive, so I don’t recommend using it.

Google PageSpeed Insights

Checks a single page, shows results of the analysis and offers suggestions for improving Web Vitals.

Additionally, the report in PageSpeed Insights visualises the indicators’ values taking into account the number of users in the bar chart.

In the example above, we can see that the FCP and CLS require improvement.

FCP – 31% of the time this page loads, the First Contentful Paint (FCP) indicator is bad (> 3 seconds).

CLS – 29% of the time this page loads, the Cumulative Layout Shift (CLS) is terrible (> 0.25).

Google Search Console

Google Search Console is one of the best tools for website owners, where they can check the most critical information about the condition of their website in the eyes of Google.

In GSC, the chart is generated for the entire website, and you can see on which subpages there are errors and what are the remedial actions.

Thanks to this tool, we can obtain information about pages that require improvement.

Summary

Without a doubt, Web Vitals is a good standard. As a result, creators who want to get a good result will adapt websites to create a better user experience. Although Google tells developers how to deal with problems and increase results, we know that it can be different in practice, and the new standard will bring many issues to developers.

Google also points out that Web Vitals will be developed continuously, so these three indicators are probably just the beginning of the changes.

How To Use React Native Over The Air (OTA) Updates

tomgrabski — Wed, 21 Jul 2021 15:17:34 +0000

What are Over The Air (OTA) updates? Why might I need them?

Over The Air (OTA) updates are one of the advantages of React Native apps over native ones. In React Native apps, code is split into two parts:

Native binaries – the part with native code that is compiled
Javascript bundle – the bundle with Javascript code and assets that is not compiled

Normally when you want to update your app, you need first to build it and then send it to App Store or Google Play. A major drawback of this solution is the time needed for these stores to approve your update. Imagine a situation where an app with a critical error was published to users by mistake. In these cases, every second count. And this is where Over The Air (OTA) may help us.

In short, OTA allows us to send updated Javascript bundles directly to users without the need of accepting them by Apple or Google. We can fix errors or push small updates (more on those later) almost immediately. This gives you more confidence about the stability of the app – there is always something that we can do instead of just waiting for an update to be accepted while users can't use the app

This sounds great! Are there any limitations?

As good as it may sound, there are few things that we need to keep in mind.

The first thing is that OTA updates only work with Javascript bundles. You may think that this isn't really a big limitation because, in React Native, we write almost all code in JS. While this may be true, there still are modules that we install to our app. If a module changes your android or ios directories, you can't use OTA to update your app. That's because these directories' contents are used to compile Native binaries, which OTA can't update.

The second thing is what we can do with OTA. Technically we can change everything in our app, but App Store and Google Play limit us. Google Play is less restrictive – they say that apps installed from Google Play shouldn't update in other ways than by Google services, but Javascript bundles aren't restricted to do so.

Apple is more restrictive in these manners. Take a look at paragraph 3.3.2, which says that OTA updates can't make significant changes in the app. To keep it simple, we should use such updates only to fix bugs or make performance improvements without making significant changes to the app's UI or usability.

How to start using OTA?

We need a server that will receive our updates and send them to users of our app to use OTA. While we can make our own server, we can also use dedicated solutions. In this article, we will use CodePush from Microsoft App Center.

Setting up CodePush on App Center

First, we have to create an app on the App Center. We choose Android as an OS (if you are also making an app for iOS, you need to create a second app) and React Native as a platform.

After creating our app, we go to Distribute -> CodePush in the left menu. There we can create a new deployment for our app.

After this, we should have our deployment visible in CodePush. The last step is to go to settings (the wrench icon in the upper right corner) and check our deployment keys. We should have two because CodePush makes two branches by default. We will need these codes later when we are sending our updates.

Installing CodePush plugin

Let's assume you already have React Native app. To add the CodePush plugin first, we have to install it using yarn or npm.

#using yarn
yarn add react-native-code-push

#using npm
npm install react-native-code-push

#only for ios app
cd ios && pod install

After installing the plugin, we need to set it up. Here we will only go with the Android setup. You can find the iOS setup here.

First we need to add these lines at the end of android/settings.gradle.

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

Next we add codepush.gradle in android/app/build.gradle.

apply from: "../../node_modules/react-native/react.gradle"
// add this line
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

Now we update MainApplication.java.

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...

        // 2. Override the getJSBundleFile method in order to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

Next, we need to set is the deployment key. We have to tell the app which branch on App Center it should check for updates. To do so, we have to update android\app\src\main\res\values\strings.xml.

<resources>
    <string name="app_name">OtaExample</string>
    <string moduleConfig="true" name="CodePushDeploymentKey">YOUR_KEY</string>
</resources>

This is the key we obtain from CodePush on App Center. To update our app later, we have to push updates to the same branch that we connect here with the deployment key. You can find more info about using multiple deployments here.

Finally, we wrap our app root component with CodePush HOC.

import codePush from 'react-native-code-push';

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.body}>
            <Text>Test</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export default codePush(App);

By default, CodePush will check for updates on every app launch and install them in the background, which means that the user will get the changes on the next launch after the update. This behaviour focuses on the best TTI (time to interactive), so the user doesn't have to wait for the update to download and install before using the app. How to install updates, and how often they can be changed – more about you can find here.

Lets send our first update OTA!

After all these configurations, we are finally able to send OTA updates. To do so, we first have to install and login into CodePush globally. We need to log in only once.

#using yarn
yarn global add appcenter-cli

#using npm
npm install -g appcenter-cli

#will open a dialog to login into appcenter
appcenter login

#to send update OTA
appcenter codepush release-cordova -a <ownerName>/<appName>

So let's do it! First, let's make a release build of our react native app and install it on the device. More about building release APK for Android you can find here.

Above you can see our app launched on an emulator. Let's make some changes and send them Over The Air!

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.body}>
            <Text>Test</Text>
            <Text>Testing OTA updates!</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

We added <Text>Testing OTA updates!</Text> to our app. Now let's push this change using the command above! Then we can launch our app (we won't see the changes first) and wait 10-15 seconds. After relaunching our app, we should see this:

Conclusions

OTA updates are a powerful tool that you can add with ease to React Native apps. They give us another way to update which is almost immediate and invisible for users. Thanks to this, we can always fix our app even on production without waiting for App Store or Google Play to accept our update.

We have to keep in mind that we cannot update native libraries, which will be required in some situations and not making updates that change the UI or functionalities of our app because it's not allowed by Apple and Google policies.

50 Examples of Great React Native Apps in 2021

tomgrabski — Tue, 13 Jul 2021 20:41:21 +0000

Introduction

More and more often, before we start a mobile project, our potential clients are asking for some examples of React Native apps they could relate to their businesses.

In fact, everybody knows the popular apps, but not much else.

Can you send me some React Native apps examples that could be a good benchmark for my business?

So, as an answer, instead of looking for some good examples over and over again, we wrote this article, to immediately access the best of them from 15 different industries.

Since its release in 2015, React Native is rapidly emerging. So do its popularity and community. Because of many features and the possibility to build apps for many mobile platforms simultaneously, it became the first choice of many developers, startups and business owners.

So, whether you are looking for inspiration, examples, or just want to make sure that React Native is the right choice, and you search for some business benchmark, here’s a list of more than 50 apps built in React Native.

15 different industries

If you are searching for some examples of apps from your industry, you will find such industries as:

Art	eCommerce	Education
Entertainment	Fashion	Finance
Food	Health	News
Retail	Social Media	Sport
Transportation	Travel	Virtual Reality

React Native 101

Need more information about React Native itself and how it stands out from other mobile development technologies?

Read the other articles that will give you an ultimate introduction and the knowledge you need to successfully kick-off the project with React Native:

Our own React Native Guide
Most popular React Native pros and cons
React Native FAQ
Comparison: React Native vs Flutter
Comparison: React Native vs NativeScript

Most popular examples of React Native apps

While looking for apps built with React Native, we tried to collect examples of both well-known apps like Facebook and less popular ones created by startups.

Facebook and React Native

Obviously, Facebook is a no-brainer from all the examples of React Native apps.

In fact, React Native is a result of a hackathon organised by Facebook to respond to the company’s needs. Facebook wanted to use all the benefits of web development (like fast iterations or the possibility to build the full product within one team) in mobile development. Consequently, they created leverage in mobile development for both Android and iOS platforms.

A team of Facebook developers wanted to test React Native apps performance, so they migrated the Events Dashboard in their iOS app to React Native. They wanted to try such things as startup time, which is essential in this kind of application. If the application needs a lot of time to start, it may discourage users from using it.

The result? A React Native app startup time twice as fast.

Facebook Ads Manager and React Native

Facebook didn’t stop after using React Native in its primary application. Another one from the best examples is in fact the first cross-platform app based solely on React Native – Facebook Ads Manager.

It was a complex task because of the business logic required to handle ad formats, time zones, date formats, currencies, and many more different things for different users. However, React Native seemed like an ideal fit, mainly because the lion’s share of code was written in JavaScript.

While the Facebook dev team was working on Facebook Ads Manager, they created many components, useful for other developers, too.

Instagram and React Native

Another one from popular examples of React Native Apps isInstagram.

What’s more challenging than building an entire app from scratch is integrating new technology into an existing app, but that’s what Instagram tried to do. They started from the simplest view that you can imagine, which is the Push Notifications view. Initially, it was implemented as the WebView as there wasn’t a need to build a navigation infrastructure.

React Native allowed Instagram developers to ship features to both Android and iOS apps much faster.

They also improved developer velocity, and the percentage of code shared between the apps for some of the products shows just that:

Post Promote: 99%
SMS Captcha Checkpoint: 97%
Comment Moderation: 85%
Lead Gen Ads: 87%
Push Notification Settings: 92%

Read more about how Instagram is using React Native.

UberEats and React Native

Standard Uber application involves two parties – drivers and passengers – but UberEats involves three – restaurants, delivery drivers and customers. Such a model created a need for an extra dashboard dedicated to restaurants.

Uber created the original dashboard with the web in mind, and it caused limited access to the native functionalities like sound notifications. Consequently, it made the user experience weaker.

The Uber dev team decided to rebuild the entire dashboard using React Native. Although it’s just a tiny piece of the entire code of the UberEats app, developers are optimistic that React Native may help them in the future to implement new features as the marketplace grows.

Read more about how UberEats is using React Native.

Walmart and React Native

Walmart is the best example of an app that migrate to React Native in order to reach their ambitious goals.

They want to become number one in the online retail industry. It’s a big goal, and big goals require big moves associated with high risk.

Gaining a competitive advantage (necessary to reach such goals) requires testing and using new technologies. It also has a positive impact on user experience. Firstly, Walmart added Node.js to their technology stack. Later, they decided to use React Native to rewrite the mobile application.

Walmart succeeded in boosting Android and iOS apps’ performance, which took fewer resources and less time. These platforms shared 95% of the codebase, while the entire rewriting process resulted in an outstanding performance and smooth animations, similar to native.

Read more about how Walmart is using React Native.

Pinterest and React Native

Pinterest considered React Native to implement it into their tech stack, and they decided to do so based on the benefits they found. The biggest one was the increase in developer velocity. As React Native makes it possible to share code between platforms, it means less time spent on standups and meetings and fewer number of inconsistencies between mobile platforms.

However, Pinterest uses React Native as an additional tool in their engineering toolbox – next to native code capabilities on Android and iOS. They never wanted to rewrite the entire code to React Native.

Pinterest used React Native to build the Topic Picker view and Business Signup flow.

Link to the website

Coinbase Pro and React Native

In 2019, Coinbase decided to rewrite their core mobile sign-up using React Native because of a few reasons:

As Coinbase supports more than 100 countries, their sign-up experience has to be dynamic – lt should adapt to the user’s location and profile. Staying with the existing code and making changes would be more expensive than rewriting the entire application.
Rewriting the entire application natively would require a lot of code duplication, while React Native allows targeting multiple platforms simultaneously. It allows for reusing the business logic instead of duplicating it and maintaining consistency between apps for different platforms.
Coinbase wanted to implement a new sign-up experience for Coinbase native application and Coinbase Pro that they wrote entirely in React Native. Without using the RN to do so, it would be much more costly.

Coinbase evaluated using React Native positively, mainly because of component reusability, Fast Refresh and easiness of onboarding web developers.

Read more about how Coinbase is using React Native.

Shopify and React Native

After years of building apps natively, Shopify decided to start building new mobile apps with React Native.

There are three main reasons behind their decision:

They learned how much React Native has developed after the acquisition of a mobile-first company called Tictail which is focused solely on React Native
Shopify was using React daily, and that knowledge became transferable to mobile
They can invest in React Native long-term, and they saw how performance has been going up

Shopify started to experiment with React Native with three separate teams over three applications: Arrive, Compass, and Point of Sale.

They learned that:

Dev team responsible for rewriting the Arrive app in React Native felt that they were twice as productive as native development – even though they were working on one mobile platform at that time.
Testing Point of Sale application on low-power Android hardware configurations allowed them to use a lower CPU threshold (1.5GHz in comparison to 2GHz)
The percentage of code shared between Android and iOS was higher than expected – they estimated 80% while the results were 95% (Arrive) and 99% (Compass)

However, even though they decided to build all new applications with React Native, that doesn’t mean they will also be rewriting all of the old apps in React Native.

Read more about how Shopify is using React Native.

Discord and React Native

Discord adopted React Native as soon as it was released to build their iOS app on top of their React app. Years passed, and they are still happy that they made their decision. Their app is:

being used by millions of active users,
practically crash-free,
rated at 4.8 stars in the App Store.

They have achieved all of that with only three core iOS engineers on board.

However, at the beginning of 2019, they noticed that the performance degraded – the app could not maintain 60 FPS in regular usage – and it was unclear why.

Discord created a mobile performance squad to boost app performance across all supported iOS devices to fix this.

As they wrote in the blog post, the results were:

A fairly consistent 60 FPS across supported devices and a very noticeable reduction in battery consumption.
A much better development experience since even the app under development mode runs much better than the production app before these changes.
An average of two seconds shaved off the initial load time. Discord achieved it through our efforts enabling RAM bundles and optimising code paths to leverage it.

It’s worth noting that they completed the entire process within a span of a few weeks.

About working with React Native and building apps with it, they said that there are some challenges. However, the benefits outweigh the disadvantages, so they are ready to use it in the future, too.

Bloomberg and React Native

Bloomberg used React Native to build the Customer App for Android and iOS in 2016. It offers a streamlined, interactive experience with easy-to-access personalised content, videos and live feeds featured across Bloomberg Media.

Like all of their products, it was designed to meet users’ needs and seamlessly integrate with their routines. The content seen by users can be easily personalised depending on their location and by field of specialisation – Opinion, Politics, Pursuits, Markets, and Technology, to name a few. Users can also access on-demand live TV or event feeds.

React Native enables the Bloomberg team to update the app continuously with market-moving analysis, data, and news – all of that is accessible through personalised widgets.

Read more about how Bloomberg is using React Native.

Other examples of apps made with React Native

Facebook Analytics

It’s not surprising that after Facebook and Facebook Ads Manager, Facebook Analytics has also been built with React Native. This app helps users with a number of different reports and metrics presented in a detailed overview.

React Native made it possible for users to create tailor-made mobile views of basic matrics, revenue generation, number of active users, etc.

Link to the website

YOKE Network

YOKE Network is an influencer marketing agency that had an idea for an application that should accomplish to goals at once:

Help users reach the right influencer with the right audience to promote products across social media channels
Help influencers with finding great products that they could promote and get paid for that

Read the case study

Beast Rent

The main goal of the Beast Rent App is to make Tesla car rental easy and hassle-free. For example, as a user of this app:

You can ask for a transportation box for your pets or a booster seat for your kids
You can ask the rented car to warm up before you go inside

Read the case study

Novus World

Novus World is an intuitive and user-friendly digital banking app. It aims to provide an outstanding user experience of using intelligent finance management tools. The end goal is to help users with budgeting, saving and controlling their finances.

Read the case study

Tableau Mobile

Tableau Mobile is an application accompanied by Tableau Online and Tableau Server. It allows you to view your company’s visualisations, dashboards, and different metrics using a phone or tablet.

In 2017, the dev team at Tableau Mobile decided to use React Native to rewrite their mobile application. Two years later, they released it on both Android and iOS. As they said, it was a great decision which allowed them to ship more features, more often and with better quality.

Link to the website

FlipKart

Flipkart is the largest eCommerce player in India (let’s say Amazon dedicated for India), has over 100 million app downloads and 400 million visits every week. They started their journey with React Native five years ago, in 2016.

Few words about their tech stack

It consists of Native, React Native and React-Native-Web
Most components are developed with React Native, while the home page is native
Navigation in FlipKart apps is native because it supports easier switching between native, react-native and web view

They decided to use React Native because of:

Possibility to develop apps for all mobile platforms without impacting performance
Unrestricted usage of custom native components if needed
Ability to ship JavaScript code using Over The Air (OTA) updates

Link to the website

Mercari

Mercari became the largest marketplace application in Japan, however, they want more – it’s also available in the US. It allows anyone with a mobile device like a smartphone to sell items they no longer need instead of just throwing them out.

Link to the website

NerdWallet

NerdWallet is an application for personal finance management that gives its users an overview of their financial life, insights based on their specific situation, and detailed instructions on how to improve their finances.

The NerdWallet app is built on top of React Native, TypeScript, and GraphQL. Out of these three, it’s React Native that was crucial in achieving blazing time-to-market, high development efficiency, and empowering technology and talent within NerdWallet Engineering.

Link to the website

Tesla

Another diamond from all the examples of React Native apps.

Tesla used React Native to build its Tesla app, which allows drivers to control their cars remotely. For example, they can start and stop the charging of the car.

Other features:

Checking charging time
Checking car heating/cooling
Locking/unlocking
Diagnosing

The dark-them user interface of the Tesla app makes it look like some kind of video game. It’s available both on Android and iOS.

Link to the website

Do you have a better example of React Native App?

Submit it to get listed!

Wix

Wix is an online tool to create free websites with no coding knowledge. They used React Native to build a Wix Mobile App to help you run and manage your business and day-to-day activities.

Wix App allows you to invite website visitors to become members through their mobile app. It’s a great way to build a community of engaged users. For them, it’s helpful because they can – for example – browse through your products and services, book an appointment or comment.

Link to the website

Salesforce

One of the best examples of truly complex React Native apps.

Salesforce is a company that provides CRM software along with applications focused on customer service, marketing automation, analytics, and application development. React Native makes it possible to build Salesforce-powered mobiles apps based on Mobile SDKs.

Link to the website

Words with Friends

Words with Friends is a multiplayer word board game owned by Zynga. Players take turns building words crossword-puzzle style, which is similar to Scrabble, a classic board game. The rules of these two are similar, but Words with Friends is not associated with the Scrabble brand in any way.

Words with Friends decided to choose React Native because:

Integrating RN into existing apps is well documented and supported
Iteration tools such as live reloading boost the development a lot
The technology is emerging and has strong community support

Learn more about how Words with Friends is using React Native.

Call of Duty Companion App

The Companion App helps Call of Duty players track their every shot across multiple titles, identify their most effective weapons, and even compare their stats to their friends’ stats.

These include:

EKIA and W/L ratios over time
Shots fired and accuracy %
Total time played
And more

The Companion App is written using React Native, JavaScript, Redux and React Navigation.

Link to the website

Foreca

Foreca provides digital weather services for developers and consumers through applications, data interfaces and websites. To do so, they collect worldwide weather data, which allows them to make their own global weather forecasts.

Before using React Native, Foreca created their Android and iOS apps separately, so they had separate code. Because of that, both applications provided a little bit different functionality and customer experience.

As Foreca wanted to create a customer experience that would be practically the same for Android and iOS users and have a possibility to implement different changes more effectively, they decided to go with React Native.

Learn more about how Foreca is using React Native.

LendMN

LendMN is the mobile application created by a fintech company called AND Global, which provides small loans quickly and conveniently for those who can’t receive such financial services from traditional institutions.

This app has over 100 thousand active customers in Mongolia and is one of the most popular applications there.

The usage of React Native to build this application allowed LendMN to utilise their web developers for application development and update it on the fly.

Learn more about how LendMN is using React Native.

Artsy

As the Artsy app description on the App Store states, “Artsy is the largest online art marketplace with more than 1 million artworks by over 100,000 artists”. This iOS app allows users to collect art from galleries worldwide, bid in live auctions from anywhere, and sell works from their private collections.

Read more about how Artsy is using React Native.

QQ

QQ is an instant messaging and social platform available as both React Native-based desktop and mobile apps. It offers many features such as online chat, video and voice calls, file transfers, and e-mail. Tencent, the company behind QQ, continually implements new features to respond to young users’ needs. Examples of such features include KuoLie (it helps with expanding networks) and KanDian (it matches content with users).

Link to the website

Baidu Mobile

Baidu Mobile is a widely popular search engine in China, with more than 600 million users.

Link to the website

Delivery.com

Delivery.com is a mobile application that allows customers to make orders from local restaurants and stores for on-demand delivery. Their dev team decided to implement React Native into the existing iOS app, starting with releasing three views into production.

Learn more about how Delivery.com is using React Native.

Gyroscope

Gyroscope created a Health Tracking app which helps its users to track everything about their life. It syncs HealthKit data to Gyroscope and provides users with a dashboard. The app’s goal was to help people achieve goals like losing weight or being more productive by using their data.

Learn more about how Gyroscope is using React Native.

Huiseoul

Huiseoul is a conversational e-commerce app that focuses on providing Korean beauty products exclusively to China.

Learn more about how Huiseoul is using React Native.

JD

JD.com is a Chinese company that’s:

China’s largest online retailer
China’s biggest overall retailer
Biggest Internet company by revenue in China
A member of Fortune Global 500

People can download apps both on Android and iOS.

Link to the website

Vogue

The Vogue app created with React Native delivers its users the latest news in fashion, beauty, runway and celebrity style, homes, weddings, food, travel, and entertainment.

Link to the website

Grasshopper

Grasshopper is a mobile application created with React Native for those who want to learn how to code. The difficulty levels vary, and users can learn in a fun way using their mobile devices.

Link to the website

Unacademy

Another very famous from the examples of apps made in React Native.

Unacademy is the largest online learning platform in India, however, it’s available in multiple languages. It was created with React Native to deliver courses on every possible topic created by the top educators in the country. It has more than 8 million views every single month.

Link to the website

WalkSafe

The WalkSafe application takes care of your safety – it provides a map that visualises crime reports published by the police. Thanks to that, users can see places that are probably dangerous and identify regular trouble spots. The WalkSafe app also alerts its users if they are walking towards areas where crimes like knife attacks, sexual assaults or mugging have been reported.

Link to the website

Shine

Shine is the application that helps you build a self-care ritual that will eventually turn into a healthy habit. You can:

Meditate with the help of Daily Shine
Connect with other members of an active community
Reflect on your mood and get recommendations about content to read

Link to the website

Bitesnap

Bitesnap is a mobile application built with React Native that helps you build healthy eating habits. It can count calories and nutrients after taking a picture of what you are about to eat because the app can recognise the foods in it.

Link to the website

Bunch

Bunch is a social app that allows you to play video games with your friends over video chat.

Link to the website

Cake

Cake is a simple language learning app that will help you learn English for free. It’s available both on Android and iOS.

Link to the website

Crisp

Crisp is the application-based supermarket dedicated to the inhabitants of the Netherlands, which allows them to order quality food straight from the source for delivery.

Link to the website

F8

Every year, Facebook builds Android and iOS apps as a part of its F8 (Facebook Developer) Conference, so all attendees can easily check the schedule and find out more about the speakers and their talks. Applications also remind attendees about upcoming talks and provide announcements when needed.

Link to the website

Emma

Emma is an application that helps you avoid overdrafting, finds wasteful subscriptions, and gives you total control over your finances. It’s available both on Android and iOS.

Link to the website

myGALF

GALF® is a fast-growing wellness aggregator company. They created React Native-based mobile application called myGALF with a set of features:

GALF Shop
Run Tracker
Health and Fitness Event Registrations
Services and Panelist Connect

To track steps during a user's run or walk, myGALF uses the Pedometer data from Apple HealthKit.

Link to the website

Helpr

Helpr provides the highest quality in-house care at an affordable price. They provide different care services via highly-qualified Care Partners.

The application allows users to:

Keep a record of their Care Partner’s hours.
Contact Helpr or their Care Partner quickly and easily.
Find Care Partners in their area right away.
Get notification when their Care Partner arrives.

Link to the website

Knowt

Knowt is an application that automatically turns notes into review quizzes, flashcards, and assignments. It was created by students and for students with React Native. If you want, you can import handwritten notes instead of rewriting them in the application.

Link to the website

Maphi

Maphi is an application that helps its users learn math in a fun way – you can solve math problems with simple touch gestures. Additionally, Maphi offers apps built with React Native that are available not only on mobile but also on desktop and web.

Link to the website

Myntra

Myntra is an online fashion store app, one of the biggest and most popular ones in India. Its users can choose from popular brands like Vero Moda, Nike or H&M, and their order will be delivered safely to their home. Myntra app offers priority delivery, early sales, lucrative deals, as well as other perks.

Link to the website

Microsoft Office 365

According to AppFigures, most of the Office applications have been rewritten using React Native.

Among them are:

Microsoft Edge
Excel
Outlook
PowerPoint

Link to the website

Oval

Oval is the system – rather than just an application – which helps you manage finances and get the most out of your money.

You can:

Track expenses
Save regularly
Invest money
Pay smart

Inside you will find:

Save – a place for your savings goals
Invest – a place where you can manage your investments
Pay – a place that is the centre of app availability

Link to the website

Saffron

Saffron is an application inside which you can save all of your favourite recipes. After that, you can create meal plans and generate grocery lists. As a cook, you don’t need anything else.

Link to the website

School Assistant

School Assistant is a free application for students to track their assignments, manage their schedule, check Google Classroom, and more.

App features include:

Dashboard
Assignments and Tests
Schedule
Resources
Widgets
Google Classroom
Document Scanner
Online Learning

Link to the website

Spendee

Spendee is a personal finance management application (more than 3 million downloads) that helps its users with:

Tracking cash flow – user need to connect bank accounts and e-wallets
Understand their finance habits – app analyses where the money goes and where they come from
Making their spending stress-free – spending limits and smart budgets don’t allow for overspending

Link to the website

Stillwhite

Stillwhite is the largest online wedding dress marketplace globally, thanks to which you can find your dream wedding dress and save up to 90%.

Link to the website

StreetCred

StreetCred is a mobile game where its users compete against each other to map a city. The winner is a player that marked the biggest number of places.

Link to the website

React Native and Firebase Dynamic Links

tomgrabski — Tue, 06 Jul 2021 14:55:03 +0000

What are Dynamic Links?

Firebase Dynamic Links allow you to make a single link that can be handled on all devices, whether a user opens it on a desktop or a mobile phone. In the case of mobile phones, our app doesn't even have to be installed!

When a user opens a link without an app installed, he will be redirected to App Store/Google Play to install it. Our link can still be handled by the app when it is launched for the first time. This greatly increases the accessibility and the number of installs of our app because users can get the app "directly" from a link.

Why do I need it?

Let's say that you want to invite users to install your app with a promo code. You could send promo codes to users, and then they have to copy this code after signing up. It may seem like not much but this is an additional action the user has to take. And the more user has to do along the way, the higher the chance he won't do it at all.

Thanks to Dynamic Links, you can send a promo code in the form of a link. It will allow users to install the app if they don't have it installed and automatically apply the code, so the users only need to sign up. This way, we minimize the effort users have to take and maximize the chance they will install our app!

There are many more use cases like allowing users to share content between them or even deeply integrating your app with your website – the same URL can either open your webpage or open your app. Possibilities are essentially limitless, and they make your app more appealing to the user.

How to get started?

First, we have to create a new project on Firebase or use existing if you already have one. I created a project called "dynamic-links-example". After you create your project and get into the Firebase console, you can find dynamic links under the "Engage" tab on left navigation menu. We can create a new URL prefix for our links by clicking the "Get started" button.

After creating a domain, you should see a page like the one below. I created a domain called exampledomain000.page.link that Google provides. If you have your own domain, you can add it here too.

From this moment, we can create our dynamic links. There are two main ways of creating a dynamic link. You can either create them using the Firebase console by clicking "New Dynamic Link" button or generate them in your application.

Creating your links with the first method is mostly used when you want to share something with your users – a promo code, for example. The second option is used when you want to add custom parameters that can be different with each link. These links won't be visible in your Firebase console.

To create such links, we first need to add a pattern so we will be protected from phishing attacks. To add a pattern click on the dropdown next to the "New Dynamic Link" button and select "Allowlist URL pattern".

I created a pattern that allows all links that look like "https://dynamic-links-example.com/<any-params-here>". Keep in mind that we added ".*" at the end. It allows us to add any params that we want to our links. For more details about how Regular Expressions work, check this link.

Adding Firebase Dynamic Links to our app

After we are done with preparing firebase to handle our links, we can proceed to the next step. Which is adding @react-native-firebase/dynamic-links to our app. I will assume that you already have Firebase configured in your app. If not, please refer to this guide.

First, we need to install a module mentioned above.

yarn add @react-native-firebase/dynamic-links

# if you are using npm
npm install @react-native-firebase/dynamic-links

# if you are developing app for ios
cd ios/ && pod install

Configuring iOS

Before we can start with configuring our iOS app to handle dynamic links, we need to have an Apple Developer account. Then we can create a provisioning profile for our app, and it has to have "Associated Domains" capability.

To check if your provisioning profile has this capability, click on the "i" icon next to your provisioning profile under the "Signing & Capabilities" tab in Xcode and check if there is a capability called "Associated Domains".

When we have this capability in our provisioning profile, we can add it to our app by clicking the "+ Capability" button and selecting the "Associated Domains". Now we should see a new tab where we can add our domain. In our case, it should look like "applinks:exampledomain000.page.link".

At this stage our iOS app is ready to receive dynamic links.

Configuring Android

To make our Android app handle Dynamic Links, we need to add an intent filter inside our MainActivity in the AndroidManifest.xml file.

        <intent-filter android:autoVerify="true">
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
            <data android:host="exampledomain000.page.link" android:scheme="http"/>
            <data android:host="exampledomain000.page.link" android:scheme="https"/>
        </intent-filter>

Generating Dynamic Links

After all this configuration, we are finally ready to generate some links in our app. It is important that our link param is compatible with the URL pattern we made in the Firebase. Otherwise, it will be blocked.

You can use two functions to generate links:

buildLink() – generates a link where all params are fully visible
buildShortLink() – generates shortened link where parameters are hidden

Both functions take the same params to build a link. Below there is an example of using buildShortLink().

const generateLink = async (param, value) => {
  const link = await firebase.dynamicLinks().buildShortLink({
    link: `<your_link>/?${param}=${value}`,
    ios: {
      bundleId: <bundle_id>,
      appStoreId: <appstore_id>,
    },
    android: {
      packageName: <package_name>,
    },
    domainUriPrefix: 'https://exampledomain000.page.link',
  });

  return link;
}

Handling Dynamic Links in app

Finally, we are ready to handle dynamic links inside our React Native code. There are two cases when our app can get a dynamic link:

The app was not running and has been launched by a dynamic link
The app has been launched in the background and is now moved to the foreground after receiving a dynamic link

To handle the first scenario, we use the getInitialLink() method, which allows us to get a link that has launched our app. We can use this method anywhere in our app, and it will return the same link until the app is restarted or launched from a different link.

import {firebase} from '@react-native-firebase/dynamic-links';

const getAppLaunchLink = async () => {
  try {
    const {url} = await firebase.dynamicLinks().getInitialLink();
    //handle your link here
  } catch {
    //handle errors
  }
};

Second scenario is handled by a listener like this:

import {firebase} from '@react-native-firebase/dynamic-links';

const unsubscribeDynamicLinks = firebase.dynamicLinks().onLink(({url}) => {
  //handle your url here
});

//remember to unsubscribe when you dismiss your component to prevent memory leaks
unsubscribeDynamicLinks();

And that's all! Now you can create, send and properly handle dynamic link with your users. And they can, too. :)

Final notes

Firebase Dynamic Links can add a lot to your app, which helps users interact and share data with others by sharing links more easily. These links preserve data even when they were launched before installing the app.

It also gives you the possibility to integrate with your website to add an option to open the same link on a web browser or app. And all of this with not much work needed.

How to Take Care of Data Security in React Native?

tomgrabski — Tue, 29 Jun 2021 13:02:12 +0000

It’s impossible nowadays to build software that is 100% secure. The probability of being a victim of an attack or being exposed to a security vulnerability is proportional to the effort developers put into protecting the applications created i.e. in React Native against any attacks.

Building a mobile app is not only about creating screens, making fancy animations and processing data from the API. One of the biggest challenges in the development process is security. Also, it is one of the most often overlooked aspects when building software.

When you want to build a secure React Native app, you need to pay attention to many factors. It may require some understanding of iOS and Android native platforms and general security rules in terms of programming.

So, what can you do to make your React Native application more secure?

Environmental variables

Environmental variables allow you to separate secrets from your source code. It is very useful when you have some API keys or other credentials that you may not want to share with other people. If you are building an open-source project, you can share source code while allowing other people to create their .env file.

It’s also very useful when you want to configure your app dynamically without changing the source code. For example, you can set different database URLs for each environment.

But it all makes sense only if you won’t forget to add the .env files to your .gitignore! Otherwise, you may end up with unauthorised access to many services your app is relying on. If you use Google a bit, you will find tons of stories of people losing money or data because of the secrets exposed on the repository.

How to correctly manage environmental variables in React Native? You can use one of the popular libraries out there, like react-native-dotenv. It’s really easy to integrate that library with your project and make your secrets safe!

Storing sensitive data

For persisted user data, you need to choose the right type of storage based on its sensitivity. You may need to use this data for offline support or save users’ access tokens, so they wouldn’t have to re-authenticate each time they use the app.

One of the most popular modules for storing data in React Native is Async Storage. The question is: is it secure enough, too?

Async Storage

Async Storage is an unencrypted and persistent key-value storage, which is available across the application. It is not shared between apps – each application has its sandbox environment and has no access to data from other apps.

More than that, it's a good idea for storing non-sensitive data across the application. It might be a Redux or GraphQL state or some global app-wide variables. On the other hand, you shouldn’t use that for storing tokens and secrets, as the storage is not encrypted in any way.

You probably started wondering about any more secure alternatives for Async Storage. The good news is that if you need some encryption, you can use Secure Store!

Secure Store

React Native itself does not come bundled with any kind of storage for sensitive data. However, there are some pre-existing solutions available. For iOS, there are Keychain Services, which allow storing small chunks of sensitive data securely. If you are wondering where to store tokens, passwords, and any other information – it’s the right place. Android has its equivalent called Shared Preferences.

In order to use Keychain Services or Shared Preferences, it is possible to use one of the available libraries:

react-native-keychain
react-native-sensitive-info
react-native-secure-storage

They are very easy to implement in your project. If you are building your app with Expo, you should give expo-secure-store a try – if you have ever worked with Async Storage, the usage is pretty the same, except your data is safe!

What are some other pros of using Secure Store? Except for the obvious one (encryption), you may appreciate some other facts:

The device must be unlocked to get access to the keychain.
It is not possible to restore the keychain to a different device.
In newer devices, encryption keys are stored on the hardware level rather than on the app level.

SSL pinning

Even if you are using HTTPS endpoints, your data may be still vulnerable to interception. SSL pinning is a technique that can be used on the client-side to avoid man-in-the-middle attacks. It works by embedding a list of trusted certificates to the client during development. Only requests signed with one of the trusted certificates will be accepted, and any self-signed certificates won’t.

You should keep in mind that fetch and axios do not come with SSL pinning. To make it work in your app, you should consider using one of two libraries:

react-native-ssl-pinning
react-native-pinch

They are both easy to implement, using OkHttp3 on Android and AFNetworking on iOS to provide SSL pinning and cookie handling. The certificates need to be bundled inside the app.

When using SSL pinning, you should always remember about certificates expiration. They expire every 1-2 years, and you have to update them in the app and the server. Otherwise, if the certificate on the server has been updated, all the apps with the old certificates will stop working correctly.

Prevent access for rooted devices

There are many reasons people are rooting/jailbreaking their phones. If your app is working with some very sensitive data, you should consider protecting it with identification whether the device is rooted or not. These kinds of devices may gain unauthorised access to the data you are storing in your app.

To protect your app, you can use a library called jail-monkey. With just a few lines of code, you can:

Identify if a phone has been jail-broken or rooted for iOS/Android,
Detect if the device is faking its GPS location
Detect if the application is running on external storage such as an SD card (Android only)

Banking apps make a good example – they are working with financial data, so most of them are not working on rooted devices.

Conclusions

It is challenging to create a bulletproof mobile app using React Native. However, if we put a little bit of effort and pay more attention to vulnerabilities, we can significantly reduce the possibility of a security breach. We should remember about security not only at the beginning of the project but at every stage, keeping in mind the bigger codebase, the bigger possibility of a security breach.

What is Saleor eCommerce: Platform Introduction

tomgrabski — Tue, 22 Jun 2021 13:02:26 +0000

Introduction

Owning an online store seems to be a challenge nowadays. The progressing digital transformation and the trend of moving business online accelerated as the world’s situation changed dramatically in the last twelve months. Such a situation also changed the way people do the shopping and raised their expectations.

These two things combined led to more significant demand for modern solutions in the eCommerce industry. Owners of online stores want their customers to have a better shopping experience delivered faster than ever before with many features simplifying or making the whole buying process more pleasing.

Such solutions include headless eCommerce platforms like Saleor. Keep reading to find out answers to questions like:

What is Saleor?
When to use Saleor?
How Saleor help you sell more?
What are the benefits of Saleor as a PWA?

More than that, you will have a better understanding of its core functionalities, and you may get inspired by a few Saleor eCommerce stores.

What is Saleor?

Saleor is a headless e-commerce platform for delivering blazingly fast, dynamic and personalised shopping experiences. It enables you to create great-looking online stores which have all the features modern webshop should have. Take advantage of an admin dashboard to manage products, people, and functionalities. You can use Saleor whether you are a small, midsize or enterprise-level retailer with a physical or digital inventory.

If you decide to use Saleor, your webshop will be available as both a typical online store and as a PWA application. The latter means that your customers will be able to browse the store offer and do shopping offline and with no internet connection.

Saleor is an open-source platform written with Python, React, Django and GraphQL. If you need more technical information, just check out their developer documentation.

Saleor offers:

Ability to use your favourite tools – you can integrate Saleor with favourite tools you already use like CRM, CMS or fulfilment API thanks to GraphQL API.

Front-end freedom – you can either use the default PWA storefront, JavaScript SDK or build a client from scratch in the language or platform you prefer. In other words, you can decouple the front-end layer from business logic.

Flexible products – you can set up products as they are and integrate them with accounting and inventory management systems. Some of product configuration options:
- Product bundles (this option will be available in 2021) – it allows you to sell individual goods or services as mixed and complementary packages
- Groups – this feature will make your online store more intuitive and easier to browse through thanks to grouped products
- Configurations – it doesn’t matter what you sell because Saleor helps you by providing the flexibility of products configuration

Possibility of going global from the day one – with Saleor you can sell wherever you want to thanks to:
- Multi-channel/Multicurrency – you can create customised sales channels with different currencies, pricing and product availability
- Multilanguage – at the moment Saleor supports more than 30 languages
- Multi-warehouse – possibility to assign particular warehouses to shipping zones allows for automatic calculation of available products depending on local stock levels

When to use Saleor eCommerce platform?

As a modern eCommerce platform, Saleor offers various features and functionalities (described later in this article) that help businesses achieve different business goals. However, these goals can be achieved with other eCommerce platforms as well, so the question is: when Saleor exceptionally shines?

When WooCommerce or PrestaShop is no longer enough for you
You are looking for a Magento 1 alternative (note: since June 2020 Magento 1 Open Source is no longer supported)
When Shopify is not sufficient, but you don’t want to pay for Shopify Plus
You have in-house Python and React competences
When you want to build a multi-tenant platform

Why choose Saleor?

All the things mentioned above wouldn’t be possible without a few things Saleor provides to its users. These include:

Blazing speed – page speed and performance are crucial Google ranking factors and reasons why customers choose (or not) a particular online store. Saleor helps you delight users with a shopping experience that loads in a blink of an eye.

SEO efficiency – the front-end layer in Saleor shops is static, and Google favours static pages as they are fast, light and easy to scan for robots.

Accessibility on any device – your online store will work seamlessly on all devices and screen sizes.

Rich user experience – having a good offer isn’t good enough, and creating a custom user experience is one of the things that can give you a competitive advantage. Experiment with your design without compromising the page load speed.

Instant changes – once the developer makes changes, these will be visible to the customers.

Safety – on the contrary to dynamic pages, static ones (the front-end layer of Saleor’s webshop are static) have no direct connection to the database, dependencies, user data, or other sensitive information. Your customers’ data is safe.

Benefits of Saleor as a PWA application

As already mentioned, a webshop built with Saleor acts as both a typical online store and a PWA application. Now, let’s take a closer look at the latter, but instead of writing down its definition, it’s better to focus on the real benefits it provides.

Possibility to sell anywhere, anytime, and on any device

Design of Saleor’s online stores is 100% responsive and adapts to any device.
Browsing and buying are possible, both online and offline.
Push notifications make it possible to mix online and in-store experiences.

Higher customer engagement

Thanks to PWA, your online store will be more effective and engaging for your customers. Just look at the numbers below.

Choosing Saleor results in:

20% lower bounce rates
25% higher page views
80% quicker time to checkout
9% increase in revenue per visit
2.8x greater conversion rate

Lower development costs

Statistics are merciless – 80% of applications will be uninstalled within a week. So why spend money on something people won’t be using? With Saleor you don’t have to spend money on building a separate mobile application because your online store will work as a PWA application which doesn’t require installation.

Core Saleor eCommerce functionalities

Saleor combines ready-to-use elements and powerful integrations to let you create customised shopping experiences for your customers. These can be built on top of the GraphQL API, which makes everything much easier and faster.

Now, let’s explore Saleor’s core functionalities.

Saleor Storefront

No front-end limitations

There are no limitations of how your store’s front-end can look like – design and build a Saleor storefront with the technology of your choice.

SDK

Connecting to the API is effortless.

Total customisation

You can either use a pre-made PWA template or simple front-end SDK to make your online store look the way you want.

Multi-device accessibility

Save money on building a separate mobile application as your online store will work well on any device, both as a typical online store and as a PWA application.

Constant UX optimisation

Creating user experience (UX) once is not enough – improve it continuously with A/B testing.

Headless development

Work separately on the frontend and backend thanks to decoupling them.

Powerful product configuration

Flexible product types

Your inventory can contain both digital and physical products with multiple variants that are easy to configure.

Unlimited product attributes

Sell products of different types that can have different attributes depending on what you need. In other words, Saleor adapts to your inventory – not the other way around.

Product bundles and collections

Create product bundles and collections by grouping similar or complementary products to increase revenue per order.

SEO optimisation

Take care of organic traffic by creating SEO-optimised content for products, collections, and categories.

Multi-warehouse inventory

Manage multiple locations seamlessly by tracking stock levels, editing multiple products at once and checking items that aren’t available anymore.

CSV import and export

Saleor makes it possible to import and export any product data to Google and Excel.

Internationalisation and localisation

Multi-language

Saleor already offers more than 30 languages.

Translations module

Translate dynamic content in the dashboard to create different language versions if you need them.

Localised data

Saleor takes advantage of geolocation – it checks your location and matches it with the location of your customers. This way, you can sell both locally and globally.

Global support

Whether you are in Europe or the US, Saleor supports you in building better shopping experiences.

Global taxes

Thanks to integrations with Avalara and Vatlayer, tax calculations in major markets are covered.

Data-driven marketing and sales

Tracking sales history and metrics

Track performance by viewing individual or multiple sales numbers in real-time or past time.

Experimentation

Use data and A/B tests to optimise your store and its user experience.

Upselling with machine learning

Saleor offers machine learning tools to generate more revenue through upselling. It delivers not only a better shopping experience but also a higher average order value.

Modern, PWA storefront

High performance and speed

PWA is the fastest technology that any eCommerce store can use. Forget about Magento load times and buffering once and for all.

Enhanced SEO

Take care of SEO by editing all essential aspects of your online store, like URLs, metatags and Open Graph. These are things that are important for higher organic traffic which means new customers.

Quick product search

Integrate your online store with Elasticsearch so your customer can quickly browse through the store.

Order management

Shipping freedom

Give customers the possibility to choose their favourite carrier or delivery method. You can also set different rates for each option depending on a shopping zone, price, or weight. Tracking info can be added to every item.

Customer profiles

Get a bigger picture of your customer base by creating individual profiles for each customer.

Solve different issues easily

If there are some problems with inventory or customer service, you can try to solve them by creating dummy or actual orders.

Refunds and returns

Manage refunds and returns easily in one place on the order fulfilment page.

Cart and checkout

Payment integration

Use global providers like Paypal, Braintree or Stripe to collect payments.

Sales and vouchers

Increase conversion rate by creating sales and vouchers.

Abandoned checkouts

Remind customers about abandoned carts as the Saleor online store saves such information.

Customise carts and checkouts

Modify the checkout process according to your needs and data.

Back office

Staff management

Invite staff members and assign privileges and roles to them.

Authentication keys

Make it possible to log in through Google and Facebook to prevent unwanted access to the admin dashboard. Use authentication keys for that.

GDPR compliance

Make your store comply with GDPR or other laws to make sure your customers feel safe about their personal data.

Google Analytics integration

Measure and analyse traffic to your online store thanks to Google Analytics so you can check who your customers are and how they behave.

Manage your pages

Adding new content like articles or additional pages is easy as pie.

Examples of Saleor eCommerce shops

https://roomlab.co.uk/

https://www.patchplants.com/

Results:

Sales increase consistently at 30% per month

https://www.prettygreen.com/

Results:

+1% improvement in eCommerce conversion
+5.55% improvement in average order value
+6,25% improvement in product recommendation clicks

React Native Pros and Cons in 2021

tomgrabski — Tue, 15 Jun 2021 12:06:54 +0000

I see web and mobile development technologies on a crazy race to improve their performance each and every year.

Obviously, that’s great news. Development is becoming faster and easier to execute, cheaper to implement, more user-friendly with less effort, and so on. We live in great times – implementing a business idea has never been easier and technology is opening the doors of imagination wider than ever before.

For example, let’s take a look at mobile development. Everybody wants to build an app, and everybody wants to use them (according to stats, users downloaded 178.1 billion mobile apps to their smart devices by the start of 2018).

But until recently, creating an app was very time and cost-consuming. And before going to the market, budgets could evaporate and so could the entire project. To avoid that, businesses started to look for alternatives, and they found cross-platform development with React Native at the head as a great solution.

Today, you will learn about the pros and cons of React Native, and you will be in a much better position to make an informed decision about adding React Native to your tech stack.

What is React Native?

Meet React Native – an open-source platform created in JavaScript by Facebook. It enables you to build mobile apps for both Android and iOS. They can work on any device and still use one codebase only.

RN is a perfect technology to save on development costs, yet still having truly native performance and user-experience flexibility.

It has a number of great advantages, many awesome “ready-to-go” templates, the army of dedicated contributors, and a crowd of fans.

Not to mention world leaders as a core users:

It’s pretty much everything that technology needs to become hot and mature.

Although, like any other platform, it has its pros and cons and shouldn’t be used to execute absolutely every single project there is. We can see more and more developers (even native ones) choosing React Native as their core mobile development technology.

But it’s not the choice of developers only.

Thanks to many business advantages (great performance, low production and maintenance cost, and more), it’s not a surprise that many biggest players on the market are choosing React Native as well.

So what makes it so special for both businesses and developers?

Let’s dive in more deeply into advantages, and meet the pros and cons of React Native.

When to use React Native?

To keep it short, all app makers that want their apps to work on all devices, both Android and iOS operating systems, yet still keep it all in one codebase only.

Although React Native is becoming better and better in terms of performance and it seems to get closer to truly native experience, there are still many differences that we should be aware of.

Cross-platform vs native mobile apps

The most important difference between native apps and cross-platform apps is that native apps are made to work on a particular operating system. That means they can use all the blessings of that system, yet it cannot work anywhere else beside.

However, RN aims to be platform-agnostic in the future, because of re-architecturing the framework. That's why there are some new things going on, like React Native Web or react-native-windows (for building apps for Windows and macOS).

Although cross-platform apps have been made to work everywhere, they still lack the kind of flexibility and performance on a specific operating system that native apps have.

Take an alligator and a fish. An alligator can walk and swim, but will never swim as good as a fish. On the other hand, fish cannot walk at all. So cross-platform apps are like alligators. They can swim and walk, but will never be as good at swimming, as fishes (native apps).

This is why if you are planning to build a game, or something extremely demanding design-wise, you should make a comparison of cross-platform apps and native apps more closely, to decide what should be your choice, but native apps are still unconquered if it comes to performance, yet React Native is silently getting there.

Just mind that performance differences are only visible in extreme cases, so if this is not absolutely crucial to your business, React Native may appear to be a much better idea from a business and development point of view.

Take Shopify, and their decision on going full gas with React Native.

After years of native mobile development, we've decided to go full steam ahead building all of our new mobile apps using React Native.
Shopify

React Native in 2021

Before I go to the actual pros and cons of React Native development I would like to quickly stop and mention what really makes me so excited.

Re-architecture announced in 2018 puts a lot of effort to make RN more performant, e.g. there is a new JS engine available – Hermes, and it makes apps running much faster on older Android devices.

However, it doesn’t end there. The React Native re-architecture means the deprecation of the Bridge in favour of a new element called the JavaScript Interface (JSI). It enables Fabric and TurboModules.

The JSI comes together with a few improvement that really excites me:

The JS bundle is not bound to the JSC anymore as it can use any other JS engine – like Hermes.
JavaScript can hold a reference to C++ Host Objects thanks to using JSI and invoke methods on them.

JSI allows for direct control over the native modules.

React Native pros

The list below was created to give you as most comprehensive list of React Native pros as possible and to divide them into two groups – pros from a business perspective and development perspective.

If you know more React Native pros, please let me know in the comments.:

From a business perspective

Development speed and cost – what developers love about React is that they’re able to reuse and recycle components developed before by them and the wide React Native ecosystem. They can also share their codebase and make them work faster.
Works everywhere – Once you learn React Native, you can build apps for iOS, Android, and Windows.
User Experience – as long as you are not using extremely complicated designs and interactions, or you are not making a heavy game, you are still able to build high-performance apps with an absolutely great user experience.
Faster time to market – you can arrive on the market much faster to test your MVP, get feedback and adapt changes accordingly without a need for a big investment.
Help on demand – React Native community is massive. Many problems that you may face during development, may already be fixed somewhere out there.
Maintenance cost – you only deal with one codebase.
React Native mobile apps are visible – it’s easy to get your apps listed in AppStore and Play Store. Not like PWA.

From a development perspective

Easy to work with – experienced developers will definitely appreciate the development experience. Meaningful error messages, time-saving and robust tools make it a premium choice over other platforms.
Changes preview – you don’t have to rebuild the application, again and again, to see changes. It saves a lot of time and makes things quick and efficient. Hit “Command+R” to refresh the application.
Quick iteration cycles – which just simply adds more value.
Intelligent debugging tools – and error reporting mechanisms. Give it an advantage over others and allows developers to focus more on the productive part.
Easier to debug – uses Flipper as default.
Keep things minimal and worthy – it doesn’t force you to work in Xcode or Android Studio for iOS or android apps respectively.
A large community of developers – who are contributing day in, day out.
Code reusability – developers can easily integrate 90% of the native framework and reuse the code for any platform. This feature not only saves time but also helps to cut down the cost of building two apps. Cool thing is that you can use the web app code (written in React) for mobile apps.
Pre-developed components – numerous open-source libraries are available to accelerate your work.
Live reloading feature – it helps to compile and read the file from the point where the developer made changes. Then a new file is offered to the stimulator which automatically reads the file from the beginning.
Compatible with third-party plugins – and does not require high memory to process. No specific web views functions are required and native modules are linked with the plugin through the framework. Smoother running and faster loading are key features for it.
Transform web projects into mobile applications – work done on this platform is easy to understand, and anyone can work around it although they were not previously engaged in it. It increases flexibility and web updates become consistent.
Smoother and faster UI – as compared to classic hybrid ones. The interface created through React Native is highly responsive and feels fluid.
Expo – it’s a great tool for fast development of apps for many platforms, with many ready-to-go libraries in the SDK.
One codebase for all – a possibility of keeping just one codebase to run a project in an Android, iOS and web browser
Demo mode – when using Expo, it’s possible to build a demo for a customer without actually pushing the app to the Testflight or Google Store. The only thing we need is an Expo App on the mobile device.
Over The Air (OTA) updates – allow pushing quick fixes directly to users without the need to wait for App store or Google play to accept our changes

React Native cons

Performance is still lower than native – React Native is not able to use all the blessings and potential of a specific platform. On the other hand, native apps can really maximize functionalities and deliver the ultimate user experience in the result.However, the re-architecture puts a lot of effort to make RN more performant, e.g. there is a new JS engine available - Hermes, and it makes apps running much faster on older Android devices.
Not efficient design-wise – If you consider complicated designs or advanced interactions as a crucial part of your business advantage, you should definitely go for native development.
Custom modules – many custom modules are already available, yet, there may be a need for some specific components that you will be forced to build from scratch yourself.
Updating issues – it’s hard to keep the app updated with the latest React Native version. Updating RN versions is in most cases a complicated process.
If you are building a web app with React Native, you have to give up all the libraries that are using native modules

How To Eject From Expo Managed Workflow to Bare?

tomgrabski — Tue, 08 Jun 2021 06:50:20 +0000

Introduction

If you are afraid to eject from Expo Managed Workflow to Bare Workflow, this article will help you a lot.

Expo is a fantastic tool to develop React Native apps.

There are two ways you can use Expo - managed and bare workflow. The Expo team recommends using the first option at the beginning of the road.

To start with the managed workflow what developers need to know is JavaScript and a few skills in React only. All the configuration is contained in one file - app.json.

However, sometimes we encounter certain limitations and are forced to leave the managed workflow, but many developers seem to be afraid of taking this step.

So, should they eject from Expo managed workflow?

Why using Expo instead of starting with a plain React Native project?

First, Expo development offers a lot of well-tested, consistent, and increasingly comprehensive libraries that give you access to the underlying native APIs. Additionally, the Expo team offers battle-tested modules that are constantly maintained by them. This is a great advantage, as developers can spend more time developing instead of doing painful configure.

Expo also offers many out of the box solutions such as OTA (Over The Air) updates and a push notification service.

Think of OTA - if you ever had a situation where you find typo mistakes or have to change some spacing by adding a few pixels in your app, and then you have to wait for Apple to approve a change, you'll appreciate OTA updates a lot - as all of those small changes will appear as soon as you run the publish command. It simply publishes new version of JavaScript application and updates without building standalone app and re-submitting it to the App Stores.

Expo also contains a push notification service out of the box. It is a very important feature to notify users about, for example, sales in shops, messages from friends or incoming purchases. All the troubleshootings with native device information and communicating with APNs or FCM are taken care of behind the scenes, so that you can treat iOS and Android notifications the same, saving yourself tons of time on the front-end, and back-end!

Let’s have a look on other advantages Expo has over plain React Native projects.

Meet Expo CLI (command line interface) and Expo Dev Tools (Web UI) - things that allow developers to install packages, run, and easily manage projects. Later on you can run applications on different platforms (iOS, Android, Web) from dev tools.

Expo also contains a list of connected devices via QR code - enabling easy connection of physical devices. It is awesome as you can share your app with anyone, anywhere in the world while you're working through the Expo Go app (available on App/Play Store)!

When you change connection to tunnel mode and share your QR code with other people, they are able to run the app on their phones.

It’s a very useful tool to work with designers, for instance. They can run the app on their phones, and whatever the developer will change in the code, it appears on their devices instantly.

The reason for that is applications are built and hosted on S3. Every change in code rebuilds the app on S3 and immediately updates the app on users devices.

Instead of having to sign up several external testers through App Store Connect, you can easily have them download the Expo Go app and have a working version on their phone.

The last thing I would like to mention is that Expo is automatically updating our React Native to a higher version, so we don’t have to do it on our own. And please, let those who never had a problem with the RN update raise their hands first.

So with Expo, the update’s nightmare will finally disappear.

If you decide to use Expo

The Expo team suggested that we should start developing with managed workflow first.

So, What is managed workflow actually?

In documentation we can see:

“The managed workflow is kind of like Rails and Create React App, but for React Native.”.

Expo is really trying to manage as much of the complexity of building apps for you as it can, which is why they call it the managed workflow.

Developers that are using managed workflow don't have to use Xcode or Android Studio, so they just write JavaScript code and manage configuration through app.json.

Isn’t that fantastic?

Building mobile apps just in JavaScript and all the configuration is managed by app.json file.

This is truly awesome, yet, just the same as everything that's awesome, ends quickly.

Limitation of Expo managed workflow.

Here’s the list:

Not all iOS and Android APIs are available

Some of the APIs are not available yet:

Bluetooth
WebRTC
In-App Purchases

The SDK doesn’t support all types of background code.

For now SDK supports only geolocation (including geofencing) and background fetch. You cannot do anything with audio, controls or handle push notifications in the background.

If you need to keep your app size extremely lean, the managed workflow may not be the best choice.

iOS app 20mb / Android 15 mb size.

This is because "managed" includes a bunch of APIs - this lets you push over-the-air updates to use new APIs, but comes at the cost of binary size.

Some of the APIs that are included are tied to services that you may not be using - like Facebook Mobile SDK ,Google Mobile SDK - however, they offer many possibilities related to e.g. Auth.

Native libraries to integrate with proprietary services are usually not included in the SDK

Avoid adding native modules to the SDK if they are tied to external, proprietary services — we can't add stuff to the SDK just because a few users need it. It increases the size of building and the expo team is starting to think of the broader userbase.

The only supported third-party push notification service is the Expo notification service.

The minimum supported OS versions are Android 5+ and iOS 10+

Updates (JS and assets) for OTA updates and builds are size-limited

Expo's current update service supports updates around 50 MiB.

If you met any of the limitations outlined above, it’s probably time to eject from expo managed workflow and start with the bare workflow.

It’s about time to eject from Expo managed to the bare workflow

Many JavaScript developers are concerned about ejecting from managed workflow.

They are not sure if they can handle things related to native applications, but they must remember that fear makes things look twice as bad as they are!

After running the eject command in our project this is how the terminal looks like:

It asks about the name for android package and iOS identifier. I leave it as default values.

After the successful eject we got info like this below:

We have already changed workflow mode from managed to bare.

Take a look at the file tree. Something new has appeared.

Two new directories:

Android - contains files that are responsible for the native part of android app.
iOS - like in android directory, but that are responsible for iOS part.

Index file is the entry point of our app and metro.config - a JavaScript bundler used to React Native apps.

In the bare workflow we have full access to the underlying native projects and any native code. It's a "bare" native project with React Native and one or more packages from the Expo SDK installed.

In other words, anything that you can do in a native project is possible here.

Minds that the configuration must be done on each native project rather than once with app.json

Configuring app icons, launch screen, and so on must be configured in the native projects for each platform using the standard native tooling, rather than once using a simple JSON object.

When you eject from the managed workflow, the app becomes a vanilla React Native app that includes all the Expo SDK APIs that you were using already (not more than that).

Developing app in Bare Workflow

Run and build project

Now we just have to run yarn ios or yarn android to start JavaScript bundler server and build the project binary. This requires also Xcode or Android Studio, depending on the platform.

Adding libraries from Expo SDK

Pretty much the same as in managed workflow using expo install. Additional step is to run npx pod-install to install iOS native dependency. Some of the packages require a bit of additional work with adding stuff to info.plist - iOS or android manifest files.
After that, you just need to recompile the project for both platforms.

Adding own custom native code

The process looks pretty much like in any other React Native app. It is mostly depending on docs of these packages, but usually you need to add a bit of code to files in iOS and Android directories.

Developing with Expo Go app

You can still use the Expo Go app after the eject. When you have added a native code that client doesn’t support, you just need to add guards to prevent invoking native APIs when they aren’t available.

To achieve that you can use the Constants package from Expo SDK. That package includes information about apps run on Expo App Go.

Another way is to use special files with expo extension. For example, if we use a component that renders a Map and the map library isn’t supported by Expo, you can prepare another component called Map.expo.[js/json/ts/tsx] which will be rendered in the app if you run it by Expo Go. If you run apps in a traditional way, it will just render a correct Map component.

React Native for Web app on bare project

Expo for web also works on bare projects. All you need to do here is to import one simple component into App.web.js to demonstrate it, and run expo start --web.

Workflow comparison

As you can see the differences between those workflows are very small. We can still use most of the tools. On the Expo site in their Docs we can see a table with comparison.

So, as you can see, most things are covered. The only difference is, in managed workflow we write just in JavaScript, but we cannot add custom native code, nor manage native dependencies, or one of the things I mentioned above in managed limitations.

Conclusion

If you choose an Expo tool to develop the next React Native project and start in a managed workflow, you don’t need to be afraid to eject from it, if you feel you have to.

The differences between them aren’t as big and as scary as it may seem. We have access to Android and iOS native modules and all we have to do is some configuration on it instead of configuring all in app.json file.

After the eject we can still use most of the things Expo gives us - Expo - SDK, CLI, Go App or OTA. So if the time to eject comes, don’t panic, bare flow is also fantastic, just like a managed way.

React JS FAQ: The Most Common Questions

tomgrabski — Tue, 01 Jun 2021 18:45:50 +0000

Introduction

A lot of data and information about technologies like React appear on the internet every day. It’s like: a new article there, a new podcast here, oh, and there is another video! Therefore, it’s getting harder to find relevant sources of reliable answers to the most pressing questions. Also, we often have to find more than one source to answer all of our questions. So, to help you with that, we have gathered FAQ (frequently asked questions) about React JS.

Frequently Asked Questions

What is React?
What are the pros of React?
What are the cons of React?
What can I build with React?
When to choose React?
How much does it cost to build a web application with React?
How long does it take to build a web application with React?
Is it possible to migrate from other frameworks/libraries to React?
Who is using React?
What are the React-based frameworks?
Why choose React?
How can React help your business?
What are React alternatives?
How to hire React developers or an agency?

Answers

1. What is React?

In short, React is a JavaScript library for building performant and user-friendly interfaces. React was released as an open-source project by Facebook in 2013, and it quickly became popular and widely used even by big names like Netflix, Uber, or Airbnb.

React owes its popularity to being easy to pick up, more convenient to operate with than other solutions and maximum flexibility and freedom in creating interfaces.

React official website describes three main things you should know about React:

Declarative style – creating interactive user interfaces with React is painless as React updates and renders just the right components automatically after any data update.
Component-based architecture – thanks to simple blocks called components and subcomponents, you don’t have to immediately build a full application – you can start small and then go from there.
“Learn Once, Write Anywhere” rule — components and code are reusable elements that help you build, for example, new features. You can use these elements whenever and wherever you want, without writing them again from scratch. React can also use Node.js to render on the server and React Native to boost mobile application development.

2. What are the pros of React?

You already know some React benefits like creating completely custom user interfaces, but the list of its advantages is much longer. Let’s write them down and explain shortly looking from two different perspectives – business owner and developer.

Pros from a business owner’s perspective

Cost-effectiveness – you don’t have to spend big money from the beginning as you can start small with simple blocks called components and subcomponents. It shortens time to market and saves you money.

Great user experience – React websites and apps are blazingly fast thanks to features like Concurrent Mode or React Fiber. Together with frontend freedom, it creates great and customised user experiences.

Popularity – it’s a benefit because React won’t magically vanish from the planet Earth in the next few years. The thing is contrary – it will become even more stable and mature technology with an even bigger community and support in the future.

Performance and speed enhancement – React offers many features that make its websites and apps fast and performant. Moreover, think about it this way – if React can handle Facebook, it can handle anything while maintaining good performance.

SEO-friendly – Google loves React sites and apps for their structure, performance, speed and user experience. All these things (and more) leads consequently to higher rankings in search results.

Shortened time to market (TTM) – the time is money, especially for startups and other companies building digital products. React makes the whole development process faster and easier. What’s more, there is no need to build the entire application before testing it on the market – you can start with building a working MVP and make changes accordingly to real users’ feedback.

Pros from a developer’s perspective

Backward compatibility – the public API remains almost the same every time, so it’s easier for Facebook and other companies to refresh code while using its old pieces.

Concurrent Mode – it’s a set of features, created to make React applications even faster and user-friendlier. It makes them adapt to the user’s device capabilities and network speed.

If you need more information, read about what React concurrent mode is in another article.

Creating Dynamic Web Apps is easier – React simplifies the whole process with the help of JavaScript Extension. Thanks to JSX, HTML quotes and tag syntax can render specific subcomponents. Also, JavaScript Extension makes creating machine-readable codes easier.

Custom React Renderers – the release of React Native forced developers to start implementing different rendering. And that was the origin of the Custom React Renderers concept, which helps devs build custom implementation.

Development time – React speeds up the development process thanks to things like:

1. ready-to-use solutions

2. created components are reusable

3. possibility to set up a web app by using “Create React App” (a starter kit provided by Facebook)

Easy to learn and use – JavaScript developers quickly pick React up, even if it’s their first time using it. However, it’s always great to have someone on board who will mentor them during the learning and development processes.

Easy to scale – modularity of React makes it easy to scale applications – instead of building one big application right away, you can start small and build from there. For example, a simple working MVP can transform into a complex single-page application over time.

It’s easy to hand it over – as React applications are component-based, it makes them readable, understandable and easier to maintain. If the code is clean, it’s easy for an external developer to understand it and take it over.

It’s easy to hire React developers – the popularity of React (and demand for it) is growing since it’s release. Because of that, it’s easy to find skilled React developers that can join your dev team.

Helpful tools – React developers can use a set of tools called React Developer Tools, which is available as an extension to Google Chrome and Mozilla Firefox. It allows for checking the components hierarchy in the virtual DOM and editing particular components.

Huge community – React community is growing since its release in 2013, and now it’s pretty huge. Because of that, there is a great chance that there is already a solution to your React-related problem or you will easily find help.

Reusable components aka modularity – React apps are built of single components, which can be divided into subcomponents. Every component and subcomponent is responsible for one small piece of the whole application and can be reused anytime. Thanks to that, it’s possible to build even a comprehensive application from simple blocks.

Testing and debugging friendliness – React uses native tools to test and debug components before actually using them.

3. What are the cons of React?

Like any other technology, React has its cons.

High pace of development – React is still relatively new technology which evolves fast. Therefore, it may be hard for some to keep up this pace because of new features coming out now and then. And some developers might not like constant changes.
Incompleteness – React provides only the View part of the MVC model. Because of that, you have to rely on other technologies, too. However, it allows developers to have almost full independence and thanks to that, every project might be different from each other.

4. What can I build with React?

React.js allows you to build great digital products and interfaces like:

Single Web Pages
Static websites
SaaS products
MVPs easy to scale
Complex and demanding Web Apps
Custom User Interfaces

5. When to choose React?

React developers can integrate it with any backend, so it’s a great fit to almost any web app, especially if you plan to build large and complex apps.

Choose React if you want to:

Increase development speed (and lower development cost)
Enhance user experience, so it’s almost like a native one
Get faster to market
Get on-demand help from the community
Lower the maintenance costs
Use future-proof technology

6. How much does it cost to build a web application with React?

The cost of creating a React app depends on the complexity of the application.

However, React features helps you save money thanks to:

Reusability of components
Many “ready-to-use” components

More than that, with React you build one codebase for all devices (desktop, mobile, tablet, etc.) so you don’t have to build separate applications for iOS, Android, etc.

7. How long does it take to build a web application with React?

Development time, as well as development cost, is highly connected to the complexity of the application. However, React features boost the development process thanks to:

Reusability of components
Many “ready-to-use” components

There is one more thing worth mentioning – as the React community is huge and still growing, even if you encounter some problems along the way, a significant number of contributors will help you.

8. Is it possible to migrate from other frameworks/libraries to React?

Yes, but each project will demand an individual approach.

9. Who is using React?

Companies from unknown startups to big brands are using React, and you should know some of these names:

10. What are the popular React-based frameworks?

There are many frameworks built upon React, but two are particularly popular nowadays – Next.js and Gatsby.

Next.js is a framework for building web applications and superfast static websites. It offers the best developer experience with all the features developers need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, to name a few.

Gatsby also helps developers build web applications and static websites. However, there are a few differences between Gatsby and Next.js.

Additional readings:

What is Nextjs and Why Should You Use it in 2021?
Gatsby Pros and Cons
Next.js vs Gatsby – Which One To Choose?

11. Why choose React?

There are many good things to say about React, but we can highlight six main reasons to choose it for the next project.

Reason 1: Development efficiency

Developers can use once created components over and over again. They can also share their codebase and work much faster.

Reason 2: Native-like user experience

Ability to provide a great user experience was a priority when Facebook was releasing React. Thanks to that, you don’t have to overpay for native development of performant web applications.

Reason 3: Faster time to market

With React you can start small by building a simple working MVP to test it in front of the real users, get feedback from them and adapt your application accordingly to their comments without investing a lot of money.

Reason 4: Scalability

It’s not only about starting small and building complex web applications step-by-step. It’s also about clean and development-friendly code which allows for handing React projects over to any other React developer. Because of that, your dev team can grow fast and so can your application.

Reason 5: Trusted by the biggest brands

If big brands decided to trust React like Netflix of Slack, why shouldn’t you? It’s proof of being good-to-use and performant technology.

Reason 6: Stability and maturity

Popularity and community of React have been growing since its release. It ensures that React isn't a one-season wonder everything will forget about soon. Actually, the thing is contrary – it’s proof that React is a stable and mature technology that will not only last but also evolve in the near future.

12. How can React help your business?

You should already know the pros of React for business owners, so let’s just sum them up.

React allows you to:

Build a digital product that works on any device
Deliver flawless user experience to your users and customers
Become future-proof thanks to using technologies that will pass the test of time
Become extremely SEO-efficient which consequently leads to higher organic traffic and more leads and customers

13. What are React alternatives?

The main competitors and alternatives of React are other JavaScript libraries with the focus on front-end web and mobile development.

These libraries include:

14. How to choose React developers or an agency?

It is a challenging task as today everyone can set up a domain, build a website during one weekend and look like a professional agency with almost no effort. To help you avoid choosing the wrong agency, we prepared a list of questions to ask them before hiring them. We divided these questions into general questions and technical questions.

General questions

What’s your bench?
What’s your longest deal you worked on so far?
Can you do me a code audit?
Do you do any open-source and community activities?
Did you use Continuous Integration?
Can you send me developer profiles or blind CVs?
Can I call some of your previous clients?
What did you work with before React?
What are the rates?

Technical questions

We prepared a questionnaire, which you will find there.

To find out more about choosing a React development agency, just simply use "10 questions to ask a React Agency" questionnaire.

What’s next?

We tried our best to include all of the frequently asked questions about React and simple answers to them. However, you may have more questions, and if that’s the case, we encourage you to contact us directly.

React Native FAQ for 2021: All You Need to Know

tomgrabski — Wed, 26 May 2021 06:54:54 +0000

It's really hard to find reliable answers to the most common questions in one place when it comes to modern technologies – like React Native. This is the main reason behind this FAQ in which we cover the definition of React Native, its pros and cons, and other things you should know about it.

What is React Native?

You probably know React Native development as an open-source mobile app platform created in JavaScript that is taking the mobile app development market by the storm.

It has a number of great advantages that are saving you many development costs and makes your app truly outstanding.

However, like any other platform, it has its cons as well.

So, before you add it to your tech stack, let's go over the FAQ that I think every developer should be familiar with.

Why did we need React Native?

Before React Native arrived at the market, people wanted to build mobile apps mostly in native platforms.

It was mainly related to the high performance, and great customized user experience.

But they had their limitations as well.

For instance, native development environments were only working for a certain OS. That means, in order to develop applications for different platforms, you need a help of different developers.

Thanks to React Native, developers could work around a single tool to develop cross-platform applications with a truly native experience.

More than that, cross-platform development and React community is constantly growing, Many functionalities we consider impossible few years ago, are now working perfectly without a need for native development.

What’s the difference between React and React Native?

The difference is quite simple.

We use React for web apps, and React Native to develop mobile apps.

Where React focuses more on improved UI (User Interface), RN is sharing a common logic layer for all OS. That provides solutions to problems which were being dealt for quite a while now, such as development inefficiency, slower time to deployment and less developer productivity.

It is important to note that React is a library used for web development whereas React Native is a platform.

Another interesting thing is that when you want to use RN, you have everything you need to start a project. On the other hand, creating a new project with React means you have chosen only one of many libraries you will have to use to build a web application.

Who is using React Native?

You may hear that big players are considering React Native as their development platform more often.

Here's only a small chunk of them:

The list goes long and probably will keep on increasing as React Native is delivering the features and support that is hard to find anywhere else.

Can existing apps be migrated to React Native?

The answer is 'yes' as long as your app does not depend on doing heavy computing tasks on the device. Constantly expanding capabilities of React Native allow more and more complex apps to be made using it.

Also by migrating to React Native your app becomes cheaper to maintain because there is only one codebase for both Android and iOS.

What are React Native alternatives?

Its good to know that there are other technologies that aim to achieve the same goal and have different ways of doing it. Here are some examples:

NativeScript – developed by Progress and released in 2014, it allows building apps for both iOS and Android using Angular, Vue or vanilla JS, CSS and HTML
Cordova – created by Nitobi, later bought by Adobe. Used to make hybrid apps that instead of using native components wrap what is essentially a web application with access to the device's native API's
Flutter – one of the youngest technologies, which was published in 2017 by Google. Used to make apps for both iOS and Android using Dart language
Xamarin – owned by Microsoft, allows developers to build apps for iOS and Android using C#

Can apps for iOS and Android look or behave differently?

Yes! But this comes at a cost because different code has to be written for both platforms. And even then it's much cheaper than developing two native apps.

React Native was built in a way that separates Android and iOS logic, so it's possible to make them look and work differently while still being able to share most of the functionality between both platforms.

Pros and Cons of React Native

The most important advantages of React Native are the ones regarding development efficiency and economy.

Although there are still some areas that native development is doing better, you may want to consider very carefully when React Native is a good choice for you specifically. You can read about it in another article.

Pros

Development speed and cost – what developers love about React is that they’re able to reuse and recycle components developed before by them and wide React Native ecosystem. They can also share their codebase and make them work faster.
Works everywhere – Once you learn (or hire) React Native, you can build apps for iOS, Android, and Windows.
User Experience – as long as you are not using extremely complicated designs and interactions, you are still able to build high-performance apps and deliver absolutely great user experience.
Faster time to market – you can arrive on the market much faster to test your MVP, get feedback and adapt changes accordingly without a need for a big investment.
Help on demand – React Native community is massive. Many problems that you may face during development, may already be fixed somewhere out there.
Maintenance cost – you only deal with one codebase.
React Native apps are visible – they get listed in AppStore and Play Store. Not like PWA.
Over The Air Updates – allow you to quickly update your app without the need to wait for App Store/Google Play to accept your changes.

Cons

Performance is still lower than native – React Native is not able to use all the blessings and potential of a specific platform. Native apps, on the other hand, can really maximize functionalities and deliver the ultimate user experience in the result.
Not efficient design-wise – if you consider complicated designs or advanced interactions as a crucial part of your business advantage, you should definitely go for native development, but this is something that is slowly changing and more apps based on React Native with complex UI start to appear.
Custom modules – you can access many custom modules, yet, there may be a need for some specific components that you will have to build from scratch yourself.

Other things you should know before choosing React Native

There are still few things you should know about React Native and its features.

It's easy to work with – experienced developers will definitely appreciate the development experience. Meaningful error messages, time-saving and robust tools make it a premium choice over other platforms.

You can preview changes – you don’t have to rebuild the application, again and again, to see changes. It saves a lot of time and makes things quick and efficient. Hit “Command+R” to refresh the application.

Quick iteration cycles – which just simply adds more value.

Intelligent debugging tools – and error reporting mechanisms. Give it an advantage over others and allows developers to focus more on the productive part.

Easier to debug – uses Flipper as default.

Keep things minimal and worthy – it doesn’t force you to work in Xcode or Android Studio for iOS or Android apps respectively.

A large community of developers – who are contributing day in, day out.

Code reusability – developers can easily integrate 90% of the native framework and reuse the code for any platform. This feature not only saves time but also helps to cut down the cost of building two apps. Cool thing is that you can use the web app code (written in React) for mobile apps.

Pre-developed components – numerous open-source libraries are available to accelerate your work.

Live reloading feature – it helps to compile and read the file from the point where the developer made changes. Then a new file is offered to the stimulator which automatically reads the file from the beginning.

Compatible with third-party plugins – and does not require high memory to process. You don't need any specific web views functions and all native modules are linked with the plugin through the framework. Smoother running and faster loading are key features for it.

Transform web projects into mobile applications – work done on this platform is easy to understand, and anyone can work around it although they were not previously engaged in it. It increases flexibility and web updates become consistent.

Smoother and faster UI – as compared to classic hybrid ones. The interface created through React Native is highly responsive and feels fluid.

Summary

React Native is an exciting framework that enables web developers to create mobile applications that have knowledge in React and JavaScript.

It enables faster mobile development and efficient code sharing for all operating systems without compromising on the quality of the product.

High efficiency and low costing are also the attributes that make work exciting for armies of developers.

Supported by the biggest players on the market, this technology will probably stand a test of time and will only get better.

DEV Community: tomgrabski

Costs of Hiring React Native Agency vs Developer

Introduction

Should I hire a React Native Developer, or an Agency?

Hiring React Native Agency

Pros and Cons of hiring an Agency

Pros of hiring React Native agency

Cons of hiring React Native agency

Costs of hiring React Native agency per city

Hiring In-house React Native Developer

Pros and Cons of hiring in-house developers

Pros of hiring an in-house React Native developer (or entire team)

Cons of hiring an in-house developer (or entire team)

Costs of hiring a React Native developer

Recruitment expenses

Employee benefits

Space and equipment

In-house developer cost comparison per city

Head-to-head comparison between hiring a React Native developer and an Agency

General comparison

Pros and cons (comparison)

Cost comparison

Costs of hiring React Native agency vs in-house hiring per city

Summary

How to Choose React Native Development Agency?

Introduction

React Native means:

The questions remain:

How to run an interview with React Native agency?

Step 1: Specify needs and budget.

Step 2: Check the React Native agency’s website.

Step 3: Check the agency’s portfolio.

Step 4: Read reviews and testimonials.

Step 5: Prepare a list of questions.

Extra: Step 6: Observe how fast do they reply

Questions to ask a React Native Agency

Partnership, collaboration, and quality assurance

Communication:

Understanding your business:

Team assembling:

Technical questions

1. Does your agency have a standard code development process? How would you integrate that with our processes?

2. What automation testing strategies have you utilized and would recommend?

3. How do you approach assuring a product and the code quality? What do you do to ensure the code written by you is future-proof?

4. How do you ensure documentation is adequately updated and revised during technology changes and iterations?

Other general and light questions

1. How long did you work on your longest project?

2. Can I ask you for a code review?

3. Do you engage in any open-source and community activities?

4. Do you use Continuous Integration?

5. Can you send me profiles of developers?

6. Can I call some of your previous clients?

7. What did you use before React Native?

Additional tips

Core Web Vitals: How to Measure and Improve Them?

What are Web Vitals?

Largest Contentful Paint

How to improve the LCP score?

First Input Delay

How to improve the FID score?

Cumulative Layout Shift

How to improve the CLS score?

How to measure Web Vitals?

Google PageSpeed Insights

Google Search Console

Summary

How To Use React Native Over The Air (OTA) Updates

What are Over The Air (OTA) updates? Why might I need them?

This sounds great! Are there any limitations?

How to start using OTA?

Setting up CodePush on App Center

Installing CodePush plugin

Lets send our first update OTA!

Conclusions

50 Examples of Great React Native Apps in 2021

Introduction

15 different industries

React Native 101

Most popular examples of React Native apps

Facebook and React Native