[fix] Only stringify numeric aspectRatio

Close #2561
necolas · Jul 20, 2023 · 617b438 · 617b438
1 parent 213b616
commit 617b438
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js
@@ -99,6 +99,12 @@ describe('StyleSheet/preprocess', () => {
       expect(preprocess({ aspectRatio: 9 / 16 })).toEqual({
         aspectRatio: '0.5625'
       });
+
+      expect(preprocess({ aspectRatio: '0.5' })).toEqual({
+        aspectRatio: '0.5'
+      });
+
+      expect(preprocess({ aspectRatio: undefined })).toEqual({});
     });
 
     test('fontVariant', () => {

diff --git a/packages/react-native-web/src/exports/StyleSheet/preprocess.js b/packages/react-native-web/src/exports/StyleSheet/preprocess.js
@@ -182,7 +182,7 @@ export const preprocess = <T: {| [key: string]: any |}>(
       continue;
     }
 
-    if (prop === 'aspectRatio') {
+    if (prop === 'aspectRatio' && typeof value === 'number') {
       nextStyle[prop] = value.toString();
     } else if (prop === 'fontVariant') {
       if (Array.isArray(value) && value.length > 0) {

diff --git a/packages/react-native-web/src/types/styles.js b/packages/react-native-web/src/types/styles.js
@@ -188,7 +188,7 @@ export type LayoutStyles = {|
     | 'flex-start'
     | 'stretch'
   ),
-  aspectRatio?: ?number,
+  aspectRatio?: ?NumberOrString,
   backfaceVisibility?: ?VisiblilityValue,
   borderWidth?: ?DimensionValue,
   borderBlockWidth?: ?DimensionValue,