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.
JavaScript
x
15
15
1
<View style={styles.profileButton}>
2
<Text style={{fontSize: 20}}>Tap to add a profile!</Text>
3
4
<TouchableOpacity>
5
<View style={styles.TouchableOpacity}>
6
<Image
7
style={styles.addprofilebutton}
8
source={require('../assets/addProfileButtonTeal.png')}>
9
10
</Image>
11
</View>
12
</TouchableOpacity>
13
14
</View>
15
StyleSheet
JavaScript
1
18
18
1
profileButton: {
2
zIndex:5,
3
flex: 1,
4
position: 'absolute',
5
bottom: '10%',
6
right: '3%',
7
justifyContent: 'flex-end'
8
},
9
TouchableOpacity: {
10
marginEnd: 0,
11
},
12
addprofilebutton: {
13
14
width: 100,
15
height: 100,
16
marginRight: 0
17
}
18
Advertisement
Answer
JavaScript
1
4
1
TouchableOpacity: {
2
alignItems:'flex-end'
3
}
4
or
JavaScript
1
4
1
TouchableOpacity: {
2
alignSelf:'flex-end'
3
}
4