Commit Graph

53 Commits

Author SHA1 Message Date
Tim Yung ad652cf99c sort-imports: Update Rule Definition (#51880)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51880

Updates the `sort-imports` lint rule.

The main change is that it enforces newlines after the last import statement.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D76149902

fbshipit-source-id: 928871655c5de0613b18334d6fc0d71b3a971a18
2025-06-09 20:30:32 -07:00
Mateo Guzmán d3d92b9a1d Unify RNTester Cache Policy Image example (#51580)
Summary:
The Image component in Android now supports the same cache control behaviour as in iOS, the examples needed to be separated in the past because the support was not the same for iOS and Android, but now that it is, we can unify the example.

## Changelog:

[INTERNAL] - Unify RNTester Cache Policy Image example

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

Test Plan:
<details>
<summary>RNTester Screenshots</summary>

| iOS | Android |
|--------|-------|
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2025-05-24 at 12 55 30](https://github.com/user-attachments/assets/f2fd680d-67e4-42db-bc91-f09fe5b0f947) | ![Screenshot_1748084132](https://github.com/user-attachments/assets/ef1b5454-4a85-48d7-be76-3107082b883e) |
</details>

Reviewed By: yungsters

Differential Revision: D75538812

Pulled By: Abbondanzo

fbshipit-source-id: 7705c8f824cb18cebc39e84b6f48979035dc104c
2025-05-31 13:13:39 -07:00
Tim Yung 1977dd6596 RN: Sort Pragmas in Headers (#51554)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51554

Sorts pragma directives file headers in React Native.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D75264593

fbshipit-source-id: 9e4b253dd0fc94dc2fc469d7114b93a8aae305f4
2025-05-22 21:18:53 -07:00
Tim Yung 3e70714cff RN: Prefer Destructured Import for useEffect (#51405)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51405

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74894042

fbshipit-source-id: 93fbadb32e4a1225836db9d729d7bf502ebddd84
2025-05-16 16:33:18 -07:00
Tim Yung 00108a1ac3 RN: Prefer Destructured Import for useState (#51403)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51403

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74891875

fbshipit-source-id: 981e85b5da84950c9e66e8d6b6496019e536711d
2025-05-16 16:33:18 -07:00
Alex Hunt b731ea3d3f Internalise RNTester examples referencing unexported APIs (#51019)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51019

Follows D72228547 and D73770609.

This diff internalises (moves files from fbsource+GitHub to fbsource only) a number of RNTester examples which referenced `'react-native/src/private/'` subpaths.

In future, new components/APIs should be exported from index as `unstable_`, or added to `RNTesterListFbInternal` if they are exported from `src/fb_internal/`.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D73777092

fbshipit-source-id: d9fb0833c56f2ae580b6db62ddbbbeae774a0004
2025-05-01 09:58:30 -07:00
Dawid Małecki ddcab831b1 Migrate already root exported deep imports in rn-tester. (#50958)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50958

In rn-tester package there are many react-native deep imports which will be deprecated in the future. It is a starter for migrating rn-tester to using root imports instead. Only deep imports that are already root exported are changed. This diff avoids using `CodegenTypes` as it causes build errors and will be resolved in next stages.

Besides import changes, `PointerEvent` type is now also exported from the root.

Changelog:
[Internal]

Reviewed By: huntie

Differential Revision: D73656526

fbshipit-source-id: 5814a3d9c6a04b1236581dbbe291cd109e2c71c0
2025-04-28 07:24:46 -07:00
Jakub Piasecki ebbb241bf8 Align layout event names with OSS (#49423)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49423

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D69655570

fbshipit-source-id: bd9b3dbc70b93c5be49e6a2b1b0487d11bf5b3f1
2025-02-18 07:26:13 -08:00
Peter Abbondanzo 6c87b748f3 Remove loadVectorDrawablesOnImages feature flag (#49183)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49183

The feature has been released to all for quite some time now and the holdout group has finally been unlinked. This removes all references to the feature flag and a few indicators that the feature is enabled/disabled from RNTester

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D69146787

fbshipit-source-id: 8a7f01016a715e61541910630d8c3ceb84ec5c82
2025-02-05 11:10:29 -08:00
Iwo Plaza 8783196ee5 Migrate files in Libraries/EventEmitter and Libraries/Image to use export syntax (#49020)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49020

## Motivation
Modernising the RN codebase to allow for modern Flow tooling to process it.

## This diff
- Migrates the `Libraries/EventEmitter/*.js` and `Libraries/Image/*.js` files to use the `export` syntax.
- Updates deep-imports of these files to use `.default`
- Updates the current iteration of API snapshots (intended).

Changelog:
[General][Breaking] - Deep imports to modules inside `Libraries/EventEmitter` and `Libraries/Image/*.js` with `require` syntax need to be appended with '.default'.

Reviewed By: huntie

Differential Revision: D68780876

fbshipit-source-id: bd8e702aba33878e38df6d9c89bec27e7c8df0ac
2025-01-30 07:27:03 -08:00
Dawid Małecki f36bfe5dfa Remove redundant {||} syntax (#48686)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48686

Changelog:
[Internal] - Removed redundant `{||}` syntax

Reviewed By: javache

Differential Revision: D68205038

fbshipit-source-id: f7d3271142b6443a5859c3b668b7aebd3ce3ef3f
2025-01-15 07:07:01 -08:00
Mateo Guzmán d4407d6f77 Fix RNTester strict mode warnings (#48619)
Summary:
While investigating https://github.com/facebook/react-native/issues/22186, some false positives showed up as some of the examples also have non-strict mode compatible code.

In this PR:

- Converting from class to functional components some TextInput and Image examples that were using `UNSAFE_` lifecycles.
- Unifying the auto-expanding example as it was exactly the same for iOS and Android.

## Changelog:

[INTERNAL] - Fix RNTester strict mode warnings for TextInput and Image examples

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

Test Plan:
- Wrapped the the entry app component in `RNTesterAppShared.js` with `StrictMode` and verified that no warnings are shown anymore for the updated components.
- Checked the examples are still working as they were.

Reviewed By: fabriziocucci

Differential Revision: D68094402

Pulled By: rshest

fbshipit-source-id: e13878cb290735095afaef3d0377fd6dab33c380
2025-01-13 05:11:13 -08:00
Peter Abbondanzo 071506fa61 Add tinted vector drawable example to RNTester (#48541)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48541

Shows how to use tintColor in conjunction with new XML file format, and serves as a good E2E test bench to ensure that drawables don't accidentally reuse the same state (if the underlying implementation isn't careful enough to call `buildCopy`, both icons will render red)

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D64136753

fbshipit-source-id: 3bd0933e587364425ac14a0635690d4b274a55fe
2025-01-09 19:56:12 -08:00
Sam Zhou d86412dcc6 prepare for primitive literal changes (#47943)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47943

Changelog: [Internal]

Reviewed By: panagosg7

Differential Revision: D66461724

fbshipit-source-id: b526ed1617667b70337472f4dad4e19f152a266b
2024-11-26 00:07:32 -08:00
Mateo Guzmán a0be88fd72 feat(image): [android] adding force-cache cache control option (#47426)
Summary:
This PR follows up on https://github.com/facebook/react-native/issues/47182 and https://github.com/facebook/react-native/issues/47348 by adding `force-cache`, the final missing option to align caching controls with the existing behavior on iOS.

Local caching behavior remains unchanged: if a cached image is available locally, it will be returned; otherwise, a network request will be made.

When an image request is sent over the network, the `force-cache` option sent from the sent fJS side will now use the `okhttp3.CacheControl.FORCE_CACHE` directive.

## Changelog:

[ANDROID] [ADDED] - Image `force-cache` caching control option

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

Test Plan:
New example added to the RNTester under the cache policy examples. Then inspecting that the cache control is set correctly before sending it in the `okhttp3.Request` builder.

```kt
FLog.w("ReactNative", "fetching uri: %s, with cacheControl: %s", uri, cacheControlBuilder.build().toString())
// fetching uri: https:...png?cacheBust=force-cache, with cacheControl: no-store, max-stale=2147483647, only-if-cached
```

This case was a bit more tricky to test in terms of e2e as it would involve some caching in the server as well, I'm open to suggestions to make this more complete.

Reviewed By: javache

Differential Revision: D65490360

Pulled By: Abbondanzo

fbshipit-source-id: f807a9793f85caea39c59a370d057b9a1d450a78
2024-11-12 10:44:09 -08:00
Peter Abbondanzo 425093863c Log image load errors (#47419)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47419

Minor improvements to `ImageExample` so we log when images fail to load. Also replaces a `Text` component with `RNTesterText` so it's legible.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D65363864

fbshipit-source-id: 6c7ce8d5af6aabfed21479c784911bdcffe4684e
2024-11-07 07:53:01 -08:00
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
Mateo Guzmán dc9db01665 feat(image): [android] adding only-if-cached cache control option (#47348)
Summary:
Following up from https://github.com/facebook/react-native/issues/47182, as basic caching control is already in place in Android, it can be extended to include the `only-if-cached` option.

We check whether the image is in the cache. If it is, we proceed to load it. Otherwise, we do nothing.

## Changelog:

[ANDROID] [ADDED] - Image `only-if-cached` cache control option

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

Test Plan:
In the `rn-tester`, I added a third example for Android where the third image will never be loaded as the cache policy is set to `only-if-cached` and the image has not been loaded before.

<details>
<summary>Video demonstrating how the `only-if-cached` options behaves</summary>

https://github.com/user-attachments/assets/45669e81-5414-4103-8931-138bffa81447

</details>

<details>
<summary>Error from image not found in cache example</summary>

<img width="807" alt="image" src="https://github.com/user-attachments/assets/6b79d811-1809-437c-b2fe-c86d3da7c58d">

</details>

Reviewed By: rshest

Differential Revision: D65384639

Pulled By: Abbondanzo

fbshipit-source-id: f4a72694f45eb3d7097c350f4a4008a0abf0a1ab
2024-11-04 08:37:59 -08:00
Mateo Guzmán e5dd7d68bf feat(image): enabling basic cache control for android (#47182)
Summary:
Fixes https://github.com/facebook/react-native/issues/12606

Previously, `Image` cache control options were not functional on Android, even though they were being passed to the native component via the `source` prop. This PR addresses that by implementing logic to manage cache behaviour on Android.

When the `reload` option is explicitly set, the image is now evicted from both memory and disk caches before a new request is made. This ensures the image is always fetched from the source, aligning the caching behaviour between Android and iOS for the `default` and `reload` options.

## Changelog:

[ANDROID][ADDED] - Enabling basic `Image` cache control for Android

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

Test Plan:
Added a new example to the `rn-tester`, where we can notice that the image on the right is reloaded if rendered or re-rendered as the cache policy is set to `reload`. The image on the left has the cache policy set to `default` and won't be re-rendered as the image is already in the cache.  See the video below:

https://github.com/user-attachments/assets/88bc1d2d-0239-4deb-bcde-fe0ce521ff4d

Also tested on both old and new architecture.

Reviewed By: NickGerleman

Differential Revision: D64915440

Pulled By: Abbondanzo

fbshipit-source-id: 32e1c55dd20bf96ab0f69ef900d821c3c2552ef7
2024-10-31 09:07:40 -07:00
Tim Yung c9ea05552f RN: Fix lint/sort-imports Errors (#47109)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47109

Fixes the `lint/sort-imports` errors that are now surfaced after fixing the lint configuration.

For a couple files, I added lint suppressions instead because the unsorted import ordering is important due to interleaved calls with side effects.

Changelog:
[Internal]

Reviewed By: GijsWeterings

Differential Revision: D64569485

fbshipit-source-id: 26415d792e2b9efe08c05d1436f723faae549882
2024-10-18 04:07:02 -07:00
Peter Abbondanzo 6e120b3b46 Add e2e test for Image resize method (#46982)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46982

E2E test setup for each of the `resizeMethod` methods for Image on Android

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D64136839

fbshipit-source-id: 876939a50243836030401c6456410f119abe01b5
2024-10-14 08:54:28 -07:00
Peter Abbondanzo 483b928224 Swallow exceptions on draw, forward to onError (#46964)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46964

Graceful degradation is better than outright crashing. When rendering images that exceed Android's memory limits, React Native applications will fatally crash. This change intervenes by swallowing the exception that Android raises and forwards it to the `onError` handler. As a result, no image will be rendered instead of fatally crashing.

Fresco already intervenes by default. It will raise a `PoolSizeViolationException` if the bitmap size exceeds memory limits set by the OS and applies a 2048 pixel maximum dimension to JPEG images, but it's still possible for these configuration limits to be removed and for images to fall just short of Fresco's memory limit. The exception is raised when we attempt to draw the bitmap, not when the bitmap is allocated in memory, so we must handle the exception here and not in Fresco.

## Changelog

[Android][Fixed] - Apps will no longer fatally crash when trying to draw large images

Reviewed By: tdn120

Differential Revision: D64144596

fbshipit-source-id: 32b69ad4ecef0564c2cad7a287a31b56688f38b8
2024-10-11 09:10:30 -07:00
Peter Abbondanzo 09682b5109 Fix dark mode text (#46898)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46898

Replaces *many* `Text` component usages with `RNTesterText`: a thin wrapper around `Text` that applies color based on the color scheme chosen by the user. It makes text legible for dark mode across 41 different example files. This changes intentionally do not touch a few larger component sites that expand beyond RNTester, like `Animated` and `NewAppScreen`

Changelog: [Internal]

Reviewed By: rshest

Differential Revision: D64053464

fbshipit-source-id: 9516fef2afe1b364eb38e85e3a2dbb5c434e44db
2024-10-10 11:02:18 -07:00
Peter Abbondanzo 768a1d8664 Add example of different resize methods (#46873)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46873

## Summary

Adds a small showcase for the different `resizeMethod` options and how downsampling is applied

## Changelog

[Android][Added] - Added showcase for Android `resizeMethod` options when applied to a large image

Reviewed By: rshest

Differential Revision: D62393212

fbshipit-source-id: 46e7ff6310617acb9eb288e3831c0b5e6b1751c8
2024-10-08 16:18:27 -07:00
Jorge Cabiedes Acosta 2241c3146f Remove experimental_ prefix from boxShadow (#46404)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46404

As title

Second attempt to rename the prop. BoxShadow caused no issues after renaming but it was batched with `filter` which we reverted.

Changelog: [General] [Changed] - Add official `boxShadow` CSSProperty.

Reviewed By: NickGerleman, cyan33

Differential Revision: D62400814

fbshipit-source-id: ad721f6d11d614e987048e55556b05ff74a4747d
2024-09-11 16:01:06 -07:00
Peter Abbondanzo 2e80f5acf1 Load XML files on disk by default (#46371)
Summary:
X-link: https://github.com/facebook/metro/pull/1348

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

## Internal

Vector drawable image support was added in D59530172 but importing vector drawable asset types was not supported out of the box. It required custom source transformers like the one added in D60021474. This is because Android cannot load vector drawable XML over the network. Vector drawables are compiled by AAPT as part of the build process. Even though Metro can serve XML, it would never load.

## Summary

This adds some minor checks in the `AssetSourceResolver` to only attempt loading XML asset types from disk on the Android platform. XML assets like vector drawables are precompiled and cannot be served over the network by Metro.

## Changelog

[Android] [Added] - Adds support for importing XML assets as images

Reviewed By: javache

Differential Revision: D62302929

fbshipit-source-id: 01e49ac5b0429d291318984128dfca2dc058149d
2024-09-09 10:18:10 -07:00
Jorge Cabiedes Acosta acbde249b7 Revert D61726506 (#46266)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46266

This diff reverts D61726506
T200279372

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D61986793

fbshipit-source-id: bbf462b79192b67801a6cf56727f8f43ade8fd56
2024-08-29 20:34:19 -07:00
Jorge Cabiedes Acosta 6fa54f9b5d Remove experimental_ prefix from boxShadow and filter (#46245)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46245

As title

Changelog: [General] [Changed] - Add official `boxShadow` and `filter` CSS properties

Reviewed By: cipolleschi

Differential Revision: D61726506

fbshipit-source-id: 8ee7a95d95a66f1f890a5ebb6791da73219b2c52
2024-08-28 23:03:41 -07:00
Nick Gerleman 9035008427 Add Screenshot Tests for Image border, background, shadows (#45885)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45885

There are some gaps here right now, but Android API 31+ is looking good.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D60731848

fbshipit-source-id: f515270a61a00c362b584f0d1549d14098c2e385
2024-08-06 09:25:34 -07:00
Nick Gerleman 32d040380f Add Image Box Shadow Examples (#45781)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45781

This adds some RNTester examples for `boxShadow`, that render correctly when `ReactNativeFeatureFlags.enableBackgroundStyleApplicator()` is set!

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D60367850

fbshipit-source-id: 3c9ae2bf906ae923c713b5f36cd2000f612fe3dc
2024-07-30 15:46:28 -07:00
Peter Abbondanzo 018d0621c1 Declare public resources from images that are loaded by name (#45421)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45421

RNTester contains Android resources that are loaded by name and not resolved by Metro. As a result, these assets are not automatically linked when RNTester JS code is embedded in other projects. This is considered "legacy" loading and is generally discouraged, but is still showcased as an alernative way of loading resources.

I also modified the Image test to ensure that flag status is printed so it's obvious why the vector drawable hasn't loaded.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D59585555

fbshipit-source-id: d42fb44d8846d8e7c7aa01dca4cec89ae85a9195
2024-07-15 12:39:06 -07:00
Peter Abbondanzo aad9240fd4 Support loading vector drawables in ImageView (#45354)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45354

Fresco has indicated that they have no plans to support loading vector assets and similar drawable types in Drawee-backed views ([issue](https://github.com/facebook/fresco/issues/329), [issue](https://github.com/facebook/fresco/issues/1463), [issue](https://github.com/facebook/fresco/issues/2463)). Guidance has been to instead load the vector drawable onto the backing image view ourselves. On the React Native side, having the ability to load vector drawables has been requested many times ([issue](https://github.com/facebook/react-native/issues/16651), [issue](https://github.com/facebook/react-native/issues/27502)).

I went this route over using a custom Fresco decoder for XML assets because vector drawables are compiled down into binary XML and I couldn't find a trivial, performant way to parse those files in a context-aware manner. This change only accounts for vector drawables, not any of the other XML-based drawable types (layer lists, level lists, state lists, 9-patch, etc.). Support could be added easily in the future by expanding the `getDrawableIfUnsupported` function.

## Changelog

[Android] [Added] - Added support for rendering XML assets provided to `Image`

Reviewed By: javache

Differential Revision: D59530172

fbshipit-source-id: 3d427c06238287e0a3b7f9570ac20e43d76126c7
2024-07-15 08:54:48 -07:00
Ruslan Shestopalyuk 362abb9ffe Factor hardcoded image paths out in RNTester/Image example, get rid of .ico file (#44415)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44415

# Changelog:
[Internal] -

RNTester Image example used hardcoded `https://www.facebook.com/favicon.ico`, which has an uncommon ICO format, for no good reason aside of just this image being served from `facebook.com`.

This diff:
* Replaces the ICO image with a PNG one (which is still served from `facebook.com`
* Factors out all the multiple hardcoded paths into constants, so that it's easier to make such changes in the future
* Changes another image to something that is a bit better on the eyes when severely downscaled

Reviewed By: christophpurrer

Differential Revision: D56978929

fbshipit-source-id: c627d1671c8cb66e9a78f4382faa56e539b2f7b3
2024-05-05 13:22:59 -07:00
Ruslan Shestopalyuk 9d2cf42f95 Add "Refresh Image" to RNTester Image.fadeDuration example (#44414)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44414

# Changelog:
[Internal] -

I noticed that "Image/Fade Duration" test in RNTester is practically useless, as at the moment one scrolls to the test, the fading is most probably had already ended.

This adds a "button" to refresh the image and be able to see the fading in again and again, if desired.

Reviewed By: christophpurrer

Differential Revision: D56978930

fbshipit-source-id: 02873b45600ad319b0b1077467f599dc1a54bee3
2024-05-05 13:22:59 -07:00
Moti Zilberman d6e0bc714a Enable lint/sort-imports everywhere (#41334)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41334

TSIA.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D51025812

fbshipit-source-id: e10d437be775a6b80946483aa96460f34927f870
2023-11-06 12:59:38 -08:00
David Richey da027dd2fd Pre-suppress unused-promise lint errors in xplat/js (#36590)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36590

Pre-suppress unused-promise lint errors in xplat/js. The next diff enables the lint.

See https://flow.org/en/docs/linting/rule-reference/#toc-unused-promise for more details.

Changelog: [Internal]

drop-conflicts
bypass-lint

Reviewed By: pieterv

Differential Revision: D43967290

fbshipit-source-id: f36242a732dbc18bf7482adfb46ca2b77e1b1493
2023-03-22 18:24:22 -07:00
Gabriel Donadel Dall'Agnol 71fda5e0c2 feat: Add alt prop to Image component (#34550)
Summary:
This adds the `alt` prop to the `Image` component as requested on https://github.com/facebook/react-native/issues/34424. Using this new `alt` prop enables the `accessibility` prop and passes down the alt text to `accessibilityLabel`. This PR also updates RNTester ImageExample in order to facilitate the manual QA.

#### Open questions
 - ~~On web `alt` text is displayed on the page if the image can't be loaded for some reason, should we implement this same behavior if the `Image` component fails to load `source`?~~ Not for now

## Changelog

[General] [Added] - Add alt prop to Image component

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

Test Plan:
1. Open the RNTester app and navigate to the Image page
2. Test the `alt` prop through the `Accessibility Label via alt prop` section, this can be tested either by enabling Voice Over if you're using a real device or through the Accessibility Inspector if you're using a simulator

https://user-images.githubusercontent.com/11707729/187790249-0d851363-c30e-41b6-8c24-73e72467f4ba.mov

Reviewed By: lunaleaps

Differential Revision: D39618453

Pulled By: cipolleschi

fbshipit-source-id: 0e26b2574514e76ce7e98ddb578f587a9cc30ee9
2022-09-27 04:05:15 -07:00
Agastya Darma Laksana b2452ab216 feat: Adding support for objectFit a partial equivalent to the resizeMode style and prop of <Image>. (#34576)
Summary:
This PR aims to add support for objectFit a partial equivalent to the resizeMode style and prop of Image.

## Changelog

[General] [Added] - Add support for objectFit style of Image.

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

Test Plan:
1. Open the RNTester app and navigate to the Image page
2. See the Object Fit section.

![Screenshot_1662112702](https://user-images.githubusercontent.com/8868908/188115315-5d5aa971-93ba-4437-a54b-c5ea69b00c08.png)

Reviewed By: rickhanlonii

Differential Revision: D39261176

Pulled By: jacdebug

fbshipit-source-id: 1eefd76b6c11ed5fc52b2c524ad78c91051077f6
2022-09-08 11:52:10 -07:00
dhruvtailor7 47a05bc26a feat: added crossOrigin, referrerPolicy, srcSet, width, height and src props to the Image Component. (#34481)
Summary:
This PR is for adding the support for `crossOrigin`, `referrerPolicy`, `width`, `height` and `srcSet` props to Image Component and mapping the `src` prop to `source.uri` of Image Component for the issue https://github.com/facebook/react-native/issues/34424. An example is also added in the RNTester ImageExample.

## Changelog

[General] [Changed] - Map the `src` prop to `source.uri` prop in Image Component.
[General] [Added] - added `crossOrigin`, `referrerPolicy`, `width`, `height` and `srcSet` props to Image Component.

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

Test Plan:
1. Navigate to Image Component Example in the RNTester app.
2. Contains an example of the Image component using the `src` and `srcSet` prop.
3. For headers, inspect the Image request using Flipper.

<img src="https://user-images.githubusercontent.com/32268377/186153246-d7b72ce3-e082-46d9-87d1-aefacd3af34f.png" height="500" />

Reviewed By: christophpurrer

Differential Revision: D38982041

Pulled By: cipolleschi

fbshipit-source-id: dd6594e39b8f3b36cfcdafa35695254034f1fb7f
2022-09-07 13:13:08 -07:00
Gabriel Donadel Dall'Agnol 7a6f0e44b2 feat: Add tintColor prop to Image component (#34534)
Summary:
This adds the `tintColor` prop to the Image component to replace the non-standard `style.tintColor` as requested on https://github.com/facebook/react-native/issues/34424, so that React Native for Web does not have to deopt styles for Image rendering. I didn't have to change anything on Android as `tintColor` was already being passed down to the native component as a prop. This PR also updates RNTester ImageExample in order to facilitate the manual QA.

## Changelog

[General] [Added] - Add tintColor prop to Image component

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

Test Plan:
1. Open the RNTester app and navigate to the Image page
2. Test the `tintColor` prop through the `Tint Color` section

https://user-images.githubusercontent.com/11707729/187444761-ce5fd949-89f3-4d73-9717-31d035c6ee6b.mov

Reviewed By: necolas

Differential Revision: D39133292

Pulled By: jacdebug

fbshipit-source-id: 314e0ed47ab65366153e730667a31554bc2b6aa7
2022-08-31 07:23:48 -07:00
Pieter Vanderwerff ee3d3c248d Add missing class annotations xplat/js
Reviewed By: SamChou19815

Differential Revision: D38373443

fbshipit-source-id: 1222c4845ebd6b72bd6f54af1a27cf8542dd883a
2022-08-03 12:43:58 -07:00
Pieter Vanderwerff e7a4dbcefc Add LTI annotations to function params in xplat/js [1/2]
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable.

Reviewed By: evanyeung

Differential Revision: D37353648

fbshipit-source-id: e5a0c685ced85a8ff353d578b373f836b376bb28
2022-06-22 21:36:52 -07:00
Brad Zacher c0e489b729 remove duplicate class members
Summary:
Flow currently allows duplicate members on classes. At runtime the "last" member wins out and all previous values for the member are discarded.
This diff manually removes duplicate members, and fixes resulting flow errors by converting methods to arrow function properties.

Reviewed By: pieterv

Differential Revision: D33664966

fbshipit-source-id: 0f712ac96af4df593c0918fcbadd70624ddde4a6
2022-01-19 15:35:57 -08:00
Andres Suarez 8bd3edec88 Update copyright headers from Facebook to Meta
Reviewed By: aaronabramov

Differential Revision: D33367752

fbshipit-source-id: 4ce94d184485e5ee0a62cf67ad2d3ba16e285c8f
2021-12-30 15:11:21 -08:00
Genki Kondo d393e9490e Stop using RoundedCornerPostProcessor
Summary:
Originally introduced in D2022018

Tried to make the processor optional when no rounding is required, but found even that was not strictly necessary.

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D32675492

fbshipit-source-id: 8dfdbf0e4347155045f77b1fba00a59086fe7a33
2021-12-07 16:09:54 -08:00
Tim Yung 77ecc7ede1 JS: Format with Prettier v2.4.1 [3/n]
Summary:
Changelog:
[General][Internal]

Reviewed By: zertosh

Differential Revision: D31883447

fbshipit-source-id: cbbf85e4bf935096d242336f41bf0cc5d6f92359
2021-11-02 22:14:16 -07:00
Cristiano Coelho 900210cacc Fix Image defaultSource not showing on iOS (#32172)
Summary:
Fix Image defaultSource not showing on iOS.

This bug was introduced somewhere between RN 0.63 and 0.65. On iOS, defaultSource does not show while the image is being downloaded, only if it fails or there's no internet.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Fixed] - Fix Image defaultSource not showing on iOS

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

Test Plan: Ran both debug and release builds on an iPhone 12 pro (iOS 14.6)

Reviewed By: sammy-SC

Differential Revision: D30822805

Pulled By: lunaleaps

fbshipit-source-id: c4ef18723a8311ef3be1d7ae25ff3c205e8fff62
2021-09-29 01:56:56 -07:00
Tomek Zawadzki f00e348ca7 Fix support for blobs larger than 64 KB on Android (#31789)
Summary:
Fixes https://github.com/facebook/react-native/issues/31774.

This pull request resolves a problem related to accessing blobs greater than 64 KB on Android. When an object URL for such blob is passed as source of `<Image />` component, the image does not load.

This issue was related to the fact that pipe buffer has a limited capacity of 65536 bytes (https://man7.org/linux/man-pages/man7/pipe.7.html, section "Pipe capacity"). If there is more bytes to be written than free space in the buffer left, the write operation blocks and waits until the content is read from the pipe.

The current implementation of `BlobProvider.openFile` first creates a pipe, then writes the blob data to the pipe and finally returns the read side descriptor of the pipe. For blobs larger than 64 KB, the write operation will block forever, because there are no readers to empty the buffer.

https://github.com/facebook/react-native/blob/41ecccefcf16ac8bcf858dd955af709eb20f7e4a/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobProvider.java#L86-L95

This pull request moves the write operation to a separate thread. The read side descriptor is returned immediately so that both writer and reader can work simultaneously. Reading from the pipe empties the buffer and allows the next chunks to be written.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Fix support for blobs larger than 64 KB

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

Test Plan:
A new example has been added to RN Tester app to verify if the new implementation properly loads the image of size 455 KB from a blob via object URL passed as image source.

<img src="https://user-images.githubusercontent.com/20516055/123859163-9eba6d80-d924-11eb-8a09-2b1f353bb968.png" alt="Screenshot_1624996413" width="300" />

Reviewed By: ShikaSD

Differential Revision: D29674273

Pulled By: yungsters

fbshipit-source-id: e0ac3ec0a23690b05ab843061803f95f7666c0db
2021-07-14 11:11:31 -07:00
Luna Wei bac2c2c801 Update FlowFixMes to use error codes in react-native-github
Summary:
Changelog:
[Internal] - Add error codes to existing FlowFixMe's

Reviewed By: kacieb

Differential Revision: D27445689

fbshipit-source-id: 2b19692e1cb822ab6785efcc5f93ee33e7dce1e5
2021-03-31 18:21:47 -07:00
Joseph Semrai 2aeb6545bc Add remaining prop examples for the Image component (#30554)
Summary:
Adds missing prop examples for the Image component in rn-tester.

## Changelog
[Internal] [Added] New examples for LoadingIndicatorSource, Accessibility, AccessibilityLabel, fadeDuration, onLayout, onPartialLoad, accessibilityLabel, etc.

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

Test Plan:
- [x] Build rn-tester and verify that it runs
- [x] Interact with each component
- [x] Verify that the examples function as intended

Reviewed By: shergin

Differential Revision: D25680504

Pulled By: rickhanlonii

fbshipit-source-id: bf797c92f8d0b4e66cdede2e32445ea4941b19fe
2021-01-08 12:07:33 -08:00