feat: calculate width from height

apps/test-examples/index.tsx

@@ -17,6 +17,7 @@ import Test2071 from './src/Test2071';
 import Test2080 from './src/Test2080';
 import Test2086 from './src/Test2086';
 import Test2089 from './src/Test2089';
+import Test2138 from './src/Test2138';
 import Test2148 from './src/Test2148';
 import Test2196 from './src/Test2196';
 import Test2248 from './src/Test2248';
@@ -31,5 +32,5 @@ import Test2403 from './src/Test2403';
 import Test2407 from './src/Test2407';
 
 export default function App() {
-  return <ColorTest />;
+  return <Test2138 />;
 }

apps/test-examples/src/Test2138.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import {Alert, StyleSheet, Text, View} from 'react-native';
+import Svg, {Path, Rect} from 'react-native-svg';
+
+export default function App() {
+  return (
+    <View style={styles.outer}>
+      <View style={styles.inner}>
+        {/* Test Case 1 */}
+        <Shape width={100} height={100} />
+        {/* Test Case 2 */}
+        <Shape width="50%" />
+        {/* Test Case 3 */}
+        <Shape height="50%" />
+        {/* Test Case 4 */}
+        <Shape width="50%" height="50%" />
+        {/* Test Case 5 */}
+        <Shape />
+        {/* Test Case 6 */}
+        <Shape width={200} />
+        {/* Test Case 7 */}
+        <Svg viewBox="0 0 100 50" width="100%" height="50%">
+          <Rect x="0" y="0" width="100" height="50" fill="blue" />
+        </Svg>
+      </View>
+    </View>
+  );
+}
+
+function Shape(props: any) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="black"
+      {...props}>
+      <Path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.507 13.941c-1.512 1.195-3.174 1.931-5.506 1.931-2.334 0-3.996-.736-5.508-1.931L6 14.434C7.127 16.154 9.2 18 12.001 18c2.8 0 4.872-1.846 5.999-3.566l-.493-.493zM8.5 8a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm7 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
+    </Svg>
+  );
+}
+
+const styles = StyleSheet.create({
+  inner: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    height: 100,
+    flex: 1,
+    backgroundColor: 'green',
+  },
+
+  outer: {
+    marginTop: 100,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'red',
+    height: 150,
+    width: '100%',
+  },
+});

src/elements/Svg.tsx

@@ -87,8 +87,7 @@
     }
     const handle = findNodeHandle(this.root as Component);
     const RNSVGSvgViewModule: Spec =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
       require('../fabric/NativeSvgViewModule').default;
     RNSVGSvgViewModule.toDataURL(handle, options, callback);
   };
 
@@ -127,6 +126,31 @@
       strokeLinejoin,
       strokeMiterlimit,
     } = stylesAndProps;
+
+    // Ensure width and height are treated correctly if they are percentages
+    const isWidthPercentage = typeof width === 'string' && width.includes('%');
+    const isHeightPercentage =
+      typeof height === 'string' && height.includes('%');
+
+    if (viewBox) {
+      const viewBoxValues = viewBox.split(' ');
+      if (viewBoxValues.length === 4) {
+        const viewBoxWidth = parseFloat(viewBoxValues[2]);
+        const viewBoxHeight = parseFloat(viewBoxValues[3]);
+        if (!isNaN(viewBoxWidth) && !isNaN(viewBoxHeight)) {
+          if (width !== undefined && height === undefined) {
+            height = isWidthPercentage
+              ? `${(parseFloat(width) * viewBoxHeight) / viewBoxWidth}%`
+              : `${(parseFloat(width) * viewBoxHeight) / viewBoxWidth}`;
+          } else if (height !== undefined && width === undefined) {
+            width = isHeightPercentage
+              ? `${(parseFloat(height) * viewBoxWidth) / viewBoxHeight}%`
+              : `${(parseFloat(height) * viewBoxWidth) / viewBoxHeight}`;
+          }
+        }
+      }
+    }
+
     if (width === undefined && height === undefined) {
       width = height = '100%';
     }
@@ -185,7 +209,7 @@
         props.transform = gStyle.transform;
         gStyle.transform = undefined;
       }
       props.transform = extractTransformSvgView(props as any);
     }
 
     const RNSVGSvg = Platform.OS === 'android' ? RNSVGSvgAndroid : RNSVGSvgIOS;