title: Function components in react native
body: <p>I am trying to change view of <code>ListItem</code> by pressing on it.
  In My screen which is normal React component i have functional <code>List</code> component and selectedItemState (only 1 or no items will be selected).
  In <code>List</code> there are few also functional <code>ListItem</code> components.
  The problem is lack of re-render ability for item.</p>
  
  <p>I've tried memo as official React page says but with no results. Changing components to normal ones gave the same result.</p>
  
  <p>Screen Component:</p>
  
  <pre><code>export default class myScreen extends Component {
      constructor () {
          super ()
          this.state = {
              data: [], // &lt;-- there are my objects
              isDataEmpty: false,
              selectedItemId: ''
          }
      }
  
      // ... some code
  
      render () {
          return ( 
                  &lt;View style={styles.container}&gt;
                      &lt;List
                          itemList={this.state.data}
                          onItemPress={ /* go to next screen */}
                          onItemLongPress={id =&gt; {
                              this.setState({ selectedItemId: this.state.selectedItemId === id ? '' : id })
                          }}
                          selectedItemId={this.state.selectedItemId}
                      /&gt;
                  &lt;/View&gt;
          )
      }
  }
  </code></pre>
  
  <p>List Component:</p>
  
  <pre><code>const List = props =&gt; {
    return (
      &lt;FlatList
        style={style.itemList}
        data={props.itemList}
        renderItem={info =&gt; (
          &lt;ListItem
            item={info.item}
            selectedItemId={props.selectedItemId}
            onItemPress={id =&gt; props.onItemPress(id)}
            onItemLongPress={id =&gt; props.onItemLongPress(id)}
          /&gt;
        )}
      /&gt;
    )
  }
  
  const areEqual = (previous, next) =&gt; {
    return next.selectedItemId !== '' &amp;&amp; (previous.selectedItemId === next.selectedItemId)
  }
  
  export default React.memo(List, areEqual)
  </code></pre>
  
  <p>List Item Component:</p>
  
  <pre><code>const ListItem = props =&gt; {
    return (
      &lt;TouchableWithoutFeedback
        onPress={() =&gt; props.onItemPress(props.item.id)}
        onLongPress={() =&gt; {
          props.onItemLongPress(props.item.id)
  
        } }&gt;
        &lt;View style={style.listItem}&gt;
            &lt;Image resizeMode='cover' source={props.item.image} style={style.image} /&gt;
            &lt;Text&gt;{props.selectedItemId === props.item.id ? 'XXX' : props.item.name}&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/TouchableWithoutFeedback&gt;
    )
  }
  
  const areEqual = (previous, next) =&gt; {
    return next.selectedItemId &amp;&amp; (next.selectedItemId === next.item.id)
  }
  
  export default React.memo(ListItem, areEqual)
  </code></pre>
  
  <p>After pressing on any item i want it name to change to 'XXX'. If item will be pressed twice all items should be in normal state</p>