Center offset

[1280103995]

This bug appears on both Android and iOS.

export default class App extends React.PureComponent {

  render() {
    return (
      <CountdownCircleTimer
        size={280}
        strokeWidth={14}
        strokeLinecap={'square'}
        colors={'red'}
        duration={100}
        initialRemainingTime={100}
      >
        <View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
          <View style={{width: 1, height: '100%',backgroundColor: 'blue'}}/>
          <View style={{position: 'absolute', width: '100%', height: 1,backgroundColor: 'green'}}/>
        </View>
      </CountdownCircleTimer>
    );
  }
}

"react": "17.0.1",
"react-native": "0.64.2",
"react-native-countdown-circle-timer": "^2.5.4"

[vydimitrov]

It seems quite centered to me. I am not sure what is your setup. Please create a demo where you reproducing the issue and I can take a look on it.

Check the Snack below: https://snack.expo.dev/bttGD8k4N?platform=ios

[1280103995]

I ran your code locally on the computer and reproduced the problem. But it is normal on the browser. So I think this seems to be a bug in the native code.

Android: Samsung A51 (Android 11) iOS: iPhone XR (ios 15)

[vydimitrov]

This is my phone - iPhone 11 ios15. Please test it outside your App.

[1280103995]

This is not a bug, it is a problem with my application.

Since I rewritten the StyleSheet.create function to handle the UI adaptation problem, when I pass the size value that has not been scaled, the width and height of the SVG component use the current value (line 64 in the CountdownCircleTimer file: <Svg width={size} height={size}>), and its outer View component uses StyleSheet.create to create styles (see the internal implementation of styles.wrapper in line 60), and size will be scaled, so caused an offset phenomenon.

Because the size value is used to create a path (getPathProps), control the size of the outermost View, etc., so change <Svg width={size} height={size}> to <Svg width={styles.wrapper.width} height={styles.wrapper.height}> also did not work. So I can only change StyleSheet.create({ wrapper: getWrapperStyle(size) }) in useCountdown.js to {wrapper: getWrapperStyle(size) }, and copy the code to my project (If you can modify it in the new version, it will be cool. Ha ha, it's just a little expectation).

Thank you for your great library!

[vydimitrov]

Hey @1280103995, thanks for coming back and sharing your findings. I am not sure I understand what is the problem with StyleSheet.create... in useCountdown.js. Can you elaborate a bit more on it and I will try to fix it :)