React Native 错误：元素类型无效：应为字符串或类/函数（对于复合组件）但得到：未定义

Question

In my React Native project, I am getting this error

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

This error is located at:
    in MaterialTopTabView (at createMaterialTopTabNavigator.tsx:44)
    in MaterialTopTabNavigator (at AuthTabs.js:11)

After spending 3 days looking through my screens I am still unable to find ou where this error is coming from

see the code for the component giving the error

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import React from 'react';
import SignIn from './tabs/SignIn';
import SignUp from './tabs/SignUp';

const Tab = createMaterialTopTabNavigator();

const AuthTabs = () => {
  return (
    <>
      <Tab.Navigator initialRouteName={'SignIn'}>
        <Tab.Screen
          name="SignIn"
          component={SignIn}
          options={({}) => ({
            tabBarLabel: 'Sign In',
          })}
        />
        <Tab.Screen
          name="SignUp"
          component={SignUp}
          options={({}) => ({
            tabBarLabel: 'Sign Up',
          })}
        />
      </Tab.Navigator>
    </>
  );
};

export default AuthTabs;

and see the code in the tabs

I strongly suspect that the error is from this file (SignIn)

import React, {useState} from 'react';
import {View, TouchableOpacity} from 'react-native';
import {Text, Button, TextInput} from '@components';
import styles from './styles';

export default function SignIn({navigation}) {
  const [loading, setLoading] = useState(false);
  const [id, setId] = useState('paul');
  const [password, setPassword] = useState('123456');
  const [success, setSuccess] = useState({id: true, password: true});

  /**
   * call when action onLogin
   */
  const onLogin = () => {
    if (id == '' || password == '') {
      setSuccess({
        ...success,
        id: false,
        password: false,
      });
      return;
    }
    const params = {
      username: id,
      password,
    };
    setLoading(true);
  };

  return (
    <View style={styles.contain}>
      <View style={styles.contentTodoText}>
        <Text body3 grayColor>
          Welcome back
        </Text>
      </View>
      <View style={styles.contentTodoText}>
        <Text body1 grayColor>
          Please enter your credentials to continue
        </Text>
      </View>
      <TextInput
        onChangeText={setId}
        onFocus={() => {
          setSuccess({
            ...success,
            id: true,
          });
        }}
        success={success.id}
        value={id}
      />
      <TextInput
        style={{marginTop: 10}}
        onChangeText={setPassword}
        onFocus={() => {
          setSuccess({
            ...success,
            password: true,
          });
        }}
        secureTextEntry={true}
        success={success.password}
        value={password}
      />
      <TouchableOpacity onPress={() => navigation.navigate('ResetPassword')}>
        <Text body2 grayColor style={{marginTop: 25}}>
          Forgot Your Password? <Text style={{color: '#00F'}}>Click here</Text>
        </Text>
      </TouchableOpacity>
      <Button style={{marginTop: 20}} full loading={loading} onPress={onLogin}>
        sign in
      </Button>
      <View style={styles.contentActionBottom}>
        <TouchableOpacity onPress={() => navigation.navigate('SignUp')}>
          <Text body2 grayColor>
            Don't have an Account?{' '}
            <Text style={{color: '#00F'}}>Click here</Text>
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

see signup screen component

import React, {useState} from 'react';
import {View, TouchableOpacity, Alert, Text} from 'react-native';
import {BaseSetting} from '@config';
import {Button, TextInput} from '@components';
import styles from './styles';
import * as api from '@api';
import {useTranslation} from 'react-i18next';

export default function SignUp({navigation}) {
  const {t} = useTranslation();

  const [username, setUsername] = useState('');
  const [phonenumber, setPhonenumber] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [password2, setPassword2] = useState('');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState({
    username: true,
    email: true,
    password: true,
  });

  /**
   * call when action signup
   *
   */
  const onSignUp = async () => {
    if (username == '' || email == '' || password == '') {
      setSuccess({
        ...success,
        username: username != '' ? true : false,
        email: email != '' ? true : false,
        password: password != '' ? true : false,
      });
    } else {
      setLoading(true);
      try {
        const params = {
          username,
          password,
          email,
        };
        const response = await api.signUp(params);
        Alert.alert({
          type: 'success',
          title: 'sign_up',
          message: 'register success',
          action: [{onPress: () => navigation.goBack()}],
        });
      } catch (error) {
        Alert.alert({
          title: 'sign_up',
          message: error.data?.code ?? error.message,
        });
      }
      setLoading(false);
    }
  };

  return (
    <View style={styles.contain}>
      <View style={styles.contentTodoText}>
        <Text body3 grayColor>
          Welcome To {BaseSetting.displayName}
        </Text>
      </View>
      <View style={styles.contentTodoText}>
        <Text body1 grayColor>
          Please provide your credentials to get started
        </Text>
      </View>
      <TextInput
        onChangeText={text => setUsername(text)}
        placeholder="Full Name"
        success={success.username}
        value={username}
        onFocus={() => {
          setSuccess({
            ...success,
            username: true,
          });
        }}
      />
      <TextInput
        style={{marginTop: 10}}
        onChangeText={text => setUsername(text)}
        placeholder="Phone Number"
        success={success.username}
        value={phonenumber}
        onFocus={() => {
          setSuccess({
            ...success,
            username: true,
          });
        }}
      />
      <TextInput
        style={{marginTop: 10}}
        onChangeText={text => setEmail(text)}
        placeholder="Email Address"
        keyboardType="email-address"
        success={success.email}
        value={email}
        onFocus={() => {
          setSuccess({
            ...success,
            email: true,
          });
        }}
      />
      <TextInput
        style={{marginTop: 10}}
        onChangeText={text => setPassword(text)}
        secureTextEntry={true}
        placeholder="Password"
        success={success.password}
        value={password}
        onFocus={() => {
          setSuccess({
            ...success,
            password: true,
          });
        }}
      />
      <TextInput
        style={{marginTop: 10}}
        onChangeText={text => setPassword(text)}
        secureTextEntry={true}
        placeholder="Retype Password"
        success={success.password}
        value={password2}
        onFocus={() => {
          setSuccess({
            ...success,
            password: true,
          });
        }}
      />
      <Button
        full
        style={{marginTop: 20}}
        loading={loading}
        onPress={() => onSignUp()}>
        sign up
      </Button>
      <View style={styles.contentTodoText2}>
        <TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
          <Text body2 grayColor>
            Already have an Account?{' '}
            <Text style={{color: '#00F'}}>Click here</Text>
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

actual file referenced by the navigator

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

import AuthTabs from './AuthTabs';

export default function AuthNav({navigation}) {
  return (
    <View style={{flex: 1}}>
      <AuthTabs />
    </View>
  );
}

Answer 1

I faced a similar problem few days ago.

import {Text, Button, TextInput} from '@components';

Check your component functions to see if they are named exports.

In my case, there was a problem in App.js . However, the render error occurred at the level of the stack navigator function.