Android app development with React Native

This post covers the main notes needed, from bootstrapping the app to publishing to the Play store.

Prerequisites

• experience with React
• installed Android studio

Bootstrapping the app

Run the following commands

npx react-native init <app_name>
cd <app_name>

Running the app on the device via USB

Enable developer options, USB debugging, and USB file transfer on the device. Run the following commands

npx react-native start
npx react-native run-android

Install the app via the following command

npx react-native run-android --variant=release

App name

It can be changed in android/app/src/main/res/values/strings.xml file

Logo

Icon Kitchen can be used for generating images. Downloaded images should be stored in mipmap (android/app/src/main/res/mipmap-*hdpi/ic_launcher.png) folders.

Splash screen

A splash screen is the first thing user sees after opening the app, and it usually shows an app logo with optional animations. More details are covered in Splash screen with React Native post

Bottom navigation bar

react-native-paper provides a bottom navigation bar component, and route keys are mapped with the components. react-native-vector-icons is needed for the proper vector rendering, and a list of available icons can be found here

npm i react-native-paper react-native-vector-icons

// App.js
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { BottomNavigation, Text } from 'react-native-paper';

const HomeRoute = () => <Text style={style.text}>Home</Text>;
const SettingsRoute = () => <Text style={style.text}>Settings</Text>;

const style = StyleSheet.create({
  text: {
    textAlign: 'center'
  }
});

const App = () => {
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    {
      key: 'home',
      title: 'Home',
      icon: 'home'
    },
    {
      key: 'settings',
      title: 'Settings',
      icon: 'settings-helper'
    }
  ]);

  const renderScene = BottomNavigation.SceneMap({
    home: HomeRoute,
    settings: SettingsRoute
  });

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  );
};

export default App;

file: android/app/build.gradle

apply plugin: "com.android.application"

import com.android.build.OutputFile
import org.apache.tools.ant.taskdefs.condition.Os

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" // <-- ADD THIS
// ...

Forms

formik and yup libraries can handle custom forms and complex form validations (including the case when one field validation depends on other fields' value). Values inside nested components can be set with setFieldValue function.

const FormSchema = Yup.object().shape({
  rentOrSale: Yup.string().required(customErrorMessage),
  furnished: Yup.array()
    .of(Yup.string())
    .when('rentOrSale', (rentOrSale, schema) => {
      if (rentOrSale === 'rent') {
        return schema.min(1, customErrorMessage);
      }
      return schema;
    })
});

export const CustomForm = () => {
  const handleCustomSubmit = async (values) => {
    // ...
  };

  return (
    <Formik
      initialValues={
        {
          // ...
        }
      }
      validationSchema={FormSchema}
      onSubmit={handleCustomSubmit}
    >
      {({ errors, touched, handleSubmit, setFieldValue }) => (
        <View>
          {/* */}
          {touched.furnished && errors.furnished && (
            <Text style={style.errorMessage}>{errors.furnished}</Text>
          )}
          <Button style={style.submitButton} onPress={handleSubmit}>
            Submit
          </Button>
        </View>
      )}
    </Formik>
  );
};

Lists

FlatList component can handle list data. It shouldn't be nested inside the ScrollView component. Its header and footer should be defined in ListHeaderComponent and ListFooterComponent props.

// ...
return (
  <FlatList
    // ...
    renderItem={({ item }) => <ApartmentCard apartment={item} />}
    ListHeaderComponent={/* */}
    ListFooterComponent={/* */}
  />
);
// ...

Its child component should be wrapped as a higher-order component with memo to optimize rendering.

import React, { memo } from 'react';

const ApartmentCard = ({ apartment }) => {
  /* */
};

export default memo(ApartmentCard);

Loading data

FlatList can show a refresh indicator (loader) when data is loading. progressViewOffset prop sets the vertical position of the loader.

import { Dimensions, FlatList, RefreshControl } from 'react-native';
// ...
<FlatList
  // ...
  refreshControl={
    <RefreshControl
      colors={['#3366CC']}
      progressViewOffset={Dimensions.get('window').height / 2}
      onRefresh={() => {
        console.log('loading data...');
      }}
      refreshing={isLoading}
    />
  }
/>;

Scrolling

FlatList also provides a scrolling (to its items) feature when its size changes. Specify its reference and fallback function for scrolling (onScrollToIndexFailed).

import React, { useRef } from 'react';
// ...
const listRef = useRef();
// ...
return (
  <FlatList
    // ...
    ref={listRef}
    onContentSizeChange={() => {
      // some custom logic
      listRef?.current?.scrollToIndex({ index, animated: false });
    }}
    onScrollToIndexFailed={(info) => {
      console.error('scrolling failed', info);
    }}
  />
);
// ...

One of the additional scrolling functions is based on the offset.

import { Dimensions } from 'react-native';

// ...
listRef?.current?.scrollToOffset({
  offset: Dimensions.get('window').height + 250
});

Scrolling to the top can be done with offset 0.

// ...
listRef?.current?.scrollToOffset({
  offset: 0,
  animated: false
});

Links

Linking.openURL(url) method opens a specific link in an external browser. A webview can open a link inside the app, and it can also override the back button handler.

// ...
import { BackHandler /* */ } from 'react-native';
import { WebView } from 'react-native-webview';

const handleClosingWebview = () => {
  // some custom logic
};

useEffect(() => {
  const backHandler = BackHandler.addEventListener(
    'hardwareBackPress',
    function() {
      handleClosingWebview();
      return true;
    }
  );

  return () => backHandler.remove();
}, []);

// ...
if (isWebviewOpen) {
  return (
    <SafeAreaView style={style.webview}>
      <TouchableOpacity onPress={handleClosingWebview}>
        <Icon
          style={style.webviewCloseButton}
          size={25}
          color={theme.colors.primary}
          name="close-circle-outline"
        />
      </TouchableOpacity>
      <WebView
        source={{ uri: webviewUrl }}
        style={style.webview}
        startInLoadingState
        renderLoading={() => (
          <View style={style.webviewLoader}>
            <ActivityIndicator color={theme.colors.primary} />
          </View>
        )}
      />
    </SafeAreaView>
  );
}
// ...

SVG files

react-native-svg library can be used for handling SVG files.

import React from 'react';
import { SvgXml } from 'react-native-svg';

export function Logo() {
  const xml = `<svg>...</svg>`;

  return <SvgXml xml={xml} />;
}

State management

React provides Context to deal with state management without external libraries.

Context setup with app wrapper

// src/context/index.js
import { createContext, useContext, useMemo, useReducer } from 'react';
import { appReducer, initialState } from './reducer';

const appContext = createContext(initialState);

export function AppWrapper({ children }) {
  const [state, dispatch] = useReducer(appReducer, initialState);

  const contextValue = useMemo(() => {
    return { state, dispatch };
  }, [state, dispatch]);

  return (
    <appContext.Provider value={contextValue}>{children}</appContext.Provider>
  );
}

export function useAppContext() {
  return useContext(appContext);
}

Reducer setup

// src/context/reducer.js
import { INCREMENT_COUNTER } from './constants';

export const initialState = {
  counter: 0
};

export const appReducer = (state, action) => {
  switch (action.type) {
    case INCREMENT_COUNTER: {
      return {
        ...state,
        counter: state.counter + 1
      };
    }
    default:
      return state;
  }
};

// src/context/constants.js
export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

Wrapped app with Context and its usage

// App.js
import React, { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import { BottomNavigation, Button, Text } from 'react-native-paper';
import { AppWrapper, useAppContext } from './src/context';
import { INCREMENT_COUNTER } from './src/context/constants';

const HomeRoute = () => {
  const { state } = useAppContext();

  return <Text style={style.text}>counter: {state.counter}</Text>;
};

const SettingsRoute = () => {
  const { dispatch } = useAppContext();

  const onPress = () => {
    dispatch({ type: INCREMENT_COUNTER });
  };

  return <Button onPress={onPress}>Increment counter</Button>;
};

const style = StyleSheet.create({
  text: {
    textAlign: 'center'
  }
});

const App = () => {
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    {
      key: 'home',
      title: 'Home',
      icon: 'home'
    },
    {
      key: 'settings',
      title: 'Settings',
      icon: 'settings-helper'
    }
  ]);

  const renderScene = BottomNavigation.SceneMap({
    home: HomeRoute,
    settings: SettingsRoute
  });

  useEffect(() => SplashScreen.hide(), []);

  return (
    <AppWrapper>
      <BottomNavigation
        navigationState={{ index, routes }}
        onIndexChange={setIndex}
        renderScene={renderScene}
      />
    </AppWrapper>
  );
};

export default App;

Custom events

React Native provides NativeEventEmitter for handling custom events so components can communicate with each other in that way.

import { NativeEventEmitter } from 'react-native';
const eventEmitter = new NativeEventEmitter();

eventEmitter.emit('custom-event', { data: 'test' });

eventEmitter.addListener('custom-event', (event) => {
  console.log(event); // { data: 'test' }
});

Local storage

@react-native-async-storage/async-storage can handle storage system in asynchronous way

import AsyncStorage from '@react-native-async-storage/async-storage';

export async function getItem(key) {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value) {
      return JSON.parse(value);
    }

    return value;
  } catch (error) {
    console.error(`Failed getting the item ${key}`, error);
    return null;
  }
}

export async function setItem(key, value) {
  try {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error(`Failed setting the item ${key}`, error);
  }
}

Error tracing

Sentry can be used for it

Prerequisites

• React Native project created

Setup

Run the following commands

npm i @sentry/react-native
npx @sentry/wizard -i reactNative -p android

Analytics

It is helpful to have more insights about app usage, like custom events, screen views, numbers of installations/uninstallations, etc. React Native Firebase provides analytics as one of the services.

Prerequisites

• created Firebase project

Setup

Create an Android app within created Firebase project. The package name should be the same as the one specified in the Android manifest (android/app/src/main/AndroidManifest.xml). Download google-service.json file and place it inside android/app folder.

Extend the following files

file: android/app/build.gradle

apply plugin: "com.android.application"
apply plugin: "com.google.gms.google-services" <-- ADD THIS

file: android/build.gradle

buildscript {
  // ...
  dependencies {
    // ...
    classpath("com.google.gms:google-services:4.3.14") <-- ADD THIS
  }
}
// ...

Run the following commands

npm i @react-native-firebase/app @react-native-firebase/analytics

Usage

The following change can log screen views.

// App.js
import analytics from '@react-native-firebase/analytics';
// ...
const App = () => {
  // ...
  const onIndexChange = (i) => {
    if (index === i) {
      return;
    }

    setIndex(i);
    analytics()
      .logScreenView({
        screen_class: routes[i].key,
        screen_name: routes[i].key
      })
      .catch(() => {});
  };
  // ...
  return (
    <AppWrapper>
      <BottomNavigation
        navigationState={{ index, routes }}
        onIndexChange={onIndexChange}
        renderScene={renderScene}
      />
    </AppWrapper>
  );
};
// ...

The following code can log custom events.

// src/utils/analytics.js
import analytics from '@react-native-firebase/analytics';

export const trackCustomEvent = async (eventName, params) => {
  analytics()
    .logEvent(eventName, params)
    .catch(() => {});
};

Publishing to the Play store

Prerequisites

• Verified developer account on Google Play Console
• Paid one-time fee (25$)

Internal testing

Internal testing on Google Play Console is used for testing app versions before releasing them to the end users. Read more about it on Internal testing React Native apps post

Screenshots

Screenshots.pro can be used for creation of screenshots

Boilerplate

Here is the link to the boilerplate I use for the development.