Summary:
*Hi,*
I made a small update to the dependency array in `useLayoutEffect`, changing it from `[native]` to `[native.value]` for better precision. Since JavaScript compares objects by reference, this change can lead to a minor performance improvement. Additionally, as `useLayoutEffect` is render-blocking, I wanted to ensure we optimize its usage as much as possible.
As a micro-optimization and in line with good coding practices, I also changed a `let + if` variable to `const`. While the performance gain is minimal, it contributes to cleaner and more consistent code.
Please feel free to review, and I sincerely apologize if I made any mistakes in the process.
## 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
-->
*[General] [Changed]* – Refined `useLayoutEffect` dependency array from `[native]` to `[native.value]` for improved precision and efficiency in re-renders.
*[General] [Changed]* – Replaced `let` with `const` where applicable for better code standards and micro-optimization.
Pull Request resolved: https://github.com/facebook/react-native/pull/50682
Reviewed By: huntie
Differential Revision: D72979663
Pulled By: yungsters
fbshipit-source-id: 64ac09811b78ca67be903d8cd91da8cd6f0a45fa
Summary:
Implemented ReactLifecycleStateManager.java in Kotlin as part of Kotlin-ifying RN Round 3
## Changelog:
[ANDROID] [CHANGED] - Migrate ReactLifecycleStateManager to Kotlin
Pull Request resolved: https://github.com/facebook/react-native/pull/50685
Test Plan: Run RN-Tester and interacted with Mulitple components(Image, Flatlist, Input ) with both new architecture enabled and disabled
Reviewed By: rshest
Differential Revision: D73003097
Pulled By: cortinico
fbshipit-source-id: 27b90a0b94c17aa42cbb1665ca6fcf06db7cbf96
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50396
Integrates the `yarn build-types` script into our CI workflows.
**Notes**
- Will validate type generation in future PRs as part of the `test-all` workflow (this has been stable (i.e. successfully runs for our codebase) for the last 3 weeks).
- This is not load bearing in production code until D71969602.
Changelog: [Internal]
Reviewed By: cortinico
Differential Revision: D71975705
fbshipit-source-id: a234a05008b5e75976bbd5258948c37fcc1eeb76
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50718
On Windows `path.join` returns path with separators unsupported by resolution mechanism. This change enforces the use of `/` separators in `no-deep-imports` rule tests.
Changelog:
[Internal]
Reviewed By: robhogan
Differential Revision: D73021185
fbshipit-source-id: d4799c01a5aef5b27fad961d774b58627115d213
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50714
This diff changes the category used by LegacyArchitectureLogger soft errors to be SOFT_ASSERTIONS
changelog: [internal] internal
Reviewed By: makovkastar
Differential Revision: D72999455
fbshipit-source-id: b5378fb92b22a3d06dda550192c7eba0db97ddcb
Summary:
Migrated ReactClippingViewGroupHelper.java to Kotlin as part of the React Native Kotlin migration initiative.
This change helps modernize the React Native Android codebase and improve maintainability.
No functional changes were introduced—only a language conversion while preserving the original logic and behavior.
## Changelog:
[ANDROID] [CHANGED] - Migrated ReactClippingViewGroupHelper.java to Kotlin
Pull Request resolved: https://github.com/facebook/react-native/pull/50679
Test Plan:
✅ Ran yarn && yarn android in the root directory and verified RNTester builds successfully.
✅ Opened RNTester on an Android emulator/device and navigated through various screens to ensure the app works as expected.
✅ Specifically tested views with removeClippedSubviews enabled to confirm runtime behavior remains unchanged.
✅ Used [KtFmt](https://github.com/facebook/ktfmt) to format the Kotlin file properly.
Reviewed By: arushikesarwani94
Differential Revision: D72973621
Pulled By: cortinico
fbshipit-source-id: e6f426a0cb7eb583935a560660900b29786df4c3
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50105
Pull Request resolved: https://github.com/facebook/react-native/pull/49543
When using `ReactScrollView` or `ReactHorizontalScrollView` Views with `removeClippedSubviews` keyboard navigation didn't work.
This is because keyboard navigation relies on Android's View hierarchy to find the next focusable element. With `removeClippedSubviews` the next View might've been removed from the hierarchy.
With this change we delegate the job of figuring out the next focusable element to the Shadow Tree, which will always contain layout information of the next element of the ScrollView.
We then prevent the clipping of the topmost parent of the next focusable view to lay out the entire containing element in case we have some necessary context in the parent
Changelog: [Android][Fixed] - Fix keyboard navigation on lists with `removeClippedSubviews` enabled
Reviewed By: joevilches
Differential Revision: D71324219
fbshipit-source-id: b55b7735a30714b2a5e1c9e0ed4ae84ab43f6694
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50404
Add another function to fabric to get the topmost stacking context parent given a root and a child.
This is to be used on focus searching algorithm in the case where the next focusable child is deeper in the hierarchy meaning we need to find the top most parent in the Android hierarchy and lay that out as well before transferring focus.
If we don't lay out the parent as well as the next focusable view:
- The next focusable view might lack context given by the parent
- If the parent is a scrollview and has removeClippedSubviews enabled then laying out the next focusable view will not work
- If the view is deeper in the android hierarchy in some cases it won't be layed out unless the parent is
Changelog: [Internal]
Reviewed By: joevilches
Differential Revision: D72178408
fbshipit-source-id: 7b91ea695e236f3a92f9703bcc9ca943bf0dec24
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50196
Currently when `removeClippedSubviews` is enabled on Android keyboard navigation breaks and we can never focus the elements that are clipped. iOS has a similar issue but not as drastic, it only happens when elements on the FlatList have a lot of margin between them.
This algorithm aims to find the next focusable view and return it to native so that we can prevent the clipping of the view on the view clipping algorithm and hence fix keyboard navigation. For more information see D71324219
Fabric algorithm to find the next focusable view given:
`parentTag`: Top most relevant parent of the focused view
`focusedTag`: Tag of the currently focused view
`direction`: Direction in which focus is moving
Changelog: [Internal]
Reviewed By: joevilches
Differential Revision: D71558965
fbshipit-source-id: 1a13c82d067834337e7f7936860780f467c9a15d
Summary:
Introduce a trait to be able to tell if a ShadowNode is focusable by keyboard. This will be used for focus ordering that delegates the work to the shadow tree when Native platforms don't have enough information to define the next focusable node
Changelog: [Internal]
Reviewed By: joevilches
Differential Revision: D72258544
fbshipit-source-id: dcc2410b408eab5dbefc4512e0680cbe7f18c811
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50638
There were two issues with inset shadows here that I fixed
* If spread was big enough it would "invert" the clear region. [RectF's inset](https://developer.android.com/reference/android/graphics/RectF#inset(float,%20float)) method does not bound to a 0x0 rect, it will instead start making the rect bigger if the inset value is large enough.
* If the clear region was outside the rect the shadow disappeared. This is because [Canvas's drawDoubleRoundRect](https://developer.android.com/reference/android/graphics/Canvas#drawDoubleRoundRect(android.graphics.RectF,%20float[],%20android.graphics.RectF,%20float[],%20android.graphics.Paint)) will fail to draw if the inner rect is not completely inside of the outer.
Changelog: [Android][Fixed] - Fix inset shadow edge cases
Reviewed By: GijsWeterings
Differential Revision: D72833275
fbshipit-source-id: 3f42fb767630319c51a380f8ea28d682df9771a6
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50666
This diff updates the assert message in ReactNativeNewArchitectureFeatureFlags to reflect the behavior required by the assert
changelog: [internal] internal
Reviewed By: mlord93
Differential Revision: D72868428
fbshipit-source-id: 7a43aa9d3b3a2ee60e88cf77d117d97edc955af3
Summary:
Fixes https://github.com/facebook/react-native/issues/45857
The general idea behind this PR is the same for both platforms: dirty all nodes with `MeasurableYogaNode` trait when the layout is constrained with a new `fontSizeMultiplier`. There were a few caveats:
- `ParagraphShadowNode` marks its layout as clean in the constructor in most cases. To prevent that from using a stale measurement I'm using the font scale multiplier stored in `content_` property of the node. That value is then compared with the scale used to create the attributed string kept in the node's state. If those differ, the layout is not cleared.
- On Android, font scale wasn't passed down to the `SurfaceHandler`
- On Android, text measurement relies on cached `DisplayMetrics` which were not updated when the system font scale changed.
- `AndroidTextInputShadowNode` wasn't using `fontSizeMultiplier` at all. I needed to add it in all places where an `AttributedString` is constructed.
## Changelog:
[GENERAL] [FIXED] - Fixed text not updating correctly after changing font scale in settings
Pull Request resolved: https://github.com/facebook/react-native/pull/45978
Test Plan:
So far tested on the following code:
```jsx
function App() {
const [counter,setCounter] = useState(0);
const [text,setText] = useState('TextInput');
const [flag,setFlag] = useState(true);
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{fontSize: 24}}>RN 24 Label Testing {flag ? 'A' : 'B'}</Text>
<TextInput value={text} onChangeText={setText} style={{fontSize: 24, borderWidth: 1}} placeholder="Placeholder" />
<Pressable onPress={() => setCounter(prevState => prevState + 1)} style={{backgroundColor: counter % 2 === 0 ? 'red' : 'blue', width: 200, height: 50}} />
<Pressable onPress={() => setFlag(!flag)} style={{backgroundColor: 'green', width: 200, height: 50}} />
</SafeAreaView>
);
}
```
Reviewed By: NickGerleman
Differential Revision: D71727907
Pulled By: j-piasecki
fbshipit-source-id: 240fb5fa4967a9182bce7e885798b233d1e25aea
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50377
Configures the Hermes Parser to target React 19, which changes components written with Component Syntax to stop generating `forwardRef` calls (because `ref` is now a prop).
Changelog:
[General][Changed] - Configured Hermes Parser to target React 19, resulting in Component Syntax no longer producing `forwardRef` calls.
Reviewed By: javache, SamChou19815
Differential Revision: D72070021
fbshipit-source-id: b891789d4ff1cbcb8eebea3525361ab14e628b51
Summary:
Migrated FrescoBasedReactTextInlineImageShadowNode.java to Kotlin as part of the React Native Kotlin migration initiative.
This change helps modernize the React Native Android codebase and improve maintainability.
No functional changes were introduced—only a language conversion while preserving the original logic and behavior.
## Changelog:
[ANDROID] [CHANGED] - Migrated FrescoBasedReactTextInlineImageShadowNode.java to Kotlin
Pull Request resolved: https://github.com/facebook/react-native/pull/50693
Test Plan:
✅ Ran yarn && yarn android in the root directory and verified RNTester builds successfully.
✅ Opened RNTester on an Android emulator/device and navigated through various screens to ensure the app works as expected.
✅ Specifically tested views with FrescoBasedReactTextInlineImageShadowNode enabled to confirm runtime behavior remains unchanged.
✅ Used [KtFmt](https://github.com/facebook/ktfmt) to format the Kotlin file properly.
Reviewed By: cortinico
Differential Revision: D72948067
Pulled By: rshest
fbshipit-source-id: ed56e6b328804d7b70271b669d101f70d6190d7f
Summary:
On Android, when resource shrinking is enabled, all resources added by Metro may be removed as react-native is accessing resources based on strings rather than references, so AGP can't see its usage.
Example output of `android/app/build/outputs/mapping/release/resources.txt `when `shrinkResources` is enabled.
```
raw/__node_modules_expo_vectoricons_build_vendor_reactnativevectoricons_fonts_materialcommunityicons : reachable=false
drawable/__common_assets_haptics_icon : reachable=false
```
It’s a coincidence that most of the resources are currently working, as many file names begin with strings that already exist in the String Pool. For example, `node_modules...` is flagged as used because 'node' is present in the String Pool, causing it to be whitelisted. However, this does not guarantee that the same will apply to all files - especially in a monorepo setup, where paths are significantly different. For example
* `__node_modules_expo_vectoricons_build_vendor_reactnativevectoricons_fonts_materialcommunityicons`
* `__common_assets_haptics_icon`
To prevent that behavior, metro during assets export should create `keep.xml` listing all resources generated by metro.
https://developer.android.com/build/shrink-code#keep-resources
We have already made a similar change in expo cli: https://github.com/expo/expo/pull/35465
## Changelog:
[ANDROID][ADDED] - Generate keep.xml to prevent resource shrinking
Pull Request resolved: https://github.com/facebook/react-native/pull/50620
Test Plan:
1. Enable resource shrinking in RNTester by adding this to `android.buildTypes.release` to `packages/rn-tester/android/app/build.gradle.kts`
```gradle
isMinifyEnabled = true
isShrinkResources = true
```
2. Use some resources in playground, for example:
```diff
diff --git a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
index 9dbacb99701..9ac9c231f3f 100644
--- a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
+++ b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
@@ -11,16 +11,14 @@
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
import {StyleSheet, View} from 'react-native';
+import {Header} from "react-native/Libraries/NewAppScreen";
function Playground() {
return (
<View style={styles.container}>
- <RNTesterText>
- Edit "RNTesterPlayground.js" to change this file
- </RNTesterText>
+ <Header />
</View>
);
}
```
3. Build app using `hermesRelease` variant
4. See Playground screen
| Before | After |
|---|---|
| <img width="488" alt="Zrzut ekranu 2025-04-10 o 12 17 53" src="https://github.com/user-attachments/assets/24fcaa7b-6ddb-4ba6-9fe5-65c27bcbc931" /> | <img width="488" alt="Zrzut ekranu 2025-04-10 o 12 15 58" src="https://github.com/user-attachments/assets/09a1ce77-be26-4571-a4b8-c466bf19e026" /> |
5. Inspect `packages/rn-tester/android/app/build/outputs/mapping/hermesRelease/resources.txt`
| Before | After |
|---|---|
| `drawable/_reactnative_libraries_newappscreen_components_logo : reachable=false` | `drawable/_reactnative_libraries_newappscreen_components_logo : reachable=true` |
Reviewed By: cortinico
Differential Revision: D72960028
Pulled By: huntie
fbshipit-source-id: df725fa2ea50150cd67687a97986976ffbbb5b40
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50698
Changelog: [internal]
This cleans up the flag to enable paint time reporting for Event Timing API entries, as this reporting fixes a bug and we've verified is stable/performant enough.
Reviewed By: rshest
Differential Revision: D72960337
fbshipit-source-id: 976810382208b9403c01c80324b540570bbc0e42
Summary:
Avoid incorrectly updating caret position
Pull Request resolved: https://github.com/facebook/react-native/issues/50641
The caret position is updated incorrectly when a user is first typing if an zero-length selection is set.
## Changelog:
[IOS] [CHANGED] - Typing into TextInput now will not cause the caret position to update to the beginning when a zero-length selection is set.
Pull Request resolved: https://github.com/facebook/react-native/pull/50680
Test Plan:
Tested with the following code(a simplified version from the code in https://github.com/facebook/react-native/issues/50641)
```js
const [selection, setSelection] = useState({start: -1, end: -1});
const onSelectionChange = (
evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
) => {
const {selection} = evt.nativeEvent;
const {start, end} = selection;
console.log('selection change: ', start, end);
setSelection(selection);
};
return (
<View style={{ position: 'absolute', top: 50, left: 30 }}>
<TextInput
placeholder="test"
selection={selection}
onSelectionChange={onSelectionChange}
/>
</View>
);
```
When using the main branch, the caret position will jump back to the beginning after the first typing.
It works fine after applying this commit.
Reviewed By: fabriziocucci
Differential Revision: D72957245
Pulled By: cipolleschi
fbshipit-source-id: 3586797332b35e86b17f386a35e7d192ff758f7e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50699
Changelog: [internal]
Just changing the template to include emojis in the top level titles to make it easier to scan the doc
Reviewed By: lenaic
Differential Revision: D72961870
fbshipit-source-id: 64c45e7ac769c38af06ea318cdb581a04e230f90
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50656
This is going to convert to Kotlin one of the biggest class we have: ReactTextInputManager
As this class is quite big, I suspect there will be breakages.
https://github.com/search?type=code&q=%22%3A+ReactTextInputManager%22
I will investigate further and adjust the class as necessary.
Changelog:
[Android] [Breaking] - ReactTextInputManager is now in Kotlin
Reviewed By: rshest
Differential Revision: D72859925
fbshipit-source-id: 140d1a48ef891f1e6a401e3be59a11d3f9e24078
Summary:
Static code analysis detected obsolete SDK version checks.
Since [the minimum supported SDK version is API 24](https://github.com/react-native-community/discussions-and-proposals/discussions/802), these checks for API 21 are no longer necessary and can be safely removed.
## Changelog:
[INTERNAL] - Remove obsolete TargetApi annotations for LOLLIPOP (API 21)
Pull Request resolved: https://github.com/facebook/react-native/pull/50686
Test Plan:
```sh
yarn test-android
yarn android
```
CI should be green.
Reviewed By: cortinico
Differential Revision: D72948073
Pulled By: rshest
fbshipit-source-id: 1dd1415364d19f115771de3643cdc023a247d851
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50645
While we were refactoring the generation of the podspec, we made a mistake and we started generating the ReactCodegen.podspec for both libraries and apps.
This must be generated only for apps.
## Changelog:
[iOS][Fixed] - Generate `ReactCodegen.podspec` only for apps.
Reviewed By: fabriziocucci
Differential Revision: D72854074
fbshipit-source-id: 5a1d1120e576d4fe4cf8f733793f5a2619278c2b
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50542
After TS types generation is completed, react native deep imports will be deprecated. This rule produces warnings to let users know to use root imports instead. For more information about why this rule was added, please check [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894).
Changelog:
[General][Added] - Added no-deep-imports rule to eslint-plugin-react-native.
Reviewed By: robhogan
Differential Revision: D71398004
fbshipit-source-id: 69104f69b1b1c59b5b0f115dcdd708a46d8d614d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50657
The ReactTextInputManager file is huge and really hard to migrate to Kotlin.
Here I'm extracting 4 private inner classes to separate files and converting them to Kotlin.
This will make reviewing the Kotlin migration of ReactTextInputManager a bit easier.
Changelog:
[Internal] [Changed] -
Reviewed By: rshest
Differential Revision: D72858396
fbshipit-source-id: 1fcca1b8421c810aa4bf9fdca7656f4e805565d8
Sanjaiyan Parthipan
Mateo Guzmán
Rubén Norte
Fabrizio Cucci
rohitverma-d11
Alex Hunt
Jakub Piasecki
poonamjain96
Ruslan Shestopalyuk
Dawid Małecki
David Vacca
Nick Gerleman
priyanka.raghuvanshi
Jorge Cabiedes Acosta
Joe Vilches
Omar Bafagih
Alan Lee
Jakub Piasecki
Tim Yung
Andrew Datsenko
Nitin Shukla
Jakub Grzywacz
Wang Chuan
Nicola Corti
Riccardo Cipolleschi