Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49276
This diff replaces the remaining `React$` global types in the codebase, in preparation for their removal in Flow.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D69322418
fbshipit-source-id: 058a2489ce8e6bf59df2ec4e61e9708f63561671
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
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49100
Changelog: [internal]
This API isn't part of the DOM standard so can be moved out.
Reviewed By: huntie
Differential Revision: D68896484
fbshipit-source-id: 5d275beb909ce5c5ce0eddb6c6e04cf7491aa1cb
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
Summary:
The `maxFontSizeMultiplier` prop for `Text` and `TextInput` was not handled in Fabric / New Architecture as documented in https://github.com/facebook/react-native/issues/47499.
bypass-github-export-checks
## Changelog:
[GENERAL] [FIXED] - Fix `maxFontSizeMultiplier` prop on `Text` and `TextInput` components in Fabric / New Architecture
Pull Request resolved: https://github.com/facebook/react-native/pull/47614
Test Plan:
I have not added any automated tests for this change but try to do so if requested. I have however added examples to RN Tester for both the Text and TextInput components, as well as compared the behaviour with Paper / Old Architecture. Both on version 0.76.
Noticed now I didn't do exactly the same steps in both videos, oops! Be aware that reapplying changes made in the Settings are currently half-broken on the new architecture, thus I'm restarting the app on Android and iOS. But this issue is unrelated to my changes. I've tested on main branch and it has the same issue.
Here are comparison videos between Paper and Fabric on iOS *after* I've made my fix.
### Text
| Paper | Fabric |
| ------------- | ------------- |
| <video src="https://github.com/user-attachments/assets/f4fd009f-aa6d-41ab-92fa-8dcf1e351ba1" /> | <video src="https://github.com/user-attachments/assets/fda42cc6-34c2-42a7-a6e2-028e7c866075" /> |
### TextInput
| Paper | Fabric |
| ------------- | ------------- |
| <video src="https://github.com/user-attachments/assets/59b59f7b-25d2-4b5b-a8e2-d2054cc6390b" /> | <video src="https://github.com/user-attachments/assets/72068566-8f2a-4463-874c-45a6f5b63b0d" /> |
Reviewed By: Abbondanzo
Differential Revision: D65953019
Pulled By: cipolleschi
fbshipit-source-id: 90c3c7e236229e9ad9bd346941fafe4af8a9d9fc
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48807
## Motivation
Modernising the react-native codebase to allow for ingestion by modern Flow tooling.
## This diff
- Updates a handful of components in `Libraries/Components` to use `export` syntax
- `export default` for qualified objects, many `export` statements for collections (determined by how it's imported)
- Appends `.default` to requires of the changed files.
- Updates test files.
- Updates the public API snapshot (intented breaking change)
Changelog:
[General][Breaking] - Files inside `Libraries/Components` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax.
Reviewed By: huntie
Differential Revision: D68436127
fbshipit-source-id: e3496fe69d66932dd4ed82f41d810f3ef1f850f5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48940
The PerformanceObserver (marks and measures) example clears it's output each time a new PerformanceObserver event fires, which makes it not particularly useful.
This change makes it so the output is only updated if a non-empty list of performance events is observed.
## Changelog
[Internal]
Reviewed By: rubennorte
Differential Revision: D68634361
fbshipit-source-id: 71b97e1c66aabd090cae63d55c8fa0a425d0c2f4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48665
## Motivation
Modernising the react-native codebase to allow for ingestion by modern Flow tooling
## This diff
- Updates files in Libraries/Utilities to use `export` syntax
- `export default` for qualified objects, many `export` statements for collections (determined by how it's imported)
- Appends `.default` to requires of the changed files.
- Updates Jest mocks of the `Platform` module, which happened to touch a lot of test files.
- Updates the public API snapshot (intented breaking change)
Changelog:
[General][Breaking] - Files inside `Libraries/Utilities` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax.
Reviewed By: huntie
Differential Revision: D68152910
fbshipit-source-id: 07f3a0957f1dbaf44f53974c6f28b273558406eb
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48901
## Motivation
Modernising the react-native codebase to allow for ingestion by modern Flow tooling.
## This diff
- Updates files in `Libraries/Text`, `Libraries/Share` and `Libraries/Settings` to use `export` syntax.
- Appends `.default` to requires of the changed files.
- Updates test files.
- Updates the public API snapshot *(intented breaking change)*
Changelog:
[General][Breaking] - Files inside `Libraries/Text`, `Libraries/Share` and `Libraries/Settings` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax.
Reviewed By: huntie
Differential Revision: D68562844
fbshipit-source-id: bd71a341e33d3629121aa61549139c4b1cd62c3f
Summary:
- Adds support for color transition hint syntax in linear gradients. e.g. `linear-gradient(red, 20%, green)`
- Adds `px` support. Combination of `px` and `%` also works.
- Simplified color stops parsing.
- The `processColorTransitionHint` and `getFixedColorStops` is moved to native code so it can support combination of `px` and `%` units as it requires gradient line length, which is derived from view dimensions and gradient line angle.
- Follows CSS [spec](https://drafts.csswg.org/css-images-4/#coloring-gradient-line) (Refer transition hint section) and implementation is referred from [blink engine source](https://github.com/chromium/chromium/blob/a296b1bad6dc1ed9d751b7528f7ca2134227b828/third_party/blink/renderer/core/css/css_gradient_value.cc#L240).
## Changelog:
[GENERAL] [ADDED] - Linear gradient color transition hint syntax and `px` unit support.
Pull Request resolved: https://github.com/facebook/react-native/pull/48410
Test Plan:
Added testcase in processBackgroundImage-test.ts and example in LinearGradientExample.js
<img width="500" alt="Screenshot 2025-01-05 at 11 38 13 PM" src="https://github.com/user-attachments/assets/62858bb7-1dbf-40cf-8dd4-ec0daf84ac1b" />
## Todo
Add testcases for `getFixedColorStops` and `processColorTransitionHint` in native code for both platforms. That's the only downside of moving it out of JS 🤦
Reviewed By: NickGerleman
Differential Revision: D67870375
Pulled By: joevilches
fbshipit-source-id: b91d741f3108c25df8000d220726bf180c64be60
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
Summary:
Follow up from https://github.com/facebook/react-native/issues/48619. 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 `AnExApp` examples that were using `UNSAFE_` lifecycles.
## Changelog:
[INTERNAL] - Fix RNTester strict mode warnings for AnExApp examples
Pull Request resolved: https://github.com/facebook/react-native/pull/48620
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: rshest
Differential Revision: D68092958
Pulled By: cipolleschi
fbshipit-source-id: 0f2cea3c679f8db0f13054e2851a73dc23a4c906
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
Summary:
**iOS** does offer a native property for **UITextField** called `inputAssistantItem`. According to the [documentation](https://developer.apple.com/documentation/uikit/uitextinputassistantitem), we can hide the **"shortcuts"** by setting the `leadingBarButtonGroups` and `trailingBarButtonGroups` properties to empty arrays.
I propose adding a new property for **TextInput** in **React Native**, which would set these native properties to empty arrays. This new property could be called `disableInputAssistant` or `disableKeyboardShortcuts` and would be a `boolean`.
Developers can manage this behavior (the redo & undo buttons and suggestions pop-up hiding) after applying these native props.
https://github.com/react-native-community/discussions-and-proposals/discussions/830
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[IOS] [ADDED] - [TextInput] Integrate a new property - `disableKeyboardShortcuts`. It can disable the keyboard shortcuts on iPads.
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[IOS] [ADDED] - [TextInput] Integrate a new property - `disableKeyboardShortcuts`. It can disable the keyboard shortcuts on iPads.
Pull Request resolved: https://github.com/facebook/react-native/pull/47671
Test Plan:
Manual
1. Open TextInput examples.
2. Scroll down and reach the "Keyboard shortcuts" section.
3. Test each case.
Note: **TextInput** behaves the same as now when the new prop is not passed or is `false`.
https://github.com/user-attachments/assets/5e814516-9e6c-4495-9d46-8175425c4456
Reviewed By: javache
Differential Revision: D67451609
Pulled By: cipolleschi
fbshipit-source-id: 59ba3a5cc1644ed176420f82dc98232d88341c6e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48414
Was looking into https://github.com/facebook/react-native/issues/48078 which was brought to my attention due to my recent refactorings of iOS Views, especially around how overflow: hidden works. This bug was not brought on by my changes but seems to be a lingering Fabric bug (iirc this bool was not changed when I refactored things)
Anyway, dotted/dashed borders did not work with overflow: hidden. The reason why is we use core animation borders in this case which is incorrect as CA cannot do these types of borders. So I added a check to make sure that the borders are solid as well if we want to use CA to draw them.
Changelog: [iOS] [Fixed] - Dashed & dotted borders now work with overflow: hidden
Reviewed By: mdvacca
Differential Revision: D67720492
fbshipit-source-id: 5aecc15f2d7cbd71952d78d6972f6fc6b7a93ea8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48188
Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR.
This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well!
Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily.
**Before**
```
import {View} from 'react-native';
// Root of the app
<View {...props} experimental_layoutConformance="strict">
{content}
</View>
```
**After**
```
import {View, experimental_LayoutConformance as LayoutConformance} from 'react-native';
// Root of the app
<LayoutConformance mode="strict">
<View {...props}>
{content}
</View>
</LayoutConformance>
```
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D66910054
fbshipit-source-id: e6a304b5c30ad3c5845a7ce2d1021996a74c2f34
Summary:
Apple introduced system font families
```
font-family: system-ui;
font-family: ui-sans-serif;
font-family: ui-serif;
font-family: ui-monospace;
font-family: ui-rounded;
```
for Safari at 2020 (see https://developer.apple.com/videos/play/wwdc2020/10663/?time=872).
This PR implementation supports above font families on iOS.
bypass-github-export-checks
## Changelog:
[IOS] [ADDED] - Support system font families (system-ui, ui-sans-serif, ui-serif, ui-monospace, and ui-rounded) on iOS
Pull Request resolved: https://github.com/facebook/react-native/pull/47544
Test Plan: Run `RNTester` and view the `Text` component where shows the usage for those font families.
Reviewed By: NickGerleman
Differential Revision: D65761307
Pulled By: cipolleschi
fbshipit-source-id: 18628160b7753b314389e887cddfe9d0ec96ee1d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48071
Changelog: [Internal]
- Write fantom test for rn_rootThreshold given current implementation of IntersectionObserver
- Rename `rn_rootThreshold` to `rnRootThreshold`
- Rename `rn_intersectionRootRatio` to `rnRootIntersectionRatio`
- Rename `rootThresholds` on observer to `rnRootThresholds`
Reviewed By: rubennorte
Differential Revision: D66464509
fbshipit-source-id: 8ed66afa54bab99a28625ebe6f227d59d0bd7389
Summary:
There are currently 2 warnings firing for every PR (e.g. look here https://github.com/facebook/react-native/pull/48013/files).
Those are annoying so I'm fixing them here.
## Changelog:
[INTERNAL] - Fix eslint warnings in react-native
Pull Request resolved: https://github.com/facebook/react-native/pull/48016
Test Plan: CI
Reviewed By: NickGerleman
Differential Revision: D66595842
Pulled By: cortinico
fbshipit-source-id: 0fd39629a97dbbe5d75a78c8eaa50241faf6bf1e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47908
Changelog: [General][Added] - Add support for `rn_rootThreshold` in Intersection Observer
`rn_rootThreshold` is a custom IntersectionObserver option and not part of the IntersectionObserver spec. We are adding it because it covers a specific use-case for measuring viewability that is robust for `target`s that are larger than the viewport or specified `root`.
The threshold ratio is of the intersection area (of `root` and `target`) to the total area of the `root`.
{F1960832959}
Source - EX314979
`rn_rootThreshold` is an optional threshold and can be combined with the `thresholds` option. An intersection will fire if any specified thresholds is met.
Note: If you use specify a `rn_rootThreshold`, the default `threshold` is no longer applied
The main use case of `rn_rootThreshold` is being able to specify a level of viewability independent of `target` size. For example, a `target` that is larger than the `root` (commonly the viewport) will not trigger the IntersectionObserver for a `threshold` of `1`. Setting `rn_rootThreshold` of `1`, will trigger once the item takes full size of the `root`.';
Reviewed By: yungsters
Differential Revision: D66031119
fbshipit-source-id: 7bdc871dc5b4e6c0edc7d6e17a0a0cfd51c4fe81
Summary:
- Current implementation does not follow CSS spec for rectangle boxes with corner angles. It is using non spec compliant algorithm to calculate start and end points. This PR follows the spec compliant algorithm to implement and makes sure Web, iOS and Android gradients are identical with corner angles.
- Also, currently it is using `CAGradientLayer` which does not support spec compliant start and end points i.e. start and end point can be outside of rectangle bounds. This leads to inconsistent gradients on iOS for corner angles compared to web and android. So this PR replaces it with `CGGradient`.
- I have also moved some files to make it easier to add more background image types in future.
## Changelog:
[GENERAL] [FIXED] - Linear gradient start and end point algorithm.
<!-- 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/47003
Test Plan:
- Added multiple gradient example which should be identical in all platforms (Web, iOS and Android) and tested thoroughly on all platforms. I think some visual test cases can help here.
- I have referred to [blink's](https://github.com/chromium/chromium/blob/main/third_party/blink/renderer/core/css/css_gradient_value.cc) implementation.
## Aside
Took a while to understand the [spec](https://www.w3.org/TR/css-images-3/#corner-gradient-example), but felt great after getting it. Gradients should be 100% identical on all platforms now. Sorry i missed testing cornered angles + rectangles earlier and I found out it is inconsistent on platforms just this weekend 😅
<img width="1389" alt="Screenshot 2024-10-14 at 12 24 45 AM" src="https://github.com/user-attachments/assets/2f61eb87-502b-4b8c-88f3-d8a3cca9a7a3">
Reviewed By: joevilches
Differential Revision: D64497127
Pulled By: jorge-cab
fbshipit-source-id: 2647176ae2ee74b6c71f9061465b07dccdabcfc1
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:
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 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
Joe Vilches
Wu Zhong
Alex Taylor (alta)
Jakub Piasecki
Sam Zhou
Peter Abbondanzo
Rubén Norte
Iwo Plaza
Christoph Purrer
Rickard Zrinski
Eric Rozell
VidocqH
Mateo Guzmán
nishan (o^▽^o)
Dawid Małecki
Fabrizio Cucci
Mykhailo Kravchenko
Nick Gerleman
CHEN Xian-an
Nicola Corti
Luna Wei
Henning Hall
dominictb
generatedunixname89002005232357