const BottomTabCard=({props,navigation})=> {
  const [isActive, setIsActive] = useState('');
  return (
    <View
      style={[
        styles.container,
        {height: props.TabHeight, width: props.TabWidth},
      ]}>
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity onPress={() => setIsActive('home')}>
          <Icons
            name="home"
            size={35}
            style={[
              styles.iconHome,
              {color: isActive == 'home' ? 'green' : 'grey'},
            ]}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setIsActive('shopping-cart')}>
          <Icons
            name="shopping-cart"
            size={35}
            style={[
              styles.iconCart,
              {color: isActive == 'shopping-cart' ? 'green' : 'grey'},
            ]}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setIsActive('search')}>
          <Icons
            name="search"
            size={35}
            style={[
              styles.iconSearch,
              {color: isActive == 'search' ? 'green' : 'grey'},
            ]}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setIsActive('person')}>
          <Icons
            name="person"
            size={35}
            style={[
              styles.iconPerson,
              {color: isActive == 'person' ? 'green' : 'grey'},
            ]}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setIsActive('credit-card'),{navigation.navigate(ROUTE_NAME.ORDER)}}>
          <Icons
            name="credit-card"
            size={35}
            style={[
              styles.iconCard,
              {color: isActive == 'credit-card' ? 'green' : 'grey'},
            ]}
          />
        </TouchableOpacity>
      </View>

    </View>
  );
}

export default BottomTabCard;

I want to navigate creditcard icon to corressponding page, But it shows the error

** TypeError: Cannot read property 'TabHeight' of undefined**

This error is located at:
    in BottomTabCard (created by Login)
    in RCTView (created by View)
    in View (created by Login)
    in Login (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by MyStack)
    in MyStack (created by Route)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Route)
    in Route (created by App)
    in Provider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in behalal(RootComponent), js engine: hermes

Here I am using custom component as BottomTabCard Is is it possible to both props and navigation in functional component together.

in Login page I worte,

Login page contains all other card componets

CodePudding user response：

It is better (and easier) to use useNavigation() hook of React Navigation than navigation prop. It helps you to access the navigation prop inside every component. Passing the navigation prop can be complicated with child components since you should pass it through the parent.

You can do it like:

import { useNavigation } from '@react-navigation/native';

const BottomTabCard=({props})=> {

const navigation = useNavigation();
...

<TouchableOpacity onPress={() => setIsActive('credit-card'),{navigation.navigate(ROUTE_NAME.ORDER)}}>

...
};

For more information, you can refer to React Navigation documentation about useNavigation():

React Navigation: useNavigation()

CodePudding user response：

You can try this once

import {useNavigation} from '@react-navigation/native';

const navigation = useNavigation();
navigation.navigate('Login',{name:"John"});

and to get this data you can use

import { useRoute } from '@react-navigation/native';
const route = useRoute();

console.log(route.params.name)