I’m using Expo SDK 54.
In iOS when I use expo-router/unstable-native-tabes we cant wrap 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
}
if (isAndroid) {
return (
)
}
if (isIOS) {
return (
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
3
}
/>
}
/>
}
/>
}
/>
)
}
return null;
}
