Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46120
Currently, the implementation of `Appearance` duplicates the validation logic of string `colorScheme` values multiple times.
This leads to more complicated code and also unnecessary work in certain edge cases (e.g. when `NativeAppearance` is not registered).
This refactors `Appearance` to be simpler and to do less work. I've also configured `NativeAppearance.setColorScheme` to be non-nullable because it has existed since 2023.
Changelog:
[Internal]
Reviewed By: TheSavior
Differential Revision: D61567881
fbshipit-source-id: 61cb51709dc716ad97ae1397105414e74fe57a28
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45859
"Fabric without SVCs" configuration is nearly gone, and so it doesn't make sense to need to add no-op methods, on normally Paper only code, etc to satisfy native viewconfig. These particular warnings are then more often noise, than things we need to action on.
Checking for native code to be present can also break development where users are using distributed native app, slightly older than JS.
This keeps the warning, only if static viewconfigs are missing native view config attributes (i.e. new prop would only be exposed to Paper, instead of only exposed to Fabric)
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D60575253
fbshipit-source-id: 1c118274b92eb7922c0dd92df060b24e44fceb3d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46080
1. Force the examples to be alphabetized, where the hand-maintained list has some examples that are not
2. Remove reundant/not useful UI
Changelog: [Internal]
Reviewed By: cortinico
Differential Revision: D61430910
fbshipit-source-id: 1f3e116fe81502faa7a72f2720912e26c9f04bb2
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46076
This will add the shadows to iOS as well. let's see if anyone notices 🙂. I also removed dead styles, and removed some of the extra (excessive) padding specific to Android where the previous shadows would overlap.
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D61421903
fbshipit-source-id: 887fa5aa96e3b0b4f81114ee814897c218db2b76
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46068
This change adds some internal E2E tests to verify that the text is rendered properly on top of a solid background color when borderWidth is set
## Changelog
[Internal] - Add E2E tests
Reviewed By: cortinico
Differential Revision: D61392253
fbshipit-source-id: 76e11821eba96ac75b055c5fe94365197c0f9be2
Summary:
This diff adds an example in RNTester to verify that we can draw text on top of a colored background and non uniform border radius.
As you can see from the test plan, the current code works well when:
* There is only the background color
* There is a background color and uniform cornerRadius
* There are non uniform border radius but the background is transparent.
The current code **does not** work when:
* there is a background and non-uniform border radius
* there is a background, uniform border radius and borderwidth
The reason why this happens is because:
* `RCTParagraphComponentView` draws the text in the View's main layer in the `drawRect` method
* `RCTViewComponentView` has a method `invalidateLayer` that, when there are non-uniform border radii o there is a borderWidth, it creates an extra `CALayer` with an image as content and that layer is put on top of the base layer, covering the text.
## Changelog
[Internal] - Add example to RNTester
Reviewed By: cortinico
Differential Revision: D61389317
fbshipit-source-id: 3e0a9e6c611190f90198a1b0b5855431b9f6ed12
Summary:
- Color stops needs to follow [fix up spec](https://drafts.csswg.org/css-images-4/#color-stop-fixup)
- Adds multiple stops syntax support. e.g. linear-gradient(red 30% 50%, green).
- Rename `position` to `positions` in object style API. Optional string array here makes more sense. We'll add number array support once `px` support is added. Will do it as a follow up to this PR.
TODOs: transition hint syntax support `linear-gradient(red, 50%, green)` (Done locally, dependent on this PR). `px` support.
## Changelog:
[GENERAL] [FIXED] - Linear gradient color stop spec.
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/45969
Test Plan: - Added testcases in processBackgroundImage-test.js
Reviewed By: javache
Differential Revision: D61309203
Pulled By: NickGerleman
fbshipit-source-id: 884052c6841320048933361f38e6478ff4192736
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46006
Adding some extra examples for mix-blend-mode
And added E2E tests for each mix-blend-mode example
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D60605636
fbshipit-source-id: 553f3a2c3b971c918530bdee5a73108c22bd936e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46055
Changelog: [Android][Breaking]
BaseReactPackage is a 1:1 replacement for the deprecated TurboReactPackage. TurboReactPackage has been deprecated since 0.74. let's move the codebase to the recommended standard.
Reviewed By: cortinico
Differential Revision: D61329022
fbshipit-source-id: cef69e37bb2be7f6dccbab70d0996c33a8abf091
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45985
As title.
We can now create ellipses when using percentages. The algorithm for this is still flawed and to get it to be a 1:1 to web it will probably require a re-write of some of the logic but this should get us closer for now.
Some examples:
1. Border thinning on large single corner radii (100%)
{F1798145800}
2. Thinning gets worse when having irregular border colors (100%)
{F1798148002}
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D61025927
fbshipit-source-id: 218d44af014bc8351c329ff1bca82658aebac38c
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45927
This was attempted earlier in the year, and was unsuccessful because HelloWorld had a hidden dependency on this.
Changelog: [General][Breaking] Projects that intend to use the community CLI will now have to declare that dependency instead of transitively having the react-native package handle this.
Reviewed By: GijsWeterings
Differential Revision: D60898346
fbshipit-source-id: 1d62615f718e06caf684f48ecfaf610bf1f51f8e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45873
I'm removing the Gradle dependency on OSS SoLoader and stubbing it with our own implementation.
This will allow us to implement merging of further .so libraries and
As Fresco also depends on SoLoader, I had to stub the `NativeLoader` dependency as well.
Changelog:
[Android] [Breaking] - Do not depend on OSS SoLoader anymore and do not expose Fresco `api` dependency.
Reviewed By: mdvacca
Differential Revision: D60652007
fbshipit-source-id: 6e70a5c37ba9337fbe8772e192b886ba4693c7f1
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45998
The exact `React.Element` type is deprecated and will be removed in a future version of Flow.
Changelog: [Internal]
Reviewed By: gkz
Differential Revision: D61205640
fbshipit-source-id: a029a3a46c7d8d9f94b0b931b991b2ce461151b2
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45944
This diff adds support having (Legacy) Native Modules with functions with parameters of type `Dynamic`.
This is currently blocking some libraries making it harder for them to migrate to New Architecture.
I've implemented it by adding a `DynamicNative` implementation of `Dynamic` which holds a reference of
the payload as a `folly::dynamic`.
Changelog:
[Android] [Added] - Add support for handling `com.facebook.react.bridge.Dynamic` as parameter type in TurboModules
Reviewed By: mdvacca, cipolleschi
Differential Revision: D60966684
fbshipit-source-id: 2e63bc53ede5277a9c12f1b19f05f6099f5f35f9
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45950
Changelog:
[iOS][Deprecated] Deprecated StatusBar.setNetworkActivityIndicatorVisible
The status bar network activity indicator is deprecated in iOS 13. Setting its visibility has no effect in iOS 13 and later. It will be completely removed in a future release.
Reviewed By: philIip
Differential Revision: D60977517
fbshipit-source-id: 31e79113fffd0201c4393b61236d3911e82b40d1
Summary:
- Adds `background` prop that supports CSS's linear gradient. Later this can be extended to support various other gradients and possibly CSS's background image (less motivation as better solutions exists for image)
- Uses `CAGradientlayer` to draw Linear Gradient layers. So it is GPU optimised under the hood.
- Style supports JS object to specify `LinearGradient`, so it can support Animated libraries.
## Changelog:
[IOS] [ADDED] - linear gradient
<!-- 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/45434
Test Plan:
- Check out `processBackground-test.js` for supported syntax testcases.
- Checkout example added in ViewExample.js
Although the PR is tested well but open to any changes/feedback on the approach taken.
Android PR - https://github.com/facebook/react-native/pull/45433. Separated the PRs to keep it easier to review. Both PRs can be reviewed individually.
Reviewed By: NickGerleman
Differential Revision: D60791581
Pulled By: joevilches
fbshipit-source-id: 051088fdf68d9fe20c0c306f1f1c591cbd77f3d5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45885
There are some gaps here right now, but Android API 31+ is looking good.
Changelog: [Internal]
Reviewed By: joevilches
Differential Revision: D60731848
fbshipit-source-id: f515270a61a00c362b584f0d1549d14098c2e385
Summary:
For the ones where `React.MixedElement` would suffice, I change them to `React.MixedElement`. For everything else, I changed it to be `React.Element`
Changelog: [Internal]
Reviewed By: gkz
Differential Revision: D60798229
fbshipit-source-id: 40176b44769aade2c6b63a680d03c10056b2ddfa
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45904
Flow will error on these dollar types soon. For all the ones changed here, they can all be further simplified.
Changelog: [Internal]
Reviewed By: gkz
Differential Revision: D60786768
fbshipit-source-id: e26bf0be1c4a933fc0bd8b59827e10cbd7242a83
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45743
This is a Java-centric class that can be replaced by Kotlin's map extensions.
Changelog:
[Android][Deprecated] Deprecate MapBuilder
Reviewed By: cortinico
Differential Revision: D60309106
fbshipit-source-id: 4a764fa1d59993dc735b2181a2270dc79a0e0396
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45799
No idea how I missed this but I don't think `defaultProps` is a thing in React Native? So the images were not showing
Changelog: [internal]
Reviewed By: joevilches
Differential Revision: D60392853
fbshipit-source-id: 27280033fb719340a809053d6ca98ac3f178c8c3
Summary:
- Adds `background` prop that supports CSS's linear gradient. Later this can be extended to support various other gradients and possibly CSS's background image (less motivation as better solutions exists for image)
- Extended `CSSBackgroundDrawable` to draw Linear Gradient shader while preserving the border style support.
- Style supports JS object to specify `LinearGradient`, so it can support Animated libraries.
## Changelog:
[ANDROID] [ADDED] - linear gradient
<!-- 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/45433
Test Plan:
- Check out `processBackground-test.js` for supported syntax testcases.
- Checkout examples added in `LinearGradientExample.js`
Although the PR is tested well but open to any changes/feedback on the approach taken.
iOS PR - https://github.com/facebook/react-native/pull/45433. Separated the PRs to keep it easier to review. Both PRs can be reviewed individually.
Reviewed By: joevilches
Differential Revision: D60493360
Pulled By: NickGerleman
fbshipit-source-id: 762929c4fe16d87cbbd9ebe83ecce96a9e13192c
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45781
This adds some RNTester examples for `boxShadow`, that render correctly when `ReactNativeFeatureFlags.enableBackgroundStyleApplicator()` is set!
Changelog: [Internal]
Reviewed By: joevilches
Differential Revision: D60367850
fbshipit-source-id: 3c9ae2bf906ae923c713b5f36cd2000f612fe3dc
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45791
Changelog: [internal]
These files are safe to move because they haven't been enabled in OSS and people shouldn't be importing them directly.
Reviewed By: rshest
Differential Revision: D60377869
fbshipit-source-id: 02bc0335385859c0589a494de9b59b0c2ebc06f6
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45792
Changelog: [internal]
These files are safe to move because they haven't been enabled in OSS and people shouldn't be importing them directly.
Reviewed By: rshest
Differential Revision: D60377868
fbshipit-source-id: db0ec2839af91620fe8b6d3927ad0b809d1bdf23
Summary:
## Context
Running manual tests when preparing a release, it's time consuming.
We have to do the cherry picks, wait for CI to finish, and then manually test 8 configurations.
Maestro is a tool that allow us to run E2E tests automatically, and we can wire it to CI.
## Change
Add a test flow for RNTester
## Changelog:
[Internal] - Exploration to integrate maestro
Pull Request resolved: https://github.com/facebook/react-native/pull/45574
Test Plan: GHA
Reviewed By: blakef
Differential Revision: D60282147
Pulled By: cipolleschi
fbshipit-source-id: 4ecba84f0b2c7186de2bb9938043e73a0bd9a6bd
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43909
As we're moving towards a single `libreactnative.so` file, we need to remove several of our prefab targets. Here I'm cleaning up those that are not having an OnLoad.cpp file which needs to be loaded from SoLoader.
This is breaking for libraries using native dependencies via Prefab (i.e. search for `ReactAndroid::` in CMakeLists.txt files for your project).
If so, the CMakeLists.txt files should be updated as follows:
```diff
- ReactAndroid::react_render_debug
+ ReactAndroid::reactnative
```
This applies to every prefab dependencies (the example is just for `react_render_debug`
Changelog:
[General] [Breaking] - Remove several libs from default App CMake setup
Reviewed By: cipolleschi
Differential Revision: D55751683
fbshipit-source-id: 3aca7897852b5f323d60ede3c5036cae2f81e6c3
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45598
I've noticed we attempt to load JSC from the Sonatype Snapshot repository.
That is inefficient as we already know that JSC is available only inside node modules.
This change makes the repository resolution stricter by better specifying which
repo can download which dependency.
Changelog:
[Internal] [Changed] - Do not attempt to load JSC from other repositories
Reviewed By: cipolleschi
Differential Revision: D60116002
fbshipit-source-id: 21a2213708f5b0103860a59f3342f1bc0f59cdb9
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45530
Enable viewconfig validation for RNTester to catch where static and native viewconfigs are mismatched, during development or contribution time. This relies on `useNativeViewConfigsInBridgelessMode()` which is already enabled in `DefaultNewArchitectureEntryPoint` on Android, and seems to be in iOS AppDelegate `RCTRootViewFactory` as well.
We put it in an early place in the bundle before first render, since we don't have RNTester preludes right now, but I think it is still early enough?
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D59946366
fbshipit-source-id: ae0c23b13a566489a88a7b4e408f61dce314b003
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45473
This is a basic implementation of the Long Tasks API (https://w3c.github.io/longtasks/).
It detects and reports long tasks when using the Event Loop (in the modern RuntimeScheduler) when a new feature flag for this purpose is enabled.
This doesn't include attribution information at the moment.
Changelog: [internal]
Reviewed By: sammy-SC
Differential Revision: D55491870
fbshipit-source-id: e1ccad9cc6a35073b31230a8cf3a4660ab9a043d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45503
Kebab case object literals are a pain as an API to give folks. Keep string parsing using the kebab-case web names, like in CSS, but keep object notation camelCase.
This is super super hacked up, and we should burn away all these viewconfig processors as soon as we can.
Changelog: [Internal]
Reviewed By: cortinico
Differential Revision: D59793095
fbshipit-source-id: 888cad31142d7aeed42687ab23c2023ac7e4882d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45413
## Changes
Add an example in RNTester to test that pressability with NativeDrivers works properly.
## Context
The pressability handling is a bit peculiar.
We have to handle 3 main behaviors:
* `PressIn` -> `PressOut` => triggers the `onPress`
* `PressIn` -> move inside the rectangle -> `PressOut` => triggers the `onPress`
* `PressIn` -> move outside the rectangle -> `PressOut` => cancel `onPress`.
For the first case, we detect whether the press happens inside a component in the Native layer only. And everything works.
When a move is involved, we:
1. Detect the initial press in the Native layer
2. We move the coursor and we delegate the detection of whether we are inside of a rect or not to the JS layer
3. The JS layer asks the C++ layer about the layout and decide whether we are in case 2 (move but still inside the rect) or in case 3 (move but outside the rect).
The problem is that with `nativeDriver` and animations, the C++ layer doesn't know about where the receiver view actually is.
This results in issues like the one shown by [#36504](https://github.com/facebook/react-native/issues/36504), where the onMove is not handled correctly.
## Solution
The solution is to keep detecting whether we are in the receiver view or not in the Native layer and pass the receiver view position and size back to JS so that the JS layer don't have to jump to C++ to make this decision.
We decided to pass the frame information because the JS layer is adding some padding and configurations to the final rectangle and we don't want to lose those configurations.
## Changelog
[General][Added] - Add example in RNTester to show that pressability works properly with NativeDrivers
Reviewed By: sammy-SC
Differential Revision: D58182480
fbshipit-source-id: 9ca4fb9a3ca1a8af52ccbe208cbfe8434175f87d
Summary:
CCI on main is broken. We suspect that's due to cache issues which restore a wrong layout for the Folly pod.
This PR is an attempt to fix it
## Changelog:
[Internal] - Fix missing folly base 64
Pull Request resolved: https://github.com/facebook/react-native/pull/45460
Test Plan: CCI and GHA are green
Reviewed By: sammy-SC, huntie
Differential Revision: D59804748
Pulled By: cipolleschi
fbshipit-source-id: 44d6b169cf3319f4d7ee9e0a5833f07bc6ba4bb3
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45304
Add support for most keyword values of mix-blend-mode on iOS and added RNTester Example
Missing compositing operators and global values
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D59402969
fbshipit-source-id: b7e1aaed01fbf8f80e04ad0fa73d2ef63b5ad933
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45306
Adding missing drop-shadow test to rn-tester.
Added with alpha-hotdog image to show we are creating the shadow with the alpha channel of the view.
Changelog: [Internal]
Reviewed By: cortinico
Differential Revision: D59410148
fbshipit-source-id: 5a03ee84313979f99585b8ca7e07abf9cdbe2396
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45421
RNTester contains Android resources that are loaded by name and not resolved by Metro. As a result, these assets are not automatically linked when RNTester JS code is embedded in other projects. This is considered "legacy" loading and is generally discouraged, but is still showcased as an alernative way of loading resources.
I also modified the Image test to ensure that flag status is printed so it's obvious why the vector drawable hasn't loaded.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D59585555
fbshipit-source-id: d42fb44d8846d8e7c7aa01dca4cec89ae85a9195
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45354
Fresco has indicated that they have no plans to support loading vector assets and similar drawable types in Drawee-backed views ([issue](https://github.com/facebook/fresco/issues/329), [issue](https://github.com/facebook/fresco/issues/1463), [issue](https://github.com/facebook/fresco/issues/2463)). Guidance has been to instead load the vector drawable onto the backing image view ourselves. On the React Native side, having the ability to load vector drawables has been requested many times ([issue](https://github.com/facebook/react-native/issues/16651), [issue](https://github.com/facebook/react-native/issues/27502)).
I went this route over using a custom Fresco decoder for XML assets because vector drawables are compiled down into binary XML and I couldn't find a trivial, performant way to parse those files in a context-aware manner. This change only accounts for vector drawables, not any of the other XML-based drawable types (layer lists, level lists, state lists, 9-patch, etc.). Support could be added easily in the future by expanding the `getDrawableIfUnsupported` function.
## Changelog
[Android] [Added] - Added support for rendering XML assets provided to `Image`
Reviewed By: javache
Differential Revision: D59530172
fbshipit-source-id: 3d427c06238287e0a3b7f9570ac20e43d76126c7