How-To wrap Native Tabs with a custom Header?

3 weeks ago 17

ARTICLE AD BOX

I'm using Expo SDK 54.

In iOS when I use expo-router/unstable-native-tabes we cant wrap <NavTabs \> with another component.

AppHeader should to go the page top. This breaks in iOS 26.

How can we put this on every page top?

import { useEffect } from 'react' import { Platform } from 'react-native' import { useAuth } from '@/context/AuthContext' import { useRouter, Stack, usePathname } from 'expo-router' import { NativeTabs, Icon, Label, Badge } from 'expo-router/unstable-native-tabs' import MaterialIcons from '@expo/vector-icons/MaterialIcons' import DashboardLayout from '@/components/layouts/DashboardLayout' import AppHeader from '@/components/ui/header' export default function ProtectedLayout() { const pathname = usePathname() const router = useRouter() const { isAuthenticated, isLoading } = useAuth() const isPublicStaticPage = pathname === '/privacy' || pathname === '/terms' const isAndroid = Platform.OS === 'android' const isIOS = Platform.OS === 'ios' useEffect(() => { if (!isLoading && !isAuthenticated && !isPublicStaticPage) { router.replace('/details') } }, [router, isAuthenticated, isLoading, isPublicStaticPage]) if ((!isAuthenticated && !isPublicStaticPage) || isLoading) { return null } if (isPublicStaticPage && !isAuthenticated) { return <Stack screenOptions={{ headerShown: false }} /> } if (isAndroid) { return ( <DashboardLayout> <Stack screenOptions={{ headerShown: false }} /> </DashboardLayout> ) } if (isIOS) { return ( <NativeTabs> <NativeTabs.Trigger name="attendance"> <Label>Attendance</Label> <Icon sf="calendar" androidSrc={<MaterialIcons name="calendar-today" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="timetable"> <Label>Timetable</Label> <Icon sf="clock" androidSrc={<MaterialIcons name="schedule" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="history"> <Label>Present</Label> <Icon sf="checkmark.circle" androidSrc={<MaterialIcons name="check-circle" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="submit-code"> <Label>Att Code</Label> <Icon sf="qrcode" androidSrc={<MaterialIcons name="qr-code" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="marks"> <Label>Marks</Label> <Icon sf="chart.bar" androidSrc={<MaterialIcons name="bar-chart" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="cgpa"> <Label>CGPA</Label> <Icon sf="plus.slash.minus" androidSrc={<MaterialIcons name="calculate" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="subjects"> <Label>Subjects</Label> <Icon sf="book" androidSrc={<MaterialIcons name="menu-book" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="feedback"> <Label>Feedback</Label> <Icon sf="message" androidSrc={<MaterialIcons name="chat" />} /> <Badge>3</Badge> </NativeTabs.Trigger> <NativeTabs.Trigger name="profile"> <Label>Profile</Label> <Icon sf="person" androidSrc={<MaterialIcons name="person" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="about"> <Label>About</Label> <Icon sf="info.circle" androidSrc={<MaterialIcons name="info" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="privacy"> <Label>Privacy Policy</Label> <Icon sf="lock" androidSrc={<MaterialIcons name="info" />} /> </NativeTabs.Trigger> <NativeTabs.Trigger name="terms"> <Label>Terms and Conditions</Label> <Icon sf="doc.plaintext" androidSrc={<MaterialIcons name="info" />} /> </NativeTabs.Trigger> </NativeTabs> ) } return null; }