Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53547
Changelog: [internal]
This creates a new feature flag to enable the modern Web performance APIs in RN by default. It's disabled by default so it shouldn't have any effect at the moment.
Reviewed By: rshest
Differential Revision: D80811430
fbshipit-source-id: 47d5fd12ac8809aa3c5ad37cdd31c0d9e3ed5912
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52610
This diff removes `ReactNativeFeatureFlags` from `react-native/Libraries/ReactNative` and migrates
`shouldPressibilityUseW3CPointerEventsForHover` to common `ReactNativeFeatureFlags` in `src/private/featureflags`. The `shouldEmitW3CPointerEvents is removed as it is used in `rn-tester` to hide some examples.
Changelog:
[General][Breaking] - Migrate `shouldPressibilityUseW3CPointerEventsForHover` to common private feature flags and remove `shouldEmitW3CPointerEvents` flag.
Reviewed By: robhogan
Differential Revision: D75448698
fbshipit-source-id: 03942c9504b855f2054c9a5948c0521ce17365b5
Summary:
This module is currently unused, so we can clean it up.
## Changelog:
[INTERNAL] -
Pull Request resolved: https://github.com/facebook/react-native/pull/52705
Test Plan: CI
Reviewed By: cipolleschi
Differential Revision: D78555763
Pulled By: cortinico
fbshipit-source-id: 0a6152ab3d357cac0c6d7669f292680af7b87074
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:
Pull Request resolved: https://github.com/facebook/react-native/pull/51614
`JSEventLoopWatchdog` is not used in react-native package. This diff moves it to rn-tester which previously deep imported it from react-native (which we want to avoid).
Changelog:
[Internal]
Reviewed By: huntie
Differential Revision: D75410548
fbshipit-source-id: d4996742578e3b068e7acad9479394388b1907ac
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/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/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/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/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
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50806
1. `useWindowDimensions` is already returning in DIPs, my math was just wrong before
2. Playground is marking itself as a deeplink when it shouldn't be
Changelog: [internal]
Reviewed By: cortinico, joevilches
Differential Revision: D73221335
fbshipit-source-id: 32dfa9d60609faccef8e264aa46d64b79250b64d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49730
Changelog: [internal]
This removes all the types from "bom" that are actually not implemented in RN. For now, we're just stripping whole interfaces and not looking into specific methods/properties in interfaces that we do implement but not 100%.
`Performance`, `PerformanceObserver`, `MutationObserver` and `IntersectionObserver` are implemented but not stable yet, so they aren't exposed as globals in the types.
Reviewed By: huntie
Differential Revision: D70329185
fbshipit-source-id: 63bac619e100ca66b41df071df80dfa73d0f9651
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48933
## Motivation
Modernising the react-native codebase to allow for ingestion by modern Flow tooling
## This diff
- Updates files in Libraries/Interaction to use `export` syntax
- Appends `.default` to requires of the changed files.
- Updates the public API snapshot (intented breaking change)
Changelog:
[General][Breaking] - Files inside `Libraries/Interaction` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax.
Reviewed By: huntie
Differential Revision: D68629953
fbshipit-source-id: 526b18d9b64c4b27b6e3198a9725075fa11e345a
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:
Pull Request resolved: https://github.com/facebook/react-native/pull/47109
Fixes the `lint/sort-imports` errors that are now surfaced after fixing the lint configuration.
For a couple files, I added lint suppressions instead because the unsorted import ordering is important due to interleaved calls with side effects.
Changelog:
[Internal]
Reviewed By: GijsWeterings
Differential Revision: D64569485
fbshipit-source-id: 26415d792e2b9efe08c05d1436f723faae549882
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46632
Changelog: [General][Added] Add Playground to RNTester for testing out features & submitting reproducers.
**Context**
- Adding the Playground from Catalyst to RNTester
- This should help folks test React Native features for a particular version
**Change**
- Add a new playground component to RNTester
- Add a new reducer action for opening an example from navbar press
- Fixed typing issues
- Add icon from this fb asset pack: https://www.internalfb.com/assets/set/facebook_icons/nucleus-beaker/variant_outline-size_24?q=beaker
- Matched background color using this imagemagick script
**dark**
```
convert input.png -fill 'rgb(178,180,186)' -colorize 100% output.png
```
**light**
```
convert input.png -fill 'rgb(81,82,84)' -colorize 100% output.png
```
Reviewed By: NickGerleman
Differential Revision: D61972594
fbshipit-source-id: 4a5523a84a6ef09d3266d5f56825907bd3fbe4b5
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:
- 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:
- 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/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/43068
This diff adds `react-native-test-library` package.
It contains native module and native component example, and targets both the new and the old architecture. It has structure similar to many OSS React Native libraries, and is supposed to be used to test the integration with third-party libraries.
It is integrated with RNTester as the **OSS Library Example** screen.
{F1457510909}
**Change Background** tests native commands.
**Set Opacity** tests native props.
**Get Random Number** tests native module.
Changelog: [Internal]
Reviewed By: RSNara
Differential Revision: D50793835
fbshipit-source-id: ff6daefab10e6e9f13049e3013f8f63cfa8a929e
Summary:
In React Native 0.75, we will remove UIManager.showPopupMenu(), UIManager.dismissPopupMenu().
To replace that API, we are introducing this <PopupMenuAndroid> component. This component works in both Fabric and Paper!
For the usage, please see PopupMenuAndroidExample.js.
Changelog: [Android][Added] - Introduce PopupMenuAndroid to replace UIManager.showPopupMenu()
Reviewed By: mdvacca
Differential Revision: D52712758
fbshipit-source-id: a87628a168d64fabbcc4d0f7b694fa639a927448
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41981
Improved RNTester URL deeplink support to cover:
* `rntester://example/<moduleKey>`
* `rntester://example/<moduleKey>/<exampleKey>`
Extra details:
* For example modules that do not specify `showIndividualExamples: true`, allow deeplink URL with the specific exampleKey to only render the specific example, instead of all of them.
* Added flexibility for moduleKey: search for optional suffixes ("Index", "Example").
* Adjusted Back button action to properly go back to the root after a deeplink.
* Added `example-container` generic testID on the example wrapper component.
Changelog: [Internal]
Reviewed By: yungsters, NickGerleman
Differential Revision: D52227013
fbshipit-source-id: 4ba050592f39d6895f5124fa25c77f2d0199aa3f
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41642
This allows opening an example within RNTester without tapping the module card. If the app receives an openURL request with the format `rntester://example/<key>`, open that example (if exists) directly. Such URL request may come from various sources (e.g. custom test run, etc).
Changelog: [Internal]
Reviewed By: christophpurrer
Differential Revision: D51543385
fbshipit-source-id: f9a01963cefb4602b629da0b01be6e334c28a912
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41537
# Changelog:
[Internal] -
This allows to optionally provide a custom list of component/api test clauses into `RNTesterApp`.
Reviewed By: christophpurrer
Differential Revision: D51429407
fbshipit-source-id: 3ee35f13f6156fd055f6e0cbc788b7cf01c22b36
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41051
Strictifies flow to flow strict-local in files where doing that doesn't cause new flow errors.
Changelog: Internal
Reviewed By: yungsters
Differential Revision: D50369011
fbshipit-source-id: b4a5a26b839b7327a3178e6f5b35246dea365a38
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41016
This hasn't been very useful since AsyncStorage/persistence was removed, but takes up a good amount of usable screen real-estate for information in the center of the screen. Remove it.
Changelog: [Internal]
Reviewed By: christophpurrer
Differential Revision: D50297980
fbshipit-source-id: 296a377dffc89c5c203ca6264351a2a1a8281cc3
Summary:
This is a reopened version of https://github.com/facebook/react-native/issues/35224 by isidoro98 which was closed without explanation, updated to resolve new merge conflicts and now includes an example in the RN-Tester app. Aside from that it is unchanged. Here is isidoro98's description from their original PR:
This PR builds on top of https://github.com/facebook/react-native/issues/31402, which introduced the `automaticallyAdjustsScrollIndicatorInsets` functionality. It aims to fix one of RN's longstanding pain point regarding the keyboard.
The changes provide a better way of handling the `ScrollView` offset when a keyboard opens. Currently, when a keyboard opens we apply an **offset** to the `Scrollview` that matches the size of the keyboard. This approach is great if we are using an `InputAccessoryView` but if we have multiple `TextInputs` in a `ScrollView`; offsetting the content by the size of the keyboard doesn't yield the best user experience.
## Changelog:
[iOS] [Changed] - Scroll `ScrollView` text fields into view with `automaticallyAdjustsScrollIndicatorInsets`
Pull Request resolved: https://github.com/facebook/react-native/pull/37766
Test Plan:
The videos below compare the current and proposed behaviors for the following code:
```js
<ScrollView
automaticallyAdjustKeyboardInsets
keyboardDismissMode="interactive">
{[...Array(10).keys()].map(item => (
<CustomTextInput placeholder={item.toString()} key={item} />
))}
</ScrollView>
```
| Current behaviour | Proposal |
|-|-|
|  |  |
As can be seen in the video, the **current behavior** applies an offset to the `ScrollView` content regardless of where the `TextInput` sits on the screen.
The proposal checks if the `TextInput` will be covered by the keyboard, and only then applies an offset. The offset applied is not the full size of the keyboard but instead only the required amount so that the `TextInput` is a **specific** distance above the top of the keyboard (customizable using the new `bottomKeyboardOffset` prop). This achieves a less "jumpy" experience for the user.
The proposal doesn't change the behavior of the `ScrollView` offset when an `InputAccessory` view is used, since it checks if the `TextField` that triggered the keyboard is a **descendant** of the `ScrollView` or not.
## Why not use other existing solutions?
RN ecosystem offers other alternatives for dealing with a keyboard inside a ScrollView, such as a `KeyboardAvoidingView` or using third party libraries like `react-native-keyboard-aware-scroll-view`. But as shown in the recordings below, these solutions don't provide the smoothness or behavior that can be achieved with `automaticallyAdjustsScrollIndicatorInsets`.
| KeyboardAvoidingView | rn-keyboard-aware-scroll-view |
|-|-|
|  |  |
As shown in the videos, the `TextInput` is hidden by the keyboard for a split second before becoming visible.
Code for the videos above:
```js
// KeyboardAvoidingView
<KeyboardAvoidingView
style={{flex: 1, flexDirection: 'column', justifyContent: 'center'}}
behavior="padding"
enabled>
<ScrollView>
{[...Array(10).keys()].map(item => (
<CustomTextInput placeholder={item.toString()} key={item} />
))}
</ScrollView>
</KeyboardAvoidingView>
```
```js
// rn-keyboard-aware-scroll-view
<KeyboardAwareScrollView>
{[...Array(10).keys()].map(item => (
<CustomTextInput placeholder={item.toString()} key={item} />
))}
</KeyboardAwareScrollView>
```
Reviewed By: sammy-SC
Differential Revision: D49269426
Pulled By: javache
fbshipit-source-id: 6ec2e7b45f6854dd34b9dbb06ab77053b6419733
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38539
We will use this example to:
- Showcase legacy module support in the TurboModule system in RNTester
- E2E test legacy module support in the TurboModule system
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47529295
fbshipit-source-id: b98e315741bed7740c36997d706f48e375b0c815
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38673
This diff adds performance comparison examples to RNTester. In each of the comparison we have bad and good examples, which could be used for the following purposes:
- Collect common performance pitfalls
- Use as testbed on performance tools and metrics for validation hypothesis
Changelog:
[Internal] - Add performance comparison example in RNTester
Reviewed By: rshest
Differential Revision: D47821109
fbshipit-source-id: ea0242ea50724d27c7713bb116335a465e24d1a7
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38101
This adds a few examples of using `MutationObserver` in React Native to RNTester.
`MutationObserver` isn't yet enabled so these shouldn't be accessible normally for the time being.
Changelog: [internal]
Reviewed By: NickGerleman
Differential Revision: D46149087
fbshipit-source-id: 8374b5915b8474a17a2f2e3277a9f409f6ab8380
Rubén Norte
Sam Zhou
Dawid Małecki
Nicola Corti
Peter Abbondanzo
Tim Yung
Panos Vekris
Riccardo Cipolleschi
Alex Hunt
Ajit
Nick Gerleman
nishan (o^▽^o)
Ritesh Kumar Shukla
Iwo Plaza
Jakub Piasecki
Shawn Dempsey
Joe Vilches
Jorge Cabiedes Acosta
Biki-das
Dmitry Rykun
Saad Najmi
Ramanpreet Nara
Kevin Gozali
Ruslan Shestopalyuk
Moti Zilberman
Gijs Weterings
Adam Averay
Xin Chen