【react-native-maps】componentsディレクトリ配下のファイルを読み込みたいです。　react native

前提・実現したいこと

react native　を書いていてで下記の react-native-mapsでexsampleを漁っていました。（$　????　$）
https://github.com/react-native-community/react-native-maps/tree/master/example

app.jsへ直接書いていたものを他のディレクトリに入れてimportしたらerrorが出ました。しかし、下のerrorでは何を言っているのか分からず、なぜにerrorが出ているのか、そしてどうすれば解決出来るのか教えて欲しいのです。お願いいたします(m__m)

発生している問題・エラーメッセージ

Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

callFunctionReturnFlushedQueue
    [native code]:0

該当のソースコード

ディレクトリ構成

    ├─ index.js/
    ├─ App.js/
    ├─ components/
    　　　 └─ CustomCallout.js
    　　　 └─ index.js

// ./index.js


/**
 * @format
 */

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => App);

// ./App.js

import React from "react-native";
import Map from "./components/index";

const App = () => {
  return <Map />;
};

export default App;

// ./components/index.js

import React from "react";
import { StyleSheet, View, Text, Dimensions, TouchableOpacity, Alert } from "react-native";
import MapView, { Marker, Callout, CalloutSubview, ProviderPropType } from "react-native-maps";
import CustomCallout from "./CustomCallout";

const { width, height } = Dimensions.get("window");
const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

class Callouts extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      cnt: 0,
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      markers: [
        {
          coordinate: {
            latitude: LATITUDE + SPACE,
            longitude: LONGITUDE + SPACE,
          },
        },
        {
          coordinate: {
            latitude: LATITUDE + SPACE,
            longitude: LONGITUDE - SPACE,
          },
        },
        {
          coordinate: {
            latitude: LATITUDE,
            longitude: LONGITUDE,
          },
        },
        {
          coordinate: {
            latitude: LATITUDE,
            longitude: LONGITUDE - SPACE / 2,
          },
        },
      ],
    };
  }

  show() {
    this.marker1.showCallout();
  }

  hide() {
    this.marker1.hideCallout();
  }

  render() {
    const { region, markers } = this.state;
    return (
      <View style={styles.container}>
        <MapView provider={this.props.provider} style={styles.map} initialRegion={region} zoomTapEnabled={false}>
          <Marker
            ref={ref => {
              this.marker1 = ref;
            }}
            coordinate={markers[0].coordinate}
            title="This is a native view"
            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"
          />
          <Marker coordinate={markers[1].coordinate}>
            <Callout style={styles.plainView}>
              <View>
                <Text> This is a plain view </Text>
              </View>
            </Callout>
          </Marker>
          <Marker
            coordinate={markers[2].coordinate}
            calloutOffset={{
              x: -8,
              y: 28,
            }}
            calloutAnchor={{
              x: 0.5,
              y: 0.4,
            }}
            ref={ref => {
              this.marker2 = ref;
            }}
          >
            <Callout
              alphaHitTest
              tooltip
              onPress={e => {
                if (
                  e.nativeEvent.action === "marker-inside-overlay-press" ||
                  e.nativeEvent.action === "callout-inside-press"
                ) {
                  return;
                }

                Alert.alert("callout pressed");
              }}
              style={styles.customView}
            >
              <CustomCallout>
                <Text> {`This is a custom callout bubble view ${this.state.cnt}`} </Text>
                <CalloutSubview
                  onPress={() => {
                    this.setState(
                      {
                        cnt: this.state.cnt + 1,
                      },
                      () => {
                        this.marker2.redrawCallout();
                      }
                    );
                  }}
                  style={[styles.calloutButton]}
                >
                  <Text> Click me </Text>
                </CalloutSubview>
              </CustomCallout>
            </Callout>
          </Marker>
          <Marker
            ref={ref => {
              this.marker4 = ref;
            }}
            coordinate={markers[3].coordinate}
            title="You can also open this callout"
            description="by pressing on transparent area of custom callout"
          />
        </MapView>
        <View style={styles.buttonContainer}>
          <View style={styles.bubble}>
            <Text> Tap on markers to see different callouts </Text>
          </View>
        </View>
        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={() => this.show()} style={[styles.bubble, styles.button]}>
            <Text> Show </Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.hide()} style={[styles.bubble, styles.button]}>
            <Text> Hide </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

Callouts.propTypes = {
  provider: ProviderPropType,
};

const styles = StyleSheet.create({
  customView: {
    width: 140,
    height: 140,
  },
  plainView: {
    width: 60,
  },
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "flex-end",
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  bubble: {
    flex: 1,
    backgroundColor: "rgba(255,255,255,0.7)",
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20,
  },
  latlng: {
    width: 200,
    alignItems: "stretch",
  },
  button: {
    width: 80,
    paddingHorizontal: 12,
    alignItems: "center",
    marginHorizontal: 10,
  },
  buttonContainer: {
    flexDirection: "row",
    marginVertical: 20,
    backgroundColor: "transparent",
  },
  calloutButton: {
    width: "auto",
    backgroundColor: "rgba(255,255,255,0.7)",
    paddingHorizontal: 6,
    paddingVertical: 6,
    borderRadius: 12,
    alignItems: "center",
    marginHorizontal: 10,
    marginVertical: 10,
  },
});

export default Callouts;

// ./components/CustomCallout.js

import React from "react";
import PropTypes from "prop-types";

import { StyleSheet, View } from "react-native";

const propTypes = {
  children: PropTypes.node.isRequired,
  style: PropTypes.object,
};

class CustomCallout extends React.Component {
  render() {
    return (
      <View style={[styles.container, this.props.style]}>
        <View style={styles.bubble}>
          <View style={styles.amount}> {this.props.children} </View>
        </View>
        <View style={styles.arrowBorder} />
        <View style={styles.arrow} />
      </View>
    );
  }
}

CustomCallout.propTypes = propTypes;

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    alignSelf: "flex-start",
  },
  bubble: {
    width: 140,
    flexDirection: "row",
    alignSelf: "flex-start",
    backgroundColor: "#4da2ab",
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 6,
    borderColor: "#007a87",
    borderWidth: 0.5,
  },
  amount: {
    flex: 1,
  },
  arrow: {
    backgroundColor: "transparent",
    borderWidth: 16,
    borderColor: "transparent",
    borderTopColor: "#4da2ab",
    alignSelf: "center",
    marginTop: -32,
  },
  arrowBorder: {
    backgroundColor: "transparent",
    borderWidth: 16,
    borderColor: "transparent",
    borderTopColor: "#007a87",
    alignSelf: "center",
    marginTop: -0.5,
  },
});

export default CustomCallout;