title: How to align label and input in react native?
body: <p>I have to build a simple form where I have 3 labels and 3 TextInput. I want to have them on top of each other with a space between the rows.</p>
  
  <p>I can't figure out the right way to do it properly.</p>
  
  <p>My first attempt is to have a top View with flexDirection: 'row' then a first sub view for the labels, followed by a second sub view with the text inputs. These two views have flexDirection: "column" and justifyContent: "space between".</p>
  
  <p>The views:</p>
  
  <pre><code>&lt;View style={[InitWindowStyles.root]}&gt;
          &lt;View style={InitWindowStyles.textBoxAndInputBox}&gt;
            &lt;Text&gt;User Name&lt;/Text&gt;
            &lt;Text&gt;Password&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={InitWindowStyles.textBoxAndInputBox}&gt;
            &lt;TextInput
              autoCorrect={false}
              onChangeText={this.onUserNameChange}
              value={this.state.userName}
              style={{ backgroundColor: 'white', borderColor: 'black' }}
            /&gt;
            &lt;TextInput
              autoCorrect={false}
              onChangeText={this.onPasswordChange}
              value={this.state.password}
              style={{ backgroundColor: 'white', borderColor: 'black' }}
              secureTextEntry={true}
            /&gt;
          &lt;View&gt;
        &lt;View&gt;
  </code></pre>
  
  <p>The Styles:</p>
  
  <pre><code>const InitWindowStyles = StyleSheet.create({
  
      root: {
          flex: 1,
          flexDirection: "row"
        },
      textBoxAndInputBox: {
          flex: 1, 
          flexDirection: "column",
          justifyContent: "space-between",
  
        }
  })
  </code></pre>
  
  <p>The result is not that bad but not perfect. </p>
  
  <p><a href="https://i.stack.imgur.com/Uo7ad.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uo7ad.png" alt="enter image description here"></a></p>
  
  <p>The advantage that I see is that the first column is automatically sized to the largest label (not shown in the picture above), and the second column takes the available size. And it works in both portrait and landscape mode...</p>
  
  <p>What is the right way to do it ?</p>
  
  <p>Should I have a top view with flexDirection:"column" and sub views for each pair of label and text ?</p>
  
  <p>In an Android Layout, I would have used a GridView to achieve what I want.</p>