title: Select multiple element on react native onpress in flatlist
body: <p>After a long time i am able to solve the selected item in a flatlist. But I did not get what exactly i want. I need to select multiple items by onpress. </p>
  
  <p>This is what i have done for selecting item, and it is perfectly working. I need this for multiple items. </p>
  
  <p>Please look at the below code </p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    StatusBar ,
    TouchableOpacity,
    View,
    FlatList,
    ActivityIndicator,
    TouchableHighlight,
    PropTypes,
    Image,
    Alert,
  } from 'react-native';
  
  import Logo from '../components/Logo';
  import Form from '../components/Front';
  
  import {Actions} from 'react-native-router-flux';
  
  export default class Login extends Component&lt;{}&gt; {
    constructor(props) {
      super(props);
      this.state = {
        dataSource: [],
        pressed: false,
        selected_category: '',
        black: ''
      };
    }
    _handleCategorySelect = (index) =&gt; { 
      this.setState({selected_category: index}); 
    }
    _onPress = () =&gt; {
      this.props.onPressItem(this.props.id);
    };
    izijackpotconfirm() {
        Actions.izijackpotconfirm()
    }
    componentDidMount() {
      var that = this;
      let items = Array.apply(null, Array(25)).map((v, i) =&gt; {
        return { id: i+1, index: i };
      });
      that.setState({
        dataSource: items,
      });
    }
   static navigationOptions = {
      title: "Izi Jackpot",
      headerStyle: {
        backgroundColor: "#354247"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    };
      render() {
  
      var jackpotNumbers = [];
      let btn_class = this.state.black ? "NormalSet" : "SelectedSet";
  
      const textColor = this.props.selected ? 'red' : 'black';
          return(
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.middlecontainer}&gt;
            &lt;Text style={styles.logoText}&gt;Please Select 5 Numbers and Submit&lt;/Text&gt;
          &lt;/View&gt;
          &lt;FlatList
            data={this.state.dataSource}
            extraData={this.state.selected_category}
            ref={(e) =&gt; this.items = e}
            renderItem={({item}) =&gt; (
              &lt;View style={{ flex: 1, flexDirection: 'column', margin: 1 }}&gt;
              &lt;TouchableOpacity
                onPress={() =&gt; this._handleCategorySelect(item.index)}
                style={this.state.selected_category === item.index ?  
                   styles.pressed : styles.iziPizi}
                onHideUnderlay={() =&gt; {
                    this.setState({ pressed: false });
                }}
                onShowUnderlay={() =&gt; {
                    this.setState({ pressed: true });
                }}
                underlayColor={'gray'}
              &gt;
                  &lt;Text style={styles.buttonText}&gt;{ item.id}&lt;/Text&gt;&lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            )}
            //Setting the number of column
            numColumns={5}
            keyExtractor={(item, index) =&gt; index}
          /&gt;
  
          &lt;View style={styles.middlecontainer}&gt;
           &lt;TouchableOpacity style={styles.button} onPress={this.izijackpotconfirm} &gt;
             &lt;Text style={styles.buttonText}&gt;Submit&lt;/Text&gt;
           &lt;/TouchableOpacity&gt;     
          &lt;/View&gt;
        &lt;/View&gt;
  
              )
      }
  }
  const styles = StyleSheet.create({
    container : {
      backgroundColor:'#6F9000',
      justifyContent: 'center',
      flex: 1,
      paddingTop: 30,
  
    },
    middlecontainer: {
      textAlign: 'center',
      alignItems: 'center',
      justifyContent :'center',
      flex:1    
    },
    signupTextCont : {
      flexGrow: 1,
      alignItems:'flex-end',
      justifyContent :'center',
      paddingVertical:16,
      flexDirection:'row'
    },
    signupText: {
      color:'rgba(255,255,255,0.6)',
      fontSize:16
    },
    signupButton: {
      color:'#ffffff',
      fontSize:16,
      fontWeight:'500'
    },
    iziPizi: {
      width: 55,
      padding: 15,
      margin: 5,
      backgroundColor: 'rgba(255,255,255,0.6)',
      borderRadius: 80,
      borderWidth: 2,
      borderColor: '#FFFFFF',
      flex:1
    },
    pressed: {
      width: 55,
      padding: 15,
      margin: 5,
      backgroundColor:'#1c313a',
      borderRadius: 80,
      borderWidth: 2,
      borderColor: '#FFFFFF',
      flex:1
    },
    button: {
      width:300,
      backgroundColor:'#1c313a',
       borderRadius: 25,
        marginVertical: 10,
        paddingVertical: 13
    },
    buttonText: {
      fontSize:16,
      fontWeight:'500',
      color:'#ffffff',
      textAlign:'center'
    },
    logoText : {
      color:'#FFFFFF',
      fontSize: 16,
      fontWeight: '500',
      alignItems: 'center',
      justifyContent:'center',
    },
    imageThumbnail: {
      justifyContent: 'center',
      alignItems: 'center',
      height: 100,
    },
  });
  </code></pre>
  
  <p>Now it should be work for multiple select. I am totally new React Native. Please let me know how it possible ? Advance thanks for your help.</p>