Layouting textbox with Flexbox in react native

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

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"  
    }
  }
);

Answer 2

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>