Weird shape

[zumoshi]

hello,

I have tried to use your library, however, for some reason, the outer circle is not round!

I have copied the example code from your readme, it is the only thing returned by the render function, so I don't think it is the result of interference from styles of other parts of the code.

react-native version: 0.44.0 android api: 16 (emulator with 720x1280 resolution)

what do you think can cause this behavior?

thanks in advance.

[MrToph]

I have no idea why this could happen to be honest. Android API 16 is quite old, does the issue still exist in API 22?

[zumoshi]

sorry for the late reply, I missed the email notification...

no, it seems to work fine on API 22

but the shape morphs as it fills in Android 4.1,

until finally reaching this shape:

if it was a problem with how api 16 handles the border-radius, it should've affected the inner circle too, I have no clue what could cause it neither. would you be interested in investigating the issue? or is api 16 too old to be worth supporting?

[MrToph]

I don't see any mistake in my code that would cause such a behavior. This makes me believe that something is wrong within react-native and their css border-radius implementation in API 16. Unfortunately, there's nothing I can do here.

[muhaimincs]

unfortunately this still occured in react-native ~0.49.5

[est7]

add MAGICNUMBER ...

renderHalfCircle (rotateDegrees, halfCircleStyles) {
    const { radius, color } = this.props
    return (
      <View
        style={[
          styles.leftWrap,
          {
            width: radius,
            height: radius * 2
          }
        ]}
      >
        <View
          style={[
            styles.halfCircle,
            {
              width: radius,
              height: radius * 2,
              borderRadius: radius + MAGICNUMBER,
              transform: [
                { translateX: radius / 2 },
                { rotate: `${rotateDegrees}deg` },
                { translateX: -radius / 2 }
              ],
              backgroundColor: color,
              ...halfCircleStyles
            }
          ]}
        />
      </View>
    )
  }

[ahmedfares]

I meet the problem of weird circle when I configure the phone to language (right to left) and it works fine when the language is english .. can any one help me