Issue
I want to achieve the following Header Style with flexbox in React Native. The Image should always be centered and the Arrow Button must always stick on the left side.
What I tried so far:
<View style={{ flexDirection: 'row' }}>
<Ionicons name="chevron-back" size={32} />
<Image
style={{ height: 120, width: 120 }}
source={{
uri: imgUrl,
}}
/>
</View>
Solution
Center the image with justifyContent
and use absolute position
for the arrow.
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<Ionicons style={{position: 'absolute', left: 8}} name="chevron-back" size={32} />
<Image
style={{ height: 120, width: 120 }}
source={{
uri: 'https://via.placeholder.com/150',
}}
/>
</View>
Answered By - user18309290
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.