How to fix Error 'You Likely forgot to export your component from the file..etc' error in React-Native?

Question

I am importing component from another file to implement it in App.js file, But Unfornatuley getting this error: https://ibb.co/41ynFGX

Here the code:https: (header.js file):

import React from 'react';
import { Text } from 'react-native';

const Header = () => <Text> Hello Ahmed </Text>;


export default Header;

(App.js) code:

import React from 'react';
import { View } from 'react-native';
import Header from './src/components/header';

const App = () => (
    <View>

       <Header />

    </View>

);

export default App;

It works Well Here(https://snack.expo.io/@ahmed105/tenacious-coffee), But I am getting the error when running the app on my device using atom.

Any help will be appreciated.

Answer 1

Hey change your code to this it will work.

import React from 'react'; import { Text } from 'react-native';

export default Header = () => {
    return (
        <Text>
            Hello Ahmed
        </Text>
    );
};

Answer 2

The error has been solved As the problem Was not related to the code itself, The problem was related to React Version. As @Rahul said: "Basically React Stateless function definition is supported on React.14 and above, any lower version may not support it.

So I had updated React by this command: npm install react@latest and everything is going well now.