Cannot use cross-axis VirtualizedList inside Tab.ScrollView

habovh commented 3 years ago

Current behavior

I'm in the situation where I need to use an horizontal <FlatList /> as a child of <Tabs.ScrollView />.

As it turns out, the horizontal prop appears to be ignored and my items are ending up being stacked vertically instead of horizontally as expected.

Expected behaviour

I'm expecting to be able to use <FlatList horizontal /> (or any VirtualizedList really) along with <Tabs.ScrollView />.

Code sample

The presence of children on <FlatList /> is just to be able to switch the component quickly to ScrollView, which works fine.

<Tabs.Container>
  <Tabs.Tab name="Tab 1">
    <Tabs.ScrollView>
      <Text>Tab 1</Text>
      <Text>Tab 1</Text>
      <FlatList
        listKey="horizontalListTest"
        horizontal
        keyExtractor={(_, index) => index}
        data={[null, null, null, null, null, null]}
        renderItem={() => <View style={{ height: 20, backgroundColor: '#ff00ff', aspectRatio: 1, margin: 10 }} />}
        // Weird default style: this style is required for the view not to fill up all the remaining screen space.
        style={{ flexGrow: 0 }}
      >
        {/* Useless children with FlatList, just here to allow fast switching to ScrollView */}
        <View style={{ height: 20, backgroundColor: '#ff00ff', aspectRatio: 1, margin: 10 }} />
        <View style={{ height: 20, backgroundColor: '#ff00ff', aspectRatio: 1, margin: 10 }} />
        <View style={{ height: 20, backgroundColor: '#ff00ff', aspectRatio: 1, margin: 10 }} />
        <View style={{ height: 20, backgroundColor: '#ff00ff', aspectRatio: 1, margin: 10 }} />
        <View style={{ height: 20, backgroundColor: '#ff00ff', aspectRatio: 1, margin: 10 }} />
        <View style={{ height: 20, backgroundColor: '#ff00ff', aspectRatio: 1, margin: 10 }} />
      </FlatList>
      <Text>Tab 1</Text>
      <Text>Tab 1</Text>
      <Text>Tab 1</Text>
    </Tabs.ScrollView>
  </Tabs.Tab>
</Tabs.Container>

Screenshots

Using `<FlatList horizontal />`	Using `<ScrollView horizontal />`
Wrong ⛔️	As expected ✅

Environment info

react-native: 0.63.3 react-native-collapsible-tab-view: 4.1.0, react-native-reanimated: 2.0.0,

gabrielbezerra81 commented 3 years ago

Did you solve this? I'm facing the same issue.

duyhodev commented 3 years ago

+1 the same to me

habovh commented 3 years ago

I didn't solve this, I ended up using the less advanced react-native-collapsible-segmented-view by the same author.

Suggesting another library is not ideal but that's actually how I got by, thought it was worth sharing since this issue does not exist on the other lib.

duyhodev commented 3 years ago

ah guys, using FlatList from react-native-gesture-handler instead of react-native works for me

habovh commented 3 years ago

Oh wow.

Now that's unexpected, thanks for the tip!

andreialecu commented 3 years ago

I'll close this as it seems resolved, if not, let me know.

habovh commented 3 years ago

@andreialecu it's very well not resolved. The currently proposed "fix" implies relying on a third party lib. In my opinion, this either needs to be fixed here RN-collapsible-tab-view, or in React Native itself if horizontal={true} is properly applied to children scrollviews by RN-collapsible-tab-view.

andreialecu commented 3 years ago

There's nothing in this library that can cause this behavior directly, so it very likely is a react native bug, so there's nothing we can do here.

react-native-gesture-handler is a core lib in the community, and it's likely people are going to need it for other things anyway.

See these upstream issues: https://github.com/facebook/react-native/issues/19452 https://github.com/facebook/react-native/pull/19612

PedroBern / react-native-collapsible-tab-view