Why I get this error: navgation.push is not a function? - react-native

Question

I want to push a screen but its not working:
TypeError: navigation.push is not a function. (In 'navigation.push('Restaurants', {
name: params
})', 'navigation.push' is undefined)
Explore.tsx
import { useNavigation } from '#react-navigation/core';
import { NativeStackScreenProps } from '#react-navigation/native-stack';
import React from 'react';
import { StyleSheet, Text, View, Pressable, ScrollView } from 'react-native';
import { RootStackParams } from '../../App';
import Card from '../components/Card';
type PropNav = NativeStackScreenProps<RootStackParams, 'Explore'>;
const Explore = ({ navigation }: PropNav) => {
const handleNavigate = (params: string) => {
navigation.push('Restaurants', { name: params });
};
return (
<View style={{marginTop: 200}}>
<ScrollView>
<Card name="Zum Profil" onPress={(params) => handleNavigate(params)} />
</ScrollView>
</View>
)
};
export default Explore;
App.tsx
import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import Explore from './src/screens/Explore';
import { NavigationContainer, NavigatorScreenParams } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Profile from './src/screens/Profile';
import Restaurants from './src/screens/Restaurants';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import ProfileIcon from './src/icon/ProfileIcon';
export type RootStackParams = {
Explore: undefined;
Profile: undefined;
RestaurantsStack: NavigatorScreenParams<RestaurantTypesParms>;
Restaurants: {
name: string
}
}
const RootStack = createBottomTabNavigator<RootStackParams>();
export type RestaurantTypesParms = {
Restaurants: {
name: string
}
}
const RestaurantStack = createNativeStackNavigator<RestaurantTypesParms>();
const RestaurantScreen = () => {
return ( <RestaurantStack.Navigator>
<RestaurantStack.Screen name="Restaurants" component={Restaurants} />
</RestaurantStack.Navigator>)
};
export default function App() {
const [text, setText] = useState('');
return (
<NavigationContainer>
<RootStack.Navigator initialRouteName='Explore'
screenOptions={{
headerShown: false,
tabBarActiveTintColor: 'purple'
}}
>
<RootStack.Screen name="Explore" component={Explore}
options={{
tabBarIcon: ({ color, size }) => <ProfileIcon color={color} size={size} />,
tabBarLabel: "Explore"
}}
/>
<RootStack.Screen name="Profile" component={Profile} />
<RootStack.Screen name="RestaurantsStack" component={RestaurantScreen} />
</RootStack.Navigator>
</NavigationContainer>
);
}
But if I use navigation.navigate then it works....
........................................................................................................................................................................................................................................

Answer 1

The push method for the navigation prop is added additional for the StackNavigator. You can compare this with the official documentation.
The stack navigator adds the following methods to the navigation prop:
push​
Pushes a new screen to top of the stack and navigate to it. The method accepts following arguments:
name - string - Name of the route to push onto the stack.
params - object - Screen params to pass to the destination route.
You are not using a Stack.Navigator. You need to install #react-navigation/native-stack and use a different navigator to make this work. I would suggest that you go through this documentation where a full working example is provided.

Answer 2

you can try this.
const handleNavigate = (params: string) => {
navigation.navigate('Restaurants', { name: params });
};
or
const handleNavigate = (params: string) => {
navigation.replace('Restaurants', { name: params });
};
or
const handleNavigate = (params: string) => {
navigation.navigate('RestaurantScreen', { name: params });
};