Issue
I create a button component in react native. It is on the top side of screen but I want to set it at the end of screen.
<View style={{ marginHorizontal: 52, marginBottom: 23, }}>
<TouchableOpacity style={{ backgroundColor: '#5669FF', height: 58, borderRadius: 15, justifyContent: 'center', alignItems: 'center', shadowColor: '#000000', elevation: 1, shadowOpacity: 1, }}>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: '#fff', fontSize: 18, fontWeight: '400', letterSpacing: 1, textTransform: 'uppercase' }}>Explore Events</Text>
<View style={{ height: 30, width: 30, backgroundColor: '#3D56F0', borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginLeft: 22 }}>
<Image
style={{ height: 18, width: 18, }}
source={require("../Assets/Icons/RightArrow.png")}
/>
</View>
</View>
</TouchableOpacity>
</View>
I want to set this button component at the end of screen center horizontally.
Solution
You need to wrap this in a container with styles {flex: 1, justifyContent: 'flex-end',}
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<View style={{ marginHorizontal: 52, marginBottom: 23}}>
<TouchableOpacity style={{ backgroundColor: '#5669FF', height: 58, borderRadius: 15, justifyContent: 'center', alignItems: 'center', shadowColor: '#000000', elevation: 1, shadowOpacity: 1, }}>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: '#fff', fontSize: 18, fontWeight: '400', letterSpacing: 1, textTransform: 'uppercase' }}>Explore Events</Text>
<View style={{ height: 30, width: 30, backgroundColor: '#3D56F0', borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginLeft: 22 }}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
Answered By - Hashim pk
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.