here above the red component should occupy the entire screen and the button should go to the bottom
`<SafeAreaView style={{flex: 1, backgroundColor: 'red'}}> //red component
<TouchableOpacity //purple component
style={{
// flex: -1,
width: '100%',
bottom: 0,
height: 40,
backgroundColor: 'purple',
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Add New Note</Text>
</TouchableOpacity>
</SafeAreaView>`
The issue screenshot of output
i want the purple touchable opacity to go to the bottom of the screen
Option 1: add position: 'absolute'
to TouchableOpacity
style. This will enable component to stick to bottom of the screen, below the bottom safe area.
Option 2: add flexDirection: 'row'
to SafeAreaView
style and add alignSelf: 'flex-end'
TouchableOpacity
style. This will bring TouchableOpacity
to the bottom and right above the bottom safe area.