How do I add icon/images to my picker items in React Native? - 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)