ProgressBarCustom.jsx

import React from 'react';
import {View, Text} from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';

// Tambah baris kode dibawah ini di root index.js untuk setup react-native-extended-stylesheet
EStyleSheet.build({
  $rem: width / 380,
  ...colors,
});

// Ini baris kode untuk komponen ProgressBar-nya, silahkan custom sendiri untuk penambahan props dan segala macem nya.
const ProgressBarCustom = () => {
  return (
    <View>
      <View style={[styles.flexRowCenter, styles.mt5]}>
            <View style={[styles.container]}>
              <View style={styles.elipse1}>
                <View style={styles.elipse2} />
              </View>

              <View style={styles.label}>
                <Text>Bronze</Text>
                <Text>0</Text>
              </View>
            </View>

            <View
              style={[
                styles.container,
                styles.justifyContentCenter,
                styles.bar,
              ]}>
              <View style={styles.bar1}>
                <View
                  style={[
                    styles.bar2,
                    {
                      width: EStyleSheet.value('30rem'), // 0 - 70 rem
                    },
                  ]}
                />
              </View>
            </View>

            <View style={[styles.container]}>
              <View style={styles.elipse1}>
                <View style={styles.elipse2} />
              </View>

              <View style={styles.label}>
                <Text>Silver</Text>
                <Text>100</Text>
              </View>
            </View>

            <View
              style={[
                styles.container,
                styles.justifyContentCenter,
                styles.bar,
              ]}>
              <View style={styles.bar1}>
                <View
                  style={[
                    styles.bar3,
                    {
                      width: EStyleSheet.value('0rem'), // 0 - 70 rem
                    },
                  ]}
                />
              </View>
            </View>

            <View style={[styles.container]}>
              <View style={styles.elipse1}>
                <View style={styles.elipse2} />
              </View>

              <View style={styles.label}>
                <Text>Gold</Text>
                <Text>200</Text>
              </View>
            </View>

            <View
              style={[
                styles.container,
                styles.justifyContentCenter,
                styles.bar,
              ]}>
              <View style={styles.bar1}>
                <View
                  style={[
                    styles.bar4,
                    {
                      width: EStyleSheet.value('0rem'), // 0 - 70 rem
                    },
                  ]}
                />
              </View>
            </View>

            <View style={[styles.container]}>
              <View style={styles.elipse1}>
                <View style={styles.elipse2} />
              </View>

              <View style={styles.label}>
                <Text>Platinum</Text>
                <Text>300</Text>
              </View>
            </View>
          </View>
    </View>
  )
}

const styles = EStyleSheet.create({
  flexRowCenter: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  mt5: {
    marginTop: '35rem',
  },
  justifyContentCenter: {
    justifyContent: 'center',
  },
  container: {
    height: '35rem',
    position: 'relative',
  },
  elipse1: {
    width: '35rem',
    height: '35rem',
    borderWidth: 3,
    borderRadius: '50rem',
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: '#F8AD24',
    overflow: 'hidden',
    position: 'relative',
  },
  elipse2: {
    width: '20rem',
    height: '20rem',
    borderWidth: 3,
    borderRadius: '50rem',
    borderColor: '#996127',
    backgroundColor: 'white',
  },
  bar: {
    marginLeft: '-4rem',
    marginRight: '-4rem',
    zIndex: 2,
  },
  bar1: {
    width: '60rem',
    height: '15rem',
    borderTopWidth: 3,
    borderBottomWidth: 3,
    backgroundColor: 'white',
    borderColor: '#F8AD24',
    justifyContent: 'center',
  },
  bar2: {
    height: '5rem',
    backgroundColor: '#996127',
    borderRadius: '50rem',
    marginLeft: '-5rem',
    borderTopLeftRadius: 0,
  },
  bar3: {
    height: '5rem',
    backgroundColor: '#996127',
    borderRadius: '50rem',
    marginLeft: '-5rem',
    borderTopLeftRadius: 0,
  },
  bar4: {
    height: '5rem',
    backgroundColor: '#996127',
    borderRadius: '50rem',
    marginLeft: '-5rem',
    borderTopLeftRadius: 0,
  },
  label: {
    position: 'absolute',
    bottom: '-40rem',
    width: '60rem',
    alignItems: 'center',
    marginLeft: '-10rem',
  },
})