React Native : Arranging elements - react-native

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 :)