react-native-classroom/src/component/ProgressBar.js

React Native Class room

import React, { Component } from 'react';
import { View, StyleSheet, Image, Text, Platform } from 'react-native';
import * as Progress from 'react-native-progress';
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from 'react-native-responsive-screen';
import loading from '../images/ekp_loading.gif';
import languages from '../languages';

class ProgressBarComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  copyTextFeedback = (text) => {
    // Clipboard.setString(text);
    // if (this.defaultToastBottom) {
    //   this.defaultToastBottom.ShowToastFunction(
    //     languages[this.props.language].txt_copied,
    //   );
    // }
  };

  render() {
    const { percent, link, language } = this.props;
    return (
      <View style={styles.container}>
        <Image source={loading} style={styles.imgGif} />
        <View>
          <Progress.Bar
            progress={percent / 100}
            width={wp('50%')}
            height={hp('4%')}
            animated={Platform.OS === 'ios'}
            borderRadius={20}
          />
          <View style={styles.viewPercent}>
            <Text style={styles.textDownload}>
              {languages[language].txt_downloading_resource}{' '}
              {Math.ceil(percent)}%
            </Text>
          </View>
        </View>
        {link && (
          <Text
            onPress={() => this.copyTextFeedback(link)}
            style={styles.textLink}>
            {link}
          </Text>
        )}
        {/* <CustomToast
          ref={(toast) => (this.defaultToastBottom = toast)}
          position="bottom"
        /> */}
      </View>
    );
  }
}

export default ProgressBarComponent;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  viewPercent: {
    width: wp('50%'),
    height: hp('4%'),
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
  },
  textDownload: {
    textAlign: 'center',
    color: 'black',
    fontSize: 14,
  },
  textLink: {
    fontSize: 12,
    textAlign: 'center',
    marginTop: 5,
  },
  imgGif: {
    marginBottom: hp('5%'),
    width: hp('35%'),
    height: hp('35%'),
  },
});