Skip to content
Advertisement

React Native Elements marginEnd wont position element to the right of its parent container

I have some nested components: TEXT and an Image.

I would like the button in the blue box to move to the right in the black box (parent). marginRight: 0 and marginEnd: 0 arent working. How can I accomplish this?

What is currently Happening.

enter image description here

What I want.

enter image description here

<View style={styles.profileButton}>
                <Text style={{fontSize: 20}}>Tap to add a profile!</Text>
                    
                        <TouchableOpacity>
                            <View style={styles.TouchableOpacity}>
                                <Image 
                                    style={styles.addprofilebutton}
                                    source={require('../assets/addProfileButtonTeal.png')}>

                                </Image>
                            </View>
                        </TouchableOpacity>
                    
            </View>

StyleSheet

profileButton: { 
        zIndex:5, 
        flex: 1,
        position: 'absolute',
        bottom: '10%',
        right: '3%',
        justifyContent: 'flex-end'
    },
    TouchableOpacity: {
        marginEnd: 0,
    },
    addprofilebutton: {

        width: 100,
        height: 100,
        marginRight: 0          
    }

Advertisement

Answer

TouchableOpacity: {
    alignItems:'flex-end'
}

or

TouchableOpacity: {
    alignSelf:'flex-end'
}
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement