React Native Flex:1 working but changing the hierarchy

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