title: ReactNative - button not showing up
body: <p>I'm having trouble displaying my custom  component in ReactNative on Android simulator. Specifically, the  appears as a flat line (height is close to 0 - see the blue line immediately below "Authentication"), when it should have some height. How do I make the button have height? See below. Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/yXQHym.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yXQHym.png" alt="enter image description here"></a></p>
  
  <p>Here's my code:</p>
  
  <p>App.js (the parts that are relevant towards displaying the button)</p>
  
  <pre><code>renderContent() {
          return (
            &lt;Button onPress={() =&gt; firebase.auth().signOut()}&gt;
              Log Out
            &lt;/Button&gt;
          );
  }
  
  render() {
      return (
          &lt;View&gt;
              &lt;Header headerText="Authentication"/&gt;
              {this.renderContent()} //button is rendered here.
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>Custom-defined button:</p>
  
  <pre><code>import React from 'react';
  
  import { Text, TouchableOpacity } from 'react-native';
  
  const Button = ({ onPress, children }) =&gt; {
    const { buttonStyle, textStyle } = styles;
  
    return (
      &lt;TouchableOpacity onPress={onPress} style={buttonStyle}&gt;
        &lt;Text style={textStyle}&gt;
          {children}
        &lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    );
  };
  
  const styles = {
    textStyle: {
      alignSelf: 'center',
      color: '#007aff',
      fontSize: 16,
      fontWeight: '600',
      paddingTop: 10,
      paddingBottom: 10
    },
    buttonStyle: {
      flex: 1,
      alignSelf: 'stretch',
      backgroundColor: '#fff',
      borderRadius: 5,
      borderWidth: 1,
      borderColor: '#007aff',
      marginLeft: 5,
      marginRight: 5
    }
  };
  
  export { Button };
  </code></pre>