Search code examples
androidreactjsreact-nativereact-animated

Buggy Collapsible Header Tabs in React Native (Android)

I am trying to build a collapsible header tab.

I finally found this one Collapsible Header Tabs Snack which worked perfectly as base code. It worked as expected on IOS, but I had not confirmed the Android version yet. now that I look at it, it's very buggy. This can be seen in the above snack by running in android.

Screen preview

The Header scroll is very buggy (fluctuation) until the tabs clamp onto the top but then the scroll is smooth. I am guessing that there is a problem with the sticky scroll which has animated scroll views and animated views.

I tried adding scrollToOverflowEnabled = {true} overScrollMode={'never'} but it didn't help.

Any help would be appreciated. Thanks

Solution

  • This was solved by changing the input range from x to x*2.

    const translateY = this.props.screenProps.scrollY.interpolate({
  inputRange:  [0, headerHeight],
  outputRange: [0, headerHeight],
  extrapolate: "clamp",
})

    changed to

    const translateY = this.props.screenProps.scrollY.interpolate({
  inputRange:  [0, headerHeight * 2],
  outputRange: [0, headerHeight],
  extrapolate: "clamp",
})

    One of the explanations I found was that the offset given by iOS is a series like 1, 1.5, 2, 2.5 but android gives offset in decimal values.

    I don’t know how changing input range as x*2 solves that or if it’s even a reason, but it did run smoothly later on.

    But even though the stuttering problem was solved, there were still some problems with scrolling on Android. So I had to drop this.