React Native : Arranging elements

Question

I am building a very simple app with a picker and two inputs/labels.

It currently looks like this in my iphone.

This is my code

import React from 'react';
import { StyleSheet, Text, View, Button, Modal, TextInput, Picker } from 'react-native';

export default class App extends React.Component {

constructor(props) {
  super(props);

}



state = {
  b1text: 'Kg',
  b2text: 'Cm',
  weight: '',
  height: '',
  standard: 'Metric'
}

render() {
  return (

    <View style={styles.container}>
    <Picker
            selectedValue={this.state.standard}
            onValueChange={(itemValue, itemIndex) => {
                                                        this.setState({standard: itemValue});
                                                        if(itemValue === "Metric") {
                                                        this.setState({b1text: "Kg"});
                                                        this.setState({b2text: "Cm"});
                                                        }
                                                        if(itemValue === "Imperial") {
                                                          this.setState({b1text: "Lbs"});
                                                          this.setState({b2text: "Inches"});
                                                        }

                                                    } }
            style={{height: 100, width: 100 }}

        >
            <Picker.Item label="Metric" value="Metric" />
            <Picker.Item label="Imperial" value="Imperial" />
    </Picker>

    <TextInput
              style={{height: 40, width: 60, borderColor: 'gray', borderWidth: 1}}
            onChangeText={(text) => this.setState({text: weight})}
            value={this.state.weight}
          />
    <Text>{this.state.b1text}</Text>
    <TextInput
              style={{height: 40, width: 60, borderColor: 'gray', borderWidth: 1}}
            onChangeText={(text) => this.setState({text: height})}
            value={this.state.height}
          />

    <Text>{this.state.b2text}</Text>


    </View>

  );

}

}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',


  },
});

But I want it to look something like this as shown below.

I have tried margin, padding etc. Still no luck.

Can someone tell me what css/flex property I can use to change the UI like how I want ?

Answer 1

I've created an Expo Snack that has a closer example of the UI you want to achieve. But I'll leave it to you to work out the details.

import React from 'react';
import { StyleSheet, Text, View, TextInput, Picker } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    b1text: 'Kg',
    b2text: 'Cm',
    weight: '',
    height: '',
    standard: 'Metric',
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.top}>
          <Picker
            selectedValue={this.state.standard}
            onValueChange={itemValue => {
              this.setState({ standard: itemValue });
              if (itemValue === 'Metric') {
                this.setState({ b1text: 'Kg' });
                this.setState({ b2text: 'Cm' });
              }
              if (itemValue === 'Imperial') {
                this.setState({ b1text: 'Lbs' });
                this.setState({ b2text: 'Inches' });
              }
            }}>
            <Picker.Item label="Metric" value="Metric" />
            <Picker.Item label="Imperial" value="Imperial" />
          </Picker>
        </View>
        <View style={styles.bottom}>
          <TextInput
            style={{
              height: 40,
              width: 60,
              borderColor: 'gray',
              borderWidth: 1,
            }}
            onChangeText={() => this.setState({ text: weight })}
            value={this.state.weight}
          />
          <Text>{this.state.b1text}</Text>
          <TextInput
            style={{
              height: 40,
              width: 60,
              borderColor: 'gray',
              borderWidth: 1,
            }}
            onChangeText={() => this.setState({ text: height })}
            value={this.state.height}
          />
          <Text>{this.state.b2text}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  top: {
    width: '100%',
    flex: 1,
  },
  bottom: {
    flex: 1,
    alignItems: 'center',
  },
});

One of the crucial things you need to is learn how to write styles with react-native. Here is a resource that has a guide of all of the style properties you can use with const {StyleSheet} from 'react-native'.

https://github.com/vhpoet/react-native-styling-cheat-sheet

Good luck :)