The component for route must be a react component in react native

Question

I am creating an app using react native and am creating navigation using createStackNavigator to go (and send information) between screens.

When I run my app I get the following error.

Here is my nav code.

 import { createStackNavigator } from 'react-navigation-stack'; import { createAppContainer } from 'react-navigation'; import HomeScreen from './App'; import SecondActivity from './sermons'; const RootStack = createStackNavigator({ Home: { screen: HomeScreen }, Events: { screen: SecondActivity } }); const AppContainer = createAppContainer(RootStack); export default AppContainer;

Here is App.js

 import React from 'react'; import { StyleSheet, FlatList, View, Text, ActivityIndicator } from 'react-native'; import AppContainer from './nav'; export default class HomeScreen extends React.Component { static navigationOptions = { title: 'Sermons', } constructor(props) { super(props); this.state = { isLoading: true } } componentDidMount(){ fetch('http://d74bb1dc.ngrok.io/sermons.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson }, () => { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } OpenSecondActivity(id) { this.props.navigation.navigate("Second", { FlatListClickItemHolder: id}); } render() { if (this.state.isLoading) { return ( <View style={{flex: 1, paddingTop: 20}}> <ActivityIndicator /> </View> ); } return ( <View style={styles.MainContainer}> <FlatList data={this.state.dataSource} renderSeparator= {this.FlatListItemSeparator} renderItem={({item}) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} > {item.Name} {item.DateRecorded} </Text>} //keyExtractor={(item,index) => index} /> <AppContainer /> </View> ); } }

What can I do to fix this problem? I have googled this but nothing seems to be fixing it.

Answer 1

Inside App.js, you can't insert <AppContainer /> like below,

return (
    <View style={styles.MainContainer}>
        <FlatList
            data={this.state.dataSource}
            renderSeparator={this.FlatListItemSeparator}
            renderItem={({ item }) =>
                <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} >
                    {item.Name} {item.DateRecorded}
                </Text>}
        />

        <AppContainer />
    </View>
);

Since you already import your app.js import HomeScreen from './App' & wrapped inside <AppContainer />

Inorder to fix this create a HomeScreen.js & insert your app.js code inside that

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

export default class HomeScreen extends React.Component {
    static navigationOptions =
        {
            title: 'Sermons',
        }
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true
        }
    }
    componentDidMount() {
        fetch('http://d74bb1dc.ngrok.io/sermons.php')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }
    ListViewItemSeparator = () => {
        return (
            <View
                style={{
                    height: .5,
                    width: "100%",
                    backgroundColor: "#000",
                }}
            />
        );
    }

    OpenSecondActivity(id) {
        this.props.navigation.navigate("Second", { FlatListClickItemHolder: id });
    }
    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, paddingTop: 20 }}>
                    <ActivityIndicator />
                </View>
            );
        }
        return (
            <View style={styles.MainContainer}>
                <FlatList
                    data={this.state.dataSource}
                    renderSeparator={this.FlatListItemSeparator}
                    renderItem={({ item }) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} > {item.Name} {item.DateRecorded} </Text>}
                />
                <AppContainer />
            </View>
        );
    }
}

After that import your nav code to app.js & export <AppContainer /> as below,

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

If you have doubts feel free to ask. Hope this helps you.