CODEWITHSUNDEEP
reactjsreact-nativeflexboxflex4
ØRGANIC
ØRGANIC

Reputation: 13

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

Upvotes: 1

Views: 28

Answers (1)

user3608305
user3608305

Reputation: 16

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.

Upvotes: 0

Related Questions