CODEWITHSUNDEEP
react-native
maheshgupta024
maheshgupta024

Reputation: 7877

Progress Dialog in ReactNative

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

enter image description here

enter image description here

Upvotes: 8

Views: 15326

Answers (3)

Ronak
Ronak

Reputation: 190

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.

Upvotes: 0

Jitendra Kumar
Jitendra Kumar

Reputation: 2221

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

Upvotes: 9

Dan
Dan

Reputation: 8824

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

Upvotes: 0

Related Questions