title: React Native: UI is not proper in Android, but working fine in iOS
body: <p>I am new to ReactNative. I have implemented a UI in React Native, where it is working fine in <strong>iOS</strong> But in case of <strong>Android</strong>, it is showing some white space over the button. Please check the below screenshots.</p>
  
  <p><a href="https://i.stack.imgur.com/ftzbW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ftzbW.png" alt="Android Screenshot"></a>     <a href="https://i.stack.imgur.com/NRyhN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NRyhN.png" alt="iOS Screenshot"></a></p>
  
  <p>Here is my code that I am using:</p>
  
  <pre><code>export default  class SignUpPage extends React.Component {
    static navigationOptions = {
      title: 'Sign Up',
    };
    render() {
      const {navigate} = this.props.navigation;
      return (
        &lt;View&gt;
          &lt;View style={styles.fbButtonContainer}&gt;
            &lt;Button onPress={this._onPress} title="SIGN UP WITH FACEBOOK" color="#FFFFFF" accessibilityLabel="Tap on Me"/&gt;
          &lt;/View&gt;
          &lt;View style={styles.textEmailInputContainer} &gt;
            &lt;Image source={require('./Images/mail_icon.png')} style={styles.imageIcons}/&gt;
            &lt;TextInput placeholder="Your Email Address" style={styles.txtInput}/&gt;
          &lt;/View&gt;
          &lt;View style={styles.textPasswordInputContainer}&gt;
            &lt;Image source={require('./Images/password_icon.png')} style={styles.imageIcons}/&gt;
            &lt;TextInput placeholder="Create Password" style={styles.txtInput}/&gt;
          &lt;/View&gt;
  
            &lt;View style={styles.magentaButtonContainer}&gt;
              &lt;Button 
                onPress={() =&gt; navigate('SignIn', {name: 'Jane'})}
                title="SIGN UP" color="#FFFFFF" accessibilityLabel="Tap on Me"/&gt;
            &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>And Style is below:</p>
  
  <pre><code>const styles = StyleSheet.create({
    imageIcons: {
      left: 11,
      top: 12,
    },
    fbButtonContainer: {
      backgroundColor: '#3855ca',
      borderRadius: 24,
      padding: 2,
      marginLeft: 18,
      marginRight: 18,
      top: 35,
      height: 47,
    },
    magentaButtonContainer: {
      backgroundColor: '#ca375e',
      borderRadius: 24,
      padding: 2,
      marginLeft: 18,
      marginRight: 18,
      bottom: 55,
      top: 5,
      height: 47,
    },
    textEmailInputContainer: {
      flexDirection:'row',
      backgroundColor: '#efefef',
      borderRadius: 4,
      padding: 2,
      marginLeft: 18,
      marginRight: 18,
      marginTop: 80,
      height: 48,
    },
    textPasswordInputContainer: {
      flexDirection:'row',
      backgroundColor: '#efefef',
      borderRadius: 4,
      padding: 2,
      marginLeft: 18,
      marginRight: 18,
      marginTop: 10,
      height: 48,
    },
    txtInput: {
      top: 0,
      height: 36,
      marginLeft: 24,
      fontSize: 18,
    },
  });
  </code></pre>
  
  <p><strong><em>Please help me out to fix this.</em></strong></p>
  
  <p><strong>There is one more problem the Sign Up button I want to set to bottom with space of 55px. But couldn't achieve it, the way we do in iOS by setting bottom constraint. Please let me know any solution for this as well.</strong></p>