Progress bar fill width starts somewhere in the middle

Hello, my first question here, I am using the Progress.Bar, but the fill starts somewhere in the middle.

I have the progress on 0.1, when I set this on 1 the fill is complete.

the code: <ProgressBar color={Colors.bright_red_mct} unfilledColor={Colors.grey_gainsboro} borderWidth={3} height={6} borderColor={Colors.grey_gainsboro} borderRadius={8} progress={0.1} style={{ flex:1 }} />

I guess the problem is the flex, hope you can help me, thanks…

[ahmadsyamim]

I solved this using

import {Dimensions} from "react-native";
import ProgressBar from "react-native-progress/Bar";
const barWidth = Dimensions.get("screen").width;
<ProgressBar progress={0.1} width={barWidth} height={2} borderRadius={0}/>

[jozedavid]

We had to make our own component to achieve what we wanted, here is the code:

`render() { var value = false var valueBalloon = false var infoText = null;

switch (this.props.valueStyle) {
  case 'icon':
    valueIcon = (
      <View style={styles.flexBox}>
        <View style={[{flex:this.state.progress}]}>
          <View style={styles.progressBar__balloon}>
            {this.state.progress > 0 && 
              <Text style={styles.progressBar__balloonVal}>{this.state.progress}%</Text> 
            }
            <Image source={require('assets/marker-truck-icon-progressbar.png')} style={styles.progressIcon} />
          </View>
        </View>
        <View style={[{flex:100 - this.state.progress}]}></View>
      </View>
    )
    break
  default:
    break
}

infoText = (
  <Text>{this.state.text}</Text> 
)

var chart = (
  <View>
    {this.state.text && 
      infoText
    }
    <View style={[styles.flexBox, styles.progressBar]}>
      <View style={[styles.progressBar_left, {flex:this.state.progress}]} />
      <View style={[styles.progressBar_right, {flex:100 - this.state.progress}]}></View>
    </View>
    {valueIcon}
  </View>
)
return chart

}`

result: