React Native using picker to select country & flag

Question

I would like to know how to implement React Native picker to select a country and an image of the flag. Any help would be appreciated

import React, { Component } from 'react'
import { Text, View, Image, Picker } from 'react-native'

export default class country extends Component {
    constructor(props) {
        super(props);
        this.state = { country: ""};
        this.state = {updatedCountry};
      }

  render() {
    return (
      <View>
        <Picker selectedValue = {this.state.country} onValueChange = {this.updatedCountry}>
               <Picker.Item label = "America" value = "flag" />
               <Picker.Item label = "England" value = "Flag" />
            </Picker>
            <Text style = {styles.text}>{this.state.country}</Text>
      </View>
    )
  }
}

Answer 1

I just came across this react-native library react-native-country-picker-modal while looking for the same.

Supports both Android and iOS

Uses world-countries to populate the list.

If you are very keen you can check out the internals of the implementation src/CountryPicker.js , scripts/transform-world-countries.js , src/countryFlags.js