Why are these React components overlapping? - react-native

Question

I rendered two similar components. Each component has an icon and text, and each of them should not be overlapping. What's wrong with my styling?
import Icon from "react-native-elements/src/icons/Icon";
<TouchableOpacity onPress={_ => playSound(audio)} style={{
flexDirection: 'row',
flexGrow:1,
flex: 1
}}>
<View>
<Icon name="volume-up" color={PRIMARY_BG} size={24}/>
</View>
<View>
<Text style={{
flexGrow: 1,
fontSize: 8,
backgroundColor: GRAY
}}>
[{locale}]{this.props.pronunciation[locale][0]}
</Text>
</View>
</TouchableOpacity>
Here's the output:
Parent container style
headItemContent: {
flex: 3,
flexDirection: 'row',
justifyContent: 'space-between'
},

Answer 1

I am not sure where your images are meant to be, but the problem is the flexDirection you have set. The flexDirection on the touchableOpacity should be column:
flexDirection: "column"
Since yours is row, the images and text are rendering beside each other. There is not enough space so they are over lapping. So change the flexDirection and that should fix it.
Edit - Or add flex to your image and text:
<View style={{flex: 1}}>
<Icon name="volume-up" color={PRIMARY_BG} size={24}/>
</View>
<View style={{flex: 1}}>
<Text style={{
flexGrow: 1,
fontSize: 8,
backgroundColor: GRAY
}}>
[{locale}]{this.props.pronunciation[locale][0]}
</Text>
</View>
Let me know if that helps!