Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52691
Unannotated array literals are unsound in Flow right now. This diff adds in annotations and makes a few things readonly, to reduce future errors.
Changelog: [Internal]
Reviewed By: marcoww6
Differential Revision: D78519638
fbshipit-source-id: d98a7668ecf97bcc87dcb3fad25ade736d885d9a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52388
Changelog: [Internal]
Similar to `AsyncCallback<>` (the foundation of `AsyncPromise`) we should allow `void` Promise types in C++ such as `AsyncPromise<>`
Reviewed By: rbergerjr
Differential Revision: D77712020
fbshipit-source-id: d7360df5cc1b77f1e03e5fb73b0b468f6e3a415b
Summary:
This change fixes an issue on iOS where gradients that fade to a transparent color-stop appear dark or "muddy." The fix ensures that the color's hue is preserved during the transition, matching the behavior on Android and web.
### The Problem
When creating a gradient on iOS (e.g., linear-gradient(red, transparent)), the transparent keyword is treated as transparent black (rgba(0,0,0,0)). The `CAGradientLayer` on iOS then interpolates all color channels linearly, causing the red, green, and blue components of the start color to fade to 0. This transition through black results in an undesirable dark or "muddy" appearance in the middle of the gradient.
## Changelog:
[IOS][FIXED] - Gradient interpolation for transparent colors
<!-- 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
Pull Request resolved: https://github.com/facebook/react-native/pull/52249
Test Plan:
Checkout `LinearGradient` example in RNTester, checkout the newly added transparent color transition example, it should render same on android and iOS.
| Before | After |
| --- | --- |
| <img src="https://github.com/user-attachments/assets/c0bb54ad-ed0e-4a80-b37f-0458af0f1f77" width="300"> | <img src="https://github.com/user-attachments/assets/02da921a-bd0e-45c1-881c-cf6460d5ed43" width="300"> |
| `linear-gradient(to right, red, transparent)` transitions to black on iOS, creating a dark effect. | The gradient correctly fades the red color's alpha channel to zero |
Reviewed By: javache
Differential Revision: D77312194
Pulled By: NickGerleman
fbshipit-source-id: 053df8e44f52cd22a3f28fd01f583f7d03c66af5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52271
In my haste I messed up a few of these. Either type in the text, or giving them props they should not have.
Changelog: [Internal]
Reviewed By: jorge-cab
Differential Revision: D77310876
fbshipit-source-id: 9c5a28285d4bb3673fe99630fa7ed97033b17904
Summary:
This PR replaces Core Graphics implementation with Core Animation for radial gradients. I found that `endPoints` for radial gradient type works differently than linear gradient type. The `endPoint.x` accounts for horizontal length and `endPoint.y` accounts for vertical. This makes it possible to draw ellipse gradients. So we don't need the core graphics API anymore.
## Changelog:
[IOS] [CHANGED] - Optimised Radial Gradients.
<!-- 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/52117
Test Plan: Non breaking change. Test Radial gradient example from RNTester. Compare results with web, android and iOS. Each platform should render the gradients identically.
Reviewed By: rshest
Differential Revision: D77140709
Pulled By: javache
fbshipit-source-id: 6e3ad9fcf8e819d340ccf5f5946beb140e616cb0
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52122
Would love to have a place with all the edge cases we can come back to when we try and tweak things.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D76942595
fbshipit-source-id: ce6e293e2c068383e54404af71a29a0586dbc04e
Summary:
This PR replaces Core Graphics implementation with Core Animation for linear gradients. I came across a great [solution](https://stackoverflow.com/questions/38821631/cagradientlayer-diagonal-gradient/43176174#43176174) that makes the `CAGradientLayer`'s start and end point behaviour CSS spec compliant. This will make gradients much more performant.
## Changelog:
[IOS] [CHANGED] - Optimised Linear Gradients.
<!-- 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
Pull Request resolved: https://github.com/facebook/react-native/pull/52096
Test Plan:
Non breaking change. Test Linear gradient example from RNTester. Compare results with web, android and iOS. Each platform should render the gradients identically.
## Note:
I will be doing a PR to use `CAGradientLayer` for radial gradients as well. The next properties that I have locally working are `background-size`, `background-position` and `background-repeat`. These will be addressed in small PRs.
Reviewed By: NickGerleman
Differential Revision: D76905215
Pulled By: javache
fbshipit-source-id: 0094bdf70869d619272d491dd496983316b0dbf0
Summary:
This PR allows to interactively close the modal using the swipe down gesture.
It fixes 5 year old issue: https://github.com/facebook/react-native/issues/29319
In short it removes `modalInPresentation` which according to the documentation causes: "UIKit ignores events outside the view controller’s bounds and **prevents the interactive dismissal of the view controller while it is onscreen.**".
It also adds another delegate event to call onRequestClose whenever modal is closed by gesture.
https://github.com/user-attachments/assets/8849ecba-f762-47ec-a28b-b41c1991a882
## Changelog:
[IOS] [ADDED] - Allow to interactively swipe down the modal.
Add allowSwipeDismissal prop.
Pull Request resolved: https://github.com/facebook/react-native/pull/51483
Test Plan: Test if swiping down the modal calls onRequestClose
Reviewed By: rshest
Differential Revision: D75125438
Pulled By: javache
fbshipit-source-id: d4f2c8b59447680f405b725d0809573a937f97cf
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51880
Updates the `sort-imports` lint rule.
The main change is that it enforces newlines after the last import statement.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D76149902
fbshipit-source-id: 928871655c5de0613b18334d6fc0d71b3a971a18
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51725
This change builds upon the focus/blur portion showcased in ViewExample but showcases several more components all in one spot. This can be shared with additional platforms or expanded to include more component examples like Image, but the goal is to target Android and not distract from the primary use cases.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D75747410
fbshipit-source-id: 7d53366d9f32192ca6b3da45dd127836fb6efdf6
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51788
Adds `flow` to the remaining files that are lacking it in the `packages/rn-tester` directory.
This also adds any necessary type annotations and fixes lint warnings.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D75899307
fbshipit-source-id: 27a74ed0007b3b754446a45931c2c148312d5e3a
Summary:
The Image component in Android now supports the same cache control behaviour as in iOS, the examples needed to be separated in the past because the support was not the same for iOS and Android, but now that it is, we can unify the example.
## Changelog:
[INTERNAL] - Unify RNTester Cache Policy Image example
Pull Request resolved: https://github.com/facebook/react-native/pull/51580
Test Plan:
<details>
<summary>RNTester Screenshots</summary>
| iOS | Android |
|--------|-------|
|  |  |
</details>
Reviewed By: yungsters
Differential Revision: D75538812
Pulled By: Abbondanzo
fbshipit-source-id: 7705c8f824cb18cebc39e84b6f48979035dc104c
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51673
Fixes a lint warning that seems to inconsistently fire, by improving the code that it complains about.
Changelog:
[Internal]
Reviewed By: javache
Differential Revision: D75583443
fbshipit-source-id: b6df191e2e51dee688df3f3c960704dea28a4ece
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51634
Creates an example in the ViewExample setup for how onBlur/onFocus behave when using keyboard navigation
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D75238317
fbshipit-source-id: e69122ca17727fc7f71e9bb7a09098a2771b098e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51666
The platforms handle this in pretty different ways right now. Let's add a test showing the differences.
Android also adds a bunch of unicode zero width spaces in there...
Changelog: [Internal]
Reviewed By: mlord93
Differential Revision: D75567210
fbshipit-source-id: 98cac7d3fd23451868b55b69478e2667a2de3716
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51551
This allows hit RN's hit testing to find nested spans, and click them.
This mechanism is fully separate from the one used by a11y virtual views, and ClickableSpan, such as those added for links via dataDetectorType (and also the `link` role).
When we do have a link accessibilityRole, that ClickableSpan hit test seems to prevent the React one, and we only activate the onPress once (but then add keyboard interaction, press visual, and add to the a11y tree).
Changelog: [Internal]
Reviewed By: mdvacca
Differential Revision: D75257326
fbshipit-source-id: 0c693f581ec121cf4b4e3e2040d141985118224f
Summary:
As I reviewed some examples, I noticed that this one's dark mode could be improved, and the code could be modernised a bit as well by converting its classes into functional components.
## Changelog:
[INTERNAL] - Fix InputAccessoryView example in dark mode and convert to functional components
Pull Request resolved: https://github.com/facebook/react-native/pull/51583
Test Plan:
<details>
<summary>Screenshots</summary>
| Dark | Light |
|--------|-------|
|  |  |
</details>
Reviewed By: fabriziocucci
Differential Revision: D75404561
Pulled By: cortinico
fbshipit-source-id: 3318e9869919e99055e47b59c89de0b22976f142
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51603
In `rn-tester` TextAncestor was used to create a inlineView wrapper:
```js
function InlineView(props) {
return (
<TextAncestor.Provider value={false}>
<View {...props} />
</TextAncestor.Provider>
);
}
```
however, it is already done in View.js and TextAncestor shouldn't be used outside of react-native package:
```js
if (hasTextAncestor) {
return <TextAncestor value={false}>{actualView}</TextAncestor>;
}
return actualView;
```
Changelog:
[Internal]
Reviewed By: huntie
Differential Revision: D75408231
fbshipit-source-id: 7f12278296dcfe56246f6b7065f5a094e4099f7a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51600
The `infoLog` is a `console.log` wrapper to separate ad-hoc console debug logging, however console logs are already used in some files in rn-tester (ex. RNTesterAppShared.js). The same applies to files in react-native package.
Changelog:
[General][Changed] - Removed `infoLog` from react-native package
Reviewed By: huntie
Differential Revision: D75402930
fbshipit-source-id: 1a14a9122552130415f058d3647d715225321ab8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51550
`adjustsFontSizeToFit` will adjust font size so that given text fits in both veritcal and horizontal bounds. The algorithm to mutate text to fit is executed during TextLayoutManager during layout creation for Fabric, and then re-executed in `TextView.onDraw()`. See D56134348 which introduced the logic.
In Facsimile, we were not seeing font size adjusted when text is too tall. This is because we are only incorporating the height constraint during Spannable mutation during draw, but not the original layout, which Facsimile uses directly.
This could potentially fix other bugs, where width may not corredpond to the final font size we settle on during drawing.
Changelog:
[Android][Fixed] - Fix missing height constraints when creating Fabric layout for `adjustsFontSizeToFit`
Reviewed By: mdvacca
Differential Revision: D75251391
fbshipit-source-id: 77d90c49d48911e63131f9f088cfce13946c67d6
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51524
Links in error suppressions will point to the announcement post in Flow FYI.
Changelog: [Internal]
drop-conflicts
Reviewed By: marcoww6
Differential Revision: D75188177
fbshipit-source-id: 27ea1fbee848e9371e679cf423e30bc9608edea0
Summary:
The Flow team is improving the way Flow infers type for primitive literals. This diff prepares the codebase for the new behavior by adding type annotations, or annotations of the form `'abc' as const`.
Changelog: [internal]
Reviewed By: marcoww6
Differential Revision: D75188179
fbshipit-source-id: be50990f23f79cf2d8dae7576af5190218adcafe
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51488
The Flow team is improving the way Flow infers type for primitive literals.
Announcement: https://fb.workplace.com/groups/flowlang/permalink/1725180268087629/
This diff prepares the codebase for the new behavior by codemoding `as const` annotations.
## Repro steps
1/ Used steps in D73610163 to produce the code changes.
2/ Reverted files where `flow` errored:
```
flow status --show-all-errors > errors.log
node ~/fbsource/fbcode/flow/facebook/error-analyzer.js errors.log |
awk -F':' '{ print $1 }' | sort -u | grep -v 'Total Error Count' |
xargs hg revert --rev .
```
3/ Reverted files that did not improve error count in new Flow mode
```
# Run Flow before change
~/fbsource/fbcode/flow/facebook/flowd status --show-all-errors > errors-0.log
# Run Flow after change
~/fbsource/fbcode/flow/facebook/flowd status --show-all-errors > errors-1.log
# Compute error counts before and after
node ~/fbsource/fbcode/flow/facebook/error-analyzer.js errors-0.log | sort > errors-counts-0.log
node ~/fbsource/fbcode/flow/facebook/error-analyzer.js errors-1.log | sort > errors-counts-1.log
# Revert files with no change in error count
comm -12 errors-counts-0.log errors-counts-1.log | awk -F':' '{ print $1 }' | xargs hg revert --rev .~1
```
## Note to code owners
Due to the large number of errors involved in this rollout, adding `as const` was the most feasible large-scale automated solution. Ideally, a lot of these errors would be fixed by adding other appropriate type annotations. For example instead of annotating
```
type Shape = {type: 'circle', radius: number} | {type: 'square', side: number} | ...;
type ShapeKind = 'circle' | 'square' | 'triangle';
const circle = {
type: "circle" as const, // <-- annotation added here
radius: 42,
};
shape.type as ShapeKind;
takesShape(circle);
```
a more appropriate annotation would be
```
const circle: Circle = { type: "circle"; radius: 42 };
...
```
Changelog: [Internal]
drop-conflicts
Reviewed By: SamChou19815
Differential Revision: D75114154
fbshipit-source-id: 67ee5673816da9625431e2a2466a1e0038386151
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51464
Add a module of shared examples, like `TextInputSharedExamples`, to avoid copy/paste between these.
Modifies the empty test example a bit and adds an E2E test.
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D74780847
fbshipit-source-id: 30c2830ef0b638680fe75b4bcf9f138f5c01e190
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51441
Refactors `RNTesterPlatformTestEventRecorder` so that it does not use `useMemo` from an instance method.
Instead, this diff changes the module to export a hook by the same name, `useRecorderTestEventHandlers`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74950333
fbshipit-source-id: 6cb222a6ec077abadbdc7008e822645aba3d07f6
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51426
Fixes a bunch of ESLint warnings across the codebase.
The only remaining warnings are from the `lint/no-commonjs-exports` rule.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74942686
fbshipit-source-id: 384de34c7297f7f7fcff1827c8b2e46714a5cda7
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51415
Adds the `format` annotation to all files that were missing them.
Also, adds `noformat` to generated files, and removed it from files that no longer need them.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74901034
fbshipit-source-id: 7e0b85ca8ee2de41278f3aa23cb03e9c266d9c28
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51410
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74895844
fbshipit-source-id: 67f334981a1effce051c89e3d4643232aa22b4e9
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51412
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74895839
fbshipit-source-id: 9ab9fc8bdee6d1764ad86fa2165da32cb266174e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51407
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74894324
fbshipit-source-id: 7179f27f8ff1fb1b67745650b38d87cb2ea982b2
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51406
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74894207
fbshipit-source-id: 00286b3dbaa6ce1e4d8d0f0f6c0dfef6505824c5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51405
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74894042
fbshipit-source-id: 93fbadb32e4a1225836db9d729d7bf502ebddd84
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51404
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74893440
fbshipit-source-id: 9032f1e867a34b9cfa808f920a38f2630046eed7
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51403
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74891875
fbshipit-source-id: 981e85b5da84950c9e66e8d6b6496019e536711d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51401
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: javache
Differential Revision: D74889277
fbshipit-source-id: 0d42921758c5d6e108a4c82dbd52b7de89fbef00
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51399
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: rubennorte
Differential Revision: D74888097
fbshipit-source-id: a22ca4b791153ff0c2f4ab34ff8e3ce5e9280e0d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51358
Make use of the React 19 feature so that we can remove the remaining `forwardRef` in react native.
Changelog: [Internal]
Reviewed By: yungsters
Differential Revision: D74812747
fbshipit-source-id: 7ded547ff62ca59d28abfc46a2f57466e2486acd
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51269
This adds an E2E Tests for the fabric interop layer in RNTester, so we can make sure that we don't break the mechanism to add children after the view is rendered
## Changelog:
[Internal] - Add E2E test for FabricInteropLayer
Reviewed By: sammy-SC
Differential Revision: D74590458
fbshipit-source-id: 9483d1ac648d923a8494d6402b9b2f971b9b2547
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51260
This is a preparatory change that adds an example to RNTester for the Fabric interop layer on iOS.
This example is needed to create a Jest E2E tests that will make sure that the Fabric Interop Layer can properly add views as subviews.
We discovered the bug thanks to react-native-maps.
## Changelog:
[Internal] - Add Example for the Fabric Interop Layer to RNTester iOS
Reviewed By: cortinico
Differential Revision: D74579737
fbshipit-source-id: 0c1bbb06790b01313cd98aa4b7152d8aba0cded3
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51285
The `composeStyles` function should correctly determine the type of the input styles (`ViewStyle`, `ImageStyle`, `TextStyle`) base on the output type:
```ts
const combinedStyle8: StyleProp<ImageStyle> = StyleSheet.compose(
// ts-expect-error
composeTextStyle,
composeTextStyle,
);
```
This diff adds generic type checking for `compose` function and fixes `ImageStyle` overflow prop type which accepted `scroll` property (which wasn't previously accepted in manual types) and which enables type system to distinguish `ImageStyle` from `ViewStyle` and `TextStyle`:
previous:
```ts
overflow?: 'visible' | 'hidden' | 'scroll'
```
current:
```t
overflow?: 'visible' | 'hidden'
```
Changelog:
[Internal]
Reviewed By: huntie
Differential Revision: D74574293
fbshipit-source-id: 751a44f2d3cd43055d93031343995f16ef87b185
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51019
Follows D72228547 and D73770609.
This diff internalises (moves files from fbsource+GitHub to fbsource only) a number of RNTester examples which referenced `'react-native/src/private/'` subpaths.
In future, new components/APIs should be exported from index as `unstable_`, or added to `RNTesterListFbInternal` if they are exported from `src/fb_internal/`.
Changelog: [Internal]
Reviewed By: cortinico
Differential Revision: D73777092
fbshipit-source-id: d9fb0833c56f2ae580b6db62ddbbbeae774a0004
