StackNavigator: супер-выражение должно быть либо нулевым, либо функцией, а не неопределенным

Question

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  Image,
  View,
  TextInput,
  Button,
  FlatList,
  TouchableOpacity,
  ActivityIndicator,
  ScrollView,
  Alert,
  Linking,
  TouchableHighlight,
  RefreshControl
} from "react-native";
import {
  Ionicons,
  Entypo,
  FontAwesome,
  MaterialIcons
} from "@expo/vector-icons";
import moment from "moment";
import InfoScreen from "./InfoScreen";

const AppNavigator = StackNavigator({
  InfoScreen: { screen: InfoScreen }
});

export default class FutureLaunches extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: null,
      refreshing: false
    };
  }

  _onRefresh = () => {
    this.setState({ refreshing: true });
    this.componentDidMount().then(() => {
      this.setState({ refreshing: false });
    });
  };

  onPress() {
    Alert.alert("Blahblachadwiad");
  }
  componentDidMount() {
    return fetch("https://launchlibrary.net/1.4/launch?mode=verbose")
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          isLoading: false,
          dataSource: responseJson.launches
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    } else {
      let launches = this.state.dataSource.map((item, key) => {
        let LaunchDate = moment(item.isostart, moment.ISO_8601).format("llll");
        return (
          <View key={key} style={styles.container}>
            <Image
              style={{ width: 350, height: 520, borderRadius: 10 }}
              source={{ uri: item.rocket.imageURL }}
            />
            <Entypo
              name="map"
              color={"white"}
              size={24}
              style={styles.MapIcon}
              onPress={() => Linking.openURL(item.location.pads[0].mapURL)}
            />
            <FontAwesome
              name="heart-o"
              color={"white"}
              size={25}
              style={{
                backgroundColor: "transparent",
                position: "absolute",
                marginTop: "6.5%",
                marginLeft: "50%"
              }}
            />
            <Entypo
              name="video-camera"
              color={"white"}
              size={24}
              style={styles.VideoIcon}
              onPress={() => {
                if (item.vidURLs.length > 0) {
                  Linking.openURL(item.vidURLs[0]);
                } else if (item.vidURLs.length == 0) {
                  Alert.alert("There is no livestream available.");
                }
              }}
            />
            <TouchableHighlight onPress={this.onPress.bind(this)}>
              <View style={styles.subcontainer}>
                <Text style={styles.Title}>{item.missions[0].name}</Text>
                <Text style={{ paddingBottom: 3 }}>
                  <Text style={styles.TextHeader}>Launch Date: </Text>
                  <Text style={styles.Text}>{LaunchDate}</Text>
                </Text>
                <Text style={{ paddingBottom: 3 }}>
                  <Text style={styles.TextHeader}>Location: </Text>
                  <Text style={styles.Text}>{item.location.name}</Text>
                </Text>
                <Text style={{ paddingBottom: 3 }}>
                  <Text style={styles.TextHeader}>Service Provider: </Text>
                  <Text style={styles.Text}>{item.lsp.name}</Text>
                </Text>
                <Text style={{ paddingBottom: 3 }}>
                  <Text style={styles.TextHeader}>Rocket: </Text>
                  <Text style={styles.Text}>{item.rocket.name}</Text>
                </Text>
              </View>
            </TouchableHighlight>
          </View>
        );
      });

      return (
        <View style={styles.Background}>
          <AppNavigator />
          <ScrollView
            contentContainerStyle={styles.contentContainer}
            refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh}
              />
            }
          >
            {launches}
          </ScrollView>
        </View>
      );
    }
  }
}

При попытке реализовать стековый навигатор я наткнулся на ошибку: «супер-выражение должно быть либо нулевым, либо функцией, а не неопределенным». и сообщение об ошибке только появилось, когда я попытался осуществить это, ничего больше. Я искал решения этой ошибки, но ничего не помогло. Я удостоверился, что орфография / заглавные буквы были правильны, и React обновлен, но все еще никогда не находил решение. Я пытаюсь сделать так, чтобы стек-навигатор находился в верхней части экрана, и после нажатия Touchable Highlight вы попадете на информационный экран.