javascript - Correctly importing components in react native?

Question

Currently I am exporting a component

  export default function ChooseNamespace() {


  return (
    <View>
      <Text>HELLO</Text>
    </View>
  );
}

And importing it here:

import ChooseNamespace from "./screens/ChooseNamespace";

   const AppDrawerNavigator = () => {
    console.log(storeState.userNamespace);
    if (storeState.userNamespace === null) {
      return <ChooseNamespace />;
    } else {
      return (
        <AppDrawer.Navigator
          drawerContent={(props) => <AppDrawerContent {...props} />}
          drawerContentOptions={{
            activeTintColor: "blue",
            labelStyle: {
              color: "white",
            },
          }}
        >
          <AppDrawer.Screen
            name="Chat"
            children={(props) => <ChatScreen name="Blindly Chat" {...props} />}
          />
          <AppDrawer.Screen
            name="Profile"
            children={(props) => <ProfileScreen name="Profile" {...props} />}
          />
          <AppDrawer.Screen
            name="DirectMessages"
            children={(props) => <DMScreen {...props} />}
          />
          <AppDrawer.Screen
            name="Threads"
            children={(props) => <ThreadsScreen {...props} />}
          />
          <AppDrawer.Screen
            name="Settings"
            children={(props) => <SettingsScreen {...props} />}
          />
          <AppDrawer.Screen
            name="Support"
            children={(props) => <SupportScreen {...props} />}
          />
        </AppDrawer.Navigator>
      );
    }
  };

Which is then throwing the error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of ChooseNamespace.

Can someone try an explain the issue here? I am having a bit of trouble finding it.

question from:https://stackoverflow.com/questions/65617280/correctly-importing-components-in-react-native

Answer 1

const ChooseNamespace =()=> {


  return (
    <View>
      <Text>HELLO</Text>
    </View>
  );
}
export default ChooseNamespace

Try this code. ES6 doesn't allow export default const. You must declare the constant first then export it. Or if WANT to have a function then do this:

function ChooseNamespace() {


  return (
    <View>
      <Text>HELLO</Text>
    </View>
  );
}

export default ChooseNamespace;