Flexbox alignment issue in react-native - react-native

Question

I'm trying to align the contents of a View component into left and right side of the screen. Unfortunately, whatever I do, I can only align the parent View and not the child View components.
In the snippet below, item is the Parent View, leftIcon and title are supposed to be aligned together in the left and rightArrow is supposed to be aligned in the right.
<TouchableOpacity onPress={() => navigation.navigate(`${item.page}`)}>
<View style={styles.item}>
<Text style={styles.leftIcon}>a</Text>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.rightArrow}> > </Text>
</View>
</TouchableOpacity>
const styles = StyleSheet.create({
item: {
//backgroundColor: '#f9c2ff',
paddingTop: 7,
marginVertical: 4,
marginHorizontal: 16,
flex: 1,
flexDirection: 'row',
},
leftIcon: {
fontSize: 25,
paddingRight: '5%',
alignSelf: 'flex-start',
},
title: {
fontSize: 25,
alignSelf: 'flex-start',
},
rightArrow: {
fontSize: 25,
alignSelf: 'flex-end'
}
});
This might be an incorrect approach, but what can be done to achieve this?

Answer 1

You can wrap leftIcon and title in a view with a flexDirection: 'row' style.
Then add justifyContent: 'space-between' to your item styles.
Example (using inline styles):
<TouchableOpacity>
<View
style={{
marginVertical: 4,
marginHorizontal: 16,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<View style={{ flexDirection: 'row' }}>
<Text
style={{
fontSize: 25,
paddingRight: '5%',
}}>
a
</Text>
<Text style={{ fontSize: 25 }}>Title</Text>
</View>
<Text style={{ fontSize: 25 }}> > </Text>
</View>
</TouchableOpacity>