CircleSnail is rotating around the whole screen

[marines]

Not only around itself.

The following transformation causes the issue. https://github.com/oblador/react-native-progress/blob/e26623be7229acbb3526327199fb6812d57dfee3/CircleSnail.js#L157

After removing the transformation the circle behaves closer to what is expected. The rotation point is wrong. It happens when the CircleSnail doesn't have width set and is wider than it should.

react: 16.0.0 react-native: 0.50.1 react-native-progress: 3.4.0

[italoiz]

Were you able to solve this problem?

I can solve my problem now, this way:

<View style={{flexDirection: 'row', alignItems: 'center'}}>
    <Progress.CircleSnail indeterminate={true} color={['red', 'green', 'blue']} />
</View>

I put this view including the Spinner. Maybe it will work for you too.

[morenoh149]

so should a PR be made to change the transition or should the readme be updated to specify it's usage? I did

<View style={{
  flex: 1,                                                                                      
  flexDirection: 'column',                                                                                   
  justifyContent: 'center',                                                                                  
  alignItems: 'center'                                                                                       
}}>                                                                                                            
    <Progress.CircleSnail color={['gray']} />                                                                  
</View>

[MoOx]

I tried to replace a React Native ActivityIndicator with this simple code, but it doesn't work out of the box as expected.

with this simple code

import { CircleSnail } from "react-native-progress";

import { useThemeColors } from "@/foundation/design/system/constants/Colors";

export default function Spinner({ size }: { size?: number }) {
  const themeColors = useThemeColors();

  return (
    <CircleSnail
      size={size}
      // indeterminate
      color={themeColors.primary}
      unfilledColor={themeColors.accent}
      borderColor={themeColors.danger}
      borderWidth={2}
    />
  );
}

And here is the result (very weird).

https://github.com/user-attachments/assets/a176005d-a416-4dd1-ab32-77b202d46d3a

The very weird part is that you specify a size, and you get a border that is actually the parent width...