Responsive SVG in React Native

SVG.tsx

import { View } from "react-native";
import { memo } from "react";
import Svg, { Circle, Path } from 'react-native-svg';

// Calculate aspect ratio
const originalWidth = 500;
const originalHeight = 500;
const aspectRatio = originalWidth / originalHeight;

const SVG = () => (
  <View style={{ width: "100%", aspectRatio }}>
    <Svg width="100%" height="100%" viewBox={`0 0 ${originalWidth} ${originalHeight}`}>
      <Circle cx="250" cy="250" r="40" fill="yellow" />
      <Circle cx="240" cy="240" r="4" fill="black" />
      <Circle cx="260" cy="240" r="4" fill="black" />
      <Path d="M 240 265 A 20 20 0 0 0 260 260" strokeWidth={2} stroke="black" />
    </Svg>
  </View>
);

export default memo(SVG);