CODEWITHSUNDEEP
javascriptcssreactjsreact-native
fun joker
fun joker

Reputation: 1727

How to hide and show navbar in React Native?

I am passing props and when a particular height is scrolled I am passing params showHeader: "True" so when I scroll the header is non transparent and initially it is transparent. So after user scrolls back to top I want header to be transparent again but it is non transparent how can I fix this ?

Code:

Inisde ProjectDetailsScreen component :

handleScroll = (event) => {
        if(event.nativeEvent.contentOffset.y > 100) {
            console.log("Height is this ", event.nativeEvent.contentOffset.y);
            this.props.navigation.setParams({ showHeader: "True"})
        }
    }

<ScrollView style={styles.container} 
                onScroll={this.handleScroll}
</ScrollView>

Inside navigation.js:

ProjectDetails: {
        screen: ProjectDetailsScreen,
        navigationOptions: ({ navigation }) => ({

            headerTransparent: navigation.state.params.showHeader === "True" ? false : true ,

            headerTitle: navigation.state.params.myTitle,
        }),
      }

So initially header is transparent so after scrolling down header is non transparent but again if I scroll back to initial position I want header to be transparent how can I do this ?

Upvotes: 3

Views: 1680

Answers (1)

Itay Gal
Itay Gal

Reputation: 10824

Set it to false

handleScroll = (event) => {
    if(event.nativeEvent.contentOffset.y > 100) {
        console.log("Height is this ", event.nativeEvent.contentOffset.y);
        this.props.navigation.setParams({ showHeader: "True"})
    }
    else {
        this.props.navigation.setParams({ showHeader: "False"})
    }
}

Upvotes: 2

Related Questions