cannot place an image to right side react native - reactjs

Question

I have an image and it should be placed at right side of the header. I have tried and it is working perfectly in android devices. But in IOS the image is showing at left side. Please check my code,
export default class Header extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.header}>
<View style={styles.logoContainer}>
<Text style={{textAlign: 'right'}}>
<Image
style={styles.logo}
resizeMode={'contain'}
source={require('../../../../assets/logo.png')}
/>
</Text>
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate('AffiliateInfo')
}
>
<Text style={{textAlign: 'right'}}>
<Image
style={styles.agile}
source={require('../../../../assets/agile.png')}
/>
</Text>
</TouchableOpacity>
</View>
<Image
style={styles.navImage}
source={require('../../../../assets/nav.png')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
header: {
backgroundColor: '#0d2c4f',
paddingLeft: 10,
paddingRight: 10,
paddingTop: 30,
paddingBottom: 30,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end'
},
logoContainer: {
flex: 1
},
logo: {
width: 200,
height: 50,
resizeMode: 'contain'
},
agile: {
width: 100,
height: 30,
resizeMode: 'contain'
},
navImage: {
width: 40,
height: 15,
resizeMode: 'contain',
marginLeft: 20
}
});
The logo.png and agile.png image should be placed at right side. Is there anything to be done in IOS. Any solution will be appreciated. I am really stuck in here.

Answer 1

You can use alignItems
< View style={{ alignItems: 'flex-end', width: 100, height: 30 }} >
<Image
style={styles.agile}
source={require('../../../../assets/agile.png')}
/>
< View />