React Native Must knows for Web Frontend Engineer

React Native Must knows for Web Frontend Engineer

Published
February 5, 2023
Tags
React Native
Typescript
Monitoring
Performance
Marketing Analysis
Deployment

Intro

When a web frontend engineer attempts to develop and operate a mobile application for the first time, there are many difficulties.
But why would a web frontend engineer develop a mobile application? If the team size is large enough or if the mobile app service being operated by the team has become mature to a certain extent, it is common to operate native applications by platform(iOS, Android). On the other hand, if the team size is small or if it is in the MVP stage to validate the idea, a web frontend engineer can leverage the power of the cross-platform framework, React Native, to develop a mobile app.
While developing and operating a React Native mobile application, I have encountered difficulties in various aspects such as configuring multiple environments, authentication, releases, monitoring, performance profiling, and marketing analysis. After research and several attempts, I was able to solve each problem by using appropriate technology. This article aims to introduce those experiences. The original React Native code snippets attached to the article can be checked at the Github repository linked below.

Difficulties and Solutions

Configuring environment variable for multiple environment

The process of developing software can be divided into development, testing, and release. There are variables that need to be changed according to each environment. An example of this can be the API endpoint for client applications(Web app, mobile app). To address this issue, we inject different variable values for each environment when build software.
The react-native-config was utilized to build React Native applications with different variables for each environment.
API_ENDPOINT=http://192.168.0.9:3000 ENV=development
.env.development example
In Javascript (Typescript) code, the environment variable can be used as shown below.
// config.ts import Config from 'react-native-config'; interface AppConfig { API_ENDPOINT: string; ENV: string; } export default Config as unknown as AppConfig; // axios.ts import axios from 'axios'; import Config from '../config'; const axiosInstance = axios.create({ baseURL: Config.API_ENDPOINT, timeout: 5000, });
example of using environment variable in React Native
Multiple environment settings for each platform (Android, iOS) are described in detail in the blog post below.

Authentication

Authentication is a necessary feature in most applications. When considering UX, it is better to provide automatic log in feature based on previous authentication information rather than requiring the user to enter their ID and password every time.
To implement this automatic login, web applications store secrets such as session id, jwt token required for authentication in cookies, local storage, session storage, etc. If you're new to React Native, it may seem that the key-value store async-storage is the right place to go.
However, async storage does not provide encryption. When you decompile the Android apk, you can see that the values stored in async storage are contained in a simple json file. For this reason, the React Native docs also recommend using other storage for sensitive information. The document provides various alternatives. If you choose react-native-keychain, you can implement the automatic login function by storing sensitive information as follows.
import { useEffect } from 'react'; import * as Keychain from 'react-native-keychain'; export function useAuth() { useEffect(() => { Keychain.getGenericPassword().then((result) => { if (result === false) return; const { accessToken, refreshToken } = JSON.parse(result.password) as { accessToken: string; refreshToken: string; }; //... }); }, []); const login = (tokens: { accessToken: string; refreshToken: string }): void => { Keychain.setGenericPassword('mobile-app-user', JSON.stringify(tokens)); // ... }; const logout = (): void => { Keychain.resetGenericPassword(); // ... }; return { login, logout }; }

Splash Screen

The splash screen is the first screen that users face when launching a mobile application.
notion image
After the Splash Screen, user will see the root view of the application. If you have a lot of asynchronous logic to handle just after launching the application, you can use the splash screen like a curtain. By hiding the splash screen after the asynchronous tasks are completed, a more sophisticated UX can be provided.
react-native-bootsflash makes it easy to control in Javascript (Typescript) code. In the example below, Navigator performs asynchronous logic, such as checking the app version, and then hide the Splash Screen.
// StackNavigator.tsx import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); const RootStackNavigator = () => { useBootstrap(); const { authenticated } = useAuth(); return ( <NavigationContainer> <Stack.Navigator> {authenticated ? ( <Stack.Group> <Stack.Screen name="Main" component={MainScreen} options={{ header: () => null }} /> </Stack.Group> ) : ( <Stack.Group> <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ header: () => null }} /> </Stack.Group> )} </Stack.Navigator> </NavigationContainer> ); }; // useBootStrap.ts import { useEffect } from 'react'; import RNBootSplash from 'react-native-bootsplash'; export function useBootstrap() { const bootstrap = async () => { // do asyncrhonous job here await RNBootSplash.hide({ fade: true, duration: 500 }); }; useEffect(() => { bootstrap(); }, []); }
 

Deployment

The deployment of mobile applications is quite different from web applications. If you post an app on the App Store and Google Play Store, you will go through an additional review process. This process could sometimes be approved within 24 hours, but it may take more than 48 hours. Also, not all reviews are always approved, and when there are issues, they can be rejected.
notion image
Even if the review is approved and a new version is published, there may be time differences when the new version can be downloaded by users. In other words, you cannot apply updates to all users at the same time.
These points make your service vulnerable in case of critical bugs as it is difficult for engineers to respond immediately. Over-the-air patching is needed to quickly respond when issues arise and Appcenter Codepush was discovered as a suitable tool.
Codepush provides an API through a react native module that allows you to check and install updates from Javascript (Typescript) code.
Asynchronous version check logic can be written as follows in the useBootstrap hook as I mentioned in the “splash screen” part previously.
import { useEffect } from 'react'; import RNBootSplash from 'react-native-bootsplash'; import CodePush from 'react-native-code-push'; export function useBootstrap() { const bootstrap = async () => { try { const remotePackage = await CodePush.checkForUpdate(); if (remotePackage !== null) { const localPackage = await remotePackage.download(); await localPackage.install(CodePush.InstallMode.IMMEDIATE); } } catch (error) { console.error(error); } finally { await RNBootSplash.hide({ fade: true, duration: 500 }); } }; useEffect(() => { bootstrap(); }, []); }
The code snippet above implements a policy of checking for updates and, if there is an update, immediately downloading and installing it. Depending on the requirements of the mobile app service, the appropriate update policy can be customized.

Monitoring and Performance Profiling

After building and deploying the code, the developer is no longer aware of the issues that users encounter while using the application. If you operate a mobile application service, the engineer s be able to detect and respond to problems when they occur, even if the code has been handed over.
Using Firebase Crashlytics, you can collect data on app crashes. Additionally, if app crashes suddenly increase, you can receive an alarm via email, slack, etc. through the Velocity Alert feature. If a mobile application engineer or on-call engineer subscribes to this alarm, they can immediately detect and respond to the issue. I think it's a very useful tool when monitoring after releasing new features or after having breaking changes in the application such as a dependency update.
notion image
What’s more, Crashlytics also provides crash-free statistics. Because app crash is such a negative user experience, the engineering team may consider improving this metric as a goal.
Along with Firebase Crashlytics, Sentry provides richer context when app crashes or errors occur. Mobile applications can run in a variety of device, operating system and network environments, so it is significant to get this information in order to reproduce the issue. Sentry's Issues menu allows you to view this context, and the engineer can even add context as they wish.
Sentry is not only strong in issue tracking, but also in performance profiling. It measures and visualizes how long it takes to move to each screen, how often slow frames occur, etc. It puts UI events and HTTP requests that occur on the screen as breadcrumbs. You can also find out how much time is spent processing each request. Through this, the engineer can get insights into the performance optimization of each screen.
notion image
Instructions on installation and setup on Sentry are covered in great detail in docs.

Marketing Analytics

Marketing may not be a main interest for engineers. However, if your business is to increase revenue through mobile application services, the marketer will request the engineer to collect various metrics of the application and its users. There are various marketing tools such as Appsflyer and Braze, but I think the easiest tool to introduce for free is Google Analytics.
By integrating Firebase analytics into React Native application, not only can you collect metrics such as DAU, MAU, but also data for retention and cohort analysis. Additionally, marketers can also easily conduct funnel analyse by installing events on specific user interactions in the analytics dashboard.
notion image
With marketing analytics, your business will be able to grow faster than ever before.

Conclusion

So far, we've covered the problems of developing and operating mobile application services, including environmental variables, certification, splash screens, over-the-air updates, monitoring and performance profiling, and marketing analysis, and the technologies that helped to solve them. Please refer to the github repository for the complete source code.
Besides UI/UX, there are so many things to consider as a mobile application engineer. If you are a Web Frontend engineer who has no experience in developing mobile applications, you obviously will have more difficulties. I hope this article will help engineers in a similar environment to me in the past.