title: CheckBox in FlatList
body: <p>I would like to present the user with <strong>a list of items to choose from.</strong> The items are sourced from a Redux state object. It is a list of the contacts on the device. </p>
  
  <p>I used a <strong>"FlatList"</strong> from React-Native and a <strong>"ListItem"</strong> from React-Native-Elements. The ListItem has a <strong>CheckBox.</strong> </p>
  
  <p><strong>For the user to check/uncheck an item in the list, he/she can click on the CheckBox or any part of the ListItem.</strong> </p>
  
  <p><strong>My 1st Attempt:</strong> As you can see in the following code, I had to duplicate part of the code to achieve this. Is there a smarter way of doing this (to avoid code duplication)? </p>
  
  <pre><code>&lt;FlatList
      keyExtractor={(item, index) =&gt; index.toString()}
      data={props.contactList}
      renderItem={_renderItem}
      ListEmptyComponent={&lt;Text&gt;There are no contacts to show.&lt;/Text&gt;}
      refreshing={state.refreshing}
      onRefresh={_onRefresh}
  /&gt;
  
  const _renderItem = ({ item, index }) =&gt; {
      return (
          &lt;ListItem
              title={item.name}
              onPress={() =&gt; {
                  // The following 2 statements are repeated (below)!!!
                  _toggleCheck(index);
                  props.acContactSelect(index);
              }}
  
              checkBox={{
                  checked: _isItemChecked(index),
                  checkedIcon: "check",
                  onPress: () =&gt; {
                      // The following 2 statements are repeated (above)!!!
                      _toggleCheck(index);
                      props.acContactSelect(index);
                  },
              }}
          /&gt;
      );
  };
  </code></pre>
  
  <p><strong>My 2nd Attempt:</strong> I tried using a function. I got the error message (Maximum update depth exceeded.) </p>
  
  <pre><code>&lt;FlatList
  .. {similar to the code above}
  /&gt;
  
  const _renderItem = ({ item, index }) =&gt; {
      return (
          &lt;ListItem
          ..
              onPress={_onPress(index)}
  
              checkBox={{
                  ..
                  onPress: _onPress(index),
              }}
          /&gt;
      );
  };
  
  const _onPress = (index) =&gt; {
      _toggleCheck(index);
      props.acContactSelect(index);
  };
  </code></pre>
  
  <p>Thanks for your effort and time to help... </p>