React Native中的组件异常

我收到一个错误消息：

由于错误表明我认为它有一些东西在出口做的AppTextInput.js，但一切看起来正常的在文件（此组件在其他文件，如所用SignIn，ignOut和ConfirmSignUp）：

import React from 'react';
import {View, StyleSheet, TextInput} from 'react-native';
import {MaterialCommunityIcons} from 'react-native-vector-icons/MaterialCommunityIcons';

function AppTextInput({leftIcon, ...otherProps}) {
  return (
    <View style={styles.container}>
      {leftIcon && (
        <MaterialCommunityIcons
          name={leftIcon}
          size={20}
          color="#6e6869"
          style={styles.icon}
        />
      )}
      <TextInput
        style={styles.input}
        placeholderTextColor="#6e6869"
        {...otherProps}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f9f9f9',
    borderRadius: 25,
    flexDirection: 'row',
    padding: 15,
    marginVertical: 10,
  },
  icon: {
    marginRight: 10,
  },
  input: {
    width: '80%',
    fontSize: 18,
    color: '#101010',
  },
});

export default AppTextInput;

在Source另一方面说，错误是来自App.js于line 28，但我不能在这里找到错误（该文件是更长的时间，但我只是包括从原木的来源）。

function App() {
  const [isUserLoggedIn, setUserLoggedIn] = useState('initializing');

  async function checkAuthState() {
    try {
      await Auth.currentAuthenticatedUser();
      console.log('User is signed in');
      setUserLoggedIn('loggedIn');
    } catch (err) {
      console.log('User is not signed in');
      setUserLoggedIn('loggedOut');
    }
  }
  useEffect(() => {
    checkAuthState();
  }, []);

  const AuthenticationNavigator = props => {
    return (
      <AuthenticationStack.Navigator headerMode="none">
        <AuthenticationStack.Screen
          name="SignIn"
          component={SignIn}></AuthenticationStack.Screen>
        <AuthenticationStack.Screen name="SignUp" component={SignUp} />
        <AuthenticationStack.Screen
          name="ConfirmSignUp"
          component={ConfirmSignUp}
        />
      </AuthenticationStack.Navigator>
    );
  };

  const AppNavigator = props => {
    return (
      <AppStack.Navigator>
        <AppStack.Screen name="Home" component={Home}></AppStack.Screen>
      </AppStack.Navigator>
    );
  };
  const Initializing = () => {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <ActivityIndicator size="large" color="tomato" />
      </View>
    );
  };

  function updateAuthState(isUserLoggedIn) {
    setUserLoggedIn(isUserLoggedIn);
  }

  return (
    <NavigationContainer>
      {isUserLoggedIn === 'initializing' && <Initializing />}
      {isUserLoggedIn === 'loggedIn' && (
        <AppNavigator updateAuthState={updateAuthState} />
      )}
      {isUserLoggedIn === 'loggedOut' && (
        <AuthenticationNavigator updateAuthState={updateAuthState} />
      )}
    </NavigationContainer>
  );
}

export default App;

这也是调用堆栈：