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' }