Error in React Native navigation ( createnativeStackNavigator )

Question

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 App.

App.js

import React, {useState} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { PaperWrapper } from './src/PaperWrapper';
import {Provider as PaperProvider, MD3LightTheme as DefaultTheme} from 'react-native-safe-area-context'
import themeJson from './src/theme.json'

const Stack = createNativeStackNavigator();

export default function App() {
  const theme = {
    ...DefaultTheme,
    colors: themeJson
 };

  return (
    <PaperProvider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name='PaperWrapper' component={PaperWrapper}/>
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}   

PaperWrapper.js

import { View, Text } from 'react-native'
import React from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context'

const PaperWrapper = ({navigation}) => {
  return (
   <SafeAreaProvider >
     <View style={styles.container}>
       <SignUp/>
     </View>
   </SafeAreaProvider>
  )
}

export default PaperWrapper;

I have expo managed project. I referred this and want to include navigation in my project. The SignUp component is custom component defined, similar to the PaperWrapper. Only has forms inside it. I am getting this error only after I wrapped App.js with Navigation. What am I doing wrong?

Answer 1

Since it's an export default, update the way you import PaperWrapper:

From:

import { PaperWrapper } from './src/PaperWrapper';

To:

import PaperWrapper from './src/PaperWrapper';

Update

Also, change this:

import {Provider as PaperProvider, MD3LightTheme as DefaultTheme} from 'react-native-safe-area-context'

By this:

import {Provider as PaperProvider, MD3LightTheme as DefaultTheme} from "react-native-paper"