CodePush is an awesome way to instantly update your app on the air. CodePush is made by Microsoft, is open source (repo Github) and supports cross-platform Android and iOS. We can check AppCenter.ms, CodePush is one of the services of AppCenter for the Distribution update app.

We do not write how to basic setup here. But we can refer to this documentation on how to setup CodePush in your React Native project. There is an available guide setup for Android and iOS.

If we already setup codepush, let's start to create a custom page for downloading the progress bar.

Open your main file for example App.js or something like that. This is my example App.js file:

import React, {useEffect, useState} from 'react';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';

// local
import {store, persistor} from '@store/store';
import Routes from '@routes';

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Routes />
      </PersistGate>
    </Provider>
  );
}

<Routes /> means we call react-navigation stack routes, or something similar to react native navigation.

Now create a file component with path ./components/Progress.js and write with this code

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Progress = ({
  progress = 50,
  totalProgress = 100,
  maxWidth = 250,
  bottomText = 'Megabytes',
  barHeight = 10,
  barMarginBottom = 8,
}) => {
  const toThousand = amount => {
    return amount > 0
      ? amount.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.')
      : '0';
  };

  return (
    <View
      style={{
        padding: 16,
        marginTop: -8,
        position: 'relative',
      }}>
      <View style={[styles.base_progress(maxWidth), {height: barHeight}]}>
        <View
          style={[
            styles.progress,
            {width: `${parseInt((progress / totalProgress) * 100)}%` || 0},
            {height: barHeight},
          ]}
        />
      </View>
      <Text
        allowFontScaling={true}
        style={[styles.subtitle, {marginTop: barMarginBottom}]}>
        {toThousand(progress)}/{toThousand(totalProgress)} {bottomText}
      </Text>
    </View>
  );
};

export default Progress;

const styles = StyleSheet.create({
  base_progress: maxWidth => ({
    width: maxWidth,
    height: 4,
    borderRadius: 4,
    backgroundColor: '#DEE4EB',
    marginTop: 8,
    zIndex: 0,
  }),
  progress: {
    borderRadius: 4,
    backgroundColor: '#86B5E1',
    height: 4,
    zIndex: 1,
  },
  subtitle: {
    color: '333333',
    fontSize: 14,
    lineHeight: 20,
  },
});

Then add the following import of some packages,

import {View, Text, StyleSheet, Image} from 'react-native';
import codePush from 'react-native-code-push';
import Progress from './components/Progress';