mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Nick Gerleman
30db0be33a
Summary: This diff is part of an overall stack, meant to fix incorrect usage of `setState()` in `VirtualizedList`, which triggers new invariant checks added in `VirtualizedList_EXPERIMENTAL`. See the stack summary below for more information on the broader change. ## Diff Summary This forwards props to `__getFrameMetricsApprox()` and `_getFrameMetrics()` . This is called in a variery of places, so we need to pass `FrameMetricProps` through more places, and update public/test usage. ## Stack Summary `VirtualizedList`'s component state is a set of cells to render. This state is set via the `setState()` class component API. The main "tick" function `VirtualizedList._updateCellsToRender()` calculates this new state using a combination of the current component state, and instance-local state like maps, measurement caches, etc. From: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous --- > React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. For example, this code may fail to update the counter: ``` // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); ``` > To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument: ``` // Correct this.setState((state, props) => ({ counter: state.counter + props.increment })); ``` --- `_updateCellsToRender()` transitively calls many functions which will read directly from `this.props` or `this.state` instead of the value passed by the state updater. This intermittently fires invariant violations, when there is a mismatch. This diff migrates all usages of `props` and `state` during state update to the values provied in `setState()`. To prevent future mismatch, and to provide better clarity on when it is safe to use `this.props`, `this.state`, I overrode `setState` to fire an invariant violation if it is accessed when it is unsafe to: {F756963772} Changelog: [Internal][Fixed] - Thread props to __getFrameMetrics() Reviewed By: genkikondo Differential Revision: D38293591 fbshipit-source-id: c1499d722b69eb4b5953124ee8b8c3d15e912d93
445 lines
12 KiB
JavaScript
445 lines
12 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @emails oncall+react_native
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const ViewabilityHelper = require('../ViewabilityHelper');
|
|
|
|
let rowFrames;
|
|
let data;
|
|
const props = {
|
|
data,
|
|
getItemCount: () => data.length,
|
|
};
|
|
function getFrameMetrics(index: number) {
|
|
const frame = rowFrames[data[index].key];
|
|
return {length: frame.height, offset: frame.y};
|
|
}
|
|
function createViewToken(index: number, isViewable: boolean) {
|
|
return {key: data[index].key, isViewable};
|
|
}
|
|
|
|
describe('computeViewableItems', function () {
|
|
it('returns all 4 entirely visible rows as viewable', function () {
|
|
const helper = new ViewabilityHelper({
|
|
viewAreaCoveragePercentThreshold: 50,
|
|
});
|
|
rowFrames = {
|
|
a: {y: 0, height: 50},
|
|
b: {y: 50, height: 50},
|
|
c: {y: 100, height: 50},
|
|
d: {y: 150, height: 50},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
|
expect(helper.computeViewableItems(props, 0, 200, getFrameMetrics)).toEqual(
|
|
[0, 1, 2, 3],
|
|
);
|
|
});
|
|
|
|
it('returns top 2 rows as viewable (1. entirely visible and 2. majority)', function () {
|
|
const helper = new ViewabilityHelper({
|
|
viewAreaCoveragePercentThreshold: 50,
|
|
});
|
|
rowFrames = {
|
|
a: {y: 0, height: 50},
|
|
b: {y: 50, height: 150},
|
|
c: {y: 200, height: 50},
|
|
d: {y: 250, height: 50},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
|
expect(helper.computeViewableItems(props, 0, 200, getFrameMetrics)).toEqual(
|
|
[0, 1],
|
|
);
|
|
});
|
|
|
|
it('returns only 2nd row as viewable (majority)', function () {
|
|
const helper = new ViewabilityHelper({
|
|
viewAreaCoveragePercentThreshold: 50,
|
|
});
|
|
rowFrames = {
|
|
a: {y: 0, height: 50},
|
|
b: {y: 50, height: 150},
|
|
c: {y: 200, height: 50},
|
|
d: {y: 250, height: 50},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
|
expect(
|
|
helper.computeViewableItems(props, 25, 200, getFrameMetrics),
|
|
).toEqual([1]);
|
|
});
|
|
|
|
it('handles empty input', function () {
|
|
const helper = new ViewabilityHelper({
|
|
viewAreaCoveragePercentThreshold: 50,
|
|
});
|
|
rowFrames = {};
|
|
data = [];
|
|
expect(helper.computeViewableItems(props, 0, 200, getFrameMetrics)).toEqual(
|
|
[],
|
|
);
|
|
});
|
|
|
|
it('handles different view area coverage percent thresholds', function () {
|
|
rowFrames = {
|
|
a: {y: 0, height: 50},
|
|
b: {y: 50, height: 150},
|
|
c: {y: 200, height: 500},
|
|
d: {y: 700, height: 50},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
|
|
|
let helper = new ViewabilityHelper({viewAreaCoveragePercentThreshold: 0});
|
|
expect(helper.computeViewableItems(props, 0, 50, getFrameMetrics)).toEqual([
|
|
0,
|
|
]);
|
|
expect(helper.computeViewableItems(props, 1, 50, getFrameMetrics)).toEqual([
|
|
0, 1,
|
|
]);
|
|
expect(
|
|
helper.computeViewableItems(props, 199, 50, getFrameMetrics),
|
|
).toEqual([1, 2]);
|
|
expect(
|
|
helper.computeViewableItems(props, 250, 50, getFrameMetrics),
|
|
).toEqual([2]);
|
|
|
|
helper = new ViewabilityHelper({viewAreaCoveragePercentThreshold: 100});
|
|
expect(helper.computeViewableItems(props, 0, 200, getFrameMetrics)).toEqual(
|
|
[0, 1],
|
|
);
|
|
expect(helper.computeViewableItems(props, 1, 200, getFrameMetrics)).toEqual(
|
|
[1],
|
|
);
|
|
expect(
|
|
helper.computeViewableItems(props, 400, 200, getFrameMetrics),
|
|
).toEqual([2]);
|
|
expect(
|
|
helper.computeViewableItems(props, 600, 200, getFrameMetrics),
|
|
).toEqual([3]);
|
|
|
|
helper = new ViewabilityHelper({viewAreaCoveragePercentThreshold: 10});
|
|
expect(
|
|
helper.computeViewableItems(props, 30, 200, getFrameMetrics),
|
|
).toEqual([0, 1, 2]);
|
|
expect(
|
|
helper.computeViewableItems(props, 31, 200, getFrameMetrics),
|
|
).toEqual([1, 2]);
|
|
});
|
|
|
|
it('handles different item visible percent thresholds', function () {
|
|
rowFrames = {
|
|
a: {y: 0, height: 50},
|
|
b: {y: 50, height: 150},
|
|
c: {y: 200, height: 50},
|
|
d: {y: 250, height: 50},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
|
let helper = new ViewabilityHelper({itemVisiblePercentThreshold: 0});
|
|
expect(helper.computeViewableItems(props, 0, 50, getFrameMetrics)).toEqual([
|
|
0,
|
|
]);
|
|
expect(helper.computeViewableItems(props, 1, 50, getFrameMetrics)).toEqual([
|
|
0, 1,
|
|
]);
|
|
|
|
helper = new ViewabilityHelper({itemVisiblePercentThreshold: 100});
|
|
expect(helper.computeViewableItems(props, 0, 250, getFrameMetrics)).toEqual(
|
|
[0, 1, 2],
|
|
);
|
|
expect(helper.computeViewableItems(props, 1, 250, getFrameMetrics)).toEqual(
|
|
[1, 2],
|
|
);
|
|
|
|
helper = new ViewabilityHelper({itemVisiblePercentThreshold: 10});
|
|
expect(
|
|
helper.computeViewableItems(props, 184, 20, getFrameMetrics),
|
|
).toEqual([1]);
|
|
expect(
|
|
helper.computeViewableItems(props, 185, 20, getFrameMetrics),
|
|
).toEqual([1, 2]);
|
|
expect(
|
|
helper.computeViewableItems(props, 186, 20, getFrameMetrics),
|
|
).toEqual([2]);
|
|
});
|
|
});
|
|
|
|
describe('onUpdate', function () {
|
|
it('returns 1 visible row as viewable then scrolls away', function () {
|
|
const helper = new ViewabilityHelper();
|
|
rowFrames = {
|
|
a: {y: 0, height: 50},
|
|
};
|
|
data = [{key: 'a'}];
|
|
const onViewableItemsChanged = jest.fn();
|
|
helper.onUpdate(
|
|
props,
|
|
0,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
|
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
|
changed: [{isViewable: true, key: 'a'}],
|
|
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
|
viewableItems: [{isViewable: true, key: 'a'}],
|
|
});
|
|
helper.onUpdate(
|
|
props,
|
|
0,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(1); // nothing changed!
|
|
helper.onUpdate(
|
|
props,
|
|
100,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(2);
|
|
expect(onViewableItemsChanged.mock.calls[1][0]).toEqual({
|
|
changed: [{isViewable: false, key: 'a'}],
|
|
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
|
viewableItems: [],
|
|
});
|
|
});
|
|
|
|
it('returns 1st visible row then 1st and 2nd then just 2nd', function () {
|
|
const helper = new ViewabilityHelper();
|
|
rowFrames = {
|
|
a: {y: 0, height: 200},
|
|
b: {y: 200, height: 200},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}];
|
|
const onViewableItemsChanged = jest.fn();
|
|
helper.onUpdate(
|
|
props,
|
|
0,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
|
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
|
changed: [{isViewable: true, key: 'a'}],
|
|
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
|
viewableItems: [{isViewable: true, key: 'a'}],
|
|
});
|
|
helper.onUpdate(
|
|
props,
|
|
100,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(2);
|
|
// Both visible with 100px overlap each
|
|
expect(onViewableItemsChanged.mock.calls[1][0]).toEqual({
|
|
changed: [{isViewable: true, key: 'b'}],
|
|
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
|
viewableItems: [
|
|
{isViewable: true, key: 'a'},
|
|
{isViewable: true, key: 'b'},
|
|
],
|
|
});
|
|
helper.onUpdate(
|
|
props,
|
|
200,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(3);
|
|
expect(onViewableItemsChanged.mock.calls[2][0]).toEqual({
|
|
changed: [{isViewable: false, key: 'a'}],
|
|
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
|
viewableItems: [{isViewable: true, key: 'b'}],
|
|
});
|
|
});
|
|
|
|
it('minimumViewTime delays callback', function () {
|
|
const helper = new ViewabilityHelper({
|
|
minimumViewTime: 350,
|
|
viewAreaCoveragePercentThreshold: 0,
|
|
});
|
|
rowFrames = {
|
|
a: {y: 0, height: 200},
|
|
b: {y: 200, height: 200},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}];
|
|
const onViewableItemsChanged = jest.fn();
|
|
helper.onUpdate(
|
|
props,
|
|
0,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged).not.toBeCalled();
|
|
|
|
jest.runAllTimers();
|
|
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
|
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
|
changed: [{isViewable: true, key: 'a'}],
|
|
viewabilityConfig: {
|
|
minimumViewTime: 350,
|
|
viewAreaCoveragePercentThreshold: 0,
|
|
},
|
|
viewableItems: [{isViewable: true, key: 'a'}],
|
|
});
|
|
});
|
|
|
|
it('minimumViewTime skips briefly visible items', function () {
|
|
const helper = new ViewabilityHelper({
|
|
minimumViewTime: 350,
|
|
viewAreaCoveragePercentThreshold: 0,
|
|
});
|
|
rowFrames = {
|
|
a: {y: 0, height: 250},
|
|
b: {y: 250, height: 200},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}];
|
|
const onViewableItemsChanged = jest.fn();
|
|
helper.onUpdate(
|
|
props,
|
|
0,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
helper.onUpdate(
|
|
props,
|
|
300, // scroll past item 'a'
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
|
|
jest.runAllTimers();
|
|
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
|
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
|
changed: [{isViewable: true, key: 'b'}],
|
|
viewabilityConfig: {
|
|
minimumViewTime: 350,
|
|
viewAreaCoveragePercentThreshold: 0,
|
|
},
|
|
viewableItems: [{isViewable: true, key: 'b'}],
|
|
});
|
|
});
|
|
|
|
it('waitForInteraction blocks callback until interaction', function () {
|
|
const helper = new ViewabilityHelper({
|
|
waitForInteraction: true,
|
|
viewAreaCoveragePercentThreshold: 0,
|
|
});
|
|
rowFrames = {
|
|
a: {y: 0, height: 200},
|
|
b: {y: 200, height: 200},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}];
|
|
const onViewableItemsChanged = jest.fn();
|
|
helper.onUpdate(
|
|
props,
|
|
0,
|
|
100,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged).not.toBeCalled();
|
|
|
|
helper.recordInteraction();
|
|
|
|
helper.onUpdate(
|
|
props,
|
|
20,
|
|
100,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
|
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
|
changed: [{isViewable: true, key: 'a'}],
|
|
viewabilityConfig: {
|
|
waitForInteraction: true,
|
|
viewAreaCoveragePercentThreshold: 0,
|
|
},
|
|
viewableItems: [{isViewable: true, key: 'a'}],
|
|
});
|
|
});
|
|
|
|
it('returns the right visible row after the underlying data changed', function () {
|
|
const helper = new ViewabilityHelper();
|
|
rowFrames = {
|
|
a: {y: 0, height: 200},
|
|
b: {y: 200, height: 200},
|
|
};
|
|
data = [{key: 'a'}, {key: 'b'}];
|
|
const onViewableItemsChanged = jest.fn();
|
|
helper.onUpdate(
|
|
props,
|
|
0,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
|
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
|
changed: [{isViewable: true, key: 'a'}],
|
|
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
|
viewableItems: [{isViewable: true, key: 'a'}],
|
|
});
|
|
|
|
// update data
|
|
rowFrames = {
|
|
c: {y: 0, height: 200},
|
|
a: {y: 200, height: 200},
|
|
b: {y: 400, height: 200},
|
|
};
|
|
data = [{key: 'c'}, {key: 'a'}, {key: 'b'}];
|
|
|
|
helper.resetViewableIndices();
|
|
|
|
helper.onUpdate(
|
|
props,
|
|
0,
|
|
200,
|
|
getFrameMetrics,
|
|
createViewToken,
|
|
onViewableItemsChanged,
|
|
);
|
|
|
|
expect(onViewableItemsChanged.mock.calls.length).toBe(2);
|
|
expect(onViewableItemsChanged.mock.calls[1][0]).toEqual({
|
|
changed: [
|
|
{isViewable: true, key: 'c'},
|
|
{isViewable: false, key: 'a'},
|
|
],
|
|
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
|
viewableItems: [{isViewable: true, key: 'c'}],
|
|
});
|
|
});
|
|
});
|