Progress Dialog in ReactNative

Here is the code to Open Prgressbar:

import React from 'react';
import { Modal, View, Text, ActivityIndicator, Button } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isProgress: false }
  }
  openProgressbar = () => {
    this.setState({ isProgress: true })
  }
  render() {
    return (
      this.state.isProgress ?
        <CustomProgressBar />
        :
        <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
          <Button title="Please click here to Open ProgressBar" onPress={this.openProgressbar} />
        </View>
    );
  }
}

const CustomProgressBar = ({ visible }) => (
  <Modal onRequestClose={() => null} visible={visible}>
    <View style={{ flex: 1, backgroundColor: '#dcdcdc', alignItems: 'center', justifyContent: 'center' }}>
      <View style={{ borderRadius: 10, backgroundColor: 'white', padding: 25 }}>
        <Text style={{ fontSize: 20, fontWeight: '200' }}>Loading</Text>
        <ActivityIndicator size="large" />
      </View>
    </View>
  </Modal>
);

Expo url for live demo https://snack.expo.io/@jitendra.mca13/progress-bar-demo

I would approach this by using the React Native Modal component with two Views.

This solution is a React solution and not native, so you will need to style your Modal accordingly for each platform.

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

const ProgressDialog = ({ visible }) => (
  <Modal
    visible={visible}
  >
    <View style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>Please Wait</Text>
        <View style={styles.loading}>
          <View style={styles.loader}>
            <ActivityIndicator size="large" />
          </View>
          <View style={styles.loadingContent}>
            <Text>Loading</Text>
          </View> 
        </View>
      </View>
    </View>
  </Modal>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, .5)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    padding: 35,
    backgroundColor: 'white'
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  loading: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  loader: {
    flex: 1,
  },
  loadingContent: {
    flex: 3,
    fontSize: 16,
    paddingHorizontal: 10,
  }
})

export default ProgressDialog;

Here's a demo on Expo, of course you will probably want to tweak the CSS.

Android & iOS solution

• Create a directory called ProgressDialog
• Create index.ios.js and index.android.js
• Paste the above code into both index.ios.js and index.android.js
• Make CSS changes for iOS

You can use the below npm package which is a very easy and attractive loader with many options.

https://github.com/maxs15/react-native-spinkit

import React from 'react';
import { StyleSheet, View } from "react-native";
import Spinner from "react-native-spinkit";


export default LoadingCmpBig = props => {
    return (
        <View style={styles.container}>
            <StatusBar barStyle="default" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        //backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    }
});

You can use this component and use it where you want to show the Progress. You just have to maintain the state for visible the loading or not in your render function of the component.