CODEWITHSUNDEEP
reactjsreact-native
Kanwarjeet Singh
Kanwarjeet Singh

Reputation: 164

React native create custom progress bar

How can I create Progress bar like that. Budget indicator will adjust if value changed, it can be anywhere in the bar. Is there any package for that?

enter image description here

Upvotes: 0

Views: 2468

Answers (1)

ciaran swanepoel
ciaran swanepoel

Reputation: 31

This would be the basic component code. You would just need to modify some styles, add an animation if you want aswell. Shouldnt be too difficult to replicate.

import React, {useState} from 'react';
 
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 
const PercentageBar = ({
  navigation,
  percentage,
  height,
  backgroundColor,
  completedColor,
}) => {
  const [getPercentage, setPercentage] = useState(percentage);
  const [getheight, setHeight] = useState(height);
  const [getBackgroundColor, setBackgroundColor] = useState(backgroundColor);
  const [getCompletedColor, setCompletedColor] = useState(completedColor);
  return (
    <View>
      <View style={{justifyContent: 'center'}}>
        <View
          style={{
            
            width: '100%',
            height: getheight,
            marginVertical: 10,
            borderRadius: 5,
            borderColor: getBackgroundColor,
            borderWidth: 1,
          }}
        />
        <View
          style={{
            width: getPercentage ? getPercentage : 0,
            height: getheight,
            marginVertical: 10,
            borderRadius: 5,
            backgroundColor: getCompletedColor,
            position: 'absolute',
            bottom:20
          }}
        />
        <View
          style={{
            width: getPercentage ? getPercentage : 0,
            height: getheight,
            bottom:10
          }}>
          <Text style={{textAlign: 'right'}}>{getPercentage}</Text>
        </View>
      </View>
    </View>
  );
};
export default PercentageBar;

Upvotes: 2

Related Questions