how to use a custom functional component in react-native?

February 11, 2022

how to use a functional custom component in react native??? i actualy build a login functional component like a custom react but not exsist a "div" i made a "View"
why should this not work??

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

    const Login = () => {
    return (
        <View>
          <Text>Hi</Text>
        </View>
      );
    }
    export default Login;

--------------------------------- 
    import React from 'react';
    import {Login} from './components/Login/Login';
    import { Text, View } from 'react-native';
    
    const App = () => {
        return (
        <View>
          <Login/>
       </View>
        )
     }
     export default App;

>Solution :

You’ve got your named exports and default exports turned around.

This would work instead:

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

    const Login = () => {
    return (
        <View>
          <Text>Hi</Text>
        </View>
      );
    }
    export default Login;

--------------------------------- 
    import React from 'react';
    import Login from './components/Login/Login';
    import { Text, View } from 'react-native';
    
    const App = () => {
        return (
        <View>
          <Login/>
       </View>
        )
     }
     export default App;

When you export default Login, you must import it as a default import with import Login from ./components/Login/Login`

Here is an Expo Snack with the working code as well