CODEWITHSUNDEEP
javascriptcssreactjsreact-native
Steven Matthews
Steven Matthews

Reputation: 11285

Can't position React Native View at the bottom

I am trying to position a React Native view at the bottom of my screen:

  <TouchableHighlight onPress={() => this.logout()}>
    <View style={{ position: "absolute", bottom: 0 }}>
      <Text>{SignOut}</Text>
    </View>
  </TouchableHighlight>

And the parent:

  <Fragment>
    <View>
      <ProfileSettings profile={this.state.profile} />
      <MainSettings data={this.state} />

    </View>
    <LogoutSettings />
  </Fragment>

And then the layout:

  <Fragment>
    <StatusBar barStyle="dark-content" />
    <SafeAreaView>
      {/*<BackgroundProcess />*/}
      <Header />
      {this.props.children}
    </SafeAreaView>
  </Fragment>

As far as I can tell, this should get me all the way to the bottom...

However instead, my View centers right in the middle of the screen.

What am I doing wrong here? Is there a better way to position a view at the bottom of the screen? Plenty of tutorials say to use position absolute and bottom 0, but it does not appear to be working in my specific use case

Upvotes: 0

Views: 1458

Answers (2)

Mehran Khan
Mehran Khan

Reputation: 3636

You can do it without position absolute . Add "flex:1" to view before "LogoutSettings" so it will have full height and "LogoutSettings" will be shown at bottom

Try this in parent

<Fragment>
    <View style={{flex:1}}>
      <ProfileSettings profile={this.state.profile} />
      <MainSettings data={this.state} />
    </View>
    <LogoutSettings />
  </Fragment>

Remove position absolute

<TouchableHighlight onPress={() => this.logout()}>
    <View >
      <Text>{SignOut}</Text>
    </View>
  </TouchableHighlight>

Upvotes: 1

Danny Buonocore
Danny Buonocore

Reputation: 3777

I think you want the style on TouchableHighlight, not View

  <TouchableHighlight onPress={() => this.logout()} style={{ position: "absolute", bottom: 0 }}>
    <View>
      <Text>{SignOut}</Text>
    </View>
  </TouchableHighlight>

You don't really need that View at all actually

Upvotes: 0

Related Questions