React Native Component Position

November 20, 2023

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>