PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
815 stars 161 forks source link

Known issue: flashlist does not take full height #335

Open andreialecu opened 1 year ago

andreialecu commented 1 year ago

Flashlist does not support minHeight in contentContainerStyle resulting in an issue if there isn't enough content to fill the screen when swiping between panes.

See video below for an explanation:

https://user-images.githubusercontent.com/697707/233771319-5087ff0b-edd3-40a2-9d14-98c6cbb4f1b4.mp4

andreialecu commented 1 year ago

Can be repro'd by uncommenting these lines in the example:

https://github.com/PedroBern/react-native-collapsible-tab-view/blob/834dc4b9c0edc93feaa8ff4affa93f266a248232/example/src/Shared/ExampleComponentFlashList.tsx#L33-L34

gkartalis commented 1 year ago

Not sure if helpful but:

where height is const height = useWindowDimensions().height at least it is stuck on the previous tab scroll value. 🤷‍♂️ hope it helps

https://github.com/PedroBern/react-native-collapsible-tab-view/assets/21178754/242adc6d-af2a-433f-9d6c-8150757e5132

ngocan3897 commented 1 year ago

i got this issue hope will have solution soon

zRelux commented 9 months ago

Any update?

zRelux commented 9 months ago

You can bypass this by wrapping the flashlist in the tabs scrollview

senghuotlay commented 9 months ago

I tried, it doesn't seems to work at all

beh0907 commented 9 months ago

You can bypass this by wrapping the flashlist in the tabs scrollview

But 'onRefresh' and 'onEndReached' are not working

omotoshogyro commented 5 months ago

Not sure if helpful but:

  • I think flashlist needs a height all the time in order to correctly render the list.
  • if you wrap the react-native-collapsible-tab-view/example/src/Shared/ContactsFlashList.tsx with a View with fixed height and subtract the const { top } = useHeaderMeasurements() like this:
<View style={{ height: height - top.value }} >
<Tabs.FlashList>
...
</View>

where height is const height = useWindowDimensions().height at least it is stuck on the previous tab scroll value. 🤷‍♂️ hope it helps

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-05-22.at.19.28.06.mp4

Hi, I am having an issue with the tabBarHeader hiding under the safeAreaView on ios but in this video, the issue is not there, Do you mind sharing the code snippet of this specific video demo?

VictorioMolina commented 3 months ago

+1

mrtawil commented 1 month ago

+1