search

rafaelmotta / react-native-progress-bar-animated

📊 Simple, customizable and animated progress bar for React Native
52 stars 39 forks source link

Lose state props when width calculation is modified #3

Open mjstelly opened 6 years ago

mjstelly commented 6 years ago

Version: "react-native-progress-bar-animated": "^1.0.6" RN: "react-native": "^0.55.3" Expected behavior: blue progress bar shows in the view Actual behavior: blue progress bar fails to show in the view

Use case: I need to set the progress bar width to a percentage value of its parent container, not on the whole window. When I replaced barWidth with a different calculation method, this.state.progress (blue bar) no longer shows its value in the bar. I'm using the OnLayout package to grab the width. I then use that derived value for the widthas follows:

  state = {
    progress: 20,
    progressWithOnComplete: 0,
    progressCustomized: 0,
    viewWidth: 0
  };
      <OnLayout>
        {({ width }) => (
          <ProgressBarAnimated
            width={width * 0.6}
            value={this.state.progress}
            backgroundColorOnComplete="#6CC644"
            style={{ alignSelf: 'center' }}
          />
        )}
      </OnLayout>
screen shot 2018-05-30 at 8 52 25 pm

I tried to manually manipulate the width through the onLayout method with the same results.

mohnishanjaria commented 2 years ago

You can fix this issue by first getting the actual width of the progress bar and then setting the percentage. If you set the percentage before the width it won't update the progress bar as there is a check added in componentDidUpdate callback if props.value is the same as prevProps.value then does nothing.