CODEWITHSUNDEEP
react-native
user17659362
user17659362

Reputation: 11

React-native Unable to show any content on my app.js screen

I can't seem to figure out what seems to be the issue. I am getting a render error, "Could'nt find a 'component'; get component or children prop for the screen dashboard. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined.

My code in App.js is as follows:

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

import {
    MainLayout
} from "./screens";

const Stack = createNativeStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: false
                }}
                initialRouteName={'Dashboard'}
            >
                <Stack.Screen
                    name="Dashboard"
                    component={MainLayout}
                />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App

```

My code in /screens/Dashboard/MainLayout is as follows:

```
import React from 'react';
import {
    View,
    Text
} from 'react-native';

const MainLayout = () => {
    return (
        <View>
            <Text>MainLayout</Text>
        </View>
    )
}

export default MainLayout;

```

Upvotes: 0

Views: 435

Answers (1)

ZFloc Technologies
ZFloc Technologies

Reputation: 4635

You are exporting MainLayout as default so import it without { }. You can import default component with any name but non default components with exact name inside { }.

Change your import in App.js like below ( It seems that you also not given full path)

... // rest of imports

import MainLayout from "./screens/Dashboard/MainLayout";

... // rest of codes

Click here to know more about Importing and Exporting

Upvotes: 1

Related Questions