title: React Native pass data into modal
body: <p>I'm still new in react native and programming, and i am trying to pass items from my flat list into a modal. What i'm about to pass is the icon, status, and description. How am i supposed to do that?</p>
  
  <p>this is my flatlist
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>buildPanel(index, item) {
      let panel = [];
      let keys = DBkeys['Requests'].MyRequest;
      
      let status = item[keys['status']];
      panel.push(&lt;View style={{ position: 'absolute', right: 0, bottom: 0, padding: normalize(5), alignItems: 'center' }} key={'status'}&gt;
        &lt;TouchableOpacity onPress={this.handleShowModal}&gt;
          &lt;Icon name={img.itemStatus[status].name} type={img.itemStatus[status].type} color={img.itemStatus[status].color} size={normalize(38)} /&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;);
  
      return panel;
      }
      
      &lt;View style={[styles.panelContainer, status === 'success' ? {} : { backgroundColor: color.white }]}&gt;
                &lt;FlatList
                  showsVerticalScrollIndicator={false}
                  progressViewOffset={-10}
                  refreshing={this.state.refreshing}
                  onRefresh={this.onRefresh.bind(this)}
                  onMomentumScrollEnd={(event) =&gt; event.nativeEvent.contentOffset.y === 0 ? this.onRefresh() : null}
                  data={content}
                  renderItem={({ item }) =&gt; item}
                  keyExtractor={(item, key) =&gt; key.toString()}
                   /&gt;
              &lt;/View&gt;
              &lt;IconModal visible={this.state.modalVisible} close={this.handleDismissModal}/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this is my IconModal.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const IconModal = (props) =&gt; {
  
      return(
          &lt;Modal 
              isVisible={props.visible}
              onBackdropPress={props.close}
          &gt;
              &lt;View style={styles.dialogBox}&gt; 
                  &lt;View style={styles.icon}&gt;
                      &lt;Icon name='open-book' type='entypo' color='#ffb732' size={normalize(70)} /&gt;
                  &lt;/View&gt;
  
                  &lt;View style={styles.text}&gt;
                      &lt;Text style={styles.status}&gt;Status&lt;/Text&gt;
                      &lt;Text&gt;Desc&lt;/Text&gt;
                  &lt;/View&gt;
                      &lt;TouchableOpacity onPress={props.close}&gt;
                          &lt;View&gt;
                              &lt;Text style={styles.buttonText}&gt;GOT IT&lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;   
              &lt;/View&gt;
              
          &lt;/Modal&gt;
      )
  }
  
  IconModal.propTypes ={
      visible: PropTypes.bool.isRequired,
      close: PropTypes.func,
  }</code></pre>
  </div>
  </div>
  </p>