How can I fix this error from react-native?

May 5, 2024

I’m trying to make some scanner app with react native and i was programming the basic frame of the project, but it keeps throwing error.

Here are my code:

App.js

import App from './src/App';

export default App;

src/App.js

import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { Stacks } from './Stack';

const App = () => {
  return (
    <NavigationContainer>
      <StatusBar style="auto" />
      <Stacks />
    </NavigationContainer>
  );
};

export default App;

src/Stack.js

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import CameraScreen from './screens/CameraScreen';
import InfoScreen from './screens/InfoScreen';

const Stack = createNativeStackNavigator();

const Stacks = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Camera" component={CameraScreen} />
      <Stack.Screen name="Info" component={InfoScreen} />
    </Stack.Navigator>
  );
};

export default Stacks;

src/screens/CameraScreen.js

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

const CameraScreen = () => {
  return (
    <View style={styles.container}>
      <Text>CAMERA SCREEN</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default CameraScreen;

src/screens/InfoScreen.js

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

const InfoScreen = () => {
  return (
    <View style={styles.container}>
      <Text>INFO SCREEN</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default InfoScreen;

these code give me an error below:

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

This error is located at:
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:433)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:7)
    in App (at withDevTools.js:18)
    in withDevTools(App) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

I asked Gemini about this and it answered to check if ‘Stacks’ is exported correctly, so i checked it but it was okay (from what I’ve seen)

>Solution :

import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { Stacks } from './Stack';

const App = () => {
  return (
    <NavigationContainer>
      <StatusBar style="auto" />
      <Stacks />
    </NavigationContainer>
  );
};

export default App;

the issue is arises from the way you import the file of Stack.