Center and Bottom layout

Question

I'm working on my first react-native app, and am trying to wrap my head around layouts. Here is my code so far:

import React from 'react'
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>My App</Text>
      <View style={styles.buttonContainer}>
        <TouchableOpacity>
          <Text>My Button</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 45
  },
  buttonContainer: {
    backgroundColor: 'gray',
    paddingHorizontal: 20,
    paddingVertical: 5
  }
})

export default App

This renders as:

However, what I was hoping for was to vertically center the text, but push the button to the bottom, just slightly above it. Something like this:

I was able to get that output by adding:

position: 'absolute',
bottom: 50

to my buttonContainer styles, but I feel like this isn't the right way to do it. Is there a proper flex-y way to do this?

You need to add weight for it. First find out ratio what u want to display text and button. Eg: u can think u can divide screen 6 equal parts then 5parts got text and lower 1part show button. U need to add flex:5 attribute to text style and flex:1 attribute to button style for it — PushpikaWan, Oct 26 '18 at 01:10
If you want `My App` to be aligned perfectly in center, consider three flexed `View`s: top and bottom with 20% height and center one with 60% height. Put your button in bottom `View` with `alignItems` property set to `flex-end`. — Uzair A., Oct 26 '18 at 06:47

score 0 · Answer 1 · answered Oct 26 '18 at 01:18

You need to add weight for it. First find out ratio what u want to display text and button. Eg: u can think u can divide screen 6 equal parts then 5parts got text and lower 1part show button. U need to add flex:5 attribute to text style and flex:1 attribute to button style for it.

You can find more details about flex and other best practices by navigating these links https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet-a4147802405c

https://www.tutorialspoint.com/react_native/react_native_flexbox.htm

Chathurika Senani · Answer 2 · 2018-10-26T09:18:06.580

Wrap the text My App with a View and add the flex style to it.

<View style={{flex:1}}>
  <Text style={styles.text}>My App</Text>
</View>

OR

When considering your exact expectation this will solve your issue.

import React from 'react'
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'

function App() {
return (
<View style={styles.container}>
  <View style={{flex:12}}>
     <Text style={styles.text}>My App</Text>
  </View>
  <View style={styles.buttonContainer}>
    <TouchableOpacity>
      <Text>My Button</Text>
    </TouchableOpacity>
  </View>
</View>
)
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 45
  },
    buttonContainer: {
    backgroundColor: 'gray',
    paddingHorizontal: 20,
    flex: 1,
    alignItems: 'center',
    paddingVertical: 5
  }
})

export default App

Adjust the flex in My App wrapped <View> and buttonContainer accordingly.

This will not work. OP's required functionality is that the button is aligned near the bottom. — Uzair A., Oct 26 '18 at 06:53
@UzairA. I had wrongly input the answer though I checked it in my device. Thanks for ping. Now it's correct. — Chathurika Senani, Oct 26 '18 at 09:16

Uzair A. · Answer 3 · 2018-10-27T07:50:47.823

Try this:

function App() {
    return (
      <View style={styles.container}>
        <View style={styles.topPadder} />
        <View style={styles.textView}>
          <Text style={styles.text}>My App</Text>
        </View>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.buttonStyle}>
            <Text>My Button</Text>
          </TouchableOpacity>
        </View>
      </View>
      )
}

const styles = StyleSheet.create({
  topPadder: {
    flex: 20,
  },
  textView: {
    flex: 60,
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 45
  },
  buttonContainer: {
    justifyContent: 'flex-end',
    flex: 20,
    marginBottom: 10,
  },
  buttonStyle: {
    paddingHorizontal: 20,
    paddingVertical: 5,
    backgroundColor: 'gray',
  },
})

export default App

You can set the marginBottom in buttonContainer according to your need.

Center and Bottom layout

3 Answers3