Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46117
Currently in large cursive blocks like layout effect we can't tell what the slow leaf function is. With this fixed I'm able to root cause more complex issues in layout effects.
Reviewed By: NickGerleman
Differential Revision: D61486415
fbshipit-source-id: 5a4043b35eedcabcbea86953aac2173f66d7257b
Summary:
Fixes these issues:
- https://github.com/facebook/react-native/issues/46070
- https://github.com/facebook/react-native/issues/39362
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[ANDROID] [FIXED] - Fixed black strip coming when hiding status bar
`setHidden` function is responsible for hiding status bar
https://github.com/facebook/react-native/blob/25d6a152cc720e0d5f860dab228ac2e43321d9e4/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.kt#L122
**What real issue is?** **_For android devices with camera area on top a black strip is coming after hidding status bar._**
Previous Implementation:
```
override fun setHidden(hidden: Boolean) {
val activity = currentActivity
if (activity == null) {
Log.w(
ReactConstants.TAG,
"StatusBarModule: Ignored status bar change, current activity is null.")
return
}
UiThreadUtil.runOnUiThread(
Runnable {
val window = activity.window ?: return@Runnable
if (hidden) {
window.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)
window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN)
} else {
window.addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN)
window.clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)
}
})
}
```
It seems that FLAG_FULLSCREEN flag are not enough to draw content in camera area.
**Solution:**
In order to tackle this, android exposes 2 flags:
- [layoutInDisplayCutOutMode](https://developer.android.com/reference/android/view/WindowManager.LayoutParams#layoutInDisplayCutoutMode): The window is always allowed to extend into the [DisplayCutout](https://developer.android.com/reference/android/view/DisplayCutout) areas on the short edges of the screen. [Android 9.0 and above]
- [setDecorFitsSystemWindows](https://developer.android.com/reference/android/view/Window#setDecorFitsSystemWindows(boolean)): allows content to be able to extend into the cutout area. [Android 10.0 and above]
By adding this flag we are now able to hide status bar properly.
```
override fun setHidden(hidden: Boolean) {
val activity = currentActivity
if (activity == null) {
FLog.w(
ReactConstants.TAG,
"StatusBarModule: Ignored status bar change, current activity is null.")
return
}
UiThreadUtil.runOnUiThread(
Runnable {
val window = activity.window ?: return@Runnable
if (hidden) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
// Ensure the content extends into the cutout area
window.attributes.layoutInDisplayCutoutMode =
WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
window.setDecorFitsSystemWindows(false)
}
window.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)
window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN)
} else {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
window.attributes.layoutInDisplayCutoutMode =
WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
window.setDecorFitsSystemWindows(true)
}
window.addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN)
window.clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)
}
})
}
```
**_Note: This will work above Android 11 and above_**
Pull Request resolved: https://github.com/facebook/react-native/pull/46086
Test Plan:
- Tested by author of this issue
- Sharing here the videos of before and after fix
Device Detail:
Oneplus9 5G OS 11
**Before fix:**
https://github.com/user-attachments/assets/589098ff-a3fa-4962-a15b-ceacbfd03d2d
**After fix:**
https://github.com/user-attachments/assets/a87dd8e4-3624-4e09-99da-a14f9e19fcc6
Reviewed By: cipolleschi
Differential Revision: D61509889
Pulled By: alanleedev
fbshipit-source-id: 733962a3bed2efba71588a4d2fdf7c9c386bc3b4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46101
Remove overriding thread priority for RN Main Thread as it is not possible to update main thread.
changelog: [internal] internal
Reviewed By: javache
Differential Revision: D61448536
fbshipit-source-id: 44ec28a875e3208df042ac11bdd17a7287836ebb
Summary:
Our app is using the react-native v0.74.2 with the `react-navigation` lib for screen navigation, we're facing an issue in the built iOS app that when we try to navigate to a new app screen with the `react-navigation`'s `reset` or `replace` method and meanwhile there's a react native modal displaying, then the iOS app always crashes.
I saw there is already a relevant [PR](https://github.com/facebook/react-native/pull/38491) and discussion targeting this issue, but I still think it would be better if this kind of crash can be suppressed in the framework level, currently I guess it's common in the iOS apps based on react native.
## Changelog:
[IOS] [FIXED] - app crash happening when navigate to a new app screen with a displaying modal
Pull Request resolved: https://github.com/facebook/react-native/pull/45313
Test Plan: More issue details and the reproduction steps can be found in this [PR](https://github.com/facebook/react-native/pull/38491) :)
Reviewed By: christophpurrer
Differential Revision: D61537167
Pulled By: cipolleschi
fbshipit-source-id: 3c0474d794b4216ebc073dd6558d2b6ae27492d2
Summary:
Setting a variable called `REACTNATIVE_MERGED_SO` so libraries/apps can selectively decide to depend on either libreactnative.so or link against a old prefab target (this is needed for React Native 0.76 on).
## Changelog:
[INTERNAL] - Set REACTNATIVE_MERGED_SO for React Native 0.76
Pull Request resolved: https://github.com/facebook/react-native/pull/46114
Test Plan: CI
Reviewed By: hezi
Differential Revision: D61541372
Pulled By: cortinico
fbshipit-source-id: b16fa29ce6dd1670b452848e37cfcd7be15861e6
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46068
This change adds some internal E2E tests to verify that the text is rendered properly on top of a solid background color when borderWidth is set
## Changelog
[Internal] - Add E2E tests
Reviewed By: cortinico
Differential Revision: D61392253
fbshipit-source-id: 76e11821eba96ac75b055c5fe94365197c0f9be2
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46081
This change fixes an issue that has been reported by OSS where a Text with both background color and borderWidth is not rendered properly.
The reason is that `RCTParagraphComponentView` uses the `drawRect` method which draws the text in the main view layer, while the parent `RCTViewComponentView` can apply an extraLayer on top of the base layer, drawing on top of the text.
This change moves the drawing of the text to an auxiliary view, `RCTParagraphTextView`, that is set as contentView of the `RCTParagraphView`. In this way, the text is drawn in a different view and can't be covered by the `_borderLayer`
## Changelog:
[Internal] - Introduce a RCTParagraphTextView to draw the text
Reviewed By: joevilches
Differential Revision: D61431369
fbshipit-source-id: 05467167186411fe42312f2ed956f5b5336de019
Summary:
This diff adds an example in RNTester to verify that we can draw text on top of a colored background and non uniform border radius.
As you can see from the test plan, the current code works well when:
* There is only the background color
* There is a background color and uniform cornerRadius
* There are non uniform border radius but the background is transparent.
The current code **does not** work when:
* there is a background and non-uniform border radius
* there is a background, uniform border radius and borderwidth
The reason why this happens is because:
* `RCTParagraphComponentView` draws the text in the View's main layer in the `drawRect` method
* `RCTViewComponentView` has a method `invalidateLayer` that, when there are non-uniform border radii o there is a borderWidth, it creates an extra `CALayer` with an image as content and that layer is put on top of the base layer, covering the text.
## Changelog
[Internal] - Add example to RNTester
Reviewed By: cortinico
Differential Revision: D61389317
fbshipit-source-id: 3e0a9e6c611190f90198a1b0b5855431b9f6ed12
Summary:
bypass-github-export-checks
Covers the case of an immediately-resolved breakpoint in `JsiIntegrationTest`, complementing the existing `ResolveBreakpointAfterReload` case.
Changelog: [Internal]
Reviewed By: robhogan
Differential Revision: D61468055
fbshipit-source-id: 0f68656a2558166f1302163d14722c17c590044b
Summary:
- Color stops needs to follow [fix up spec](https://drafts.csswg.org/css-images-4/#color-stop-fixup)
- Adds multiple stops syntax support. e.g. linear-gradient(red 30% 50%, green).
- Rename `position` to `positions` in object style API. Optional string array here makes more sense. We'll add number array support once `px` support is added. Will do it as a follow up to this PR.
TODOs: transition hint syntax support `linear-gradient(red, 50%, green)` (Done locally, dependent on this PR). `px` support.
## Changelog:
[GENERAL] [FIXED] - Linear gradient color stop spec.
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/45969
Test Plan: - Added testcases in processBackgroundImage-test.js
Reviewed By: javache
Differential Revision: D61309203
Pulled By: NickGerleman
fbshipit-source-id: 884052c6841320048933361f38e6478ff4192736
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45965
X-link: https://github.com/facebook/yoga/pull/1687
We are seeing some crashes that are hard to wrap our head around. Lets add more logs. I chose these values based on what could make the height/width undefined from looking at the code. We might need more but this should give us some more direction.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D61054392
fbshipit-source-id: 654ff96f94aa89605a603e2e36335bb48b61f4a2
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46006
Adding some extra examples for mix-blend-mode
And added E2E tests for each mix-blend-mode example
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D60605636
fbshipit-source-id: 553f3a2c3b971c918530bdee5a73108c22bd936e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46097
I've noticed we still have some tests here and there that were not migrated to AssertJ. This finishes them all.
Changelog:
[Internal] [Changed] - Finalize AssertJ migration
Reviewed By: javache
Differential Revision: D61473682
fbshipit-source-id: 3d51bfeb0e5ba3fd8cd4f3667dc88de3d88a3dbc
Summary:
## Summary
There are old references to the react-native/template. This code has
moved to react-native-community/template.
Changelog: [Internal]
Pull Request resolved: https://github.com/facebook/react-native/pull/46082
Test Plan:
CI
closesfacebook/metro#1324
Reviewed By: cipolleschi
Differential Revision: D61472439
Pulled By: blakef
fbshipit-source-id: fc40145c03002a7c3117b72d07981a96aa3d8760
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46074
This brings over the changes made to OutsetBoxShadowDrawable. Namely
1. Removing reliance on CSSBackgroundDrawable for drawing paths
2. Using BlurMaskFilter instead of RenderEffect
3. Removing RenderNode usage
This should make the implementation, more reliable less memory intensive for large boxes, and compatible down to Android API 29. I changed previous gating to allow outset shadows for 28+, and inset for 29+.
Changelog:
[Android][Changed] - Revamp InsetBoxShadowDrawable
Reviewed By: joevilches
Differential Revision: D61348615
fbshipit-source-id: 97b63b5dce65224ca54b76c5318c219973fc09fa
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46055
Changelog: [Android][Breaking]
BaseReactPackage is a 1:1 replacement for the deprecated TurboReactPackage. TurboReactPackage has been deprecated since 0.74. let's move the codebase to the recommended standard.
Reviewed By: cortinico
Differential Revision: D61329022
fbshipit-source-id: cef69e37bb2be7f6dccbab70d0996c33a8abf091
Summary:
## Summary
Flow will eventually remove the specific `React.Element` type. For most
of the code, it can be replaced with `React.MixedElement` or
`React.Node`.
When specific react elements are required, it needs to be replaced with
either `React$Element` which will trigger a `internal-type` lint error
that can be disabled project-wide, or use
`ExactReactElement_DEPRECATED`.
Fortunately in this case, this one can be replaced with just
`React.MixedElement`.
## How did you test this change?
`flow`
DiffTrain build for commit https://github.com/facebook/react/commit/85fb95cdffdd95f2f908ee71974cae06b1c866e1.
bypass-github-export-checks
Reviewed By: poteto
Differential Revision: D61397212
Pulled By: SamChou19815
fbshipit-source-id: c0aa5a4ed3922f88b7e557738f76f872c02a9d07
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46059
This merges all the remaining dynamic libraries into libreactnative.so.
Sadly I couldn't split this in smaller diffs as all the libraries are connected with each other.
I also had to introduce 2 other SOs: `libhermestooling.so` and `libjsctooling.so` which contains
all the necessary libs used when loading either JSC or Hermes. They need to be isolated
as RNGP will remove those libraries based on the library the user decides to pick.
Changelog:
[Android] [Breaking] - Merge all the remaining .so libraries into libreactnative.so
Reviewed By: hezi
Differential Revision: D61376496
fbshipit-source-id: ab9e725b7acbebdfd8fa3ff36ad34d080044bf0e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46057
We have a bunch of prefab targets which are no longer necessary. I'm removing them all in this first round of cleanup
Changelog:
[Android] [Breaking] - Remove several unnecessary android prefab targets. Use ReactAndroid::reactnative instead
Reviewed By: cipolleschi
Differential Revision: D61376497
fbshipit-source-id: e2e3cb38b1db712890f8bd58abadbdcb5cfaeec7
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46010
X-link: https://github.com/facebook/hermes/pull/1474
Changelog:
[General][Added]: support for rendering Error object previews in Chrome DevTools console
On web, an array of Error objects have previews. This diff brings the parity to RN DevTools
Reviewed By: huntie
Differential Revision: D61243518
fbshipit-source-id: d9c6af4b44cef44cb63c4462eee649a8e498a429
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45883
Isolate property lets us easily define when a <View> should set a stacking context.
This is particularly useful when used with `mix-blend-mode`
Changelog: [Internal]
Reviewed By: christophpurrer, NickGerleman
Differential Revision: D60604683
fbshipit-source-id: 449079abe45ae57e98315bdf27b54ec5cf9d6fdc
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45867
Before mix-blend-mode was blending with everything in the background, now we make it blend with just stacking context parent as spec by doing off-screen rendering.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D60597403
fbshipit-source-id: 3af0c1266fde4ca32846785879d616316349369c
Summary:
Referring to the [iOS Large Content Viewer](https://developer.apple.com/videos/play/wwdc2019/261/):
iOS Tab Bars can't grow with dynamic text, but the Large Content Viewer helps them to be seen by people with low vision.
Currently on React Native we don't expose the properties that can help implementing iOS [UILargeContentViewerItem](https://developer.apple.com/documentation/uikit/uilargecontentvieweritem) protocol.
The goal of this PR is to expose the necessary props.
In this PR, I'm exposing 2 props:
- `accessibilityShowsLargeContentViewer`: to enable the large content viewer
- `accessibilityLargeContentTitle`: to define the large content viewer title
I plan to use this to open a PR on react-navigation so that bottom tabbars can implement largeContentViewer.
Should fix https://github.com/facebook/react-native/issues/30892
## Changelog:
[IOS] [ADDED] - Support LargeContentViewer on iOS for better accessibility
Pull Request resolved: https://github.com/facebook/react-native/pull/45903
Test Plan: <img width="300" src="https://github.com/user-attachments/assets/d8f1dc46-66e7-4945-bc3b-f1d29044441b" />
Reviewed By: cipolleschi
Differential Revision: D61148361
Pulled By: joevilches
fbshipit-source-id: 86dd92f4f79534a58e6e015febdaf217ea291eb4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45985
As title.
We can now create ellipses when using percentages. The algorithm for this is still flawed and to get it to be a 1:1 to web it will probably require a re-write of some of the logic but this should get us closer for now.
Some examples:
1. Border thinning on large single corner radii (100%)
{F1798145800}
2. Thinning gets worse when having irregular border colors (100%)
{F1798148002}
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D61025927
fbshipit-source-id: 218d44af014bc8351c329ff1bca82658aebac38c
generatedunixname89002005232357
Benoit Girard
Alan Lee
shubhamguptadream11
David Vacca
zhongwuzw
Zhi Zhou
Ingrid Wang
Nicola Corti
Blake Friedman
Riccardo Cipolleschi
Moti Zilberman
Raman Gupta
Phillip Pan
Nishan
Joe Vilches
Jorge Cabiedes Acosta
Christoph Purrer
Sam Zhou
Nick Gerleman
SamChou19815 (Meta Employee)
Edmond Chui
bacarybruno