Close Menu
geekfence.comgeekfence.com
    What's Hot

    Infosys acquires Optimum Healthcare IT: bridging the provider gap and entering the Epic services arena

    April 14, 2026

    Instacart acquires Instaleap to expand its enterprise platform internationally

    April 14, 2026

    Iran Internet Blackout Enters 46th Day

    April 14, 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 Read2 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

    Self sizing cells with rotation support

    April 14, 2026

    swift – Flutter iOS: USSD code with * and # not launching in phone dialer (works on Android)

    April 13, 2026

    UICollectionView cells with circular images plus rotation support

    April 9, 2026

    ios darkmode – Popovers in iOS 26 display wrong system colors and do not change when user switches light/dark mode

    April 8, 2026

    SwiftButler | Cocoanetics

    April 4, 2026

    Deep dive into Swift frameworks

    April 3, 2026
    Top Posts

    Understanding U-Net Architecture in Deep Learning

    November 25, 202528 Views

    Hard-braking events as indicators of road segment crash risk

    January 14, 202624 Views

    Redefining AI efficiency with extreme compression

    March 25, 202623 Views
    Don't Miss

    Infosys acquires Optimum Healthcare IT: bridging the provider gap and entering the Epic services arena

    April 14, 2026

    Infosys’ announcement to acquire Optimum Healthcare IT for up to US$465 million marks a meaningful…

    Instacart acquires Instaleap to expand its enterprise platform internationally

    April 14, 2026

    Iran Internet Blackout Enters 46th Day

    April 14, 2026

    Tune in on Thursday for Xbox First Look: Metro 2039

    April 14, 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

    Infosys acquires Optimum Healthcare IT: bridging the provider gap and entering the Epic services arena

    April 14, 2026

    Instacart acquires Instaleap to expand its enterprise platform internationally

    April 14, 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.