diff --git a/packages/rn-tester/js/components/ListExampleShared.js b/packages/rn-tester/js/components/ListExampleShared.js index 84ca599630e..2312ee69c22 100644 --- a/packages/rn-tester/js/components/ListExampleShared.js +++ b/packages/rn-tester/js/components/ListExampleShared.js @@ -225,18 +225,9 @@ function getItemLayout( return {length, offset: (length + separator) * index + header, index}; } -function pressItem(context: Object, key: string) { - const index = Number(key); - const pressed = !context.state.data[index].pressed; - context.setState(state => { - const newData = [...state.data]; - newData[index] = { - ...state.data[index], - pressed, - title: 'Item ' + key + (pressed ? ' (pressed)' : ''), - }; - return {data: newData}; - }); +function pressItem(item: Item): Item { + const title = `Item ${item.key}${!item.pressed ? ' (pressed)' : ''}`; + return {...item, title, pressed: !item.pressed}; } function renderSmallSwitchOption( diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js index 95185e3112b..6e6df4913af 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js +++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js @@ -281,10 +281,21 @@ class FlatListExample extends React.PureComponent { ); } }; + _pressItem = (key: string) => { this._listRef && this._listRef.recordInteraction(); - pressItem(this, key); + const index = Number(key); + const itemState = pressItem(this.state.data[index]); + this.setState(state => ({ + ...state, + data: [ + ...state.data.slice(0, index), + itemState, + ...state.data.slice(index + 1), + ], + })); }; + _listRef: React.ElementRef; } diff --git a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js index 0ecf04679f4..6ca4431bb43 100644 --- a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js +++ b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js @@ -167,8 +167,18 @@ class MultiColumnExample extends React.PureComponent< ); } }; + _pressItem = (key: string) => { - pressItem(this, key); + const index = Number(key); + const itemState = pressItem(this.state.data[index]); + this.setState(state => ({ + ...state, + data: [ + ...state.data.slice(0, index), + itemState, + ...state.data.slice(index + 1), + ], + })); }; } diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExample.js b/packages/rn-tester/js/examples/SectionList/SectionListExample.js index 64a8de09718..622226b38fa 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListExample.js +++ b/packages/rn-tester/js/examples/SectionList/SectionListExample.js @@ -286,7 +286,19 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> { }; _pressItem = (key: string) => { - !isNaN(key) && pressItem(this, key); + if (isNaN(key)) { + return; + } + const index = Number(key); + const itemState = pressItem(this.state.data[index]); + this.setState(state => ({ + ...state, + data: [ + ...state.data.slice(0, index), + itemState, + ...state.data.slice(index + 1), + ], + })); }; }