Close Menu
geekfence.comgeekfence.com
    What's Hot

    Crisis is the new normal: Everest Group finds 80% of organizations expect AI ROI – but execution gaps threaten outcomes in 2026 

    April 17, 2026

    Live Nation monopoly verdict: Here’s what it means for concerts

    April 17, 2026

    The Download: bad news for inner Neanderthals, and AI warfare’s human illusion

    April 17, 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, 202529 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

    Crisis is the new normal: Everest Group finds 80% of organizations expect AI ROI – but execution gaps threaten outcomes in 2026 

    April 17, 2026

    Everest Group has released findings from its latest study, Key Priorities for Technology and Services Spend…

    Live Nation monopoly verdict: Here’s what it means for concerts

    April 17, 2026

    The Download: bad news for inner Neanderthals, and AI warfare’s human illusion

    April 17, 2026

    8 Legit Ways to Get a Free Business Email in 2026

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

    Crisis is the new normal: Everest Group finds 80% of organizations expect AI ROI – but execution gaps threaten outcomes in 2026 

    April 17, 2026

    Live Nation monopoly verdict: Here’s what it means for concerts

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