title: Text strings must be rendered within a <Text> component issue in React Native
body: <p>I'm using react-native-cli version <code>2.0.1</code> and react-native version <code>0.57.8</code>. I am learning React native, and have encountered an issue when trying to render two different child components (<code>Header</code> and <code>AlbumList</code>) in the main <code>App</code> component. </p>
  
  <p><strong>Issue</strong></p>
  
  <p><a href="https://i.stack.imgur.com/S4Q5D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S4Q5D.png" alt="enter image description here"></a></p>
  
  <p>The error disappears if I remove the <code>&lt;View&gt;</code> tags and <code>AlbumList</code> component in the index.js file (meaning only show one component). I have looked through threads like <a href="https://github.com/facebook/react-native/issues/20084" rel="nofollow noreferrer">this</a>, but am still unable to identify how I'm using the <code>&lt;View&gt;</code> tag incorrectly. </p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import { View, Text, AppRegistry } from 'react-native';
  import Header from './src/components/Header';
  import AlbumList from './src/components/AlbumList';
  
  //&gt;Create a component
  const App = () =&gt; (
  &lt;View&gt; &lt;Header headerName={'Albums'} /&gt; 
  &lt;AlbumList /&gt;
  &lt;/View&gt;
  
  );
  
  
  //&gt;Render component on device
  AppRegistry.registerComponent('albums', ()=&gt; App);
  </code></pre>
  
  <p><strong>AlbumList.js</strong></p>
  
  <pre><code>import React from 'react';
  import { View, Text } from 'react-native';
  
  const AlbumList = () =&gt; {
  return (
    &lt;View&gt;&lt;Text&gt; Album List &lt;/Text&gt;&lt;/View&gt;
  );
  };
  
  export default AlbumList;
  </code></pre>
  
  <p>I think the issue isn't anything to do with the Header.js file, but sharing code nonetheless. </p>
  
  <p><strong>Header.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Text, View } from 'react-native'; // The view tag allows us to position and wrap elements
  
  // Make a component
  const Header = (props) =&gt; {
  
    const { textStyle, viewStyle } = styles;
  
    return (
      &lt;View style = {viewStyle}&gt;
        &lt;Text style = {textStyle}&gt; {props.headerName}&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  const styles = {
    viewStyle: {
        backgroundColor: '#F8F8F8',
        alignItems: 'center',
        justifyContent: 'center',
        height: 60
    },
  
    textStyle: {
      fontSize: 20
    }
  };
  
  export default Header;
  </code></pre>
  
  <p>Help is appreciated. Thanks in advance!</p>