Place Item to Bottom React Native-CodePudding

I'm creating a react native app i have a item - a plus button(shown in image)

I want this to the bottom of my page onto footer -

but the problem is that when i place this button on bottom with position: 'absolute', bottom: 0 it's only going to the bottom of the hero section & not to the footer

Code -

<View style={styles.main}>
<View style={styles.hero}>
  <View style={styles.flex}>
    <View style={styles.container}>
     
    </View>
  </View>
  <View style={styles.flex2}>

      </TouchableOpacity>
    </View>

    <View style={styles.container12}>
      
    </View>
  </View>
</View>


<TouchableOpacity>
  <View style={styles.container33}>
    <EntypoIcon name="plus" style={styles.icon28}></EntypoIcon>
  </View>
</TouchableOpacity>

Main Styles -

  main: {
  width: '100%',
  height: '100%',
},
hero: {
  alignSelf: 'stretch',
  height: 250,
  backgroundColor: '#fff',
  borderBottomLeftRadius: 50,
  borderBottomRightRadius: 50,
},
  container33: {
  width: 50,
  height: 50,
  backgroundColor: '#1DA6FA',
  // flex: 1,
  borderRadius: 50,
  position: 'absolute',
  bottom: 0,
  right: 10,
  alignItems: 'center',
  justifyContent: 'center'
},

CodePudding user response：

The problem si that you are applying the absolute css position to the View inside the TouchableOpacity and not to the TouchableOpacity itself.

To achieve what you want to do, you should write something like:

<View style={styles.absoluteOpacity}>
   <TouchableOpacity>
     <View style={styles.container33}>
       <EntypoIcon name="plus" style={styles.icon28}></EntypoIcon>
     </View>
   </TouchableOpacity>
</View>

And then the css:

container33: {
  width: 50,
  height: 50,
  backgroundColor: '#1DA6FA',
  // flex: 1,
  borderRadius: 50,
  right: 10,
  alignItems: 'center',
  justifyContent: 'center'
},
absoluteOpacity: {
   position: 'absolute',
   bottom: 0,
}