How do I add icon/images to my picker items in React Native?

Question

I have a Picker component with two language choices: French and Korean. I would like to add an icon/picture of a flag next to each Text Component. Something that would like something like this:

I don't see anything about adding an icon in the documentation Other than installing something like react-native-modal-dropdown is there a way that this can be done? I would like to avoid installing any additional stuff.

Answer 1

Since i was looking for a solution myself, i tried the solution that i referenced in my previous comment but i couldn't make it work for the default RN picker.What i found instead, is that you can use Unicode emojis (thanks to a comment by hippietrail found here). So just copy the flag emoji you want from somewhere (i used emojipedia) and put it inside the label prop.Here is a very simple example of how this works

export default class App extends Component {
  state = {
        language: ''
  };

   render() {
     return (
       <View style={styles.container}>
           <Picker
              selectedValue={this.state.language}
              style={{ height: 50, width: 200 }}
              onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
              <Picker.Item label="🇰🇷  South Korea" value="ko" />
              <Picker.Item label="🇫🇷  France" value="fr" />

          </Picker>
       </View>
     );
   }
 }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

where 🇰🇷 and 🇫🇷 are the unicode emojis i copied from emojipedia.And this is how it looks like in Android (looks similar in iOS)