Progress Dialog in ReactNative

Question

I'm pretty new to ReactNative world. Im struggling to find an api or a library that shows the Progress Dialog as below in React Native. I believe ActivityIndicator can be used, but it does not show as overlay. Can anyone help me how can I show as an overlay using styles or if there is good library to make this.

Thanks

Answer 1

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