I have a Tab.Navigator
on my page and I can hide the header with headerShown: false
.
But there is another header with the name “index”, I don’t know how to remove it. Picture of my problem
My codes:
<code>import { I18nManager } from 'react-native';
import React , {useEffect} from 'react';
import { useFonts } from 'expo-font';
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { useColorScheme } from '@/hooks/useColorScheme';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import searchApp from './search';
import HomeApp from './main';
import saveApp from './save';
import profileApp from './profile';
import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
export default function HomeScreen() {
useEffect(() =>{
I18nManager.forceRTL(true);
})
const [headerShown, setHeaderShown] = React.useState(false);
const colorScheme = useColorScheme();
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
yr: require('../assets/fonts/yr.ttf'),
});
return (
<Tab.Navigator
screenOptions={{
title: 'روبوفیلم',
headerShown: false
}}
>
<Tab.Screen name="Home" component={HomeApp}
options={{
header: () => null,
title: 'صفحه اصلی',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'film' : 'film-outline'} color={color} />
),
tabBarActiveTintColor: '#00925d'
}}
/>
<Tab.Screen name="Settings" component={searchApp}
options={{
title: 'جستجو',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'search' : 'search-outline'} color={color} />
),
}}/>
<Tab.Screen
name="save" component={saveApp}
options={{
title: 'علاقمندی',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'bookmark' : 'bookmark-outline'} color={color} />
),
}}
/>
<Tab.Screen
name="profile" component={profileApp}
options={{
title: 'پروفایل',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'person-circle' : 'person-circle-outline'} color={color} />
),
}}
/>
</Tab.Navigator>
);
}
</code>
<code>import { I18nManager } from 'react-native';
import React , {useEffect} from 'react';
import { useFonts } from 'expo-font';
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { useColorScheme } from '@/hooks/useColorScheme';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import searchApp from './search';
import HomeApp from './main';
import saveApp from './save';
import profileApp from './profile';
import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
export default function HomeScreen() {
useEffect(() =>{
I18nManager.forceRTL(true);
})
const [headerShown, setHeaderShown] = React.useState(false);
const colorScheme = useColorScheme();
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
yr: require('../assets/fonts/yr.ttf'),
});
return (
<Tab.Navigator
screenOptions={{
title: 'روبوفیلم',
headerShown: false
}}
>
<Tab.Screen name="Home" component={HomeApp}
options={{
header: () => null,
title: 'صفحه اصلی',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'film' : 'film-outline'} color={color} />
),
tabBarActiveTintColor: '#00925d'
}}
/>
<Tab.Screen name="Settings" component={searchApp}
options={{
title: 'جستجو',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'search' : 'search-outline'} color={color} />
),
}}/>
<Tab.Screen
name="save" component={saveApp}
options={{
title: 'علاقمندی',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'bookmark' : 'bookmark-outline'} color={color} />
),
}}
/>
<Tab.Screen
name="profile" component={profileApp}
options={{
title: 'پروفایل',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'person-circle' : 'person-circle-outline'} color={color} />
),
}}
/>
</Tab.Navigator>
);
}
</code>
import { I18nManager } from 'react-native';
import React , {useEffect} from 'react';
import { useFonts } from 'expo-font';
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { useColorScheme } from '@/hooks/useColorScheme';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import searchApp from './search';
import HomeApp from './main';
import saveApp from './save';
import profileApp from './profile';
import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
export default function HomeScreen() {
useEffect(() =>{
I18nManager.forceRTL(true);
})
const [headerShown, setHeaderShown] = React.useState(false);
const colorScheme = useColorScheme();
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
yr: require('../assets/fonts/yr.ttf'),
});
return (
<Tab.Navigator
screenOptions={{
title: 'روبوفیلم',
headerShown: false
}}
>
<Tab.Screen name="Home" component={HomeApp}
options={{
header: () => null,
title: 'صفحه اصلی',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'film' : 'film-outline'} color={color} />
),
tabBarActiveTintColor: '#00925d'
}}
/>
<Tab.Screen name="Settings" component={searchApp}
options={{
title: 'جستجو',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'search' : 'search-outline'} color={color} />
),
}}/>
<Tab.Screen
name="save" component={saveApp}
options={{
title: 'علاقمندی',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'bookmark' : 'bookmark-outline'} color={color} />
),
}}
/>
<Tab.Screen
name="profile" component={profileApp}
options={{
title: 'پروفایل',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'person-circle' : 'person-circle-outline'} color={color} />
),
}}
/>
</Tab.Navigator>
);
}
New contributor
Navid Seyfi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.