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:
## Changelog
make RNTesterApp take a `customBackButton` prop to enable overriding whether to display back button and the look
by default, only ios platform has a back button, and android app relies on back button on navigation bar that comes with platform
[Internal]
Reviewed By: christophpurrer
Differential Revision: D58218208
fbshipit-source-id: 63a47390cc6d3de057b92a3c522c1b00d942c69d
Summary:
tsia. Done to allow for easier interaction of the examples, especially those with long descriptions
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D57278607
fbshipit-source-id: f0a1d06c97c019fe177c8b9e51c3ca0ae12caef5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43599
iOS E2E tests non-deterministic rendering happens around examples with a border set to `StyleSheet.hairlineWidth`. That value has special subpixel math, that doesn't seem to render consistently on iOS (this is its own bug).
To unblock adding some new E2E iOS TextInput tests, this removes usage of `hairlineWidth` in styles, and more generally, tries to unify TextInput styles in the examples.
This will break a whole bunch of RNTester Jest E2E baselines on different apps, which I will update from land-time runs or after continuous builds are available for different endpoints.
Changelog: [Internal]
Reviewed By: fkgozali
Differential Revision: D55213090
fbshipit-source-id: 6d81b9355adc538a3ade6f50ef93c3ca08782ae7
Summary:
This PR fixes issue in `RNTester` causing labels and image background to not be visible in dark mode in `SnapshotExample`
It also fixes issue with description in `Header` not being visible in other components examples when using dark mode
Before & After
<img width="505" alt="image" src="https://github.com/facebook/react-native/assets/56474758/ce87df69-4b79-48a0-b9be-4a7335329b78">
## Changelog:
[INTERNAL] [FIXED] - Fix dark mode in SnapshotExample in RNTester
Pull Request resolved: https://github.com/facebook/react-native/pull/41222
Test Plan:
1. Launch `RNTester` with dark mode enabled
2. Open `Snapshot / Screenshot` example
3. All labels should be visible, image background should have white color
Reviewed By: cortinico
Differential Revision: D52685754
Pulled By: NickGerleman
fbshipit-source-id: 72f79be45d9c65e307553832592563461a64ff1d
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/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:
## Summary:
The modal tester in the sandbox was lacking a bit of functionality that the Modal component exposes -- especially on Android. This change revamps the Modal page to more-closely resemble the API documentation by exposing all of the options, and annotating which ones are reserved for the different platforms.
Additionally, this change puts the modal controls into the created modal itself. This allows the user to more-easily test what happens if the props change during the lifespan of the modal (related PR: https://github.com/facebook/react-native/issues/38947).
## 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 -->
[INTERNAL] [CHANGED] - Revamp Modal tester in rn-tester
Pull Request resolved: https://github.com/facebook/react-native/pull/38977
Test Plan:
| Control page | Modal (with `transparent=true` on Android) |
|:--:|:--:|
|  |  |
Reviewed By: yungsters
Differential Revision: D48414351
Pulled By: NickGerleman
fbshipit-source-id: 54bece639f4c64132dfb21c54c91d46972f5a335
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:
`maintainVisibleContentPosition` is broken when using virtualization and the new content pushes visible content outside its "window". This can be reproduced in the example from this diff. When using a large page size it will always push visible content outside of the list "window" which will cause currently visible views to be unmounted so the implementation of `maintainVisibleContentPosition` can't adjust the content inset since the visible views no longer exist.
The first illustration shows the working case, when the new content doesn't push visible content outside the window. The red box represents the window, all views outside the box are not mounted, which means the native implementation of `maintainVisibleContentPosition` has no way to know it exists. In that case the first visible view is https://github.com/facebook/react-native/issues/2, after new content is added https://github.com/facebook/react-native/issues/2 is still inside the window so there's not problem adjusting content offset to maintain position. As you can see Step 1 and 3 result in the same position for all initial views.
The second illustation shows the broken case, when new content is added and pushes the first visible view outside the window. As you can see in step 2 the view https://github.com/facebook/react-native/issues/2 is no longer rendered so there's no way to maintain its position.
#### Illustration 1
#### Illustration 2
To fix `maintainVisibleContentPosition` when using `VirtualizedList` we need to make sure the visible items stay rendered when new items are added at the start of the list.
In order to do that we need to do the following:
- Detect new items that will cause content to be adjusted
- Add cells to render mask so that previously visible cells stay rendered
- Ignore certain updates while scroll metrics are invalid
### Detect new items that will cause content to be adjusted
The goal here is to know that scroll position will be updated natively by the `maintainVisibleContentPosition` implementation. The problem is that the native code uses layout heuristics which are not easily available to JS to do so. In order to approximate the native heuristic we can assume that if new items are added at the start of the list, it will cause `maintainVisibleContentPosition` to be triggered. This simplifies JS logic a lot as we don't have to track visible items. In the worst case if for some reason our JS heuristic is wrong, it will cause extra cells to be rendered until the next scroll event, or content position will not be maintained (what happens all the time currently). I think this is a good compromise between complexity and accuracy.
We need to find how many items have been added before the first one. To do that we save the key of the first item in state `firstItemKey`. When data changes we can find the index of `firstItemKey` in the new data and that will be the amount we need to adjust the window state by.
Note that this means that keys need to be stable, and using index won't work.
### Add cells to render mask so that previously visible cells stay rendered
Once we have the adjusted number we can save this in a new state value `maintainVisibleContentPositionAdjustment` and add the adjusted cells to the render mask.
This state is then cleared when we receive updated scroll metrics, once the native implementation is done adding the new items and adjusting the content offset.
This value is also only set when `maintainVisibleContentPosition` is set so this makes sure this maintains the currently behavior when that prop is not set.
### Ignore certain updates while scroll metrics are invalid
While the `maintainVisibleContentPositionAdjustment` state is set we know that the current scroll metrics are invalid since they will be updated in the native `ScrollView` implementation. In that case we want to prevent certain code from running.
One example is `onStartReached` that will be called incorrectly while we are waiting for updated scroll metrics.
## Changelog
[General] [Fixed] - Fix VirtualizedList with maintainVisibleContentPosition
Pull Request resolved: https://github.com/facebook/react-native/pull/35993
Test Plan:
Added bidirectional paging to RN tester FlatList example. Note that for this to work RN tester need to be run using old architecture on iOS, to use new architecture it requires https://github.com/facebook/react-native/pull/35319
Using debug mode we can see that virtualization is still working properly, and content position is being maintained.
https://user-images.githubusercontent.com/2677334/163294404-e2eeae5b-e079-4dba-8664-ad280c171ae6.mov
Reviewed By: yungsters
Differential Revision: D45294060
Pulled By: NickGerleman
fbshipit-source-id: 8e5228318886aa75da6ae397f74d1801d40295e8
Summary:
Right now RNTestePage either adds a large spacer to the end of content, unless `noSpacer` is added. But with `noSpacer`, scrolling content may not be reachable because we are putting padding on the wrong container.
This fixes that and removes a few cases where we had multi hundred px empty space in favor of uniformly taking up the parent, and a 10px padding. This also moves the constant margin at the top of RNTesterBlock to the container, so that in the E2E container we can save the 30px.
Changelog:
[Internal]
Reviewed By: javache
Differential Revision: D44197303
fbshipit-source-id: 8dc67f3588bc28316e2fee8d25a0bc59995f1728
Summary:
Faacebook:
For both Paper and Fabric, at least on Android, RNTester TextInputs using the default style render as collapsed. This seems to be an interaction between the TextInputs being set as `flex: 1`, and being rooted in a ScrollView.
The issue still seems to happen when the outer container is large enough, but non-scrolling, which seems like a layout bug. But we can for now root the E2E container in a ScrollView (which we probably want to do anyway to allow long examples).
Changelog:
[Internal]
Reviewed By: mdvacca
Differential Revision: D43714494
fbshipit-source-id: ef1f8929ceeaef0d2c87262cf0446e0c6644cc9d
Summary:
This adds a series of examples for TextInput styles to screenshot test, specifically the ones which are projected to Android as spans. This will be used in refactoring to verify we do not change visual output.
Changelog:
[Internal][Added] - Add "Text Styles" TextInput Example
Reviewed By: cortinico
Differential Revision: D43158004
fbshipit-source-id: adaecf0e37941e66e280db282e2631a95b08b27a
Summary:
Add explicit annotations to underconstrained implicit instantiations as required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predictable.
This diff adds `any` or `$FlowFixMe` in cases where more precise types could not be determined.
Details:
- Codemod script: `.facebook/flowd codemod annotate-implicit-instantiations ../../xplat/js --default-any --write`
- Local Type Inference announcement: [post](https://fb.workplace.com/groups/flowlang/posts/788206301785035)
- Support group: [Flow Support](https://fb.workplace.com/groups/flow)
drop-conflicts
bypass-lint
Reviewed By: SamChou19815
Differential Revision: D41226960
fbshipit-source-id: e5e3edbb1aed849f90cc683a4d416a9a2f8f3a19
Summary:
This was left over from an old codemod.
Changelog: [Internal]
Reviewed By: christophpurrer
Differential Revision: D41154548
fbshipit-source-id: 0b5fb3e78491b66ebaf13555f80e0265a25dc7d8
Summary:
Now that [exact_empty_objects has been enabled](https://fb.workplace.com/groups/flowlang/posts/1092665251339137), we can codemod `{...null}` to `{}` - they are now equivalent.
1) Run my one-off jscodeshift codemod
2) `scripts/flow/tool update-suppressions .` (as some suppressions move around due to the change)
drop-conflicts
Reviewed By: bradzacher
Differential Revision: D37834078
fbshipit-source-id: 6bf4913910e5597e5dd9d5161cd35deece6a7581
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predictable.
Reviewed By: bradzacher
Differential Revision: D37388949
fbshipit-source-id: cdcbc98035ce9b6994842005ea46df42de54f9b8
Summary:
We are working on making the empty object literal `{}` have the type `{}` - i.e. exact empty object - rather than being unsealed.
Some manual fixes, in particular to React Native code, which is used and can be synced to other repos (e.g. WWW).
With these changes, error diff in Xplat is down to ~1990 errors
Note that after I roll out `exact_empty_objects`, I'll codemod all the `{...null}` (the only way to get an exact empty object currently) back to `{}`
Changelog: [Internal]
Reviewed By: SamChou19815
Differential Revision: D36142838
fbshipit-source-id: 054caf370db230f42a4c5f5706c88979ef246537
Summary:
This diff breaks the RNTester app at runtime and it prevents us from cutting RN 0.69.
Original commit changeset: a879787d8683
Original Phabricator Diff: D35435562 (https://github.com/facebook/react-native/commit/f4c4f446e4365c6cf7adf5db21d3d746b38aa3e2)
## Changelog
[General][Fixed] - Revert change which breaks RNTester
Reviewed By: cortinico, kacieb
Differential Revision: D35936298
fbshipit-source-id: c4ec92002fde9c1de691bcda17ebc5d0747914f6
Summary:
Changelog:
[**General**][**Removed**] - Removed AsyncStorage usage from RNTester
As part of the "Lean Core" efforts (see https://github.com/react-native-community/discussions-and-proposals/issues/6) to remove outdated and/or unused components (status: https://gist.github.com/Simek/88a9f1a014a47c37f4fce3738864d2e1), this diff removes usage of the deprecated AsyncStorage API from RNTester.
RNTester is intended as a reference to showcase various components and APIs. The implications of the replacement of AsyncStorage in RNTester with in-memory management of state is a tradeoff of persistance to a lighter weight implementation and user predictable behavior.
1. Removed AsyncStorage from rn-tester
- removed Navigation and bookmark persisting from reducer
- moved JS Stalls and tracking to application state with context and reducer
2. Fixed InternalSettings Example bugs
Reviewed By: lunaleaps
Differential Revision: D35435562
fbshipit-source-id: a879787d8683a1c452e5b6b75a9e01f3ceadfe5d
Summary:
This diff runs the codemod to add type annotations to function parameters in preparation for Flow's local type inference (LTI) project. I ran the codemod over xplat/js and reverted any files that had flow errors in them. See the list of commands run to see the regeneration of various files.
Changelog:
[Internal][Changed] - Added type annotations
Reviewed By: yungsters
Differential Revision: D32075270
fbshipit-source-id: 6a9cd85aab120b4d9e690bac142a415525dbf298
Summary: Changelog: [Internal] Fix up basic styling of dark mode for examples. Individual examples still may be broken and will be fixed up individually
Reviewed By: yungsters
Differential Revision: D31710790
fbshipit-source-id: 6ca4fb8a6238f38ff484ec91518057b243ba1d7b
Summary: Changelog: [Internal] - Add an example to demo all the transform properties.
Reviewed By: charlesbdudley
Differential Revision: D29865790
fbshipit-source-id: 79174457071de8fca9b0aab8bf8dcc543ea9a0a3
Summary:
- Update `RNTesterNavBar` to be positioned relatively to allow for scroll views to not be clipped
- Add EasingExample with example animations taken from https://reactnative.dev/docs/easing
Changelog: [Internal]
Reviewed By: lunaleaps
Differential Revision: D29744160
fbshipit-source-id: d0e2112769d74dd34e11477f1d3b1f8f0ffebc03
Summary:
Changelog: [Internal] - Update Animation examples to toggle useNativeDriver
There are issues when we toggle the native driver on and off. Where once off, the animations don't seem to update anymore, until we turn nativeDriver back on. See videos in testplan
Reviewed By: yungsters
Differential Revision: D29774939
fbshipit-source-id: cf6d70c1b574a87bb803510196dfb273b36de5e1
Shawn Dempsey
Jorge Cabiedes Acosta
Nick Gerleman
Sam Zhou
Zeya Peng
Fabrizio Cucci
Gijs Weterings
zhongwuzw
Kacper Rozniata
Kevin Gozali
Moti Zilberman
Evan Charlton
Luna Wei
Rubén Norte
Pranav Yadav
Janic Duplessis
Mike Vitousek
Pieter De Baets
Christoph Purrer
Ruslan Lesiutin
Pieter Vanderwerff
George Zahariev
Sam Zhou
Riccardo Cipolleschi
Luna Wei
J.T. Yim
Andres Suarez
Evan Yeung
Tim Yung
Marshall Roch
fabriziobertoglio1987
Charles Dudley
