0

I got this error message while working on the other file

Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Store'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

my Store file - screen/Store.js:

import React from "react";
import {
    StyleSheet,
    SafeAreaView,
    View,
    Text,
    TouchableOpacity,
    Image,
    Animated
} from "react-native";
import { isIphoneX } from 'react-native-iphone-x-helper'

import { icons, COLORS, SIZES, FONTS } from '../constants'

const Store = ({ route, navigation }) => {
...
export default Store;

my Home file - screens/Home.js

import React from "react";
import {
    SafeAreaView,
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    FlatList
} from "react-native";

import { icons, images, SIZES, COLORS, FONTS } from '../constants'

const Home = ({ navigation }) => {
...
export default Home;

my navigation file -navigation/tab.js:

import React from 'react';
import {
    View,
    Image,
    TouchableOpacity
} from 'react-native';
import { createBottomTabNavigator, BottomTabBar } from "@react-navigation/bottom-tabs"
import Svg, { Path } from 'react-native-svg';
import { isIphoneX } from 'react-native-iphone-x-helper';

import {Home, User} from '../screens'
import { COLORS, icons } from "../constants"
const Tabs = () => {
...
}

export default Tabs

and my App.js file in the main folder

import React from 'react';
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from '@react-navigation/native';

import { Store, OrderDelivery, User } from './screens';
import Tabs from './navigation/tabs';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: false
                }}
                initialRouteName={'Home'}
            >
                <Stack.Screen name="Home" component={Tabs} />
                <Stack.Screen name="Store" component={Store} />
                <Stack.Screen name="OrderDelivery" component={OrderDelivery} />
                <Stack.Screen name="User" component={User} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

I understand what the message means but I dont get what did I do wrong and how to fix it, please help.

Hanter On
  • 1
  • 1
  • Do you have an index file in the `.screens` folder that exports your screen components? Maybe one of these questions helps: https://stackoverflow.com/questions/60663805/couldnt-find-a-component-or-children-prop-for-the-screen-home-this-can-h https://stackoverflow.com/questions/64180105/couldnt-find-a-component-getcomponent-or-children-prop-for-the-screen – Linda Paiste Feb 02 '21 at 20:44

2 Answers2

0

Are you sure you imported React in Store.js, try adding the import React from 'react';

Andrés Moreno
  • 23
  • 4
0

Try to import Store from './screens/Store';

Yicheng Qin
  • 111
  • 5