React Native Custom Multi Selector - Step 2

App.js

class MultiSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      MultiSelectPopup: false,
      PokemonList : [{
          id: '1',
          Choose: false,
          Name: 'Pikachu',
          Avatar: 'https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png'
        }, {
          id: '2',
          Choose: false,
          Name: 'Charmander',
          Avatar: 'https://cdn.bulbagarden.net/upload/7/73/004Charmander.png'
        }, {
          id: '3',
          Choose: false,
          Name: 'Bulbasaur',
          Avatar: 'https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png'
        }, {
          id: '4',
          Choose: false,
          Name: 'Squirtle',
          Avatar: 'https://cdn.bulbagarden.net/upload/3/39/007Squirtle.png'
        }, {
          id: '5',
          Choose: false,
          Name: 'Jigglypuff',
          Avatar: 'https://cdn.bulbagarden.net/upload/3/3e/039Jigglypuff.png'
      }]
    }
  }

<Modal transparent={true} visible={this.state.MultiSelectPopup}>
    <View style={styles.modalMain}>
        <View style={styles.modalView}>
            <View style={styles.modalTitleView}>
                <View style={{ flex: 1 }}>
                    <Text style={styles.modalTitle}>Pokemon I Choose You</Text>
                </View>
                <TouchableOpacity onPress={() => this.setState({ MultiSelectPopup : false })} >
                    <Ionicons name="md-close" size={20} color="#000" />
                </TouchableOpacity>
            </View>
            {this.state.PokemonList.length > 0 ?
                <ScrollView showsVerticalScrollIndicator={true} style={{ paddingHorizontal: 20 }}>
                    {this.state.PokemonList.map(item => {
                    return (
                        <View style={{ flexDirection : 'row'}}>
                          <CheckBox value={item.Choose} color="black"/>
                          <Text style={
                            {
                              marginTop: 5,
                              color: !item.Choose?"rgba(84, 84, 84, 1)":"black",
                              fontWeight: item.Choose? "bold" :"normal"
                            }}
                            >{item.Name}</Text>
                        </View>
                    )})}
                </ScrollView>
                :
                <Text>No Pokemon Found</Text>
            }
                <TouchableOpacity style={styles.chooseButton} onPress={() => this.setState({ MultiSelectPopup : false })}>
                    <Text style={styles.chooseText}>Choose</Text>
                </TouchableOpacity>
        </View>
    </View>
</Modal>

const styles = StyleSheet.create({
  modalMain: {
    backgroundColor: 'rgba(52, 52, 52, 0.8)',
    flex: 1,
    position: 'absolute',
    left: 0, right: 0,
    top: 0, bottom: 0,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  modalTitleView: {
    padding: 10,
    borderBottomWidth: 1,
    flexDirection: "row",
    borderBottomColor: "#efefef"
  },
  modalView: { 
    backgroundColor: "rgba(158, 158, 158, 1)", 
    width: BannerWidth, 
    height: 'auto', 
    maxHeight: '30%', 
    borderRadius: 10 
  },
  modalTitle: { 
    fontSize: 15, 
    color: '#000' 
  },
  chooseButton: {
    backgroundColor: "#f7ad00",
    padding: 8,
    marginTop: 10,
    marginBottom: 10, 
    marginHorizontal: 100, 
    borderRadius: 5
  },
  chooseText: {
    color: "#000", 
    textAlign: "center"
  }
});