Headers are not collapsed when using Tabs.FlashList.

PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native

MIT License

812 stars 159 forks source link

Headers are not collapsed when using Tabs.FlashList. #400

Open Ucekay opened 1 month ago

Ucekay commented 1 month ago

(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

https://github.com/PedroBern/react-native-collapsible-tab-view/assets/122760705/ef879d51-8b19-4ea3-823a-dd8d6db42a24

saulamsal commented 1 month ago

+1 same issue.

tomas1808 commented 1 month ago

Same!

vbylen commented 1 month ago

can confirm

YahyaBagia commented 1 month ago

+1 same issue

NickKotte commented 1 month ago

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

tomas1808 commented 1 month ago

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

vbylen commented 1 month ago

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

tomas1808 commented 1 month ago

@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 commented 1 month ago

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

tomas1808 commented 1 month ago

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

Ucekay commented 1 month ago

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 commented 1 month ago

@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 commented 3 weeks ago

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 commented 3 weeks ago

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