Expo react native Element type is invalid: expected a string or a class/function but got: undefined

Question

I try to learn react-native sorry if this is a dump question.

I created an demo app with expo init using managed flow. And try to add carousel in home screen by using react-native-sideswipe.

I found an example snack and tried to add it in my app. But I am getting this error for Carousel component in HomeScreen.js :

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.

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.

Related part of App.js:

  const [isLoadingComplete, setLoadingComplete] = useState(false);

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={loadResourcesAsync}
        onError={handleLoadingError}
        onFinish={() => handleFinishLoading(setLoadingComplete)}
      />
    );
  } else {
    return (
      <View style={styles.container}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
        <AppNavigator />
      </View>
    );
  }
}

Related part of AppNavigator.js

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,
  })
);

Related part of MainTabNavigator.js

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
);

HomesSreen.js:

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 (
    <View style={styles.container}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}>
        <View style={styles.welcomeContainer}>
          <Image
            source={require('../assets/images/logo.png')}
            style={styles.headerImage}
          />
        <Carousel
          data={data}
          style={{ width, maxHeight: 225 }}
          itemWidth={width}
          threshold={120}
          contentOffset={0}
          renderItem={({ item }) => (
            <View style={{ width: width, paddingHorizontal: 10 }}>
              <Card
                title="Local Modules"
                containerStyle={{ maxWidth: width, height: 225 }}>
                <Badge value={item} />
                <Text style={{ marginTop: 10 }}>
                  Science
                </Text>
              </Card>
            </View>
          )}
        />
        </View>
        <View style={styles.helpContainer}>


        </View>
      </ScrollView>

      <View style={styles.tabBarInfoContainer}>


      </View>
    </View>
  );
}

Thanks for your help!

Answer 1

I think you need to export HomeStack from MainTabNavigator.js:

export default const HomeStack = createStackNavigator({
    Home: HomeScreen,
    }, 
    config
);

Let me know if that doesn't work.