React Native, Cannot add a child that doesn't have a YogaNode to a parent without a measure function

Question

I constantly get the error "Cannot add a child that doesn't have a YogaNode to a parent without a measure function" in my react native application.

In the internet I only find tips like wrapping text in actual Text components or removing semicolons, but I don't find any of these errors in my code.

Main File / Backgroundtracker.js

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

import StartStopButton from "./src/components/StartStopButton/StartStopButton";

class BackgroudTracker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenState: "Home"
        };
        this.changeStateScreenState = this.changeStateScreenState.bind(this);
    }

    changeStateScreenState() {
        futureState = this.state.screenState === "Home" ? "Tracking" : "Home";
        this.setState({
            screenState: futureState
        });
    }

    render() {
        return (
            <View>
                <StartStopButton changeStateScreenState={this.changeStateScreenState}/>
            </View>
        )
    }
}

export default BackgroudTracker;

StartStopButton.js

import React, { Component } from "react";
import {
    View,
    Text,
    TouchableHighlight,
    StyleSheet,
    LayoutAnimation,
    NativeModules
} from "react-native";
import { startTrack } from "../../utilities/startTrack";
import { stopTrack } from "../../utilities/stopTrack";

const { UIManager } = NativeModules;

UIManager.setLayoutAnimationEnabledExperimental &&
    UIManager.setLayoutAnimationEnabledExperimental(true);

class StartStopButton extends Component {
    constructor() {
        super();
        this.state = {
            currentButtonText: "rec",
            buttonStatus: "recordingButton",

            currentButtonColor: "#E0ECF1",
            currentButtonWidth: 310,
            currentButtonHeight: 310,
            currentButtonBorderRadius: 310 / 2,
            currentButtonBorderColor: "#79CDBE",
            currentButtonBorderWidth: 80
        };
    }

    startButtonProps = {
        startButtonWidth: 310,
        startButtonHeight: 310,
        startButtonBorderRadius: 310 / 2,
        startButtonBorderColor: "#79CDBE",
        startButtonBorderWidth: 80
    };

    stopButtonProps = {
        stopButtonWidth: 155,
        stopButtonHeight: 155,
        stopButtonBorderRadius: 30,
        stopButtonBorderColor: "#79CDBE",
        stopButtonBorderWidth: 33
    };

    startTrackingFunction() {
        startTrack();

        LayoutAnimation.spring();
        this.setState({
            buttonStatus: "stopButton",
            currentButtonText: "stop",

            currentButtonBorderRadius: this.stopButtonProps
                .stopButtonBorderRadius,
            currentButtonHeight: this.stopButtonProps.stopButtonHeight,
            currentButtonWidth: this.stopButtonProps.stopButtonWidth,
            currentButtonBorderWidth: this.stopButtonProps.stopButtonBorderWidth
        });
        this.props.changeStateScreenState;
    }

    stopTrackingFunction() {
        stopTrack();

        LayoutAnimation.spring();
        this.setState({
            buttonStatus: "recordingButton",
            currentButtonText: "rec",

            currentButtonBorderRadius: this.startButtonProps
                .startButtonBorderRadius,
            currentButtonHeight: this.startButtonProps.startButtonHeight,
            currentButtonWidth: this.startButtonProps.startButtonWidth,
            currentButtonBorderWidth: this.startButtonProps
                .startButtonBorderWidth
        });
        this.props.changeStateScreenState;
    }

    render() {
        return (
            <View>
                <TouchableHighlight
                    style={{
                        backgroundColor: this.state.currentButtonColor,
                        borderRadius: this.state.currentButtonBorderRadius,
                        height: this.state.currentButtonHeight,
                        width: this.state.currentButtonWidth,
                        borderWidth: this.state.currentButtonBorderWidth,
                        borderColor: this.state.currentButtonBorderColor,
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                    onPress={() => {
                        if (this.state.buttonStatus == "recordingButton") {
                            this.startTrackingFunction();
                        } else {
                            this.stopTrackingFunction();
                        }
                    }}
                >
                    <Text style={styles.startRecText}>
                        {this.state.currentButtonText}
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    startRecText: {
        alignSelf: "center",
        textAlign: "center",
        color: "#79CDBE",
        fontSize: 43,
        justifyContent: "center"
    }
});

export default StartStopButton;

I'd be glad if you can help me out here!

Answer 1

Edit:

Comments in render function can be done, but like this:

render() {
    return (
        <View>
            { /*<KilometerDisplay screenState={this.state.screenState} />
            {renderIf(this.state.screenState == "Tracking")(
                <GifComponent />
            )}*/ }
            <StartStopButton changeStateScreenState={this.changeStateScreenState}/>
        </View>
    )
}

Old:

Look for a stray character that is not wrapped in a <Text>. I do this on accident lots. I accidentally put a colon in my jsx and it treats that as text and in RN all text needs to be wrapped by <Text> so it throws that. You probably have a stray text somewhere.

Aside:

You're using TouchableHighlight so in StartStopButton there is no need to wrap it in a View. TouchableHighlight creates a view and wraps the children in it. Applying style to TouchableHighlight will apply it to this created View.

Answer 2

Inside of my render function I had a comment like this:

render() {
    return (
        <View>
            /*<KilometerDisplay screenState={this.state.screenState} />
            {renderIf(this.state.screenState == "Tracking")(
                <GifComponent />
            )}*/
            <StartStopButton changeStateScreenState={this.changeStateScreenState}/>
        </View>
    )
}

This caused the application to crash.