reactjs - How to resolve Component Exception?

Question

I am getting a Component Exception error even when navigation.navigate works for all my other pages. I am unable to navigate from my home screen page in my TabNavigator to another page such as userProfile or groupProfile in my StackScreenc.

Error Image App.js

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
export const basicScreen = (screen, {navigation}) => {
  const screenSelector = screen => {
    const mainStyle = globalStyles.mainView;
    const availableScreens = {
      Home: <Home navigation={navigation} />,
    };
    return availableScreens[screen];
  };

  // return given screen with added header comp
  return (
    <View>
      <CustomHeader
        pageName={screen}
        toggle_drawer={() => navigation.toggleDrawer()}
        navigation={navigation}
      />
      {screenSelector(screen)}
    </View>
  );
};

const HomeStack = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={basicScreen.bind(this, 'Home')} />
    </Tab.Navigator>
  );
};

const AppDrawer = ({navigation}) => {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" children={HomeStack} />
    </Drawer.Navigator>
  );
};

const App = ({navigation}) => {
  useLayoutEffect(() => {
    SplashScreen.hide();
  });
  const navigationRef = React.useRef(null);
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Applications" component={AppDrawer} navigation={navigation} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Home.js The error is coming from the clickItem function.

function Home ({navigation}) {
  const clickItem = (group, navigation) => {
    if(group.groupType != 'Connection'){
      navigation.navigate('groupProfile', {testGroup});
    }else{
      console.log(group.groupType);
    }
  };

  const Cards_display = () => {
    return groups.map((group, index) => {
      return (
        <TouchableOpacity key={index} style={styles.card_view} onPress={()=>clickItem(group, navigation)}>
            <View flexDirection="row">
              <Image style={styles.group_image} />
                <Text style={{color: '#6d22a1', fontSize: 40}}>
                  {group.groupName}
                </Text>
             </View>
        </TouchableOpacity>
      );
    });
  };

  return (
    <StandardBackground style={styles.main_view1}>
      {false?
        <Text style={styles.noActivity}>No Recent Activity</Text>
        :
        <ScrollView contentContainerStyle={styles.main_view2}>
          <Stack.Screen name="Applications" component={AppDrawer} navigation={navigation} />
        <Stack.Screen name="Notifications" component={Notifications} navigation={navigation} />
        <Stack.Screen name="userProfile" component={userProfile} navigation={navigation}/>
        <Stack.Screen name="groupProfile" component={groupProfile} navigation={navigation}/>
        </ScrollView>
      }
    </StandardBackground>
  );
}

export default Home;

question from:https://stackoverflow.com/questions/65947793/how-to-resolve-component-exception

Answer 1

Waitting for answers