title: React native - dynamically add a view onPress
body: <p>I have a View that contains a button - onPress it opens a modal showing a list of contacts.</p>
  
  <ol>
  <li><p>onPress of any of those contacts (pickContact function) I would like to dynamically add a new View to _renderAddFriendTile (above button).</p></li>
  <li><p>Also ideally, the 'Add' icon next each contact name (in the modal) should update ('Remove' icon) whether or not they are present in _renderAddFriendTile View.</p></li>
  </ol>
  
  <p>What would be the best way to do it?</p>
  
  <p><strong>[UPDATED code]</strong></p>
  
  <pre><code> import React, {Component} from 'react'
      import {
          Text,
          View,
          ListView,
          ScrollView,
          StyleSheet,
          Image,
          TouchableHighlight,
          TextInput,
          Modal,
      } from 'react-native'
  
  
      const friends = new ListView.DataSource({
          rowHasChanged: (r1, r2) =&gt; r1 !== r2
      }).cloneWithRows([
          {
              id: 1,
              firstname: 'name01',
              surname: 'surname01',
              image: require('../images/friends/avatar-friend-01.png')
          },
          {
              id: 2,
              firstname: 'name02',
              surname: 'surname02',
              image: require('../images/friends/avatar-friend-02.png')
          },
          {
              id: 3,
              firstname: 'name03',
              surname: 'surname03',
              image: require('../images/friends/avatar-friend-03.png')
          },
          {
              id: 4,
              firstname: 'name04',
              surname: 'surname04',
              image: require('../images/friends/avatar-friend-04.png')
          },
      ])
  
  
      class AppView extends Component {
          state = {
              isModalVisible: false,
              contactPicked: [],
              isFriendAdded: false,
          }
  
          setModalVisible = visible =&gt; {
              this.setState({isModalVisible: visible})
          }
  
          pickContact = (friend) =&gt; {
              if(this.state.contactPicked.indexOf(friend) &lt; 0){
                  this.setState({
                      contactPicked: [ ...this.state.contactPicked, friend ],
  
                  })
              }
  
              if(this.state.contactPicked.indexOf(friend) &gt;= 0){
                  this.setState({isFriendAdded: true})
              }
          }
  
          _renderAddFriendTile = () =&gt; {
              return(
                  &lt;View style={{flex: 1}}&gt;
                      &lt;View style={[styles.step, styles.stepAddFriend]}&gt;
                          &lt;TouchableHighlight style={styles.addFriendButtonContainer} onPress={() =&gt; {this.setModalVisible(true)}}&gt;
                              &lt;View style={styles.addFriendButton}&gt;
                                  &lt;Text style={styles.addFriendButtonText}&gt;Add a friend&lt;/Text&gt;
                              &lt;/View&gt;
                          &lt;/TouchableHighlight&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              )
          }
  
          render(){
              return (
                  &lt;ScrollView style={styles.container}&gt;
                      &lt;Modal
                          animationType={'fade'}
                          transparent={true}
                          visible={this.state.isModalVisible}
                      &gt;
                          &lt;View style={styles.addFriendModalContainer}&gt;
                              &lt;View style={styles.addFriendModal}&gt;
                                  &lt;TouchableHighlight onPress={() =&gt; {this.setModalVisible(false)}}&gt;
                                      &lt;View&gt;
                                          &lt;Text style={{textAlign:'right'}}&gt;Close&lt;/Text&gt;
                                      &lt;/View&gt;
                                  &lt;/TouchableHighlight&gt;
                                  &lt;ListView
                                      dataSource={friends}
                                      renderRow={(friend) =&gt; {
                                          return (
                                              &lt;TouchableHighlight onPress={() =&gt; {this.pickContact()}}&gt;
                                                  &lt;View style={[styles.row, styles.friendRow]}&gt;
                                                      &lt;Image source={friend.image} style={styles.friendIcon}&gt;&lt;/Image&gt;
                                                      &lt;Text style={styles.name}&gt;{friend.firstname} &lt;/Text&gt;
                                                      &lt;Text style={styles.name}&gt;{friend.surname}&lt;/Text&gt;
  
                                                      &lt;View style={styles.pickContainer}&gt;
                                                          &lt;View style={styles.pickWrapper}&gt;
                                                              &lt;View style={this.state.isFriendAdded ? [styles.buttonActive,styles.buttonSmall]: [styles.buttonInactive,styles.buttonSmall]}&gt;
                                                                  &lt;Image source={this.state.isFriendAdded ? require('../images/button-active.png'): require('../images/button-inactive.png')} style={styles.buttonIcon}&gt;&lt;/Image&gt;
                                                              &lt;/View&gt;
                                                          &lt;/View&gt;
                                                      &lt;/View&gt;
                                                  &lt;/View&gt;
                                              &lt;/TouchableHighlight&gt;
                                          )
                                      }}
                                  /&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
                      &lt;/Modal&gt;
  
                      {this._renderAddFriendTile()}
                  &lt;/ScrollView&gt;
              )
          }
      }
  
      export default AppView
  </code></pre>