Undefined is not an object (evaluating 'route.params.title') - javascript

I followed the React Navigation Doc to achieve a Dynamic header title change but It shows the error Undefined is not an object (evaluating 'route.params.title').
My tabs.js:
function HomeStackScreen() {
return (
<HomeStack.Navigator>
<HomeStack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<HomeStack.Screen
name="Profile"
component={Profile}
options={({ route }) => ({ title: route.params.title })}
/>
</HomeStack.Navigator>
);
}
The Home.js has the onpress like that:
<TouchableOpacity
onPress={() => {
navigation.navigate('Profile', {
title: 'Custom title',
});
}}
>
And Profile.js:
function Profile({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello</Text>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}

Add a check/default value on your params, because route.params is not always valorized, but only when you navigate on that page.
function HomeStackScreen() {
return (
<HomeStack.Navigator>
<HomeStack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<HomeStack.Screen
name="Profile"
component={Profile}
options={({ route }) => ({ title: route.params?.title || "DEFAULT TITLE" })}
/>
</HomeStack.Navigator>
);
}

Related

How to get the current route name of a Stack Navigator that is inside a Bottom Tab Navigator?

I have a Bottom Tab Navigation like this:
const tabs: {
name: keyof RootNavigationParams;
component: any;
}[] = [
{
name: "BalanceStackNavigator",
component: BalanceStackNavigator,
},
{
name: "BudgetScreen",
component: BudgetScreen,
},
{
name: "EntriesScreen",
component: EntriesScreen,
},
{
name: "SettingsScreen",
component: SettingsScreen,
},
];
return (
<Tab.Navigator
screenOptions={({ route }) => ({
header: (props) => <Header {...props} />,
tabBarIcon: ({ focused }) => renderIcons(focused, route),
tabBarStyle: {
borderTopWidth: 0,
elevation: 0,
backgroundColor: colors.background,
},
})}>
{tabs.map(({ name, component }) => (
<Tab.Screen
key={name}
name={name}
options={{ tabBarShowLabel: false }}
component={component}
/>
))}
</Tab.Navigator>
);
Inside this Bottom Tab Navigator I have the next Stack Navigator:
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="BalanceScreen" component={BalanceScreen} />
<Stack.Screen name="AddExpenseScreen" component={AddExpenseScreen} />
</Stack.Navigator>
Now, what I want to do is on the Header that is on the Bottom Tab Navigation, I want to change the header depending on which screen the app is.
const Header = ({ route }: BottomTabHeaderProps) => {
return (
<View>
<Text>
{route.name}
</Text>
</View>
);
};
The problem here is if I'm under some of the routes inside BalanceStackNavigator the route name is "BalanceStackNavigator", not the name of the current screen inside BalanceStackNavigator. Is there a way to get the current route name even if its inside a Stack Navigator?
If you want the name of screens from your nested BalanceStackNavigator you should pass Header to it:
<Stack.Navigator screenOptions={{ header: (props) => <Header {...props} /> }}>
<Stack.Screen name="BalanceScreen" component={BalanceScreen} />
<Stack.Screen name="AddExpenseScreen" component={AddExpenseScreen} />
</Stack.Navigator>
Then you could hide the header of the Tab when you are in BalanceStackNavigator, like so:
<Tab.Navigator
screenOptions={({ route }) => ({
header: (props) => <Header {...props} />,
tabBarIcon: ({ focused }) => renderIcons(focused, route),
tabBarStyle: {
borderTopWidth: 0,
elevation: 0,
backgroundColor: colors.background,
},
})}
>
{tabs.map(({ name, component }) => (
<Tab.Screen
key={name}
name={name}
options={{ tabBarShowLabel: false, headerShown: name !== "BalanceStackNavigator" }}
component={component}
/>
))}
</Tab.Navigator>;

How to remove the Header from my App? Why is the Header displayed?

How to remove the Header from my App? Why is the Header displayed?
I want to remove the title from the Header, since each page has its own title, and that title takes up space from the screens.
I do not understand why it is displayed. I'm following a tutorial and as many times as I go through, I don't see a way to remove this.
I have followed the official documentation, but I cannot get rid of this nonsensical Header.
The navigation is handled from the AppStack.js file and the Header titles displayed are handled from the <Tab.Navigator> <Tab.Screen /> </Tab.Navigator>, but this is really the bottom tabs, and however, they are also displayed in the Header.
I show some image of what I cannot remove
How do I remove this Header which is unnecessary?
I have the correct dependencies:
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-gesture-handler": "^ 1.10.3",
"react-native-onboarding-swiper": "^ 1.1.4",
"react-native-reanimated": "^ 2.2.3",
"react-native-safe-area-context": "^ 3.3.2",
"react-native-screens": "^ 3.8.0",
"react-native-vector-icons": "^ 8.1.0",
"react-native-webview": "^ 11.14.1",
"styled-components": "^ 5.3.3"
AppStack.js
import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import HomeScreen from '../screens/HomeSreen'
import ChatScreen from '../screens/ChatScreen'
import ProfileScreen from '../screens/ProfileScreen'
import AddPostScreen from '../screens/AddPostScreen'
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const FeedStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Social React Native"
component={HomeScreen}
options={{
headerTitleAlign: 'center',
headerTitleStyle: {
color: '#2e64e5',
fontFamily: 'Kufam-SemiBoldItalic',
fontSize: 18,
},
headerStyle: {
shadowColor: '#fff',
elevation: 0,
},
headerRight: () => (
<View style={{ marginRight: 10 }}>
<FontAwesome5.Button
name="plus"
size={22}
backgroundColor="#fff"
color="#2e64e5"
onPress={() => navigation.navigate('AddPost')}
/>
</View>
),
}}
/>
<Stack.Screen
name="AddPost"
component={AddPostScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#2e64e515',
shadowColor: '#2e64e515',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
<Stack.Screen
name="HomeProfile"
component={ProfileScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat') {
return false;
}
return true;
}
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={ChatScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisibility(route),
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
// tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
IMAGES:
you can add options={{ headerShown: false }}
<Tab.Screen
name="Messages"
component={ChatScreen}
options={({ route }) => ({
headerShown: false,
tabBarVisible: getTabBarVisibility(route),
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>

How to remove bottom taskbar on a certain screen in React Native?

I have added a chat to my app with react-native-gifted-chat and I want to remove the taskbar (tabBar) on the specific chat screen, to offer more space and a better user experience.
This happens on iOS and Android
But I can't hide it, despite trying different ways to do it:
Add tabBarVisible: false,
I have added my function
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes [route.state.index] .name
: '';
if (routeName === 'Chat') {
return false
}
return true
}
I have added react-navigation options:
(https://github.com/react-navigation/react-navigation/issues/7677)
const getTabBarVisible = (route) => {
const routeName = route.state
? route.state.routes [route.state.index] .name
: route.params? .screen || 'Home';
if (routeName === 'Details') {
return false;
}
return true;
}
But I can't get tabBar to hide on this screen.
I show screenshots and the code I have tried to fix this:
const MessageStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component={MensajeScreen} />
<Stack.Screen
name="Chat"
component={ChatScreen}
options={({ route }) => ({
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
})}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisible = (route) =>{
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Details') {
return false;
}
return true;
}
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
headerShown: false,
tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={MessageStack}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
//tabBarVisible: getTabBarVisibility(route),
tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
headerShown: false,
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
///////////////////////////////////////////////
<Stack.Screen
name="HomeProfile"
component={ProfileScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
</Stack.Navigator>
);
const MessageStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component={MensajeScreen} />
<Stack.Screen
name="Chat"
component={ChatScreen}
options={({ route }) => ({
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
})}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat') {
return false
}
return true
}
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
headerShown: false,
// tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={MessageStack}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
tabBarVisible: getTabBarVisibility(route),
//tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
headerShown: false,
// tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
////////////////////////////////////
I have added more code
import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import HomeScreen from '../screens/HomeSreen'
import ChatScreen from '../screens/ChatScreen'
import ProfileScreen from '../screens/ProfileScreen'
import AddPostScreen from '../screens/AddPostScreen'
import MensajeScreen from '../screens/MensajeScreen'
import EditarPerfilScreen from '../screens/EditarPerfilScreen'
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const FeedStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Vinkylim Network"
component={HomeScreen}
options={{
headerTitleAlign: 'center',
headerTitleStyle: {
color: '#2e64e5',
fontFamily: 'Kufam-SemiBoldItalic',
fontSize: 18,
},
headerStyle: {
shadowColor: '#fff',
elevation: 0,
},
headerRight: () => (
<View style={{ marginRight: 10 }}>
<FontAwesome5.Button
name="plus"
size={22}
backgroundColor="#fff"
color="#2e64e5"
onPress={() => navigation.navigate('AddPost')}
/>
</View>
),
}}
/>
<Stack.Screen
name="AddPost"
component={AddPostScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#2e64e515',
shadowColor: '#2e64e515',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
<Stack.Screen
name="HomeProfile"
component={ProfileScreen}
options={{
//tabBarVisible:false,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
</Stack.Navigator>
);
const MessageStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component={MensajeScreen} />
<Stack.Screen
name="Chat"
component={ChatScreen}
options={({ route }) => ({
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
})}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="EditProfile"
component={EditarPerfilScreen}
options={{
headerTitle: 'Edit Profile',
headerBackTitleVisible: false,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat') {
return false
}
return true
}
/* const getTabBarVisible = (route) =>{
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Details') {
return false;
}
return true;
} */
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
headerShown: false,
// tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={MessageStack}
options={({ route }) => ({
//tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
tabBarVisible: getTabBarVisibility(route),
tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
headerShown: false,
// tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
Screenshots
import {getFocusedRouteNameFromRoute} from '#react-navigation/native';
function getTabVisible(route) {
const routeName = getFocusedRouteNameFromRoute(route) ?? 'Chat';
if (routeName === 'Chat') {
return 'none';
}
return 'flex';
}
<Tab.Screen
options={({route}) => ({
tabBarStyle: {display: getTabVisible(route)},
})
/>

How to Check the login state?

I have a navigator as below. I want to show the drawer when the user logged in. However, the isLogin will still be false after I login. As I am quit new to react native, is there any solution to this issue? Also, I want to know if there are any good sources for learning react native?
let isLogin = firebase.auth().currentUser ? true : false;
const HomeStack = () => {
return (
<Stack.Navigator
screenOptions={{
headerStyled: {
backgroundColor: primary,
},
headerLeftContainerStyle: {
paddingLeft: 20,
},
headerShown: false,
}}
initialRouteName="Home"
>
<Stack.Screen name="HomeScreen" component={Home} />
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
);
};
console.log(isLogin);
const LoginStack = () => {
return (
<Stack.Navigator
screenOptions={{
headerStyled: {
backgroundColor: primary,
},
headerLeftContainerStyle: {
paddingLeft: 20,
},
headerShown: false,
}}
initialRouteName="Login"
>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Signup" component={Signup} />
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
);
};
const RootStack = () => {
return (
<NavigationContainer>
{/* {isLogin ? (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeStack} />
<Drawer.Screen name="Chat" component={Chat} />
</Drawer.Navigator>
) : (
<LoginStack />
)} */}
<LoginStack />
</NavigationContainer>
);
};
export default RootStack;
Because you initialize isLogin variable outside the component, you get value only one time. So you need to put declaring variable into the component.
const RootStack = () => {
let isLogin = firebase.auth().currentUser ? true : false;
return (
<NavigationContainer>
{/* {isLogin ? (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeStack} />
<Drawer.Screen name="Chat" component={Chat} />
</Drawer.Navigator>
) : (
<LoginStack />
)} */}
<LoginStack />
</NavigationContainer>
);
};

tabnavigation hidden after login React native

I am using tabnavigator and stacknavigator, and after my connection I cannot be redirected to my home navigation unless I add Home to my stacknavigator, but tabnavigator disappears. I would like to know what I should do to be sent to my home navigation, so that my tabnavigator does not disappear.
const [user, setUser] = useState(false);
useEffect(()=> {
setTimeout(() => {
User()
console.log("Update")
}, 500);
},)
const User = async() => {
const value = await AsyncStorage.getItem('#user')
if (value === null) {
console.log('disconnecte')
}else {
setUser(true)
console.log("online")
navigation.navigate('Home')
}
}
return (
<NavigationContainer>
{user === false ? <Authnavigator/> : <Stacknavigator /> }
</NavigationContainer>
)
}
StackNavigator
export default function Stacknavigator() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="TabNavigator" component={TabNavigator} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
)
}
Authnavigator
export default function Authnavigator() {
return (
<AuthStack.Navigator screenOptions={{
headerShown: false
}}>
<AuthStack.Screen name="Login" component={Login} />
</AuthStack.Navigator>
)
}
Update :
the login navigation to Home works but then to go to the Details view it does not work
export default function Stacknavigator() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="Tabnavigator" component={Tabnavigator} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
)
}
Tabnavigator
export default function Tabnavigator() {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#f0edf6"
inactiveColor="#6D6D6D"
barStyle={{ backgroundColor: '#171717' }}
>
<Tab.Screen name="Home" component={Home} options= {{
tabBarIcon: ({ color }) => (
<FontAwesome name="home" size={20} color={(color)} />
)
}} />
<Tab.Screen name="Recherche" component={Search} options={{
tabBarIcon: ({color}) => (
<FontAwesome name="search" size={20} color={(color)} />
)
}} />
<Tab.Screen name="Favorie" component={Favorie} options={{
tabBarIcon: ({color}) => (
<FontAwesome name="star" size={20} color={(color)} />
)
}}/>
</Tab.Navigator>
)
}
const Tab = createMaterialBottomTabNavigator();
Authnavigator
export default function Authnavigator() {
return (
<AuthStack.Navigator screenOptions={{
headerShown: false
}}>
<AuthStack.Screen name="Login" component={Login} />
<AuthStack.Screen name="Tabnavigator" component={Tabnavigator} />
</AuthStack.Navigator>
)
}
You don't have an initialRouteName Home in your Stack.Navigator. You need to point it to TabNavigator so that your code should look like this.
export default function Stacknavigator() {
return (
<Stack.Navigator
initialRouteName="TabNavigator"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="TabNavigator" component={TabNavigator} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
)
}

Categories