oblador / react-native-progress

Progress indicators and spinners for React Native
MIT License
3.63k stars 516 forks source link

CircleSnail pops up everywhere on the screen #228

Open ngotrongphuc opened 3 years ago

ngotrongphuc commented 3 years ago

I just used these simple code from the docs in order to check if it works properly before put it in my code. But i got this bug: the CirleSnail just keep showing and hiding everywhere in my screen, it looks so laggy, but its colors still changed

<Progress.CircleSnail color={['red', 'green', 'blue']} /> circlesnail_bug

colorgold commented 3 years ago

I had the same problem so I just added a width, height, and size (diameter of the circle) to the progress bar.

<Progress.CircleSnail 
          color={['red', 'green', 'blue']} 
          height={100}
          width={100}
          size={100} />

But, I also noticed that just adding style={{ alignSelf: "center"}} works as well.

My full code:

<Progress.CircleSnail 
          color={["red", "green", "blue"]}
          height={100}
          width={100}
          size={100}
          style={{
            alignSelf: "center",
          }}/>
Nestoro commented 3 years ago

same here and only style={{alignSelf: "center"}} helps.

maybe that should be added to the overriding default style props in CircleSnail.js:152