Headers are not collapsed when using Tabs.FlashList.

[Ucekay]

(Written with machine translation)

Description

When using Tabs.FlashList (and Tabs.MasonryFlashList), the header does not change in any way and does not fold; with Tabs.FlatList and Tabs.ScrollView it works fine and the header folds.
In addition, when moving to Tabs.FlashList with the header collapsed in Tabs.FlatList, etc., the height of the Header is maintained, but if the FlashList is scrolled down, a blank space equal to the height of the Header is created.

Steps to reproduce

Fork this repository and run the example app

Video

2024-05-05.14.26.36.mov

[saulamsal]

+1 same issue.

[tomas1808]

Same!

[vbylen]

can confirm

[YahyaBagia]

+1 same issue

[NickKotte]

same. worked before i updated expo and maybe accidently updated this package

[tomas1808]

Fixed this by setting react-native-reanimated to exactly 3.8.1 👍

[vbylen]

@tomas1808 interesting, I tried this but didn't work. Is this version 7.0.1 of react-native-collapsible-tab-view?

[tomas1808]

@vbylen My exact configuration is:

• "react-native-collapsible-tab-view": "^7.0.1"
• "react-native-pager-view": "^6.2.3"
• "react-native-reanimated": "3.8.1"

[saulamsal]

@tomas1808 what about react-native-gesture-handler?

[tomas1808]

@saulamsal "react-native-gesture-handler": "~2.14.0"

[Ucekay]

Fixed this by setting react-native-reanimated to exactly 3.8.1 👍

Thank you, @tomas1808 !
I am able to solve this by simply changing reaxt-native-reanimated to 3.8.1. Here are the versions of the packages.

• "react-native-collapsible-tab-view": "^7.0.1"
• "react-native-pager-view": "^6.3.0"
• "react-native-gesture-handler": "^2.16.0"

I have a feeling that this problem is related to this issue that has been occurring since version 3.9.0 of react-native-reanimated.

[tomas1808]

@Ucekay Glad it worked for you! Not sure why not everyone is having the same success.

I'll use this moment to promote my own question in case anyone is feeling like giving back 🤣

[YahyaBagia]

This package used to work seamlessly with expo. However, after upgrading from expo SDK 50 to SDK 51, the following dependencies were updated:

• react-native-reanimated: ~3.6.2 → 3.10.1
• react-native-pager-view: 6.2.3 → 6.3.0
• react-native-gesture-handler: 2.14.0 → 2.16.1

Since expo includes specific versions of these packages with each release, manually changing the versions isn't feasible.

I recommend keeping this issue open until it is resolved and the package is compatible with the latest expo SDK 51 (51.0.8 as of May 20th 2024).

[chen8520]

@Ucekay I performed the same operation, but there will be version compatibility issues