title: Highlight a selected item in React-Native FlatList
body: <p>I put together a simple React-native application to gets data from a remote service, loads it in a FlatList. When a user taps on an item, it should be highlighted and selection should be retained. I am sure such a trivial operation should not be difficult. I am not sure what I am missing.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    FlatList,
    ActivityIndicator,
    Image,
    TouchableOpacity,
  } from 'react-native';
  
  export default class BasicFlatList extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        loading: false,
        data: [],
        page: 1,
        seed: 1,
        error: null,
        refreshing: false,
        selectedItem:'null',
      };
    }
  
    componentDidMount() {
      this.makeRemoteRequest();
    }
  
    makeRemoteRequest = () =&gt; {
      const {page, seed} = this.state;
      const url = `https://randomuser.me/api/?seed=${seed}&amp;page=${page}&amp;results=20`;
      this.setState({loading: true});
      fetch(url)
        .then(res =&gt; res.json())
        .then(res =&gt; {
          this.setState({
            data: page === 1 ? res.results : [...this.state.data, ...res.results],
            error: res.error || null,
            loading: false,
            refreshing: false
          });
        })
        .catch(error =&gt; {
          this.setState({error, loading: false});
        });
    };
  
    onPressAction = (rowItem) =&gt; {
      console.log('ListItem was selected');
      console.dir(rowItem);
      this.setState({
        selectedItem: rowItem.id.value
      });
    }
  
    renderRow = (item) =&gt; {
      const isSelectedUser = this.state.selectedItem === item.id.value;
      console.log(`Rendered item - ${item.id.value} for ${isSelectedUser}`);
      const viewStyle = isSelectedUser ? styles.selectedButton : styles.normalButton;
      return(
          &lt;TouchableOpacity style={viewStyle} onPress={() =&gt; this.onPressAction(item)} underlayColor='#dddddd'&gt;
            &lt;View style={styles.listItemContainer}&gt;
              &lt;View&gt;
                &lt;Image source={{ uri: item.picture.large}} style={styles.photo} /&gt;
              &lt;/View&gt;
              &lt;View style={{flexDirection: 'column'}}&gt;
                &lt;View style={{flexDirection: 'row', alignItems: 'flex-start',}}&gt;
                  {isSelectedUser ?
                    &lt;Text style={styles.selectedText}&gt;{item.name.first} {item.name.last}&lt;/Text&gt;
                    : &lt;Text style={styles.text}&gt;{item.name.first} {item.name.last}&lt;/Text&gt;
                  }
                &lt;/View&gt;
                &lt;View style={{flexDirection: 'row', alignItems: 'flex-start',}}&gt;
                  &lt;Text style={styles.text}&gt;{item.email}&lt;/Text&gt;
                &lt;/View&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
      );
    }
  
    render() {
      return(
        &lt;FlatList style={styles.container}
          data={this.state.data}
          renderItem={({ item }) =&gt; (
            this.renderRow(item)
          )}
        /&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: 50,
    },
    selectedButton: {
      backgroundColor: 'lightgray',
    },
    normalButton: {
      backgroundColor: 'white',
    },
    listItemContainer: {
      flex: 1,
      padding: 12,
      flexDirection: 'row',
      alignItems: 'flex-start',
    },
    text: {
      marginLeft: 12,
      fontSize: 16,
    },
    selectedText: {
      marginLeft: 12,
      fontSize: 20,
    },
    photo: {
      height: 40,
      width: 40,
      borderRadius: 20,
    },
  });
  </code></pre>
  <p>When user taps on an item in the list, &quot;onPress&quot; method is invoked with the information on selected item. But the next step of highlight item in Flatlist does not happen. 'UnderlayColor' is of no help either.</p>
  <p>Any help/advice will be much appreciated.</p>