React Native Must knows for Web Frontend Engineer

Intro

nest-react-native-monorepo-boilerplate/apps/mobile-app at main · Pigrabbit/nest-react-native-monorepo-boilerplate

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/Pigrabbit/nest-react-native-monorepo-boilerplate/tree/main/apps/mobile-app

Difficulties and Solutions

Configuring environment variable for multiple environment

API_ENDPOINT=http://192.168.0.9:3000
ENV=development

// 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,
});

Setting up Multiple Environments on React Native for iOS and Android

Edit 20/01/21: update tutorial for React Native 0.63.4 While working on Peel, we quickly realized we needed to be able to set up multiple targets for the same React Native project. There's several big advantages to doing that: Store your environment variables in separate files Multiple instances...

https://medium.com/swlh/setting-up-multiple-environments-on-react-native-for-ios-and-android-c43f3128754f

Authentication

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

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

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();
  }, []);
}

Monitoring and Performance Profiling

Marketing Analytics

Conclusion