title: getting null height for touchableOpacity
body: <p>Hi I am new to react native, I am following a course from udemy. In the course while creating a custom made button I am getting null height of the button but according to the course instructor the button should have height.</p>
  
  <p>Below is the source code for App.js </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text } from 'react-native';
  import firebase from 'firebase';
  import { Header, Button, Spinner } from './components/common';
  import LoginForm from './components/LoginForm';
  
  class App extends Component {
  
      state = { loggedIn: null };
  
      componentWillMount() {
          firebase.initializeApp({
              apiKey: 'AIzaSyB9AnPpTlaO5XbzPOhPPVBhCbn0SEel7hw',
              authDomain: 'authentication-ce600.firebaseapp.com',
              databaseURL: 'https://authentication-ce600.firebaseio.com',
              projectId: 'authentication-ce600',
              storageBucket: 'authentication-ce600.appspot.com',
              messagingSenderId: '979192009377'
          });
  
      firebase.auth().onAuthStateChanged((user) =&gt; {
          if (user){
              this.setState({ loggedIn: true });
          }
          else{
              this.setState({ loggedIn: false });
          }
      });
  }
  
  renderContent (){
      switch (this.state.loggedIn) {
  
          case true:
              return (
                  &lt;Button&gt;
                      Log Out
                  &lt;/Button&gt;
                  );
          case false:
              return &lt;LoginForm /&gt;;
          default: 
              return &lt;Spinner size="large" /&gt;;
      }
  
  }
  
      render (){
          return (
                  &lt;View&gt;
                  &lt;Header headerText="Auth"/&gt;
                      {this.renderContent()}
                  &lt;/View&gt;
              );
      }
  };
  
  
  export default App;
  </code></pre>
  
  <p>Below is the Button.js</p>
  
  <pre><code>import React from 'react';
  import { Text, TouchableOpacity } from 'react-native';
  
  const Button = ({onPress, children}) =&gt; {
  
      return (
              &lt;TouchableOpacity onPress={onPress} style={styles.buttonStyle}&gt;
                  &lt;Text style={styles.textStyle}&gt; {children} &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          );
  };
  
  const styles = {
      buttonStyle: {
          flex: 1,
          alignSelf: 'stretch',
          backgroundColor: '#fff',
          borderRadius: 5,
          borderWidth: 1,
          borderColor: '#007aff',
          marginLeft: 5,
          marginRight: 5
      },
      textStyle: {
          fontSize: 16,
          paddingTop: 10,
          paddingBottom: 10,
          color: '#007aff',
          fontWeight: '600'
      }
  };
  
  export  {Button} ;
  </code></pre>
  
  <p>Here is what the expected output should be:
  <a href="https://i.stack.imgur.com/7mYD2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7mYD2.png" alt="this is the expected output according to the course instructor"></a></p>
  
  <p>this is the actual ouput which I am getting:</p>
  
  <p><a href="https://i.stack.imgur.com/ZgEV3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZgEV3.jpg" alt="the blue line that you see is what all i am getting"></a></p>
  
  <p>Thanks in advance</p>