[fix] Convert 'aspectRatio' style value to string

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

Close #2038

Author: petrbela

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({

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': {

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,

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
    */