Layouting textbox with Flexbox in react native - flexbox

Question

I am trying to layouting my textbox like this
And here is my code that I am trying to do
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<Headline style={styles.headlineText}>Adresse</Headline>
</View>
<View style={styles.row}>
<Input style={styles.text}
placeholder="Strasse"
/>
<Input style={styles.text}
placeholder="Nr"
/>
</View>
<View style={styles.row}>
<Input style={styles.text}
placeholder="PLZ"
/>
<Input style={styles.text}
placeholder="Stadt"
/>
</View>
<View style={styles.row}>
<Button
onPress={() => this.props.navigation.navigate('PaymentInfo', { name: 'PaymentInfo' })}
title="Weiter"
style={styles.button}
/>
</View>
</View>
);
}
and here is the stylesheet
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
backgroundColor: Colors.white,
paddingBottom: normalize(20),
},
row: {
flexDirection: 'row',
alignItems: 'stretch',
justifyContent: 'flex-start',
paddingHorizontal: normalize(20)
},
button: {
marginTop: 20
},
text: {
marginTop: 10
},
headlineText: {
marginTop: normalize(30),
marginBottom: 10,
color: "black"
}});
However I got result like this
Can anyone help me what should I do in order to make my textbox rendered as first image? Many thanks

Answer 1

You can use flex property like this:
<View style={styles.row}>
<Input style={[styles.text,{flex: 4, marginRight: 2}]}
placeholder="Strasse"
/>
<Input style={[styles.text,{flex: 1, marginLeft: 2}]}
placeholder="Nr"
/>
</View>
<View style={styles.row}>
<Input style={[styles.text,{flex: 3, marginRight: 2}]}
placeholder="PLZ"
/>
<Input style={[styles.text,{flex: 7, marginLeft: 2}]}
placeholder="Stadt"
/>
</View>

Answer 2

This is my approach for your solution using flexbox to you can try with this link in repl.it an see the result with expo application on your device repl.it
<script src="//repl.it/embed/K58G/6.js"></script>
Here i paste my code or you can try with link that i gave
This For View
<View style={styles.container}>
<Text style={{fontSize:20}}> Adresses </Text>
<View style={{flexDirection:'row'}}>
<TextInput
placeholder="Strase"
underlineColorAndroid = 'transparent'
style={[styles.text,{flex: 7}]}
/>
<TextInput
placeholder="Nr"
underlineColorAndroid = 'transparent'
style={[styles.text, {flex: 3}]}
/>
</View>
<View style={{flexDirection:'row', marginBottom: 10}}>
<TextInput
placeholder="PLZ"
underlineColorAndroid = 'transparent'
style={[styles.text,{flex: 3}]}
/>
<TextInput
underlineColorAndroid = 'transparent'
placeholder="Stadt"
style={[styles.text,{flex: 7}]}
/>
</View>
<TouchableOpacity style={styles.button}>
<Text style={{fontSize: 20}}>WEITHER</Text>
</TouchableOpacity>
</View>
<View style={styles.container}>
<Text style={{fontSize:20}}> Adresses </Text>
<View style={{flexDirection:'row'}}>
<TextInput
placeholder="Strase"
underlineColorAndroid = 'transparent'
style={[styles.text,{flex: 7}]}
/>
<TextInput
placeholder="Nr"
underlineColorAndroid = 'transparent'
style={[styles.text, {flex: 3}]}
/>
</View>
<View style={{flexDirection:'row', marginBottom: 10}}>
<TextInput
placeholder="PLZ"
underlineColorAndroid = 'transparent'
style={[styles.text,{flex: 3}]}
/>
<TextInput
underlineColorAndroid = 'transparent'
placeholder="Stadt"
style={[styles.text,{flex: 7}]}
/>
</View>
<TouchableOpacity style={styles.button}>
<Text style={{fontSize: 20}}>WEITHER</Text>
</TouchableOpacity>
</View>
This for style
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingRight: 10,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
button: {
height: 50,
marginTop: 10,
backgroundColor: 'orange',
alignItems: 'center',
justifyContent: 'center'
},
text: {
fontSize: 24,
margin: 4,
padding: 10,
height: 100,
borderWidth: 0.5,
borderColor: '#0f0f0f',
},
headlineText: {
marginTop: 30,
marginBottom: 10,
color: "black"
}
}
);