Search code examples
reactjsreact-nativeflexboxflex4

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

Solution

  • 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.