title: Expo react native Element type is invalid: expected a string or a class/function but got: undefined
body: <p>I try to learn react-native sorry if this is a dump question.</p>
  
  <p>I created an demo app with expo init using managed flow. And try to add carousel in home screen by using react-native-sideswipe. </p>
  
  <p>I found an example <a href="https://snack.expo.io/@kkemple/sideswipe-example" rel="nofollow noreferrer">snack</a> and tried to add it in my app. But I am getting this error for Carousel component in HomeScreen.js :</p>
  
  <p><strong>Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.</strong></p>
  
  <p>I can't figure out what is the problem and how can I solve this. I check the components and props are exists in the version which I am using.</p>
  
  <p>Related part of App.js:</p>
  
  <pre><code>  const [isLoadingComplete, setLoadingComplete] = useState(false);
  
    if (!isLoadingComplete &amp;&amp; !props.skipLoadingScreen) {
      return (
        &lt;AppLoading
          startAsync={loadResourcesAsync}
          onError={handleLoadingError}
          onFinish={() =&gt; handleFinishLoading(setLoadingComplete)}
        /&gt;
      );
    } else {
      return (
        &lt;View style={styles.container}&gt;
          {Platform.OS === 'ios' &amp;&amp; &lt;StatusBar barStyle="default" /&gt;}
          &lt;AppNavigator /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>Related part of AppNavigator.js</p>
  
  <pre><code>import React from 'react';
  import { createAppContainer, createSwitchNavigator } from 'react-navigation';
  
  import MainTabNavigator from './MainTabNavigator';
  
  export default createAppContainer(
    createSwitchNavigator({
      // You could add another route here for authentication.
      // Read more at https://reactnavigation.org/docs/en/auth-flow.html
      Main: MainTabNavigator,
    })
  );
  </code></pre>
  
  <p>Related part of MainTabNavigator.js </p>
  
  <pre><code>import React from 'react';
  import { Platform } from 'react-native';
  import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
  
  import HomeScreen from '../screens/HomeScreen';
  const config = Platform.select({
    web: { headerMode: 'screen' },
    default: {},
  });
  
  const HomeStack = createStackNavigator(
    {
      Home: HomeScreen,
    },
    config
  );
  </code></pre>
  
  <p>HomesSreen.js:</p>
  
  <pre><code>import React from 'react';
  import {
    Animated,
    Easing,
    Image,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Dimensions,
  } from 'react-native';
  import { Constants } from 'expo';
  import { MonoText } from '../components/StyledText';
  
  import { Carousel, AnimatedCarouselItem } from 'react-native-sideswipe';
  import { Card, Badge } from 'react-native-elements';
  
  const { width } = Dimensions.get('window');
  const data = [1, 2, 3, 4, 5];
  
  export default function HomeScreen() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}&gt;
          &lt;View style={styles.welcomeContainer}&gt;
            &lt;Image
              source={require('../assets/images/logo.png')}
              style={styles.headerImage}
            /&gt;
          &lt;Carousel
            data={data}
            style={{ width, maxHeight: 225 }}
            itemWidth={width}
            threshold={120}
            contentOffset={0}
            renderItem={({ item }) =&gt; (
              &lt;View style={{ width: width, paddingHorizontal: 10 }}&gt;
                &lt;Card
                  title="Local Modules"
                  containerStyle={{ maxWidth: width, height: 225 }}&gt;
                  &lt;Badge value={item} /&gt;
                  &lt;Text style={{ marginTop: 10 }}&gt;
                    Science
                  &lt;/Text&gt;
                &lt;/Card&gt;
              &lt;/View&gt;
            )}
          /&gt;
          &lt;/View&gt;
          &lt;View style={styles.helpContainer}&gt;
  
  
          &lt;/View&gt;
        &lt;/ScrollView&gt;
  
        &lt;View style={styles.tabBarInfoContainer}&gt;
  
  
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>Thanks for your help!</p>