不变违规元素类型无效，应为字符串，但未定义

Question

I have the following code which I am using on screen. I am facing following issue,

Invariant Violation: Element type is invalid: expected a string( for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

Previous screen is rendering well. Even when I remove componentDidMount code and remove all view, conditional and just place <BottomNavigagtion /> It render well and I can see the results.

import React, { PureComponent } from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  ScrollView,
  Image
} from "react-native";
import {
  createBottomTabNavigator,
  createAppContainer,
  createStackNavigator,
  TouchableOpacity,
  ActivityIndicator
} from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import Icon from "react-native-vector-icons/Ionicons";
import { Provider } from "react-redux";
import { withNavigation } from "react-navigation";
import { createStore } from "redux";
import styles from "../styles";
import BottomNavigation from "../components/BottomNavigation";

import {
  RESOURCES_URL,
  APP_SETTINGS_URL,
  COUNTIES_URL
} from "../services/URLs";

class MoreScreen extends PureComponent {
  state = {
    // App General Settings
    app_settings: null,
    //Have a loading state where when data retrieve returns data.
    loading: true
  };
  async componentDidMount() {
    try {
      //Assign the promise unresolved first then get the data using the json method.
      // AppSettings Information

      const appSettingsApiCall = await fetch(APP_SETTINGS_URL);
      const appSettings = await appSettingsApiCall.json();

      this.setState({ app_settings: appSettings.data, loading: false });
    } catch (err) {
      console.log("Error fetching data-----------", err);
    }
  }
  render() {
    const { app_settings, loading } = this.state;
    if (!loading) {
      return (
        <ScrollView style={{ flex: 1, backgroundColor: "#f3f3f3" }}>
          <View style={styles.container}>
            <View
              style={{ flex: 1 }}
              data={app_settings}
              renderItem={this.renderItem}
            >
              <View style={styles.headerContainer}>
                <View style={styles.hamburgerContainer}>
                  <TouchableOpacity
                    style={styles.touchAbleContainer}
                    onPress={() => this.props.navigation.navigate("Welcome")}
                  >
                    <Image
                      style={styles.hamburger}
                      source={{ uri: RESOURCES_URL + "home.png" }}
                    />
                  </TouchableOpacity>
                </View>
                <View style={styles.logoContainer}>
                  <TouchableOpacity
                    style={styles.touchAbleContainer}
                    onPress={() => this.props.navigation.navigate("Welcome")}
                  >
                    <Image
                      style={styles.logo}
                      source={{ uri: RESOURCES_URL + "pinnacle-logo-blue.png" }}
                    />
                  </TouchableOpacity>
                </View>

                <BottomNavigation />
              </View>
            </View>
          </View>
        </ScrollView>
      );
    } else {
      return <ActivityIndicator />;
    }
  }
}

export default MoreScreen;

Answer 1

You are importing ActivityIndicator from the react-navigation package, but I don't believe it exports that. It is in the 'react-native' package though:

import { ActivityIndicator } from 'react-native';

The same remark for TouchableOpacity.