1

Use double values in SVG size provide unexpected behaviour (view cut on left and bottom points) on React Native. On mobile it don't denend on justifyContent or alignItems, but in codesandbox.io it is.

Sandbox: https://codesandbox.io/s/react-native-svg-test-forked-1n5ng?fontsize=14&hidenavigation=1&theme=dark

    const side = 288.66;
    const strokeWidth = 2;
    return (
      <View style={styles.container}>
          <Svg width={side} height={side} viewBox="0 0 288.66 288.66">
            <G fill="none" fillRule="evenodd">
              <Circle
                cx={side / 2}
                cy={side / 2}
                r={side / 2 - strokeWidth / 2}
                strokeWidth={strokeWidth}
                stroke="green"
                fill="white"
              />
            </G>
          </Svg>
      </View>

....

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
  }
});

0 Answers0