CODEWITHSUNDEEP
react-native
yudhiesh
yudhiesh

Reputation: 6799

Component Exception in React Native

I am getting an error saying:

enter image description here

As the error suggest I thought it had something to do with the exports in AppTextInput.js but everything looks alright in the file(this component is used in other files such as for SignIn, ignOut and 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;

The Source on the other hand says the error is coming from App.js at line 28 but I cannot find the error here(the file is much longer but I just included the source from the logs).


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;

Here is the Call Stack as well:

enter image description here

Upvotes: 0

Views: 387

Answers (1)

Dat Ho
Dat Ho

Reputation: 742

Your App.js component does not render anything, that why exception throw error.

After review your update, I think you are import something does not existing

import {MaterialCommunityIcons} from 'react-native-vector-icons/MaterialCommunityIcons';

It should be

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

Upvotes: 1

Related Questions