When starting React Native app, I'm error that functions are not valid as React child

Question

I'm trying to start my App with react-native-navigation and persistStore from redux persistStore. I'm getting warning that functions are not valid as React child.This may happen if you return a Component instead of from render.

Is there any workaround to start this initial screen, recently I've added startApp function and call it inside render.

Here is my initial component for starting app:

 import React, { Component } from "react";
 import { Provider } from "react-redux";
 import { View, Text } from "react-native";
 import { persistStore } from "redux-persist";
 import { Navigation } from "react-native-navigation";
 import Mapbox from "@mapbox/react-native-mapbox-gl";

 import { registerScreens } from "./screens";
 import store from "./store/configureStore";
 import { appInit, getInitialScreen } from "./appInit";
 import { handleErrorObject } from "./lib/handleError";

 Mapbox.setAccessToken("pk.eyJ123425KKbcgNww");

 export default class App extends Component {
  startApp = () => {
    const persistor = persistStore(store, null, () => {
        registerScreens(store, Provider);

        appInit(store)
            .then(() => {
                const initialScreen = getInitialScreen(store.getState());

                Navigation.startSingleScreenApp({
                    screen: {
                        screen: initialScreen
                    },
                    passProps: {
                        persistor
                    },
                    drawer: {
                        left: {
                            screen: "DrawerMenuScreen"
                        }
                    },
                    appStyle: {
                        orientation: "portrait"
                    }
                });
            })
            .catch(error => {
                handleErrorObject("Error initializing app", error);
            });
    });
};
render() {
    return <View>{this.startApp}</View>;
}
}

Answer 1

There are two things wrong with your code.

startApp is a function and in order to render the JSX returned from any function you need to call it as {this.startApp()}

You do not have any JSX to be returned inside startApp, since it is just setting the values to the persistStore and would contain a persistor object.

I suggest you should take a look at the docs and this article to know more about the usage of react-native-navigation