I am using Animation.view
to change the height
and the background
of the header
.
I set my height
and the background
settings like this:
const HeaderHeight = this.state.scrollY.interpolate({
inputRange:[0, Header_Max_Height - Header_Min_Height],
outputRange:[Header_Max_Height, Header_Min_Height],
extrapolate:'clamp'
})
const AnimateHeaderBackgroundColor = this.state.scrollY.interpolate({
inputRange: [ 0, ( Header_Max_Height - Header_Min_Height ) ],
outputRange: [ '#009688', '#00BCD4' ],
extrapolate: 'clamp'
})
This is my animated.view.
<Animated.View style={{width:'100%', height: HeaderHeight, backgroundColor:AnimateHeaderBackgroundColor}}></Animated.View>
Everything works well.
My question is there a way I could change the view like the height
and the backgroundcolor
?
For example, say I have two views:
//view1
<View style={{width:'100%',height:100, backgroundColor:'red'}}>
<Text>View1</Text>
</View>
//view2
<View style={{width:'100%',height:100, backgroundColor:'blue'}}>
<Text>View2</Text>
</View>
I want the view1
to show by default and show view2
as I scroll to the top of the screen. Placing the View
in the outputRange
would make this possible?