Текстовые строки должны отображаться в проблеме компонента <Text> в React Native

Я использую версию 2.0.1 response-native-cli и версию 0.57.8 response-native. Я изучаю React native и столкнулся с проблемой при попытке визуализировать два разных дочерних компонента (Header и AlbumList) в основном компоненте App.

Проблема

Ошибка исчезнет, ​​если я удалю теги <View> и компонент AlbumList в файле index.js (то есть покажу только один компонент). Я просмотрел такие темы, как это, но все еще не могу определить, как я неправильно использую тег <View>.

index.js

import React from 'react';
import { View, Text, AppRegistry } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';

//>Create a component
const App = () => (
<View> <Header headerName = {'Albums'} /> 
<AlbumList />
</View>

);


//>Render component on device
AppRegistry.registerComponent('albums', ()=> App);

AlbumList.js

import React from 'react';
import { View, Text } from 'react-native';

const AlbumList = () => {
return (
  <View><Text> Album List </Text></View>
);
};

export default AlbumList;

Я думаю, что проблема не в файле Header.js, а в том, чтобы поделиться кодом.

Header.js

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) => {

  const { textStyle, viewStyle } = styles;

  return (
    <View style = {viewStyle}>
      <Text style = {textStyle}> {props.headerName}</Text>
    </View>
  );
};

const styles = {
  viewStyle: {
      backgroundColor: '#F8F8F8',
      alignItems: 'center',
      justifyContent: 'center',
      height: 60
  },

  textStyle: {
    fontSize: 20
  }
};

export default Header;

Помощь приветствуется. Заранее спасибо!