Close Menu
geekfence.comgeekfence.com
    What's Hot

    Foldable iPhone Ultra Release Date, Design, Price Rumours

    May 8, 2026

    The Best Mobile Gaming Controllers for iPhone and Android (2026)

    May 8, 2026

    The Key Trends Shaping Long-Haul Capacity Demand

    May 8, 2026
    Facebook X (Twitter) Instagram
    • About Us
    • Contact Us
    Facebook Instagram
    geekfence.comgeekfence.com
    • Home
    • UK Tech News
    • AI
    • Big Data
    • Cyber Security
      • Cloud Computing
      • iOS Development
    • IoT
    • Mobile
    • Software
      • Software Development
      • Software Engineering
    • Technology
      • Green Technology
      • Nanotechnology
    • Telecom
    geekfence.comgeekfence.com
    Home»iOS Development»ios – How-To wrap Native Tabs with a custom Header?
    iOS Development

    ios – How-To wrap Native Tabs with a custom Header?

    AdminBy AdminFebruary 21, 2026No Comments2 Mins Read3 Views
    Facebook Twitter Pinterest LinkedIn Telegram Tumblr Email
    ios – How-To wrap Native Tabs with a custom Header?
    Share
    Facebook Twitter LinkedIn Pinterest Email


    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;
    }
    



    Source link

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email

    Related Posts

    Introducing SwiftPorts | Cocoanetics

    May 7, 2026

    Awesome native Xcode extensions – The.Swift.Dev.

    May 6, 2026

    ios – Flutter UI not matching design: top-right badge not properly attached to card border

    May 5, 2026

    Four Green Checkmarks: GitHub CI for macOS, iOS, Linux, and Windows

    May 1, 2026

    Swift enum all values – The.Swift.Dev.

    April 30, 2026

    ios – AppShortcut is shown in Shortcuts app but not in Spotlight

    April 29, 2026
    Top Posts

    Understanding U-Net Architecture in Deep Learning

    November 25, 202539 Views

    Hard-braking events as indicators of road segment crash risk

    January 14, 202627 Views

    Redefining AI efficiency with extreme compression

    March 25, 202626 Views
    Don't Miss

    Foldable iPhone Ultra Release Date, Design, Price Rumours

    May 8, 2026

    iPhone Ultra Fold: In summary Suggested autumn 2026 release date A book-style foldable is expected…

    The Best Mobile Gaming Controllers for iPhone and Android (2026)

    May 8, 2026

    The Key Trends Shaping Long-Haul Capacity Demand

    May 8, 2026

    The Download: AI malaise and babymaking tech

    May 8, 2026
    Stay In Touch
    • Facebook
    • Instagram
    About Us

    At GeekFence, we are a team of tech-enthusiasts, industry watchers and content creators who believe that technology isn’t just about gadgets—it’s about how innovation transforms our lives, work and society. We’ve come together to build a place where readers, thinkers and industry insiders can converge to explore what’s next in tech.

    Our Picks

    Foldable iPhone Ultra Release Date, Design, Price Rumours

    May 8, 2026

    The Best Mobile Gaming Controllers for iPhone and Android (2026)

    May 8, 2026

    Subscribe to Updates

    Please enable JavaScript in your browser to complete this form.
    Loading
    • About Us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • Terms and Conditions
    © 2026 Geekfence.All Rigt Reserved.

    Type above and press Enter to search. Press Esc to cancel.