CODEWITHSUNDEEP
react-nativereact-native-flexbox
learningAngular
learningAngular

Reputation: 321

React-Native Flexbox - Position One Item at Vertical Center and other at Bottom

Within a parent view, I would like to vertically center align one piece of text and have another at the bottom of the view.Whenever I add the bottom text, it shifts the position of the vertical centered view upwards (to make it the vertical center of the remaining space).

How do I keep the text vertically centered align relative to the parent view? Update: I understand I can do this using {position: 'absolute', bottom:0}, but want to understand the flex-box solution.

<View style={{height: 300, borderColor: "black", borderWidth: 1}}>
    <View style={{ justifyContent: "center", flex: 1 }}>
        <Text>Vert Middle</Text>
    </View>

    <View>
        <Text>Vert Bottom</Text>
    </View>
</View>

Upvotes: 0

Views: 2592

Answers (2)

sdkcy
sdkcy

Reputation: 3548

This is going to work for you. Also @Nitish answer is going to work too.

render() {
    return (
        <View style={{
            height: 300,
            borderColor: "black",
            borderWidth: 1
        }}>
            <View style={{
                justifyContent: "center",
                flex: 1
            }}>
                <Text>Vert Middle</Text>
            </View>

            <View style={{
                height:0, //Here...
                justifyContent: "flex-end",
            }}>
                <Text>Vert Bottom</Text>
            </View>
        </View>
    );
}

Upvotes: 0

Nitish
Nitish

Reputation: 1043

Just try below code 

      <View style={{height: 300, borderColor: "balck", borderWidth: 1}}>
          <View style={{ backgroundColor: 'red', justifyContent: "center", flex: 1 }}>
              <Text>Vert Middle</Text>
          </View>

          <View style={{position: 'absolute', bottom: 0}}> // Here is your updations
              <Text>Vert Bottom</Text>
          </View>
      </View>

Upvotes: 2

Related Questions