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.
What I want.
<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'
}

