Summary:
When setting a shadow on a `Text` inside a `TextInput`, the shadow was rendered with artifacts when `backgroundColor` was set on the `TextInput`.
This is caused by how attributed strings are constructed on the new architecture - all text attributes from the text input (including background color) are propagated onto the string. Then, it's converted to a `Spannable` on Android side, which includes `ReactBackgroundColorSpan` being set on the entire text when it doesn't have a background color set explicitly. Then Android tries to render the shadow not only for the text but also for the background rect which results in the artifacts.
This PR prevents background color from the `TextInput` from being propagated onto the attributed string, so the `ReactBackgroundColorSpan` is only applied when a text fragment has its background set explicitly.
## Changelog:
[ANDROID] [FIXED] - Fixed text shadow rendering with artifacts when `backgroundColor` was set on the `TextInput`
Pull Request resolved: https://github.com/facebook/react-native/pull/45343
Test Plan:
Checked relevant examples on RNTester
|Old arch|New arch (before)|New arch (after)|
|-|-|-|
|<img width="436" alt="Screenshot 2024-07-09 at 14 44 52" src="https://github.com/facebook/react-native/assets/21055725/64005ec4-3e42-4327-9b09-f57d3c477fb6">|<img width="436" alt="Screenshot 2024-07-09 at 14 43 03" src="https://github.com/facebook/react-native/assets/21055725/f558ad26-08de-4231-acdf-92f596ec186c">|<img width="436" alt="Screenshot 2024-07-09 at 14 41 46" src="https://github.com/facebook/react-native/assets/21055725/6b4ff6ed-5267-4f1a-a895-1bbd760f73e5">|
Reviewed By: NickGerleman
Differential Revision: D59527817
Pulled By: cortinico
fbshipit-source-id: d03d4749e4435ef04e51b1018f046be0e5e0bca4
Summary:
This PR updates the comments for `~ShadowNodeWrapper()` and `~ShadowNodeListWrapper()` to align them with the actual implementation that now uses `jsi::NativeState` instead of `jsi::HostObject`.
## Changelog:
[GENERAL] [FIXED] - Updated comments for `~ShadowNodeWrapper()` and `~ShadowNodeListWrapper()`
Pull Request resolved: https://github.com/facebook/react-native/pull/45357
Reviewed By: sammy-SC
Differential Revision: D59578988
Pulled By: javache
fbshipit-source-id: 1c46ce8407fc8b337f3a6762caee3b2e0e1edfc6
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45348
flattenStyle may return an object which is already frozen (in development), so it is incorrect to further mutate this.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D59525418
fbshipit-source-id: 094b7c9c952d8684e24203cc07d6bda51bdf12b5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45352
We claim that we will never draw multiple elements on top of each other, which isn't correct when we have a background.
We should claim that we can draw overlapping elements if we have a background drawable which we place in the Drawee hierarchy (part of the ImageView foreground drawable), or if the underlying view has a background drawable (which is handled by `ImageView` superclass `hasOverlappingRendering()`).
The effect of this is subtle, and just means that we get correct compositing when an opacity is set on image with background.
Changelog:
[Android][Fixed] - Fix ReactImageView.hasOverlappingRendering()
Reviewed By: mdvacca
Differential Revision: D59489788
fbshipit-source-id: fe2922f064b91f1709ed546dd647d4d4112d04c1
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45338
`CSSBackgroundDrawable` is a silly goose and reuses layout types to store color. This has extended into a really strange public API, where we use floating point colors, where the color is itself in int with packed integer color components.
This hides that away, and marks some classes with `UnstableReactNativeAPI` that I plan to hide shortly.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D59488811
fbshipit-source-id: 7dc57edc9888f8a92088d2410ee71c2768ae8ec1
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45169
This is a follow-up to D56280451 where I made all SystraceSection calls feed into the Instruments signposts API. This will additionally do the same for all calls to nativeTraceBeginSection/nativeTraceEndSection from JSITracing.cpp.
Changelog: [Internal]
Reviewed By: sammy-SC
Differential Revision: D58895740
fbshipit-source-id: ee1cdff883ac1172f9bafe11ab950738d7ae7f82
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45336
The spec says we need to adjust the border radius of the shadow if spread is present. It gets bigger for outset shadows and smaller for inset shadows.
Source https://drafts.csswg.org/css-backgrounds/#shadow-shape
> To preserve the box’s shape when spread is applied, the corner radii of the shadow are also increased (decreased, for inner shadows) from the border-box (padding-box) radii by adding (subtracting) the spread distance (and flooring at zero). However, in order to create a sharper corner when the border radius is small (and thus ensure continuity between round and sharp corners), when the border radius is less than the spread distance (or in the case of an inner shadow, less than the absolute value of a negative spread distance), the spread distance is first multiplied by the proportion 1 + (r-1)3, where r is the ratio of the border radius to the spread distance, in calculating the corner radii of the spread shadow shape.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D59296120
fbshipit-source-id: e55327701547f27961a0d612ed595b4383e1d763
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45340
flattenStyle may return an object which is already frozen (in development), so it is incorrect to further mutate this.
Changelog: [Internal]
Reviewed By: cortinico
Differential Revision: D59515063
fbshipit-source-id: 92df158d5841988d40bcd76b861963b06dad1573
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45323
We're no longer running experiments with TurboModule and legacy module rollout, so this debug info is no longer required, and adds unnecessary verbosity to TurboModule lookup errors.
Changelog: [Internal]
Reviewed By: christophpurrer
Differential Revision: D59465974
fbshipit-source-id: 87a2ebd9c05ad312889bcbd819ccbe885b429064
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45320
TurboModule should be the default path, and we should only fallback to the legacy native modules if we can't find a module through the TurboModule mechanism.
Changelog: [General][Changed] - TurboModules will be looked up as TurboModules first, and fallback to legacy modules after.
Reviewed By: christophpurrer
Differential Revision: D59465978
fbshipit-source-id: c5672d34e90dcee321de0a5acd3a50b6bb1092b8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45330
changelog: [internal]
With view preallocation, we want to trigger image download in case there is only a single image source even if layout hasn't been determined.
This can lead to images appearing 100s of milliseconds earlier.
This optimisation is already used by plain ImageView: https://fburl.com/code/cp87xmw7
Reviewed By: rubennorte
Differential Revision: D59465972
fbshipit-source-id: e045d6bd9d595d366541ffa32364488be4766ef8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45319
This test has been cleaned up, we can remove the callers.
Changelog: [Internal]
Reviewed By: fabriziocucci
Differential Revision: D59465975
fbshipit-source-id: 01f4b24f221aa017fbfd2238f81454d38d05920a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45325
We don't want to lose this context when we cleanup the old architecture.
Changelog: [Internal]
Reviewed By: sammy-SC
Differential Revision: D59466876
fbshipit-source-id: 3cf3c63d619d9e8535e369ec1ef7c5706431b85d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45317
changelog: [internal]
ship optimized version of Text componant. In local benchmarking this version shows 35% improvement over old Text component.
Reviewed By: NickGerleman
Differential Revision: D59460871
fbshipit-source-id: c3a41d3aac4cd40e054b669d56295bcb631d8310
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45331
Let's add the a new JSRuntime API to register the thread. This allows Hermes sampling to correctly work in Bridgeless/Activity.
## Changelog:
[General][Added] - Add experimental api to JSRuntimeFactory to initialize runtime on js thread
Reviewed By: RSNara
Differential Revision: D58787655
fbshipit-source-id: 2202271b9ad88cf8ba2145fb4e9e7bfd6e0c09fa
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45329
Thanks to [#45232](https://github.com/facebook/react-native/issues/45232) we found a bug in the interop layer, where we were not passing the BridgeProxy in bridgeless mode to the view managers.
This Change should fix that issue.
## Changelog:
[iOS][Fixed] - Make sure to pass the RCTBridgeProxy to ViewManagers
Reviewed By: dmytrorykun
Differential Revision: D59468292
fbshipit-source-id: 00666be21385a735878eb567c4b8a0986c609c5f
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45328
This assertion is currently not actionable since the stack trace will always be just `mCreateReactContextThread`. Moving this assert is safe, as the only other place we write it is also the UI thread.
Changelog: [Internal]
Reviewed By: robhogan
Differential Revision: D59467576
fbshipit-source-id: c4606672255149a202f99a8f787230e2a23a868a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45321
Changelog: [internal]
This creates a variant of the internal hook in `TextInput` that handles the synchronization of the state between native and JS. The new variant moves everything that's not needed for rendering to refs instead of state.
One of the reasons for this change is that by not setting state in layout effects, we're not forcing passive effects to be flushed synchronously, which can improve perceived performance (as we can start painting before passive effects are executed).
Reviewed By: sammy-SC
Differential Revision: D59400624
fbshipit-source-id: 540c20daf49919fbfabd357a1a057ca126ec6b03
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45315
Changelog: [internal]
This moves some logic from the `TextInput` component to its own hook. It's just a refactor in preparation for a following change were we're going to test replacing this hook with an alternative version that relies less on state (using refs for some things instead).
Reviewed By: sammy-SC
Differential Revision: D59400614
fbshipit-source-id: ea37b8514f89e94be1386774ad70d56389878886
Summary:
This PR removes usage of deprecated `statusBarFrame` method in `RCTPerfMonitor` . Instead `RCTPerfMonitor` now uses `safeAreaInsets` which also fixes issue causing Perf Monitor to appear under corner in landscape mode on e.g. `iPhone 15 Pro`. It also fixes initial position of expanded state which was causing it to render under notch.
Also removed duplicate background color setting
## Changelog:
[IOS] [REMOVED] - Remove usage of deprecated statusBarFrame method
[IOS] [FIXED] - Fix position of RCTPerfMonitor in landscape mode & expanded mode
Pull Request resolved: https://github.com/facebook/react-native/pull/43058
Test Plan: `RNTester` builds and runs successfully, `RCTPerfMonitor` works and displays correctly
Reviewed By: dmytrorykun
Differential Revision: D59116913
Pulled By: cipolleschi
fbshipit-source-id: 0ff61f61b206c530cfb9e471bc2dc33a0a43c833
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45303
`ViewManagersPropertyCache` uses reflection to find all ReactProp but fails when any symbols in the method refer to classes not available in the current build.
Work around this by extracting this helper to a separate private inner class.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D59397865
fbshipit-source-id: e77d3167698e4311e8778ebab28a0c8a0d2666c2
Summary:
To fix [The Memory Leak Issue](https://github.com/facebook/react-native/issues/45080) This change modifies the timing of view creation in the LogModule. The motivation behind this update is to address a potential memory leak issue. Previously, views were being created and held onto, which could lead to references to the Activity being retained even when they were no longer needed. By creating the view only when the show method is called and ensuring it is removed in the hide method, we can prevent these memory leaks and improve the overall memory management and stability of the LogModule.
Fixes https://github.com/facebook/react-native/issues/45080
- Adjusted the timing of view creation to occur when the `show` method is called.
- Ensured that the created view can be removed in the `hide` method.
- This update addresses potential memory leaks by preventing the view from holding a reference to the Activity.
These changes improve memory management and stability within the LogModule.
Modify the timing of view creation in LogModule. The view is now created when the show method is called, and it can be removed in the hide method. This change resolves potential memory leaks caused by the view holding a reference to the Activity.
## Changelog:
[ANDROID] [FIXED] - Fix LogModule to create view when show is called
Pull Request resolved: https://github.com/facebook/react-native/pull/45261
Reviewed By: dmytrorykun
Differential Revision: D59372962
Pulled By: cortinico
fbshipit-source-id: 6693afdb279c7164ff0f68c93f8ca8a54b1c2077
Summary:
In https://github.com/facebook/react-native/issues/44483 `If-None-Match` request failed to get a 304 after a 200 response. This is caused by NSRequest's
cachePolicy which prevents sending a request to server to check 304 state and return directly a 200 response.
## Changelog:
[IOS] [FIXED] - fix: on iOS not getting 304 from `If-None-Match` request
Pull Request resolved: https://github.com/facebook/react-native/pull/45263
Test Plan: repeat request given in https://github.com/facebook/react-native/issues/44483
Reviewed By: cortinico
Differential Revision: D59364609
Pulled By: dmytrorykun
fbshipit-source-id: 2a8b86c526320a1e9c1c58e41aa9c74beeeac2ce
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45287
Fixes https://github.com/facebook/react-native/issues/45277
This fixes an NPE reported in OSS if you do this call in JavaScript:
```
const fr = new FileReader();
fr.readAsText({});
```
Changelog:
[Android] [Fixed] - Fix NPE in FileReaderModule
Reviewed By: dmytrorykun
Differential Revision: D59372620
fbshipit-source-id: ad5073376eaa26852c8277bdbb7d76b1aa480b3c
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45294
Just doing some cleanup here as those exports are scattered around this file.
Changelog:
[Internal] [Changed] - Cleanup exports for PressableExample in RN-Tester
Reviewed By: yungsters
Differential Revision: D59376617
fbshipit-source-id: 0f6f81fca7b5cbcdc05bbb6a1f87d3ad74c20b50
Summary:
This PR restores the virtual destructor for `ShadowNodeWrapper` which was added in https://github.com/facebook/react-native/pull/33500 and unfortunately removed in https://github.com/facebook/react-native/pull/40864.
The virtual destructor here serves as a key function. Without a key function, `obj.hasNativeState<ShadowNodeWrapper>(rt)` **does not** work correctly between shared library boundaries on Android and always returns false.
We need this pretty badly in third-party libraries like react-native-reanimated or react-native-gesture-handler.
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[ANDROID] [FIXED] - Fix dynamic_cast (RTTI) for ShadowNodeWrapper when accessed by third-party libraries again
Pull Request resolved: https://github.com/facebook/react-native/pull/45290
Test Plan: This patch fixes an issue in Reanimated's fabric-example app.
Reviewed By: fabriziocucci
Differential Revision: D59375554
Pulled By: javache
fbshipit-source-id: 09f3eda89a67c26d6dacca3428e08d1b7138d350
Summary:
[`querystring`](https://www.npmjs.com/package/querystring) package is deprecated. In this Pull Request I've replaced usage of `querystring` with `URLSearchParam` what is recommended by Node.js.
It's also causing a warning when installing dependencies inside a React Native app:
```
warning react-native > react-native/community-cli-plugin > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
```
## Changelog:
[INTERNAL] [FIXED] - Replace `querystring` package with `URLSearchParam`
Pull Request resolved: https://github.com/facebook/react-native/pull/45125
Test Plan:
Params should be parsed in the same way and warning shouldn't be presented.
js1 jest xplat/js/tools/metro/packages/metro/src/cli/__tests__/parseKeyValueParamArray-test.js
Reviewed By: cipolleschi
Differential Revision: D58948498
Pulled By: GijsWeterings
fbshipit-source-id: 79b1f7b3feae230d2d3641205c513b98b3fda511
Summary:
Changes `.npmignore` file to only exclude the `ReactAndroid/build` directory instead of all `build` directories under `ReactAndroid` (which included the `ReactAndroid/src/main/java/com/facebook/react/common/build` package). This problem was caused by the newer version of NPM being used.
Closes https://github.com/facebook/react-native/issues/45204
## Changelog:
[ANDROID] [FIXED] - Fixed build from source failing due to a missing file
Pull Request resolved: https://github.com/facebook/react-native/pull/45279
Test Plan:
Run `npm pack` or `npm publish -dry-run`.
Before this change it includes 3774 files in the package and `ReactBuildConfig` isn't included. After this change it includes 3775 files in the package and `ReactBuildConfig` is included.
Reviewed By: javache
Differential Revision: D59371555
Pulled By: cortinico
fbshipit-source-id: f54f1e88e30429d538b9e160e6ce20d994c5d1b8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45269
There's no callers to this property, and we already create a `jsRuntimeFactory` above in DefaultReactHost, which will actually decide which VM to use.
Changelog: [Android][Removed] Unused jsEngineResolutionAlgorithm from ReactHost
Reviewed By: cortinico
Differential Revision: D59333435
fbshipit-source-id: 21be4d138bca64c0cb78de366bf2e247b4f37650
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45053
Add support for most keyword values of mix-blend-mode on Android
Missing compositing operators and global values
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D58752052
fbshipit-source-id: e63e01d45a7e0924f3853f08dff5cec7e2f1ceaf
Jakub Piasecki
Tomek Zawadzki
Samuel Susla
Robert Pasiński
Pieter De Baets
Nick Gerleman
Rubén Norte
Liron Yahdav
Joe Vilches
Benoit Girard
Riccardo Cipolleschi
Nicola Corti
shubhamguptadream11
Kacper Rozniata
Damian Stasik
Deepanshu.shukla
Christoph Purrer
fannnzhang
huzhanbo.luc
Ruslan Lesiutin
Nicolas Gallagher
Vitali Zaidman
szymonrybczak
Alex Hunt
Jorge Cabiedes Acosta