React Navigation, Issue finding files

Question

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;

Answer 1

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