Question: Animating Header Backgound Color

[lilbumblebear]

Hi, Thank you for making this awesome library! I was wondering if there is a way to animate the header background color changing? We are not using an image, just want to transition from white to transparent. Here is what we have so far:

<ScrollableNavigationBar
                transitionPoint={250}
                StatusBar={()=><StatusBarComponent
                    barStyle="dark-content"
                    backgroundColor="transparent"
                    animated={true}
                />}
                backgroundColor={pastTransition ? 'white': 'transparent'}
                borderColor={"transparent"}
                title={"Hi Name"}
                beforeTransitionPoint={()=>{setPastTransition(false);StatusBar.setBarStyle('light-content',true)}}
                afterTransitionPoint={()=>{setPastTransition(true);StatusBar.setBarStyle('dark-content',true)}}
            >

We have a state variable that keeps track of whether or not the user is past the transition point pastTransition and should adjust the background color accordingly.

Thank you for any assistance!

[zobeirhamid]

Hey, sorry for the late reply, I was on vacation the last couple of weeks. Glad to hear that you like library. First, I would recommend you to use the experimental branch on GitHub, this is where I update the library on a regular basis. You can do that by just including the following package linking to your package.json: "react-native-scrollable-navigation-bar": "zobeirhamid/react-native-scrollable-navigation-bar#experimental",

If you did that, you have access to the property HeaderBackgroundComponent, with this property and the property fadeOut={true} you should be able to create the effect you want to. Here is a possible example:

<ScrollableNavigationBar
     transitionPoint={250}
     headerBackgroundColor={"transparent"}
     borderColor={"transparent"}
     title={"Hi Name"}
     fadeOut={true}
     HeaderBackgroundComponent={() => <View style={{backgroundColor: 'white', flex:1;}} />}
>