CODEWITHSUNDEEP
javascriptreactjsreact-nativetabnavigator
Khalil Khalaf
Khalil Khalaf

Reputation: 9407

when TabNavigator is on top of the screen, how to add a header above it?

I have 3 screens under a TabNavigator. The TabNavigator mode is top (tabs are on top of the screen instead of bottom)

I would like to put a Header before the tabs.

Currently I am using this code in render on all screens to display a header below the tabs, and then the stuff of the screen goes below:

render() 
{
    return(
        <View style={{ flex: 1, backgroundColor: 'white' }}>
            <View style={styles.header}>
                <View style={styles.headerItemsWrapper}>
                    <Text style={styles.hiddenRightItem}>foo</Text>
                    <Text style={styles.headerTitle}>bar</Text>
                    <TouchableOpacity onPress={()=>{ this.props.navigation.navigate("Home") }}>
                        <Text style={{color: 'blue'}}>baz</Text>
                    </TouchableOpacity>
                </View>
            </View>
            <Text>
                stuff for the screen goes here...
            </Text>
        </View>
    )
}

How can I do that?

Upvotes: 1

Views: 899

Answers (1)

bennygenel
bennygenel

Reputation: 24670

If you create a StackNavigator with a single screen contains your TabNavigator I believe you can achieve that.

Example

const Tabs = TabNavigator({
   Tab1: { screen: Tab1 },
   Tab2: { screen: Tab2 },
   Tab3: { screen: Tab3 }
})
const Main = new StackNavigator({Tabs: { screen: Tabs });

Upvotes: 3

Related Questions