title: Two buttons sharing a row in react-native
body: <p>I have two buttons that look like this</p>
  
  <p><a href="https://i.stack.imgur.com/OBdzj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OBdzj.png" alt="enter image description here"></a></p>
  
  <p>This is the code </p>
  
  <pre><code>render = () =&gt; (
      &lt;Image
        source={require('../../images/login.jpg')}
        style={[AppStyles.containerCentered, AppStyles.container, styles.background]}
      &gt;
        &lt;Image
          source={require('../../images/logo.png')}
          style={[styles.logo]}
        /&gt;
        &lt;Spacer size={200} /&gt;
        &lt;View style={[AppStyles.row, AppStyles.paddingHorizontal]}&gt;
          &lt;View style={[AppStyles.flex1]}&gt;
            &lt;Button
              title={'Login'}
              icon={{ name: 'lock' }}
              onPress={Actions.login}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
  
        &lt;Spacer size={10} /&gt;
  
  
        &lt;View style={[AppStyles.row, AppStyles.paddingHorizontal]}&gt;
          &lt;View style={[AppStyles.flex1]}&gt;
            &lt;Button
              title={'Sign up'}
              backgroundColor={'#FB6567'}
              icon={{ name: 'face' }}
              onPress={Actions.signUp}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
  
      &lt;/Image&gt;
    )
  </code></pre>
  
  <p>I want the buttons to occupy one row and possibly share 40% - 40% of the space with the rest of the 20% going to the padding. How can i have them occupy one row?.</p>