react-native-collapsible-tab-view icon indicating copy to clipboard operation
react-native-collapsible-tab-view copied to clipboard

Published 20 hours ago • verified publisher icon PedroBern

Headers are not collapsed when using Tabs.FlashList.

Open Ucekay opened this issue 1 year ago • 5 comments

(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

Ucekay avatar May 05 '24 05:05 Ucekay

+1 same issue.

saulsharma avatar May 08 '24 21:05 saulsharma

Same!

tomas1808 avatar May 11 '24 03:05 tomas1808

can confirm

cloudorbush avatar May 11 '24 10:05 cloudorbush

+1 same issue

YahyaBagia avatar May 12 '24 11:05 YahyaBagia

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

NickKotte avatar May 12 '24 21:05 NickKotte

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

tomas1808 avatar May 13 '24 19:05 tomas1808

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

cloudorbush avatar May 14 '24 17:05 cloudorbush

@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"

tomas1808 avatar May 14 '24 20:05 tomas1808

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

saulsharma avatar May 15 '24 03:05 saulsharma

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

tomas1808 avatar May 15 '24 03:05 tomas1808

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.

Ucekay avatar May 15 '24 04:05 Ucekay

@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 🤣

tomas1808 avatar May 15 '24 04:05 tomas1808

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).

YahyaBagia avatar May 20 '24 06:05 YahyaBagia

@Ucekay I performed the same operation, but there will be version compatibility issues image 截屏2024-05-21 09 59 07

chen8520 avatar May 21 '24 02:05 chen8520

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).

In Android Tabs.ScrollView & Tabs.FlatList also not working

jayan2019 avatar Jun 18 '24 08:06 jayan2019

Based on this 3.13.0-rc.1 version of Reanimated working fine with all Tabs.ScrollView , Tabs.FlatList & Tabs.MasonryFlashList in both iOS & Android.

Currently my package.json is:

  • "expo": "^51.0.14",
  • "react-native": "0.74.2",
  • "react-native-reanimated": "~3.13.0-rc.1",
  • "react-native-gesture-handler": "~2.16.1",

jayan2019 avatar Jun 18 '24 09:06 jayan2019

@jayan2019 "react-native-reanimated": "3.8.1"

chen8520 avatar Jun 18 '24 09:06 chen8520

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).

I have created a patch for version 3.10.1 based on the patch for react-native-reanimated version 3.11.0. This will ensure that the header collapses correctly. However, I am not very familiar with this yet, so please use it at your own risk. (I am not sure if this will be a solution to Expo’s recommendation for specific package versions.) react-native-reanimated+3.10.1.patch

Ucekay avatar Jun 19 '24 09:06 Ucekay

This was an upstream issue in Reanimated. It should be fixed in Reanimated 3.12.1

andreialecu avatar Jun 25 '24 13:06 andreialecu