title: Invalid prop types: Prop.style key fontSize supplied to view
body: <p><a href="https://i.stack.imgur.com/tw7ju.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tw7ju.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/PhDL0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PhDL0.png" alt="enter image description here"></a></p>
  
  <p>I've built a screen which just contains content in the center of the screen and includes background image. I checked the code but haven't found something that wrong. Here is the code:</p>
  
  <pre><code>import React, {Component} from "react";
  import {Image} from "react-native";
  import {
    Content,
    Button,
    Text,
    Icon,
  } from "native-base";
  class ThankyouScreen extends Component {
    render() {
      return (
        &lt;Image style={styles.image} source={require("../img/cover.jpg")}&gt;
          &lt;Content
            contentContainerStyle={{
              alignSelf: "center",
              justifyContent: "center",
              flex: 1,
            }}
          &gt;
            &lt;Icon name="checkmark" style={styles.icon} /&gt;
            &lt;Text style={styles.text}&gt; Thank You For Joining Us!!&lt;/Text&gt;
            &lt;Button
              bordered
              style={styles.button}
              onPress={() =&gt; this.props.navigation.navigate("Home")}
            &gt;
              &lt;Text style={{color: "#42e5f4"}}&gt; Back To Home&lt;/Text&gt;
            &lt;/Button&gt;
          &lt;/Content&gt;
        &lt;/Image&gt;
      );
    }
  }
  const styles = {
    image: {
      flex: 1,
      alignSelf: "stretch",
      width: undefined,
      height: undefined,
    },
    icon: {
      justifyContent: "center",
      alignSelf: "center",
      fontSize: 90,
      fontWeight: "bold",
      color: "#42e5f4",
    },
    text: {
      justifyContent: "center",
      alignSelf: "center",
      fontSize: 20,
      color: "#42e5f4",
    },
    button: {
      alignSelf: "center",
      marginTop: 15,
      fontSize: 10,
      fontWeight: "bold",
      color: "#0dc49d",
      borderColor: "#42e5f4",
    },
  };
  export default ThankyouScreen;
  </code></pre>
  
  <p>Error looks strange and its difficult to understand why it causes. What's wrong on this code and how it can be solved?</p>