react-native : change view corresponding to scroll position

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=></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=>
 <Text>View1</Text>
</View>

//view2
<View style=>
  <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?

from react-native : change view corresponding to scroll position