Followed a Pluralsight Tutorial, but got an undefined Flatlist error-CodePudding

I am trying to show a List of Shopping Items through a FlatList. I followed a React-Native Tutorial on PluralSight (which seems a bit out of date, due to earlier import issues). Anyway, any guidance as to why the console is showing an undefined error would be nice. Sorry for my blindness :D And thanks in advance! Following code snippets should be relevant:

Page:

import React from 'react';
import { View, Text, List, FlatList, StyleSheet, Image, TouchableOpacity } from 'reactage:-native';
import { itemList } from './ItemDB';

const Items = ({ navigation }) => {
    
    const shoppingItem = ({ item }) => {

        return (
            <View style={styles.items}>
                <View>
                    <Image
                        style={styles.img}
                        source={item.image}
                    />
                </View>
                <View>
                    <Text style={styles.name}>
                        {item.name}
                    </Text>
                    <Text style={styles.shortDescription}>
                        {item.shortDescription}
                    </Text>
                    <Text
                        style={styles.description}
                        numberOfLines={2}
                        ellipsizeMode='tail'
                    >
                        {item.description}
                    </Text>
                    <Text style={styles.shortDescription}>
                        Price: {item.price} €
                    </Text>
                    <TouchableOpacity
                        onPress={() => navigation.navigate('ItemPurchase', { itemId: item.id })}
                        style={styles.itembutton}
                    >
                        <Text style={styles.itembutton}>
                            Put in Shopping Cart
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    };
    return (
        <View style={styles.container}>
            <FlatList
                data={itemList}
                renderItem={shoppingItem}
                keyExtractor={(item) => item.id}
            />
        </View>
    );
}

DB:

const itemList = [
    {
        id: 1,
        name: 'Apple',
        image: require('./images/apple.png'),
        price: 0.99,
        description: 'A delicious apple',
        shortDescription: 'An apple',
    },

App.js:

          <Stack.Screen
            name='Items'
            component={Items}
            options={{
              headerTitleAlign: 'center',
              headerTitleStyle: { fontFamily: 'Ubuntu-Regular' },
              headerTitle: 'Items',
            }}
          />

I tried changing the references, searching the net and revisited the Tutorial videos incase i missed something.

CodePudding user response：

You are importing an array of items without explicitly exporting that array: Refactor code as below:

export const itemList = [
    {
        id: 1,
        name: 'Apple',
        image: require('./images/apple.png'),
        price: 0.99,
        description: 'A delicious apple',
        shortDescription: 'An apple',
    },
//... more items

]