From a8166bd75b221f967a859d5cc25b3394c4d35301 Mon Sep 17 00:00:00 2001
From: mym0404 <mym0404@gmail.com>
Date: Wed, 25 Jan 2023 17:15:19 -0800
Subject: [PATCH] Fix crash by conditional value of aspectRatio style value
 (#35858) (#35859)

Summary:
fix https://github.com/facebook/react-native/issues/35858

## Changelog

1. Handle not `number` | `string` value passed to `aspectRatio`
2. Add some tests

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[GENERAL] [FIXED] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

Pull Request resolved: https://github.com/facebook/react-native/pull/35859

Test Plan:
## Sample
[Sample Repository](https://github.com/mym0404/rn-aspect-ratio-crash-sample)

Video

![1](https://user-images.githubusercontent.com/33388801/212956921-94b21cda-d841-4588-a05a-d604a82e204c.gif)

Reviewed By: necolas

Differential Revision: D42575942

Pulled By: NickGerleman

fbshipit-source-id: 2f7f46e6e3af85146e4042057477cb6d63b3b279
---
 .../__snapshots__/processAspectRatio-test.js.snap  | 12 +++++++++---
 .../__tests__/processAspectRatio-test.js           | 14 ++++++++++++++
 Libraries/StyleSheet/processAspectRatio.js         | 14 ++++++++++++--
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/Libraries/StyleSheet/__tests__/__snapshots__/processAspectRatio-test.js.snap b/Libraries/StyleSheet/__tests__/__snapshots__/processAspectRatio-test.js.snap
index bf6d088a94157e..d9d5f987b12996 100644
--- a/Libraries/StyleSheet/__tests__/__snapshots__/processAspectRatio-test.js.snap
+++ b/Libraries/StyleSheet/__tests__/__snapshots__/processAspectRatio-test.js.snap
@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`processAspectRatio should not accept invalid formats 1`] = `"aspectRatio must either be a number, a ratio or \`auto\`. You passed: 0a"`;
+exports[`processAspectRatio should not accept invalid formats 1`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: 0a"`;
 
-exports[`processAspectRatio should not accept invalid formats 2`] = `"aspectRatio must either be a number, a ratio or \`auto\`. You passed: 1 / 1 1"`;
+exports[`processAspectRatio should not accept invalid formats 2`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: 1 / 1 1"`;
 
-exports[`processAspectRatio should not accept invalid formats 3`] = `"aspectRatio must either be a number, a ratio or \`auto\`. You passed: auto 1/1"`;
+exports[`processAspectRatio should not accept invalid formats 3`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: auto 1/1"`;
+
+exports[`processAspectRatio should not accept non string truthy types 1`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: function () {}"`;
+
+exports[`processAspectRatio should not accept non string truthy types 2`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: 1,2,3"`;
+
+exports[`processAspectRatio should not accept non string truthy types 3`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: [object Object]"`;
diff --git a/Libraries/StyleSheet/__tests__/processAspectRatio-test.js b/Libraries/StyleSheet/__tests__/processAspectRatio-test.js
index 7a3fbd3138336b..1097d956203e12 100644
--- a/Libraries/StyleSheet/__tests__/processAspectRatio-test.js
+++ b/Libraries/StyleSheet/__tests__/processAspectRatio-test.js
@@ -47,4 +47,18 @@ describe('processAspectRatio', () => {
     expect(() => processAspectRatio('1 / 1 1')).toThrowErrorMatchingSnapshot();
     expect(() => processAspectRatio('auto 1/1')).toThrowErrorMatchingSnapshot();
   });
+
+  it('should ignore non string falsy types', () => {
+    const invalidThings = [undefined, null, false];
+    invalidThings.forEach(thing => {
+      expect(processAspectRatio(thing)).toBe(undefined);
+    });
+  });
+
+  it('should not accept non string truthy types', () => {
+    const invalidThings = [() => {}, [1, 2, 3], {}];
+    invalidThings.forEach(thing => {
+      expect(() => processAspectRatio(thing)).toThrowErrorMatchingSnapshot();
+    });
+  });
 });
diff --git a/Libraries/StyleSheet/processAspectRatio.js b/Libraries/StyleSheet/processAspectRatio.js
index bde4a4a645c0e5..d3c1f8a452397f 100644
--- a/Libraries/StyleSheet/processAspectRatio.js
+++ b/Libraries/StyleSheet/processAspectRatio.js
@@ -12,10 +12,20 @@
 
 const invariant = require('invariant');
 
-function processAspectRatio(aspectRatio: number | string): ?number {
+function processAspectRatio(aspectRatio?: number | string): ?number {
   if (typeof aspectRatio === 'number') {
     return aspectRatio;
   }
+  if (typeof aspectRatio !== 'string') {
+    if (__DEV__) {
+      invariant(
+        !aspectRatio,
+        'aspectRatio must either be a number, a ratio string or `auto`. You passed: %s',
+        aspectRatio,
+      );
+    }
+    return;
+  }
 
   const matches = aspectRatio.split('/').map(s => s.trim());
 
@@ -34,7 +44,7 @@ function processAspectRatio(aspectRatio: number | string): ?number {
   if (__DEV__) {
     invariant(
       !hasNonNumericValues && (matches.length === 1 || matches.length === 2),
-      'aspectRatio must either be a number, a ratio or `auto`. You passed: %s',
+      'aspectRatio must either be a number, a ratio string or `auto`. You passed: %s',
       aspectRatio,
     );
   }