react-native

mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Files

T

Mateo GuzmánandFacebook GitHub Bot d8cfd98070 feat(image): support for resizeMode and objectFit value of 'none' (#47110 )

Summary:
As part of https://github.com/facebook/react-native/issues/34425, `objectFit` value of `'none'` needs to be supported for the Image component.

In order to support this, a new value must also be added to support the equivalent in `resizeMode`. With this new value, the image will not be resized at all and keeping it in the initial position within a container (see in the screenshots).

In this PR the support is added for both Fabric and Paper.

## Changelog:

[GENERAL] [ADDED] - image `resizeMode` and `objectFit` support for `'none'`.

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

Test Plan:
Using the `rn-tester`, there is a new image example for both `resizeMode` and `objectFit`.

See below the results for both Android and iOS:

<details>
<summary>Fabric screenshots</summary>

**Android:**

| Resize Mode | Object Fit |
| --------- | ---------- |
| ![Screenshot_1729232899](https://github.com/user-attachments/assets/ea765afc-9f85-4ac3-96ab-229b3f1def20) | ![Screenshot_1729232912](https://github.com/user-attachments/assets/75033e76-5faa-438d-81b1-4bf8436f9ef2) |

**iOS:**

| Resize Mode | Object Fit |
| --------- | ---------- |
| ![Simulator Screenshot - iPhone 16 Pro Max - 2024-10-18 at 08 16 37](https://github.com/user-attachments/assets/ade02ba9-4792-4760-aada-6ea56b591801) | ![Simulator Screenshot - iPhone 16 Pro Max - 2024-10-18 at 08 16 55](https://github.com/user-attachments/assets/abf68db9-841a-4ee5-b5db-64fe84a69089) |

</details>

<details>
<summary>Paper screenshots</summary>

**Android:**

| Resize Mode | Object Fit |
| --------- | ---------- |
| ![Screenshot_1729286528](https://github.com/user-attachments/assets/88e89191-d70a-4013-8380-2ecefd9532b4) | ![Screenshot_1729286542](https://github.com/user-attachments/assets/43d84ae0-2ed3-47ad-a725-ac6aea0b3245) |

**iOS:**

| Resize Mode | Object Fit |
| --------- | ---------- |
| ![Simulator Screenshot - iPhone 16 Pro Max - 2024-10-18 at 22 21 22](https://github.com/user-attachments/assets/e14a81de-3a69-4e73-8c85-ec08ac30b04f) | ![Simulator Screenshot - iPhone 16 Pro Max - 2024-10-18 at 22 21 16](https://github.com/user-attachments/assets/595f9f5e-96a6-4f6b-9614-f6c236837ba8) |

</details>

Reviewed By: fabriziocucci

Differential Revision: D65420002

Pulled By: javache

fbshipit-source-id: df3bc8fc931b88cde5fe51d89685bf327e30ed9f