Scroll on Header no longer working on Android (issue is latest react-native-reanimated)

[emmanuel-D]

Feature request

On iOS everything works as usual. But not and Android after migrating to Expo SDK 51 with comes with below dependencies:

Dependencies in package.json of example/ to reproduce the bug:

{
    "react-native-gesture-handler": "^2.16.2",
    "react-native-pager-view": "6.3.0",
    "react-native-reanimated": "~3.10.1",
}

Describe the feature request

Peer dependencies on react-native-reanimated need to be updated in order to make the Header scrolling again.

Current behavior

Scroll on Header no longer working on Android. The issue is due to the latest react-native-reanimated: "~3.10.1"

Screenshots (if applicable)

Demo:

https://github.com/PedroBern/react-native-collapsible-tab-view/assets/37305687/8b923858-fcce-4eb9-9425-dd4183650695

[ullaskunder1]

same issue

[bjoern-sellnau]

@emmanuel-D do you have lazy enabled or a refreshControl ? cause i have the same problem and if i only enable refreshControl for iOS it works also i use lazy together with cancelLazyFadeIn enabled for android maybe this could work for you as a temporary workaround until the package have been updated

[emmanuel-D]

@emmanuel-D do you have lazy enabled or a refreshControl ? cause i have the same problem and if i only enable refreshControl for iOS it works also i use lazy together with cancelLazyFadeIn enabled for android maybe this could work for you as a temporary workaround until the package have been updated

Indeed. A temp fix on Android will be removing the refreshControl props from Tabs.ScrollList, Tabs.FlatList, ... imported from this package.

[mexysfr]

I can confirm that setting refreshControl to undefined when Platform.OS is android temporarily fixed the issue. No issue has been found on iOS if refreshControl is set Let's try to investigate this

[DaveVaval]

I can confirm that setting refreshControl to undefined when Platform.OS is android temporarily fixed the issue. No issue has been found on iOS if refreshControl is set Let's try to investigate this

I'm having the same issue testing on android, though setting refreshControl to undefined does not work for me. I thought I was going crazy with this issue and honestly it renders this library unusable at the moment.

[athlan20]

same issue ,is it a bug?

[nikifutaki]

I faced the same issue, but updating react-native-reanimated fixed it.

[bjoern-sellnau]

we have replaced it and decided we do not need the scrolling header anymore. We also had problems with testing detox.

[oviirup]

This would be a weird solution, but it works, at least for me.

You just have to set a negative zIndex and make the pointerEvents to none

const Header = () => {
  return (
    <View style={{ zIndex: -50 }} pointerEvents='none'>
      ...
    </View>
  );
};

This makes the header element click through, and let you scroll.

If you want touchable elements inside header, you may add pointerEvents='auto' to each elements, or just replace the wrapping element of the header to ScrollView

NOTE: I am pretty new to react-native world I do not know the mechanics behind it, I just shared this because it works for me and this might solve your problem too

Happy Coding!

[kurucaner]

same issue

[anthlasserre]

I faced the same issue, but updating react-native-reanimated fixed it.

Which version @nikifutaki ?

[anthlasserre]

Found the origin of the issue, actually this is related to a bug with useAnimatedScrollHandler on Android. it no longer works with the refreshControl prop set. If you're under [email protected] please apply this patch. If you're above 3.11.0 it's likely already included.

@kurucaner @athlan20 @DaveVaval @mexysfr @emmanuel-D @ullaskunder1

[Unich-HieuDT]

If you want touchable elements inside header, you may add pointerEvents='auto' to each elements, or just replace the wrapping element of the header to ScrollView

Hello @oviirup I’m facing an issue with having a button in the Header. Do you have any ideas on how to handle this? https://github.com/PedroBern/react-native-collapsible-tab-view/issues/449

[RizqiSyahrendra]

This would be a weird solution, but it works, at least for me.

You just have to set a negative zIndex and make the pointerEvents to none

const Header = () => {
  return (
    <View style={{ zIndex: -50 }} pointerEvents='none'>
      ...
    </View>
  );
};

This makes the header element click through, and let you scroll.

If you want touchable elements inside header, you may add pointerEvents='auto' to each elements, or just replace the wrapping element of the header to ScrollView

NOTE: I am pretty new to react-native world I do not know the mechanics behind it, I just shared this because it works for me and this might solve your problem too

Happy Coding!

This one is really helpful, thank you