SoFunction
Updated on 2025-04-10

React Native's sample code to implement progress bar pop-up box

This article introduces the progress bar box of React Native implementation, and share it with everyone

When we upload or download a file, we hope there is a progress bar box to remind users to get the current upload or download, and we also allow it to use it to click to cancel the upload or download.

First implement the progress bar.

import React, {
  PureComponent
} from 'react';
import {
  StyleSheet,
  View,
  Animated,
  Easing,
} from 'react-native';

class Bar extends PureComponent {

  constructor(props) {
    super(props);
     = new ( || 0);
  }

  static defaultProps = {
    style: styles,
    easing: ()
  }

  componentWillReceiveProps(nextProps) {
    if ( >= 0 &&  !== ) {
      ();
    }
  }

  shouldComponentUpdate() {
    return false;
  }

  update(progress) {
    (, {
      toValue: progress
    }).start();
  }

  render() {
    return (
      <View style={[, , ]}>
        < style={[, , { width: ({
          inputRange: [0, 100],
          outputRange: [0 * , 1 * ],
          })} ]}
        />
      </View>
    );
  }
}

var styles = ({
  background: {
    backgroundColor: '#bbbbbb',
    height: 5,
    overflow: 'hidden'
  },
  fill: {
    backgroundColor: 'rgba(0, 122, 255, 1)',
    height: 5
  }
});

export default Bar;

We use animation to implement the value of the progress bar to avoid using state to continuously render the rendering interface, and at the same time set the return value of shouldComponentUpdate to false to avoid rendering again.

Implement the progress bar pop-up box.

import React, {
  PropTypes,
  PureComponent
} from 'react';
import {
  View,
  StyleSheet,
  Modal,
  Text,
  Dimensions,
  TouchableOpacity
} from 'react-native';
import Bar from './Bar';

const {
  width
} = ('window');

class ProgressBarDialog extends PureComponent {

  constructor(props) {
    super(props);
  }

  static propTypes = {
    ...,
    title: ,
    canclePress: ,
    cancleText: ,
    needCancle: 
  };

  static defaultProps = {
    animationType: 'none',
    transparent: true,
    progressModalVisible: false,
    onShow: () =&gt; {},
    onRequestClose: () =&gt; {},
    onOutSidePress: () =&gt; {},
    title: 'Upload file',
    cancleText: 'Cancel Yes',
    canclePress: () =&gt; {},
    needCancle: true
  }

  render() {
    const {
      animationType,
      transparent,
      onRequestClose,
      progress,
      title,
      canclePress,
      cancleText,
      needCancle,
      progressModalVisible
    } = ;
    return (
      &lt;Modal
        animationType={animationType}
        transparent={transparent}
        visible={progressModalVisible}
        onRequestClose={onRequestClose}&gt;
        &lt;View style={}&gt;
          &lt;View style={}&gt;
            &lt;Text style={}&gt;
              {title}
            &lt;/Text&gt;
            &lt;Bar
              ref={}
              style={{marginLeft: 10,marginRight: 10,width:width - 80}}
              progress={progress}
              backgroundStyle={}
            /&gt;
            &lt;View style={}&gt;
              &lt;Text style={}&gt;
                {`${progress}`}%
              &lt;/Text&gt;
              &lt;Text style={}&gt;
                {`${progress}`}/100
              &lt;/Text&gt;
            &lt;/View&gt;
            {needCancle &amp;&amp;
              &lt;View style={}&gt;
                &lt;TouchableOpacity style={} onPress={canclePress}&gt;
                  &lt;Text style={}&gt;
                    {cancleText}
                  &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            }
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/Modal&gt;
    );
  }
}

const styles = ({
  progressBarView: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.2)'
  },
  barStyle: {
    marginLeft: 10,
    marginRight: 10,
    width:width - 80
  },
  progressLeftText: {
    fontSize: 14
  },
  cancleContainer: {
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  progressRightText: {
    fontSize: 14,
    color: '#666666'
  },
  barBackgroundStyle: {
    backgroundColor: '#cccccc'
  },
  progressContainer: {
    flexDirection: 'row',
    padding: 10,
    justifyContent: 'space-between'
  },
  subView: {
    marginLeft: 30,
    marginRight: 30,
    backgroundColor: '#fff',
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  progressView: {
    flexDirection: 'row',
    padding: 10,
    paddingBottom: 5,
    justifyContent: 'space-between'
  },
  title: {
    textAlign: 'left',
    padding:10,
    fontSize: 16
  },
  cancleButton: {
    padding:10
  },
  cancleText: {
    textAlign: 'right',
    paddingTop: 0,
    fontSize: 16,
    color: 'rgba(0, 122, 255, 1)'
  }
});

export default ProgressBarDialog;

props

  1. modal props - these are modal properties
    1. animationType - animation type
    2. transparent - whether it is transparent
    3. progressModalVisible - whether it is visible
    4. onShow - The pop-up box appears
    5. onRequestClose - The pop-up request disappears (for example, pressing the return key on Android will trigger this method)
  2. onOutSidePress - Click on the external action of the pop-up box
  3. title - the title of the pop-up box
  4. cancerText - Cancel text
  5. cancelPress - Cancel action
  6. needCancle - Is the cancel button required?

Use code

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

import ProgressBarDialog from './ProgressBarDialog';

class Upload extends PureComponent {

  constructor(props) {
     = {
      progress: 0,
      progressModalVisible: false
    };
  }

  refProgressBar = (view) => {
     = view;
  }

  showProgressBar = () => {
    ({
      progressModalVisible: true
    });
  }

  dismissProgressBar = () => {
    ({
      progress: 0,
      progressModalVisible: false
    });
  }

  setProgressValue = (progress) => {
    ({
      progress
    });
  }

  onProgressRequestClose = () => {
    ();
  }

  canclePress = () => {
    ();
  }

  render() {
    return (
      <View>
        <ProgressBarDialog
          ref={}
          progress={}
          progressModalVisible={}
          onRequestClose={}
          canclePress={}
          needCancle={true}
        />
      </View>
    )
  }
}

export default Upload;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.