React Native - vertically centered text and button at the bottom

Question

Need to have a layout where I have a vertically aligned text in the center and button at the right bottom:

NOTE: The text should be vertically aligned inside the whole viewport - from top to bttom - like for example the button has an absolute position and is out of the flow (prever to avoid using absolute positioning) https://imgur.com/a/YenI9oA

Tried flexDirection: "column" and alignItems: "center" for the container and marginTop: "auto" for the button but this only pushes button at the bottom

Some experiments with the other direction: https://snack.expo.io/Bybw8xsXS

    <View style={styles.container}>
      <Text style={styles.text}>
        Change code in the editor and watch it change on your phone! Save to get
        a shareable url.
      </Text>
      <View style={styles.buttonContainer}>
        <View style={styles.button} />
      </View>
    </View>

  container: {
    marginTop: 80,
    height: 250,
    borderColor: 'red',
    borderWidth: 1,
    // flex: 1,
    flexDirection: 'row',
    // alignItems: 'center',
    alignContent: 'center',
    flexWrap: 'wrap',
  },
  text: {
    fontSize: 18,
    borderWidth: 1,
    borderColor: 'green',
  },
  buttonContainer: {
    width: '100%',
    borderWidth: 1,
    borderColor: 'purple',
    alignSelf: 'flex-end',
  },
  button: {
    borderRadius: 10,
    width: 50,
    height: 25,
    backgroundColor: 'pink',
    alignSelf: 'flex-end',
  }

Leaving this here: React-Native Flexbox - Position One Item at Vertical Center and other at Bottom

Answer 1

It is better that you use flex. In fact, Flexbox is designed to provide a consistent layout on different screen sizes. For more information: https://facebook.github.io/react-native/docs/flexbox

Just use put you code like this:

<View style={styles.mainContainer}>
    <View style={styles.container}>
    <Text style={styles.text}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
    </Text>
    <View style={styles.buttonContainer}>
        <View style={styles.button} />
    </View>
    </View>
</View>

in your styles use:

 mainContainer: {
        flex: 1,
        borderColor: 'red',
        borderWidth: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
    container: {
        flex: 6,//you can increase it to increase the space
        //borderColor: 'red',
        //borderWidth: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
      text: {
        fontSize: 18,
        borderWidth: 1,
        borderColor: 'green',
      },
      buttonContainer: {
        flex:1
        width: '100%',
        //borderWidth: 1,
        //borderColor: 'purple',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
      },
      button: {
        borderRadius: 10,
        width: 50,
        height: 25,
        backgroundColor: 'pink',
        alignSelf: 'flex-end',
      }

I hope I could help.

Answer 2

It's super simple: Just nest the text inside another View like this:

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textView}>
        <Text style={styles.text}>
          Change code in the editor and watch it change on your phone! Save to get
          a shareable url.
        </Text>
      </View>
      <View
        style={{
          width: '100%',
          borderWidth: 1,
          borderColor: 'purple',
          alignSelf: 'flex-end',
        }}>
        <View style={styles.button} />
      </View>
    </View>
  );
};

And then update the style:

  container: {
    marginTop: 80,
    height: 250,
    borderColor: 'red',
    borderWidth: 1,
    flex: 1,
    flexWrap: 'wrap',
  },
  textView:{
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    borderColor: 'orange',
    borderWidth:1,
  },

Answer 3

If you want to reproduce your mockup, you should use flexbox and wrap your text component and your button component in 2 separate containers :

You text container will have flex 1 and the button container will have no flex. So the text component will take all the space available minus the space taken by the button component.

Update

And to vertically center text in the main container, the only solution I see is to make the button container "absolute"

  <View style={styles.mainContainer}>
    <View style={styles.textContainer}>
      <Text style={styles.text}>
        Change code in the editor and watch it change on your phone! Save to
        get a shareable url.
      </Text>
    </View>
    <View style={styles.buttonContainer}>
      <View style={styles.button} />
    </View>
  </View>

  mainContainer: {
    marginTop: 200,
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    borderColor: "red",
    borderWidth: 1,
    height: 300
  },
  textContainer: {
    flex: 1,
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 1,
    borderColor: "blue"
  },
  text: {
    fontSize: 18,
    borderWidth: 1,
    borderColor: "purple"
  },
  buttonContainer: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    justifyContent: "flex-end",
    alignItems: "flex-end",
    borderWidth: 1,
    borderColor: "green"
  },
  button: {
    borderRadius: 10,
    width: 50,
    height: 25,
    backgroundColor: "blue",
    alignItems: "flex-end"
  }