CODEWITHSUNDEEP
javascriptreactjsreact-nativenavigationcomponents
Matthias
Matthias

Reputation: 27

Tab.Navigator -> How to use a component?

Hello I am new to React native and I have a problem:

I created a new Component:

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

class DemoScreen extends Component {
    render(){
        return(
            <View>
                <Text>Test</Text>
            </View>
        ) 
    }

}

export default DemoScreen

And i have my app and tried these two ways to use my DemoScreen Component:

...
import { DemoScreen } from './DemoScreen'
...
            <NavigationContainer>
                <Tab.Navigator>
                    <Tab.Screen name="DemoScreen" component={() => <DemoScreen />}/>
                    <Tab.Screen name="DemoScreen" component={DemoScreen}/>                   
                </Tab.Navigator>
            </NavigationContainer>

But both of them are not working and i don´t understand that :)

The Error: Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'DemoScreen'. 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.

Can somebody help me?

Thx!

Upvotes: 0

Views: 212

Answers (1)

Hend El-Sahli
Hend El-Sahli

Reputation: 6752

or mixed up default import and named import when importing.

You're importing your component as a named-export ...

import DemoScreen from './DemoScreen' //<--- Default Export

Upvotes: 2

Related Questions