CODEWITHSUNDEEP
javascriptreactjsreact-native
Marko
Marko

Reputation: 545

React Navigation, Issue finding files

Im brand new to React Native and am struggling with something basic, Trying to divide my app into different files (new file per screen) but my navigator cant find the screens or something. Im 90% sure its a pretty basic mistake but have been stuck on it for an embarrassing amount of time.

Here's the Error:

'' Couldn't find a 'component','getComponent' or 'children prop" for screen 'details'

Im pretty sure I did my import/export correctly but obviously something is wrong.

Code:

//component import (app.js)

import { DetailScreen } from './screens/2nd';
...
...

//stack(app.js)

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='home'>
        <Stack.Screen name='home' component={HomeScreen} />
        <Stack.Screen name='details' component={DetailScreen} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}



//details page (2nd.js):

const DetailScreen = () => {
    return (
        <View>
            <Text>
                Detail Screen
        </Text>
        </View>
    )
}

export default DetailScreen;

Upvotes: 3

Views: 179

Answers (2)

Geovani Santos
Geovani Santos

Reputation: 391

When you declare export default FunctionName you just can call that using import aliasFunction from './yourfile'. But if you want to use import {DetailScreen} ... you need declare export FunctionName at ./screens/2nd

Upvotes: 3

Nisuga Jayawardana
Nisuga Jayawardana

Reputation: 432

Change

import { DetailScreen } from './screens/2nd';

to

import  DetailScreen  from './screens/2nd';

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#Description

Upvotes: 3

Related Questions