Permalink
Browse files

Give complex FlatList example more motivation

Summary:
Previously, the example MyListItem never referenced the selected prop, leaving ambiguity about the intention of the demo.

By adding a concrete implementation with coloring based on the selected prop, we can see that this is a demo of a multi-select list for batch actions instead of, say, a click-to-navigate nested list.

Here is a working Snack demo for future reference:
https://snack.expo.io/BkRMRTGB-

References #14872

<!--
Thank you for sending the PR!

If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!

Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.

Happy contributing!
-->
Closes #14957

Differential Revision: D5892186

Pulled By: sahrens

fbshipit-source-id: c7b46b5f6eae8f36bd4bda7cbbd354cc22108b42
  • Loading branch information...
jkdf2 authored and facebook-github-bot committed Sep 22, 2017
1 parent 7d2021e commit 82b4b9b115b73262d5e06784b77610d916cf0424
Showing with 13 additions and 9 deletions.
  1. +13 −9 Libraries/Lists/FlatList.js
@@ -233,16 +233,16 @@ type DefaultProps = typeof defaultProps;
* renderItem={({item}) => <Text>{item.key}</Text>}
* />
*
* More complex example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
* More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
*
* - By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will
* prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even
* if the inner `SomeOtherWidget` has no such optimizations.
* if the components rendered in `MyListItem` did not have such optimizations.
* - By passing `extraData={this.state}` to `FlatList` we make sure `FlatList` itself will re-render
* when the `state.selected` changes. Without setting this prop, `FlatList` would not know it
* needs to re-render any items because it is also a `PureComponent` and the prop comparison will
* not show any changes.
* - `keyExtractor` tells the list to use the `id`s for the react keys.
* - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
*
*
* class MyListItem extends React.PureComponent {
@@ -251,16 +251,20 @@ type DefaultProps = typeof defaultProps;
* };
*
* render() {
* const textColor = this.props.selected ? "red" : "black";
* return (
* <SomeOtherWidget
* {...this.props}
* onPress={this._onPress}
* />
* )
* <TouchableOpacity onPress={this._onPress}>
* <View>
* <Text style={{ color: textColor }}>
* {this.props.title}
* </Text>
* </View>
* </TouchableOpacity>
* );
* }
* }
*
* class MyList extends React.PureComponent {
* class MultiSelectList extends React.PureComponent {
* state = {selected: (new Map(): Map<string, boolean>)};
*
* _keyExtractor = (item, index) => item.id;

0 comments on commit 82b4b9b

Please sign in to comment.