How to share space with equal-size components in React-native

Question

I have started recently with Javascript and React-native to test if it could be used in the future in my current company, but I'm facing some UI problems.

I'm making a test app with some, kind of almost useless functions to learn a bit of Javascript and how to link JS with native Android modules, but now I'm stuck with the interface. I used to make interfaces with RelativeLayout (ConstraintLayout now), and that's why I'm a bit frustrated with this HTML-like and CSS (which I don't specially know in depth, to be honest).

Given this UI . . .

. . . I actually want those buttons to share all the blank space on the screen and have the same heigth, but I don't want to set any width or heigth property, since I believe that each phone, with its own screen size and resolution, should handle the size of the components.

And serching around here and there, I discovered a property called flex that supposedly works like Android's LinearLayout weigth, but when I use it on any button, they just disappear:

So, how should/could I solve this?

Here are the "HTML" and styles used:

render() {
    return (
      <View style={styles.container}>
        <View style={styles.containerText}>
          <ScrollView
            style={styles.scrollTextStyle}
            contentContainerStyle={{ flexGrow: 1 }}
          >
            <Text style={styles.textStyle}>{this.state.textField}</Text>
          </ScrollView>

          <TextInput
            multiline={true}
            style={styles.inputStyle}
            onChangeText={inputField =>
              this.setState({
                inputField
              })}
            value={this.state.inputField}
          />

        </View>
        <View style={styles.containerButton}>
          <Button
            style={[styles.buttons, styles.firstButton]}
            onPress={() => this.pressedButton(1)}
          >
            Copy input to text
          </Button>

          <Button
            style={[styles.buttons, styles.secondButton]}
            onPress={() => this.pressedButton(2)}
          >
            Android/iOS Toast
          </Button>

          <Button
            style={[styles.buttons, styles.thirdButton]}
            onPress={() => this.pressedButton(3)}
          >
            Android module (Method)
          </Button>

          <Button
            style={[styles.buttons, styles.fourthButton]}
            onPress={() => this.pressedButton(4)}
          >
            Android module (AsyncTask)
          </Button>

        </View>
      </View>
    );
}

const styles = StyleSheet.create({
  //Root View
  container: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: "#F5FCFF"
  },
  //Texts View
  containerText: {
    flex: 2,
    justifyContent: "center",
    backgroundColor: "#EFEFFF"
  },
  //Buttons View
  containerButton: {
    flex: 4,
    flexDirection: "column",
    backgroundColor: "#FFFFFF",
    justifyContent: "space-between"
  },
  //Components on first View
  scrollTextStyle: {
    borderWidth: 1,
    marginTop: 10,
    marginBottom: 5,
    marginHorizontal: 10,
    flex: 1
  },
  textStyle: {
    backgroundColor: "#CEF",
    textAlign: "center",
    textAlignVertical: "center",
    flex: 1
  },
  inputStyle: {
    borderWidth: 1,
    marginTop: 5,
    marginBottom: 10,
    marginHorizontal: 10,
    backgroundColor: "#CEF",
    textAlign: "center",
    textAlignVertical: "center",
    flex: 1
  },
  //Components on second view
  //Common style for all buttons and a different one for each
  buttons: {
    borderRadius: 5,
    textAlign: "center",
    textAlignVertical: "center",
    fontSize: 20
  },
  firstButton: {
    color: "#FFFFFF",
    backgroundColor: "#D1E233"
  },
  secondButton: {
    color: "#FFFFFF",
    backgroundColor: "#239923"
  },
  thirdButton: {
    color: "#FFFFFF",
    backgroundColor: "#958475"
  },
  fourthButton: {
    color: "#FFFFFF",
    backgroundColor: "#651278"
  }
});

By the way, I would appreciate any tutorial-like web about user interfaces on React-native, since I only found kind of useless things explaining properties, but no quality full examples.

Answer 1

You can use Dimension

import {Dimensions} from 'react-native';
Dimensions.get('window').height

or use react-native-easy-grid

<Grid>
    <Row></Row>
    <Row></Row>
</Grid>

It will create 2 equal height row

Answer 2

I would recommend wrapping all of the buttons in a div, and then making the div's height equal to the screen height - the height of your input fields.

Example: var {height, width} = Dimensions.get('window');

Source

This will then give the buttons a container to live in. After that you can use % for the height of the buttons. So if you have 4 buttons you can make the height of each of them 25% which would make them fit any screen.