Cannot add a child that doenst have a YogaNode to a parent without a measure function

Question

I run across this problem, maybe someone of you came across it and knows a solution? I have looked at the internet and checked my tags, there is no text without Tags

Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: ;]' to a 'RCTView')
    addChildAt
        ReactShadowNodeImpl.java:279
    addChildAt
        ReactShadowNodeImpl.java:56
    setChildren
        UIImplementation.java:482
    setChildren
        UIManagerModule.java:441
    invoke
        Method.java
    invoke
        JavaMethodWrapper.java:372
    invoke
        JavaModuleWrapper.java:160
    run
        NativeRunnable.java
    handleCallback
        Handler.java:739
    dispatchMessage
        Handler.java:95
    dispatchMessage
        MessageQueueThreadHandler.java:29
    loop
        Looper.java:148
    run
        MessageQueueThreadImpl.java:192
    run
        Thread.java:818

The Code: Albumlist.js This is to Display all the Albums

import React, { Component } from 'react';
import { View } from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail.js';

class AlbumList extends Component {
    state = {albums: [] } ;

    componentWillMount(){
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then(response => this.setState ({ albums : response.data }));
    }


    renderAlbums = () => { 
        return this.state.albums.map(albums =>
             <AlbumDetail key = {albums.title} albums={albums}/>
            );
    }

    render(){
        console.log(this.state);
        return (
            <View>
               {this.renderAlbums()}
            </View>
    );
    }
}

export default AlbumList;

AlbumDetail.js This is for one AlbumDetail Card

import React from 'react';
import { Text, View } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';


const AlbumDetail = (props) => {
    return (
        <Card>
            <CardSection>
                <View />
                <View style = {styles.headerContentStyle}>
                    <Text>{props.albums.title}</Text>
                    <Text>{props.albums.artist}</Text>  
                </View>;
            </CardSection>      
        </Card>
    );
};

const styles= {
    headerContentStyle: {
        flexDirection: 'column',
        justifyContent: 'space-around'
    }
};

export default AlbumDetail;

Card.js This is a wrapper for Styles

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

const Card = (props) => {
    return (
        <View style={styles.containerStyle}>
        {props.children}
        </View>
    );
};

const styles = {
    containerStyle:{
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#ddd',
        borderBottomWidth: 0,
        ...Platform.select ({
            ios: {
                shadowColor: '#000',
                shadowOffset: {width: 0, height : 2},
                shadowOpacity : 0.1, 
                shadowRadius: 2,
            }, 
            android: {
                elevation: 1
            }
        }),
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10
    }



};

export default Card;

CardSection.js This is a single Card section Wrapper so it looks nicer

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

const CardSection = (props) => {
    return (
        <View style= {styles.containerStyle}>
            {props.children}
        </View> 
    );
};

const styles = {
    containerStyle: {
        borderBottomWidth:1,
        padding: 5,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        borderColor: '#ddd',
        position: 'relative'
    }
};

export default CardSection;

Answer 1

You have a typo here in your AlbumDetail Card, which is causing ; without rendering inside the Text tag, which is causing the shown error.

<View style = {styles.headerContentStyle}>
     <Text>{props.albums.title}</Text>
     <Text>{props.albums.artist}</Text>  
</View>; // <= here