Summary:
### Problem
Setting the `tintColor` prop in ActionSheetIOS also changes the tint of disabled entries. This could make them visually indistinguishable from enabled items. The degree to which they are indistinguishable depends on the tint color.
### Solution
This new prop `disabledButtonTintColor` allows customization of disabled items' tint color.
Related PR: https://github.com/facebook/react-native/pull/31972
## Changelog:
[IOS] [ADDED] - added `disabledButtonTintColor` prop to ActionSheetIOS
Pull Request resolved: https://github.com/facebook/react-native/pull/46883
Test Plan:
Tested in RNTester project.
<table>
<tr>
<td align="center">
<strong>Before</strong>
</td>
<td align="center">
<strong>After</strong>
</td>
</tr>
<tr>
<td>
<img src="https://github.com/user-attachments/assets/5ab251d9-3128-45e0-bb1f-907376422df0" alt="Screenshot Before" width="300"/>
</td>
<td>
<img src="https://github.com/user-attachments/assets/96f76a08-bb8d-497a-9c89-dca0e0bdbcbb" alt="Screenshot After" width="300"/>
</td>
</tr>
<tr>
<td align="center">
<strong>Before</strong>
</td>
<td align="center">
<strong>After</strong>
</td>
</tr>
</table>
Reviewed By: lunaleaps
Differential Revision: D65757069
Pulled By: cipolleschi
fbshipit-source-id: 1f51ed6927bfb4fe4e21018c541303dff44b2217
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47658
Changelog: [internal]
AppRegistry logs are showing up again in Fantom because we changed the order and now they're not necessarily showing up last.
This fixes that by filtering them out in any position.
Reviewed By: sammy-SC
Differential Revision: D66094274
fbshipit-source-id: bd37394252ee6309f7093567f9a2b73b641938ce
Summary:
in `prefetchImageWithMetadata`'s implementation in ObjC, the method's `queryRootName` is treated as being nullable. The image spec for it in JS (and the Codegened ObjC header that gets built on top of it) treat the field as not nullable. This change makes the field nullable in the spec to match up what we have in the implementation.
I also noticed that the method is not defined in the [Image props](https://reactnative.dev/docs/image) on the RN website, so perhaps we should add this there as well.
bypass-github-export-checks
## Changelog:
[IOS] [CHANGED] - make `prefetchImageWithMetadata`'s `queryRootName` nullable in the spec
Pull Request resolved: https://github.com/facebook/react-native/pull/47532
Test Plan:
yarn test:
<img width="1576" alt="Screenshot 2024-11-09 at 00 36 30" src="https://github.com/user-attachments/assets/4162ff79-1388-4f6f-9576-256fd9011fcf">
It has no iOS specific tests, so nothing to run on that side
Reviewed By: javache
Differential Revision: D65761208
Pulled By: cipolleschi
fbshipit-source-id: d050950486e9f804b65dab047d93761a610a71e7
Summary:
Currently in iOS, when focusing the multiline text input, the cursor is not automatically scrolled into view if it is out of view. This PR adds the small util to scroll the cursor into view when the text input focuses. This doesn't happen in Android due to [this](https://github.com/facebook/react-native/blob/defb0bd137711d3e76514d9202005a221a345871/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L360)
Original issue: https://github.com/Expensify/App/issues/48122
Original proposal: https://github.com/Expensify/App/issues/48122#issuecomment-2320769418
## 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
-->
[IOS] [ADDED] - Scroll the cursor into view when text input is focused
Pull Request resolved: https://github.com/facebook/react-native/pull/46411
Test Plan:
Code to reproduce in rn-tester
```
const TextInputWithFocusButton = () => {
const inputToFocusRef = React.useRef<React.ElementRef<typeof TextInput> | null>(null);
return (
<View>
<ExampleTextInput
ref={inputToFocusRef}
placeholder="height increases with content"
defaultValue="React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native."
multiline={true}
enablesReturnKeyAutomatically={true}
returnKeyType="go"
style={[styles.multiline, styles.multilineExpandable]}
/>
<Button title="Focus" onPress={() => {
inputToFocusRef.current?.focus();
}} />
</View>
);
};
```
Steps:
- Move the cursor of the input to end of the input text
- Scroll up the input
- Blur the input
- Click on `Focus` button to re-focus the input
Note that before this fix, the cursor is not scrolled into view
- In iOS
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>
https://github.com/user-attachments/assets/de589cbf-158c-4e28-81d6-8412bf05ab23
</td>
<td>
https://github.com/user-attachments/assets/81c571f9-653b-49a5-9ecb-6eeaa2c54ec7
</td>
</tr>
</table>
Reviewed By: sammy-SC
Differential Revision: D62847985
Pulled By: cipolleschi
fbshipit-source-id: c0367a7fc0a7a16b30c4538e59f42d971d959357
Summary:
This pull request addresses a CMake configuration issue where an invalid escape character in file paths caused the build process to fail. Specifically, it resolves the issue in the React Native CMake configuration file where the path separator was incorrectly handled, leading to an error in the build system.
the issue is in [This Issue](https://github.com/expo/expo/issues/32955) and [This](https://github.com/expo/expo/issues/32957)
## 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
-->
[INTERNAL] [FIXED] - Corrected invalid escape character in CMake path handling
Pull Request resolved: https://github.com/facebook/react-native/pull/47641
Test Plan:
To test the changes, I performed the following steps:
1. Cloned the repository and checked out the `fix-cmake-invalid-escape-character` branch.
2. Ran the CMake build on a Windows environment where the issue was previously occurring.
3. Verified that the build process completed successfully without the "invalid character escape" error.
4. Ensured that the path handling now works correctly in CMake on Windows platforms.
Reviewed By: rshest
Differential Revision: D66073896
Pulled By: cipolleschi
fbshipit-source-id: bd2a71bb00ce5c5509ed403842c995c32f58f91d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47646
changelog: [internal]
In order to control scheduling of tests, test setup must be separated from test running. This is because of how internal scheduling of React Native is restricted until bundle is loaded via BufferedRuntimeExecutor. This is the reason for executing tests by calling global function `$$RunTests$$`. This is not a pretty solution but it is hidden within testing infrastructure and users of our test infra are not exposed to this.
There is a new method exposed to JavaScript: flushMessageQueue. This will flush everything that is inside of message queue. This is the queue where tasks are queued whenever RuntimeScheduler enqueues something by calling `runtimeExecutor_`.
Reviewed By: christophpurrer
Differential Revision: D65951894
fbshipit-source-id: 2e8e0c10fbeb998f4a51ee6d01ef229eb5f70448
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47604
## Changelog:
[iOS] [Fixed] - Fixed use of view commands from layout effects
Mounting of views is delayed by runtime scheduler to allow React to run layout effects. Execution of view commands must by queued together with mounting of views, otherwise it might be executed before views are mounted. When this happens, view commands are ignored.
So before, if view command was executed from layout effect (or ref function), it would get dispatched to the UI thread as quickly as possible. But mounting of views would be delayed. To fix this, both mounting of views and view commands are put on the same queue inside of RuntimeScheduler.
## What about Android?
Android employs a [retry mechanism](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/MountItemDispatcher.java#L211) that was needed for react tag based view commands. In paper, one could send a view command to a react tag which was completely disconnected from whether a view exists or not.
iOS was built with ref commands in mind, so it doesn't have this mechanism.
Fixes: https://github.com/facebook/react-native/issues/47576
Reviewed By: javache, cipolleschi
Differential Revision: D65909191
fbshipit-source-id: 9d2a444879bee62a7b8b7d31edde450e18339b89
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47636
We're cleaning up key spreads across WWW/Fbsource. Flow's `ban_spread_key_props` option allows us to fix existing spreads and prevent new ones from being added in code covered by Flow.
Here we fix spreads within xplat/js.
Also based on a unit test keeping config in sync, I've added the option to metro and RN OSS as well.
Changelog: [Internal]
Reviewed By: SamChou19815
Differential Revision: D64427942
fbshipit-source-id: db8f4aa428ce1994304b5d814b9d241d26e8d522
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47638
This diff exposes exceptionHandler as a parameter of DefaultReactHost, this is necessary becuase apps using getDefaultReactHost are not able to set an exceptionHandler
We need to revisit this API as a follow up
changelog: [Android][Added] Add exceptionHandler as a parameter of DefaultReactHost.getDefaultReactHost() method
Reviewed By: alanleedev
Differential Revision: D66011047
fbshipit-source-id: 3f36aa0d064a0b1b47e9f71df55bbe466950048a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47605
changelog: [internal]
use a pointer to RuntimeScheduler instead of getting a reference to it from context container each time.
Reviewed By: javache, cipolleschi
Differential Revision: D65909100
fbshipit-source-id: c53c9b573777803f7f3077656af1dae0db7eee88
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47557
Changelog: [internal]
Not published as a bugfix because this API isn't enabled in OSS yet.
Reviewed By: sammy-SC
Differential Revision: D65769326
fbshipit-source-id: 165d58304d8214c583fbc162d8888095e9f068aa
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47612
Changelog: [internal]
Just using babel-register so we can use Flow types in the code for the RN integration tests runner.
Reviewed By: sammy-SC
Differential Revision: D65948801
fbshipit-source-id: 6c54b0463fe4b71c818ff1c4faa973cc8b13b5d2
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47615
Changelog: [internal]
Fixes `.not` not being applied in some cases, and no logging the "not" label in case of error, and `.toBe` being flipped.
Reviewed By: javache
Differential Revision: D65952221
fbshipit-source-id: 030c0597b661d34e6324d69e5676375150a74f2e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47624
Changelog:
[iOS][Fixed] - fix `r` & `d` not working from Metro sometimes
While investigating these bugs, I've come across some cases where `r` (Reload) & `d` (Open Dev Menu) not working in Metro.
* T206141946 / [WP: Reconnecting dev tools does not work after restarting the app](https://fb.workplace.com/groups/rn.debugger.feedback/posts/1107620434125533)
* T206754760 / [WP: Can't launch DevTools from Metro sometimes](https://fb.workplace.com/groups/rn.debugger.feedback/posts/1112235073664069/)
This is because when we
1. Start app without Metro
1. Start Metro
1. Reload from Dev Menu (rage shake)
`RCTPackagerConnection` did not get notified about the change in bundle URL. It'd stay "listening" to the commands from the local bundle instead of Metro
.
Reviewed By: robhogan
Differential Revision: D65973309
fbshipit-source-id: a67a58b405bb78dfe56b814f2ec0bbee9e530e46
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47596
Improves the Flow type of `usePressability` so that if the `config` argument is non-nullable, the return value is non-nullable. This helps reduce unnecessary null checks.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D65908791
fbshipit-source-id: 77de4391d8141d698a5689e617b692b337d01ae5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47588
This is unnecessary - we can pass the params directly instead of first populating them in a Rect.
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D65843834
fbshipit-source-id: 92bb3faa622bba81792fe92e357bc1667894d4ef
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47595
Enables the `useInsertionEffectsForAnimations` feature flag by default. This changes `useAnimatedProps` to enqueue updates to the `AnimatedNode` graph in `useInsertionEffect` instead of `useLayoutEffect`.
The main motivation for `useInsertionEffect` is to avoid unmounting `AnimatedNode` graphs when an `Activity` subtree becomes hidden.
Both `useInsertionEffect` and `useLayoutEffect` occur during the commit phase. Although they occur at different moments in the commit phase, the different is difficult to observe and unlikely to impact product code.
One observable impact is that with `useInsertionEffect`, animations can now be started from layout effects.
Changelog:
[General][Changed] - The `AnimatedNode` graph will not occur during the insertion effect phase, which means animations can now be reliably started during layout effects.
Reviewed By: mdvacca
Differential Revision: D65906157
fbshipit-source-id: d09b2f1b76079eecafbed8c6f5d8ee4695a1f81c
Summary:
This PR adds support for negative values in enums.
Currently when we try to use an enum with negative value:
```ts
enum MyEnum {
ZERO = 0,
POSITIVE = 1,
NEGATIVE = -1,
}
export interface Spec extends TurboModule {
useArg(arg: MyEnum): void;
}
export default TurboModuleRegistry.get<Spec>('Foo');
```
It will fail:
```
Enum values can not be mixed. They all must be either blank, number, or string values.
```
This is because negative values are parsed as `UnaryExpressions` which have `-` operator in front and value as argument.
With the new approach codegen properly generates enums with negative values.
## Changelog:
[GENERAL] [ADDED] - Codegen: Support negative values in enums
Pull Request resolved: https://github.com/facebook/react-native/pull/47452
Test Plan: I've added tests to see if everything is working properly
Reviewed By: vzaidman
Differential Revision: D65887888
Pulled By: elicwhite
fbshipit-source-id: edb25f663dc58afa68c69cb84a47cfc67fc1f7e7
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47577
Changelog: [Android][Fixed] ensure setSelection in onAttachedToWindow is within text range
Reviewed By: javache
Differential Revision: D65824906
fbshipit-source-id: 3dc7d27bf4f9a10762f11fa4a0bcae8af13c7db7
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47585
We have two classes named ReactFontManager and during the Kotlin migration this got mixed up.
Changelog: [Android][Fixed] Fixed crash in legacy ReactFontManager
Reviewed By: fabriziocucci
Differential Revision: D65877606
fbshipit-source-id: d9dc4f29045ad377adb216216334af5501c5546e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47567
Changelog: [Android][Changed] Invocations to JS will now invoke their callbacks immediately if the instance is ready. Surface starts will not wait for the main thread to become available to dispatch the work in JS.
Reviewed By: rshest
Differential Revision: D65661888
fbshipit-source-id: c67802bd56fac6bc6c145b96d823274e2b97de69
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47566
Changelog: [Android][Changed] TurboModules marked as requiring eager init will now be constructed on the mqt_native thread to increase concurrency in React Native init.
Reviewed By: rshest
Differential Revision: D65661887
fbshipit-source-id: c1863ea44771de5caedc2968a325abcc7022c792
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47579
BridgeReactContext is public only for testing. I'm annotating it with VisibileForTesting to make it explicit
changelog: [internal] internal
Reviewed By: javache
Differential Revision: D65705093
fbshipit-source-id: d4d7c4195926e2d0397e805b4c49b0710a82a7eb
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47565
Changelog: [internal]
We unified the feature flags for the event loop in https://github.com/facebook/react-native/pull/47084, but we left the legacy flags defined for temporary backwards compatibility.
We don't need that anymore, so we can clean them up.
Reviewed By: fabriziocucci
Differential Revision: D65606068
fbshipit-source-id: 403c278cef2afc8eddf07592d88cadc58765f660
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
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47520
Right now, when a 3p library needs to register a component in the component system, we have to crawl the library to try and get the mappng, best effort.
With this approach, we are enriching the `codegenConfig` property to allow library developers to define the mapping themselves.
For example:
```json
//...
"codegenConfig": {
//..
"ios": {
"componentProvider": {
"RNTMyNativeView": "RNTMyNativeViewComponentView"
}
}
},
```
means that the JS component `RNTMyNativeView` will be mapped to the `RNTMyNativeViewComponentView` class.
This also work for local apps, and it warns the users about what libraries are using the deprecated approach, so they can open an issue or a PR to those libraries.
## Changelog:
[iOS][Added] - Allow 3p developers to specify the association between components and classes in Fabric
Reviewed By: dmytrorykun
Differential Revision: D65666061
fbshipit-source-id: 692e753635873ff9260e131d2d18ed226b2378c2
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47518
This change reintroduce the generation of the `RCTThirdPartyComponentProvider` but in the right place and with the right patterns.
1. We are generating it in the user space, not in the node_modules (fixes the circular dependency)
2. We are not using weak function signature that have to be implicitly linked to some symbols found during compilation
The change needs to crawl the folder to retrieve the information it needs. We need to implement it this way not to be breaking with respect of the current implementation.
The assumption is that components have a function in their `.mm` file with this shape:
```objc
Class<RCTComponentViewProtocol> <componentName>Cls(void)
{
return <ComponentViewClass>.class;
}
```
I verified on GH that all the libraries out there follow this pattern.
A better approach will let library owner to specify the association of `componentName, componentClass` in the `codegenConfig`.
We will implement that as the next step and we will support both for some versions for backward compatibility.
## Changelog
[iOS][Changed] - Change how components automatically register
Reviewed By: dmytrorykun
Differential Revision: D65614347
fbshipit-source-id: a378b8bc31c1ab3d49552f2f6a4c86c3b578746b
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47517
The `RCTThirdPartyLibraryComponentProvider` has been introduced to automate the component registration of third party libraries in the apps. However, it has some serious flaws:
* It is generated in the React/Fabric folder, which means that it is generated in node_modules
* It is generated when the user installs the components in the app, which means that we can't prebuild and redistribute React Native as a binary
* it does not work with Frameworks and dynamic linking: in this scenarion, Fabric must build in isolation and if there are third party libraries involved, the lookup of the `xxxCls` function will fail
This change removes the generation of the `RCTThirdPartyLibraryComponentProvider`. In the next diffs we will implement a different mechanism to register components
## Changelog
[iOS][Changed] - Stop generating the RCTThirdPartyLibraryComponentProvider
Reviewed By: dmytrorykun
Differential Revision: D65601939
fbshipit-source-id: 9cc8c46102827d124b93b8aa6705b5e6014695c1
Summary:
Resolve warning on ios build:
```
.../ios/Pods/Headers/Public/React-Core/React/RCTAppearance.h:16:60 A function declaration without a prototype is deprecated in all versions of C
```
## 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
-->
[IOS] [FIXED] - Resolve deprecated function prototype warning in RCTAppearance.h
Pull Request resolved: https://github.com/facebook/react-native/pull/47564
Test Plan:
Jest Result (`yarn test`):
```
Test Suites: 234 passed, 234 total
Tests: 2 skipped, 4899 passed, 4901 total
Snapshots: 1687 passed, 1687 total
Time: 46.387 s
Ran all test suites.
```
Reviewed By: cipolleschi
Differential Revision: D65816584
Pulled By: javache
fbshipit-source-id: 212021c39dfde7e638752940e67a9f964d2194ab
Henning Hall
Rubén Norte
Parsa Nasirimehr
dominictb
Fouad Magdy
Samuel Susla
generatedunixname89002005232357
Jack Pope
David Vacca
Fabrizio Cucci
Riccardo Cipolleschi
Edmond Chui
Alan Lee
Tim Yung
Sam Zhou
Thomas Nardone
sammy-SC (Meta Employee)
Oskar Kwaśniewski
Zeya Peng
Pieter De Baets
Mateo Guzmán
Eric Rozell
BIKI DAS
dan
Alex Hunt
Eli Front