Files
react-native/packages/react-native/ReactCommon/react/renderer/imagemanager/primitives.h
T
Mateo Guzmán 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
2024-11-05 11:36:27 -08:00

61 lines
1.3 KiB
C++

/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#pragma once
#include <string>
#include <vector>
#include <react/renderer/graphics/Float.h>
#include <react/renderer/graphics/Size.h>
namespace facebook::react {
class ImageSource {
public:
enum class Type { Invalid, Remote, Local };
enum class CacheStategy { Default, Reload, ForceCache, OnlyIfCached };
Type type{};
std::string uri{};
std::string bundle{};
Float scale{3};
Size size{0};
std::string body{};
std::string method{};
CacheStategy cache = CacheStategy::Default;
std::vector<std::pair<std::string, std::string>> headers{};
bool operator==(const ImageSource& rhs) const {
return std::tie(this->type, this->uri) == std::tie(rhs.type, rhs.uri);
}
bool operator!=(const ImageSource& rhs) const {
return !(*this == rhs);
}
};
using ImageSources = std::vector<ImageSource>;
enum class ImageResizeMode {
Cover,
Contain,
Stretch,
Center,
Repeat,
None,
};
class ImageErrorInfo {
public:
std::string error{};
int responseCode{};
std::vector<std::pair<std::string, std::string>> httpResponseHeaders{};
};
} // namespace facebook::react