react native animation : screen shaking when scrolling slowing

Question

I am using Animated.View to change the header height.

It works well in ios but in android, when I scroll slowly the entire view is shaking.

1) First I set the state

 this.state = {
      scrollY:new Animated.Value(0)
   }

2) Inside the render() I render the height of the view I want to animate.

const HeaderHeight = this.state.scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [100, 0],
      extrapolate: 'clamp'
    })

3) I set my Header like this:

  <Animated.View style={{width:'100%', height:HeaderHeight, backgroundColor:'transparent', justifyContent:'flex-end'}}>
 ...
  </Animated.View>

4) Inside the scrollview:

<ScrollView
          scrollEventThrottle={16}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])}
          >

As you could see from the gif file when I slowly scroll the view the screen is shaking. This is happening in android. On ios it works fine.

Any idea how to fix this?

Any comments or advice would be really helpful :)

Answer 1

Your inputRange [0,100] and outputRange[100,0] have a ratio of 1.

This means that for each pixel you move in the ScrollView, your HeaderHeight will be reduced by one, which sounds great but the value you get from the scrollview event is not an integer, is a double and based on those tiny digits it will try to "aspect ratio" your outputRange and this is quite sensitive in Android and therefore the shaking.

Increase your inputRange to [0, 200] so it has a ratio of 2 related to the outputRange. This will remove the shaking.