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.