From 3a0cc734cb402d963b3d0040375bdda11809adec Mon Sep 17 00:00:00 2001
From: Petr Bela <bela.petr@gmail.com>
Date: Tue, 1 Jun 2021 13:11:23 -0600
Subject: [PATCH] [fix] Convert 'aspectRatio' style value to string

The RN value is a number and the CSS value must be a string.

Close #2038
---
 .../StyleSheet/__tests__/createReactDOMStyle-test.js        | 6 ++++++
 .../src/exports/StyleSheet/createReactDOMStyle.js           | 5 +++++
 .../react-native-web/src/modules/unitlessNumbers/index.js   | 1 +
 packages/react-native-web/src/types/styles.js               | 5 +----
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
index f2131a2c..ccd57e8e 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
@@ -39,6 +39,12 @@ describe('StyleSheet/createReactDOMStyle', () => {
     expect(createReactDOMStyle(style)).toMatchSnapshot();
   });
 
+  test('aspectRatio', () => {
+    expect(createReactDOMStyle({ aspectRatio: 9 / 16 })).toEqual({
+      aspectRatio: '0.5625'
+    });
+  });
+
   describe('flexbox styles', () => {
     test('flex: -1', () => {
       expect(createReactDOMStyle({ flex: -1 })).toEqual({
diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
index 62111302..d822105a 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
@@ -87,6 +87,11 @@ const createReactDOMStyle = (style) => {
           break;
         }
 
+        case 'aspectRatio': {
+          resolvedStyle[prop] = value.toString();
+          break;
+        }
+
         // TODO: remove once this issue is fixed
         // https://github.com/rofrischmann/inline-style-prefixer/issues/159
         case 'backgroundClip': {
diff --git a/packages/react-native-web/src/modules/unitlessNumbers/index.js b/packages/react-native-web/src/modules/unitlessNumbers/index.js
index f146918e..b7ca058c 100644
--- a/packages/react-native-web/src/modules/unitlessNumbers/index.js
+++ b/packages/react-native-web/src/modules/unitlessNumbers/index.js
@@ -10,6 +10,7 @@
 
 const unitlessNumbers = {
   animationIterationCount: true,
+  aspectRatio: true,
   borderImageOutset: true,
   borderImageSlice: true,
   borderImageWidth: true,
diff --git a/packages/react-native-web/src/types/styles.js b/packages/react-native-web/src/types/styles.js
index 88d7f9f8..e2573208 100644
--- a/packages/react-native-web/src/types/styles.js
+++ b/packages/react-native-web/src/types/styles.js
@@ -154,6 +154,7 @@ export type LayoutStyles = {|
     | 'stretch',
   alignItems?: ?('baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'),
   alignSelf?: ?('auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'),
+  aspectRatio?: ?number,
   backfaceVisibility?: ?VisiblilityValue,
   borderWidth?: ?DimensionValue,
   borderBottomWidth?: ?DimensionValue,
@@ -216,10 +217,6 @@ export type LayoutStyles = {|
   visibility?: ?VisiblilityValue,
   width?: ?DimensionValue,
   zIndex?: ?number,
-  /**
-   * @platform unsupported
-   */
-  aspectRatio?: ?number,
   /**
    * @platform web
    */