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:
- 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/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/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
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37863
This creates 2 examples for IntersectionObserver in RNTester:
* The first example is just a copy of the example provided by MDN in the documentation page for `IntersectionObserver` (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This example is useful to show how React Native behaves the same way with the same code.
* The second example is a "stress test" for the API: a screen with 500 simultaneous node being observed at the same time with different observers. As we compute the intersections after scroll (after "mounting" the state update with the updated scroll position) in the main thread, this highlights a possible impact on scroll performance.
IntersectionObserver isn't yet enabled by default, so no need to add a changelog entry about this. We'll add one when the API becomes generally available.
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D45736845
fbshipit-source-id: 40b6bce39f90e04653504b1033a4edfaa65e93ca
Summary:
Add performance API example to RN tester, start with the `performance.memory` API.
- Update `RNTesterList` file for both android and ios
Changelog:
[General][Internal] - Add `performance.memory` API example to RNTester
Reviewed By: rshest
Differential Revision: D43326565
fbshipit-source-id: adeb18ce9f1f90d9e9ecf66b533307028bc02df8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36162
Changelog: [Internal]
Adds a dedicated screen to RNTester to help manually test the handling of various invalid prop values.
Reviewed By: huntie
Differential Revision: D43270626
fbshipit-source-id: 3fbf452955b2caace7a09fbb9c83960703fd974f
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/35138
Changelog:
[General][Added] - Add a C++ only TurboModule example (for Android/iOS/macOS/Windows)
react-native@0.69 introduced a new bridging layer to ease integration for pure C++ TurboModules using C++ std:: types directly instead of the lower level jsi:: types:
https://github.com/facebook/react-native/tree/v0.69.0/ReactCommon/react/bridging
This bridging layer can be used in JSI functions or more conveniently in C++ TurboModules.
Here is a example of an C++ only TurboModule which will work on Android and iOS and macOS/Windows (using microsoft/react-native-macos|windows) only using flow/TypeScript and standard C++ types.
C++ only TurboModules are very handy as they do not require to work with JSI APIs - instead std:: or custom C++ can by used.
Reviewed By: javache
Differential Revision: D39011736
fbshipit-source-id: 84c833d8540671fde8505f1aeb0265074b248730
Summary:
This is the first diffs that backs out the Custom Native State from the Codegen. The reason why we are backing it out are:
1. It forces users to create new types in JS that are not ctually used there. For example, the NativeState you define, and eventually exports, in JS is not used anywhere in your JS code.
2. You need to put in the JS native state some types that does not exists in JS, only to have them generated by the Codegen. ImageRequest, for example, does not exists in JS, but you need it in your (iOS) state to load images
3. There are a lot of edge cases due to how C++ handles variables. Some variables needs to be created as pointers. Some others as `const &`. It does not scale to hard code all of them and there is the risk to have the same type that needs to be a pointer in some case and something else in others.
4. It is better to instruct the users on how to properly create a component with Custom State, Shadow Node and Descriptor.
## Changelog
[General][Removed] - Back out components with native state in RNTester
Reviewed By: cortinico
Differential Revision: D40419254
fbshipit-source-id: 1895c7050f01f76a8901a97e9700f74cae707b79
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/34911
This diff adds the Same component with state added in the previous diff for iOS
## Changelog
[Android][Added] - ComponentWithState
Reviewed By: cortinico
Differential Revision: D40108233
fbshipit-source-id: b5bd1d1bdd7053920f737772c85034e4c5aed26a
Summary:
For some reason the turbomodule example inside RN Tester was not enabled by default. I'm enabling it.
Changelog:
[Internal] - Always enable TurboModuleExample for RN Tester
Reviewed By: cipolleschi
Differential Revision: D39381821
fbshipit-source-id: 711c20a51a2f3b274f1b9396d00898b0f60a6f86
Summary:
This adds a simple debug UI to verify the keyboard events "keyboardDidShow" and "keyboardWillShow"
Changelog:
[Internal][Added] - Add "KeyboardExample" to RNTester
Reviewed By: cortinico
Differential Revision: D38500869
fbshipit-source-id: 99913a05849a7dd27dfdee2d622058b9c2604a7f
Summary:
Currently, with the Alert API on iOS, the only way to bold one of the buttons is by setting the style to "cancel". This has the side-effect of moving it to the left. The underlying UIKit API has a way of setting a "preferred" button, which does not have this negative side-effect, so this PR wires this up.
See preferredAction on UIAlertController https://developer.apple.com/documentation/uikit/uialertcontroller/
Docs PR: https://github.com/facebook/react-native-website/pull/2839
## Changelog
[iOS] [Added] - Support setting an Alert button as "preferred", to emphasize it without needing to set it as a "cancel" button.
Pull Request resolved: https://github.com/facebook/react-native/pull/32538
Test Plan:
I ran the RNTesterPods app and added an example. It has a button styled with "preferred" and another with "cancel", to demonstrate that the "preferred" button takes emphasis over the "cancel" button.
Luna:
* Also tested this on Catalyst
{F754959632}
Reviewed By: sammy-SC
Differential Revision: D34357811
Pulled By: lunaleaps
fbshipit-source-id: 3d860702c49cb219f950904ae0b9fabef03b5588
Summary: Changelog: [Internal] Add another example for testing out the pointer events spec
Reviewed By: vincentriemer
Differential Revision: D35116565
fbshipit-source-id: 5f0cfeb871ae55071549c2289782401807f55515
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/32640
This Diff shows how an application can provide a custom Fabric Components Registry.
The idea is to extend the CoreComponentsRegistry from rncore to provide the extra
components that are generated from RNTester.
Please note that this Diff can't be shipped as it is and should be rebased on top of:
- D32493605 (https://github.com/facebook/react-native/commit/aa4da248c12e3ba41ecc9f1c547b21c208d9a15f) As the CLANGFORMAT is disabled for RNTester at the moment
- D32045059 (https://github.com/facebook/react-native/commit/d29f3d2a6b84c17ad057f4e9c8dc35b3fe16fb19) and D32128979 as they're effectively adding the sample component and the iOS code.
Changelog:
[Internal][Added] - Adding a Custom Fabric Component to RNTester
Reviewed By: ShikaSD
Differential Revision: D32498360
fbshipit-source-id: 1a737359498dddb571c8a445bec18e5dbcf53e04
Summary: Changelog: [Internal] Create FlatList example index for 3 levels of navigation
Reviewed By: charlesbdudley
Differential Revision: D30816721
fbshipit-source-id: a3bdae7f385bab3695a9c2dc6fe3148ebdbd12b4
Summary: Changelog: [Internal] - Move SectionList examples together. An interim state for next diff to add a 3rd level of navigation so each example is rendered in separate surface.
Reviewed By: kacieb
Differential Revision: D29480143
fbshipit-source-id: f7f10920bd4ab938665f17f0a80debaff55b9788
Summary:
Changelog:
[Internal] - Rename some types and components in RNTester to support work for tertiary levels of navigation.
module = component | api
moduleExample = an example of a certain feature a module
Reviewed By: kacieb
Differential Revision: D29381875
fbshipit-source-id: c348bcbb73aaf95e85928bb14080a097e685cc78
Summary:
Verifies interaction between PanResponder and ScrollView with JSResponderHandler.
Also showcases how to create a swipeable card with scrollable content.
Changelog: [Internal]
Reviewed By: JoshuaGross
Differential Revision: D28093313
fbshipit-source-id: 8ffbe734119912326c471412f4f5e096f64e87cc
Summary:
Minor changes to the `Animated` examples index module to make the static typing a bit more intuitive.
Changelog:
[Internal]
Reviewed By: kacieb
Differential Revision: D28799742
fbshipit-source-id: f798631081538e79fc58377105db4e47b9728843
Summary:
Minor reorganization of `AnimatedGratuitousApp` to be a separate top-level directory in `examples/`, like `Animated`.
Changelog:
[Internal]
Reviewed By: kacieb
Differential Revision: D28799737
fbshipit-source-id: b0329e420d6eae912e91d0d74b68ac299c9bd9f3
Nick Gerleman
Jakub Piasecki
Tim Yung
Shawn Dempsey
Nishan
Jorge Cabiedes Acosta
Joe Vilches
Biki-das
Dmitry Rykun
Ramanpreet Nara
Xin Chen
Rubén Norte
Luna Wei
Moti Zilberman
Christoph Purrer
fabriziobertoglio1987
Riccardo Cipolleschi
Nicola Corti
Nick Gerleman
Genki Kondo
Robbie Coomber
Kacie Bawiec
Moti Zilberman
Vincent Riemer
Luna Wei
Andres Suarez
Andrei Shikov
Tim Yung
