Summary:
Replaces `fbjs/performanceNow` call sites in React Native with `performance.now`.
We did not originally polyfill this in `InitializeCore`, but now we do (and back it with a proper `nativePerformanceNow` implementation). Also, added the missing polyfill to our Jest setup.
Changelog:
[Internal]
Reviewed By: cpojer
Differential Revision: D22445948
fbshipit-source-id: dcfd9867c050617f6e2a3d0a1eb6f48a44771dda
Summary:
The initialScrollIndex in VirtualizedList contains a performance optimization to start rendering the list at the index provided.
ContentOffset does not contain this optimization and there is currently no way to specify the first item in the list to start rendering without contentOffset being ignored.
This change makes it so that if both initialScrollIndex and ContentOffset are provided, the list will start rendering at the initialScrollIndex but ContentOffset will still be used to set the scroll position.
initialScrollIndex functionality will remain the same if ContentOffset is not provided.
Changelog: [Changed] VirtualizedList will use contentOffset for scroll position instead of initialScrollIndex if both are provided
Reviewed By: sahrens
Differential Revision: D21980172
fbshipit-source-id: 36d2d2bc360845ef02329d2b95a2cf14b91c2b0b
Summary:
This has caused SEVs because the warning has gone unnoticed, so upgrading to error which should be much harder to miss or ignore.
https://fb.workplace.com/groups/rn.core/permalink/2680043542227367/
# Changelog
[Internal] update nested VList warning to error
Reviewed By: TheSavior
Differential Revision: D21945364
fbshipit-source-id: 88a9a9ab0b51e0afcf9b25be9854f65a61f419af
Summary:
Add a `console.warn()` call when calling `_scrollRef.scrollTo`, because `scrollTo` is not guaranteed to exist on `_scrollRef`.
Context:
`VirtualizedList` holds `_scrollRef`, which is usually a reference to a `ScrollView` component. However, there are several cases where it holds a `View` or other type of component instead.
A custom component can be passed in to `renderScrollComponent`, and then `_scrollRef` will point to that custom component. Additionally, if two VirtualizedLists are nested with the same orientation, `_defaultRenderScrollComponent` will return a View instead of a ScrollView.
Due to these possibilities, `_scrollRef` is not guaranteed to have a `scrollTo` method.
Changelog: [General] [Added] - Add warning when scrollRef does not have a scrollTo method
Reviewed By: JoshuaGross, TheSavior
Differential Revision: D21386842
fbshipit-source-id: 01e167e0ae0edea8f29853e8b242ce88a5103b49
Summary:
Removes `PropTypes` as a dependency of `VirtualizedList` by no longer validating the return value of `getItemLayout`.
Changelog: [Internal]
Reviewed By: TheSavior, cpojer
Differential Revision: D21370890
fbshipit-source-id: 966db3557b714987aa91179c7654a5ebf27818ad
Summary:
I refined the error message of scrollToIndex.
When I used scrollToIndex with `index:0` and data that length is 0, I met the odd error message `Invariant Violation scrollToIndex out of range: requested index 0 but maximum is -1`.
Next, I thought that scrollToIndex with `index:-1` meant scrollToTop without checking data length. I met `Invariant Violation: scrollToIndex out of range: requested index -1 but maximum is -1`
Finally, I wondered what will happen to use scrollToIndex with `index:-1` and data that length is `5`. The result is `Invariant Violation: scrollToIndex out of range: requested index -1 but maximum is 5`
The above error messages will confuse us. I clarified the boudaries and separated the error messages
## Changelog
[General] [Fixed] - Clarified the boundaries in error message of scrollToIndex
Pull Request resolved: https://github.com/facebook/react-native/pull/28464
Test Plan:
I added 3 test cases to cover the new error messages for VirtualizedList.
Run `yarn test` and confirm it passes.
Reviewed By: cpojer
Differential Revision: D21140133
Pulled By: TheSavior
fbshipit-source-id: 9a7a704f7ec599d833d2ed3ca2be059d950539b5
Summary:
onEndReached can be triggered twice when more items are added to the end of the list. This change makes it so that a second call to onEndReached won't happen until the user scrolls down to the new end of the list.
Changelog:
[General] [Fixed] - Fix double call to onEndReached in VirtualizedList
Reviewed By: sahrens
Differential Revision: D20066740
fbshipit-source-id: 129d7ae6bfd241eeea18fe0bb12b82be67735874
Summary:
Have ScrollView use forwardRef so that the host component methods like `measure` and `measureLayout` are available without having to call `getNativeScrollRef`. Instead, you can use `<ScrollView ref={myRef} />` and directly call all methods of ScrollView and host components on `myRef`.
Previous usage:
```
const myRef = React.createRef<React.ElementRef<typeof ScrollView>>();
<ScrollView ref={myRef} />
const innerViewRef = myRef.current.getNativeScrollRef();
innerViewRef.measure();
```
New usage:
```
const myRef = React.createRef<React.ElementRef<typeof View>>();
<ScrollView ref={myRef} />
// now, myRef.current can be used directly as the ref
myRef.current.measure();
myRef.current.measureLayout();
// Additionally, myRef still has access to ScrollView methods
myRef.current.scrollTo(...);
```
Changes:
* Added deprecation warnings to ScrollView methods `getNativeScrollRef`, `getScrollableNode`, and `getScrollResponder`
* Added the forwardRef call to create `ForwardedScrollView` - this takes in `ref` and passes it into the class ScrollView as `scrollViewRef`.
* Forwarded the ref to the native scroll view using `setAndForwardRef`.
* Added statics onto `ForwardedScrollView` so that `ScrollView.Context` can still be accessed.
* Added type `ScrollViewImperativeMethods`, which lists the public methods of ScrollView.
* Converted all public methods of ScrollView to arrow functions. This is because they need to be bound to the forwarded ref.
* Bound all public methods of ScrollView to the forwarded ref in the `setAndForwardRef` call.
* Flow typed the final output (ForwardedScrollView) as an abstract component that takes in the props of the `ScrollView` class, and has all methods of both the inner host component (`measure`, `measureLayout`, etc) and the public methods (`scrollTo`, etc).
Changes to mockScrollView:
* Changed mockScrollView to be able to mock the function component instead of a class component
* Updated necessary tests
Changelog:
[General] [Changed] - Make ScrollView use forwardRef
Reviewed By: TheSavior
Differential Revision: D19304480
fbshipit-source-id: 6c359897526d9d5ac6bc6ab6d5f9d82bfc0d8af4
Summary:
This gets us on the latest Prettier 2.x:
https://prettier.io/blog/2020/03/21/2.0.0.html
Notably, this adds support for TypeScript 3.8,
which introduces new syntax, such as `import type`.
Reviewed By: zertosh
Differential Revision: D20636268
fbshipit-source-id: fca5833d003804333a05ba16325bbbe0e06d6c8a
Summary:
A few recent imports have explicitly added ".js" to the end of their path. This prevents Metro from resolving platform-specific JS files, e.g. "Foo.android.js" or "Foo.windows.js" instead of "Foo.js".
React Native Windows provides its own implementation of files in a few cases where stock React Native will share them between Android and iOS. We hope to reduce/eliminate these long term, but requiring explicit ".js" files currently breaks us in a couple of places where we have custom implementations.
This change is a quick regex replace of ES6 and CommonJS imports in 'Libraries/" to eliminate ".js".
## Changelog
[General] [Fixed] - Do not explicitly include ".js" in Library imports
Pull Request resolved: https://github.com/facebook/react-native/pull/28311
Test Plan: I haven't done any manual validation of this, but `flow-check` should catch any issues with this during CI.
Reviewed By: cpojer
Differential Revision: D20486466
Pulled By: TheSavior
fbshipit-source-id: 31e1ccc307967417d7d09c34c859f0b2b69eac84
Summary:
When any list cell that may contain nested VirtualizedLists is laid out, it's possible that the offset of any child lists relative to the outermost list has changed. We need to tell these children to re-measure themselves relative to that outermost list, so that their viewability calculations are correct.
We already do this for regular list cells -- we just need to extend that logic to any child lists that may live in the ListFooterComponent.
Changelog: [General] [Fixed] - Fix viewability calculations for nested VirtualizedLists inside of a parent list's FooterComponent
Differential Revision: D20310961
fbshipit-source-id: 4bfcfb95c87329f2ee337d5499e5c7162ba692e8
Summary:
We will soon be enforcing that flow suppressions will only apply when on an error's primary location ([post](https://fb.workplace.com/groups/179614562644215/permalink/559286354677032/)). This diff uses the codemod created in D20008770 to move all suppression comments to their primary locations in the `xplat/js` flow root, and deletes suppression comments that are not on any primary locations.
This diff was generated with:
```
~/fbsource/fbcode/flow/packages/flow-dev-tools/bin/tool suppression-primary-locations --json-file ~/www/errors.json ~/fbsource/xplat/js
hg st -n | xargs grep -l -P '@(partially-)?generated' | xargs hg revert
hg st -n | xargs grep -l 'format' | xargs prettier --write
```
Changelog: [Internal]
bypass-lint
Reviewed By: dsainati1
Differential Revision: D20122544
fbshipit-source-id: d94e409aadb18bb399a1ddbf9f3f2494fe4fb54c
Summary:
We recently updated React Native's docs site to have its own domain reactnative.dev and needed to update the URLs in the source code
CHANGELOG:
[INTERNAL]
Reviewed By: hramos
Differential Revision: D20072842
fbshipit-source-id: 1970d9214c872a6e7abf697d99f8f5360b3b308e
Summary:
This diff regenerates all Jest inline snapshots (`expect().toMatchInlineSnapshot()`) now that we use Jest 24.9.0 which fixes a longstanding [formatting instability bug](https://github.com/facebook/jest/issues/8424).
This is strictly a formatting change.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D19684238
fbshipit-source-id: 77c1e5fe9d2dfef85dffdcc00056fb439d7d7f84
Summary:
## Context
When a `VirtualizedList` contains a cell which itself contains more than one `VirtualizedList` of the same orientation as the parent list, we log an error if sibling lists in a cell don't have unique `listKey`s (e.g. when the `listKey` prop isn't explicitly set). In release builds, this error does not have a component stack - nor a useful call stack - so it can be hard to track down the true source of the error in complex applications.
## This diff
Here, in addition to the generic error message, we also print the `listKey`, `cellKey` and orientation of each `VirtualizedList` in the hierarchy, from the child list upwards. This is done without significant overhead, by reusing the already-in-place context that `VirtualizedList`s use to manage nesting.
The assumption is that common strategies for deriving `listKey`s and `cellKey`s will make it possible to identify at least some lists in the hierarchy in common cases, and therefore help narrow down the search space even when component stacks are not available.
## Example
(See code in unit test)
```
A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.
VirtualizedList trace:
Child (horizontal):
listKey: level2
cellKey: cell0
Parent (horizontal):
listKey: level1
cellKey: cell0
Parent (vertical):
listKey: level0
cellKey: rootList
```
Changelog: [Internal]
Reviewed By: TheSavior
Differential Revision: D19600366
fbshipit-source-id: 73f29507ec58a6a3f9b3f6b174a32b21dcd237a1
Summary:
Fixes https://github.com/facebook/react-native/issues/16067
The issue is due to a race between `onLayout` and `onContentSizeChange`, which in general should be fine because there is no expectation of ordering between the two, and only causes issues with certain configurations.
The bug can be triggered if `initialNumToRender` is smaller than needed to fill past the `onEndReachedThreshold` (say the default, 10, is only 580px tall, but it takes 15 to reach the threshold). This will cause an incrementally render of more items to try and fill the viewport. The problem is that if the `onLayout` comes back before the first `onContentSizeChange`, it will first do the state increment to render 20 items and then the stale `onContentSizeChange` callback from 10 items will fire and we'll think that the content size for 20 items is 580px when in fact it's 1160px (which is past the threshold). If those 20 items are also all of our available data, then we'll call `onEndReached` because we think we've rendered everything and are still within the `onEndReachedThreshold`.
The fundamental problem here is the system getting confused when a stale async `onContentSizeChange` comes in after increasing `state.last`. I wish there was a concrete timeframe, but Fabric will give us more flexibility to do things synchronously so hopefully we can avoid class of issues once that roles out.
The fix here simply adds a check to make sure `contentLength` has been set before adjusting the render window so it's not possible to increase the window size before the initial `onContentSizeChange` callback fires.
For completeness, there are a few user-code workarounds to avoid this issue entirely:
1) Provide the `getItemLayout` prop so the list doesn't have to rely on async layout data (you should do this whenever possible anyway for better perf). e.g. for the original snack example, you can just add `getItemLayout={(d, index) => ({length: 58, offset: 58 * index, index})}` since all the rows are height 58 and the issue will no longer repro. Note this is fragile and must be kept in sync with UI changes, a11y font scaling, etc - a more robust approach could be to render a single representative row offscreen and measure it with `onLayout` then use that value.
2) If `getItemLayout` is not feasible to compute for your UI, increase `initialNumToRender` to cover the `onEndReachedThreshold`.
3) And/or add your own logic to protect against extra calls to `onEndReached` as others have suggested.
Changelog:
[General][Fixed] - Fix sporadic issue with onEndReached called on load when not needed
# Test Plan
Adds a new jest test that fails without this fix and succeeds with it.
Reviewed By: TheSavior
Differential Revision: D18966721
fbshipit-source-id: de05d9f072e24a2faf351e7f5d60578a31def996
Summary:
Add a method to get the underlying host component of `FlatList`. Fix flow types in `FlatList` and `VirtualizedList`. Add test cases to test the behavior of the new function in all cases.
Changelog: [General] [Added] - Add getNativeScrollRef method to FlatList component
Reviewed By: TheSavior
Differential Revision: D18302202
fbshipit-source-id: 7005a2bc1dab207434be3f1f4d8fde0b11b3bb4d
Summary:
We are rolling out exact-by-default syntax to xplat/js.
I had to manually move around some comments to preserve proper placement.
Changelog: [Internal]
Reviewed By: jbrown215
Differential Revision: D18633611
fbshipit-source-id: 48f7468dcc55b1d00985419d035a61c6820b3abe
Summary:
Generating this diff was difficult. We _will_ fix the issues with jscodeshift, but i don't want to block the syntax change on that.
To get this diff, I first codemodded all of xplat to use exact-by-default. Then i turned on implicit-inexact-object:error enforcement to get a list of errors showing places that violated the lint. With that, I used this to generate a list of `sed` commands to add `...`:
```
flow --json | jq '.errors | .[] | .message | .[] | .loc | {source, "line": .end."line", "column": .end."column"} | "\(.column),\(.line),\(.source)"' | sort -n -r | sed 's/"//g' | while read -r line; do echo $line; awk -F',' "{ print \"sed -i '\"\$2\"s/./...&/\"\$1\"' \" \$3 }"; done
```
Then I ran prettier, reverted generated files, and manually fixed up suppressions that got messed up.
Changelog: [Internal]
Reviewed By: gkz
Differential Revision: D18516431
fbshipit-source-id: 6cf940dce411fb179e7ebaff764bd5113a07989f
Summary:
still some generated files in www that need to land before we can release 0.111 here.
drop-conflicts
Changelog: [Internal]
(Note: this ignores all push blocking failures!)
Reviewed By: dsainati1
Differential Revision: D18278838
fbshipit-source-id: b20c3fefb3aab7c5fb614b33d846c7548184f49a
Summary:
Cleans up all the Jest tests to minimize spurious console output.
Changelog:
[Internal]
Reviewed By: TheSavior
Differential Revision: D18289690
fbshipit-source-id: cdcecca879b3b85d3dccf9e0ab617ea7dc1e0777
Summary: These types are more accurate
Reviewed By: lunaleaps
Differential Revision: D17862010
fbshipit-source-id: 84dfcade35c21b7be49db46ae021819dda020c98
Summary:
These components had props that were poorly typed and let many things through. This diff tightens that all up.
The main difference in this diff is using `{...BaseProps, ...LocalProps }` instead of `BaseProps & LocalProps`.
The majority of the changes in this diff is reducing duplicated prop definitions. For example, FlatList defines a bunch of props that VirtualizedList also defines. Since FlatList extends those props, using spread now means that FlatList can't duplicate those props. So I've moved the definitions to the correct base file and deleted the duplicates.
Changelog:
[Internal]
Reviewed By: lunaleaps
Differential Revision: D17824459
fbshipit-source-id: 089ac4c58c3c9f70a9f28e517f2e9ecd8aab1a50
Summary:
Data doesn't have to be an array. data and getItemCount can take any arbitrarty data, as long as they expect the same thing. This should probably be parameterized with a generic but that is an improvement for another day.
It is worth noting the comment explanation for the defintion of `data` and `getItem` in VirtualizedList: https://fburl.com/u7ldzaa8
```
/**
* The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
* getItem, getItemCount, and keyExtractor to handle any type of index-based data.
*/
data?: any,
/**
* A generic accessor for extracting an item from any sort of data blob.
*/
getItem: (data: any, index: number) => ?Item,
/**
* Determines how many items are in the data blob.
*/
getItemCount: (data: any) => number,
```
Changelog:
[Internal]
Reviewed By: lunaleaps
Differential Revision: D17863130
fbshipit-source-id: 40a1d57e3b4dd1e38c84d5907fe88f6b665287ae
Summary:
This is a tighter type that matches the actual prop as defined on line 100
Changelog:
[Internal]
Reviewed By: lunaleaps
Differential Revision: D17863133
fbshipit-source-id: 97f966ff13aa2ce36ef936a9a154fdd137191c6b
Summary: This change surprisingly fixes a Flow error because these types weren't compatible with the prop types these were passed into that had `info: `. Flow passes now though!
Reviewed By: lunaleaps
Differential Revision: D17863131
fbshipit-source-id: 094f1d97e96686d16bb69732b8a4b319492b5780
Summary: These comments existed for other components that had these props. Putting them here as this is the proper base of those other components. Also adding `ItemSeparatorComponent` as it is used in this component.
Reviewed By: lunaleaps
Differential Revision: D17860495
fbshipit-source-id: b7b60058d37e90699b28419af27d488bd46d3ebd
Summary:
`?React.Element<any>` allows passing in `undefined`, an invalid value to render into a React component. Changing these types to be `null | React.Element<any>`.
The issues that this caught were fixed in a previous diff.
Reviewed By: lunaleaps
Differential Revision: D17859220
fbshipit-source-id: 71438cb357b44bca0bf3437aea99ece99a616f7d
Summary:
Moving this to the class lets the first argument be typed as `Props<SectionT>` instead of `Props<SectionBase<any>>`. This is consistent with the structure of FlatList
Changelog:
[Internal]
Reviewed By: zackargyle
Differential Revision: D17841258
fbshipit-source-id: 3e0e6c2f6b21cbce0e662647cb43a012e062c4bc
Summary:
These props are unusupported by the component they were being passed to.
Changelog:
[Internal]
Reviewed By: zackargyle
Differential Revision: D17839765
fbshipit-source-id: 13c80a07da2026b61070ffc93f26194b979ee8fc
Summary:
Fixing up some of the FlowFixMes in VirtualizedList
Changelog:
[Internal]
Reviewed By: zackargyle
Differential Revision: D17839611
fbshipit-source-id: c763a799efca63fd7110cfaed87afde80995b8aa
Summary: FlatList and VirtualizedList were typing this value as any instead of using the actual type from ScrollView. I started with that change and then fixed the type to solve the other callsites in the codebase.
Reviewed By: zackargyle
Differential Revision: D17089934
fbshipit-source-id: bfc22cec9993904d779cad37b1de7cb3c0484d2c
Summary:
After some thought, we decided we don't need the flexibility of
separate horizontal and vertical props - it would be much nicer
to just have a single prop for the edge length and then the native
code can enable the booleans as appropriate.
Original PR: https://github.com/facebook/react-native/pull/26163
Original commit changeset: f72a9a890d90
Reviewed By: TheSavior
Differential Revision: D16997468
fbshipit-source-id: 7973262287a7ec2cee5957f8dc1806a0f28c1432
Summary:
Flatlist's `getItemCount` function is frequently called internally by VirtualizedList.
As with other functions, we can remove unnecessary operations with the `numColumns` value.
This makes it much more efficient.
## Changelog
[Internal] [Changed] - Better implementation for getItemCount on FlatList
Pull Request resolved: https://github.com/facebook/react-native/pull/26164
Test Plan: Not required
Differential Revision: D16989335
Pulled By: sahrens
fbshipit-source-id: b0075b2c2aeb9b9d7644c8bb18702a7cca8a4dce
Summary:
Motivation: when you receive error like `scrollToIndex out of range: 5 vs -1` it's not immediately clear if I requested 5 or -1. This will make the error a little easier to understand.
## Changelog
not needed
Pull Request resolved: https://github.com/facebook/react-native/pull/25973
Test Plan: not needed, tests must pass
Differential Revision: D16708522
Pulled By: osdnk
fbshipit-source-id: 8dfcbd95ff0f42805dbe32cd57969a93aea55add
Tim Yung
Mark Verlingieri
Spencer Ahrens
Kacie Bawiec
Daiki Ihara
George Zahariev
Martin Sherburn
Michael Bolin
Nick Gerleman
Logan Daniels
Hans Halverson
Rachel Nabors
Moti Zilberman
Jordan Brown
david
Panagiotis Vekris
Andres Suarez
Eli White
Mike Vitousek
André Krüger
ifsnow
Vojtech Novak
