title: Invariant Violation: Text strings must be rendered within a Text component
body: <p><img src="https://i.stack.imgur.com/zPwST.png" alt="" /></p>
  <p>I am trying to add my <code>CardsSection</code> component into my <code>Card</code> component however I keep getting this error about a Text Violation but I'm not even using any Text within my <code>Tournament</code>, <code>Card</code>, or <code>CardSection</code> .js files. I don't see why I'm getting this error. Can someone tell me what to do and why?</p>
  <p><strong>Tournament.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { View, Text, Image, ScrollView } from &quot;react-native&quot;;
  import { Card, Button, Spinner, CardSection } from &quot;../common&quot;;
  
  class Tournaments extends React.Component {
    static navigationOptions = {
      tabBarLabel: &quot;Tournaments&quot;
    };
    render() {
      return (
        &lt;View style={styles.containerStyle}&gt;
          &lt;Card&gt;
            &lt;View style={styles.logoContainer}&gt;
              &lt;Image
                style={styles.logo}
                source={require(&quot;../../Images/ShoeJackCityLogo.png&quot;)}
              /&gt;
            &lt;/View&gt;
            &lt;View style={styles.formContainer} /&gt;
          &lt;/Card&gt;
          &lt;ScrollView horizontal&gt;
            &lt;Card&gt;
              &lt;View style={{ flex: 1, flexDirection: &quot;row&quot; }}&gt;
                &lt;CardSection&gt;
                  &lt;Image
                    style={styles.product}
                    source={require(&quot;../../Images/aj_4_toro.png&quot;)}
                  /&gt;
                &lt;/CardSection&gt;
                &lt;CardSection&gt;
                  &lt;Image
                    style={styles.product}
                    source={require(&quot;../../Images/aj_4_toro.png&quot;)}
                  /&gt;
                &lt;/CardSection&gt;
                &lt;CardSection&gt;
                  &lt;Image
                    style={styles.product}
                    source={require(&quot;../../Images/aj_4_toro.png&quot;)}
                  /&gt;
                &lt;/CardSection&gt;
              &lt;/View&gt;
            &lt;/Card&gt;
          &lt;/ScrollView&gt;
        &lt;/View&gt;
      );
    }
  }
  const styles = {
    containerStyle: {
      flex: 1,
      backgroundColor: &quot;#F13C20&quot;,
      paddingBottom: 20
    },
    logoContainer: {
      alignItems: &quot;center&quot;,
      flexGrow: 1,
      justifyContent: &quot;flex-start&quot;,
      paddingBottom: 15
    },
    logo: {
      paddingTop: 15,
      width: 50,
      height: 50
    },
    product: {
      width: 100,
      height: 100,
      paddingBottom: 15,
      marginRight: 50
    }
  };
  export default Tournaments;
  </code></pre>
  <p><strong>CardSection.js</strong></p>
  <pre><code>import React from 'react';
  import { View } from 'react-native';
  
  const CardSection = (props) =&gt; (
      &lt;View style={styles.containerStyle}&gt;
      {props.children};
      &lt;/View&gt;
    );
  
  const styles = {
    containerStyle: {
      borderBottomWidth: 1,
      padding: 5,
      backgroundColor: 'white',
      justifyContent: 'flex-start',
      flexDirection: 'row',
      borderColor: '#ddd',
      position: 'relative'
    }
  };
  
  export { CardSection };
  </code></pre>
  <p><strong>Card.js</strong></p>
  <pre><code>import React from 'react';
  import { View } from 'react-native';
  
  const Card = (props) =&gt; (
      &lt;View style={styles.containerStyle}&gt;
        {props.children}
      &lt;/View&gt;
    );
  
  const styles = {
    containerStyle: {
      borderBottomWidth: 0,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 2,
      elevation: 1,
      marginLeft: 5,
      marginRight: 5,
      marginTop: 30,
  }
  };
  
  export { Card };
  </code></pre>