Horizontal LegendList unable to render nested vertical ScrollViews

[abdullahibneat]

I was trying to use <LegendList horizontal /> to render multiple vertical <ScrollView /> components, but it looks like the ScrollViews become unresponsive to gestures and cannot be scrolled up-and-down.

Tried on Expo 54 + LegendList v2.

Here's a video showing the issue (I've run a production build, NOT Expo Go):

legend-list-demo.mov

Sample code:

import { Dimensions, ScrollView, Text, View } from 'react-native'

import { LegendList } from '@legendapp/list'

const width = Dimensions.get('window').width

const VerticalList = ({ even }: { even: boolean }) => (
  <ScrollView
    contentContainerStyle={{
      width,
      backgroundColor: even ? 'white' : 'lightgray',
    }}
  >
    {new Array(100).fill(0).map((_, index) => (
      <Text key={String(index)}>{index}</Text>
    ))}
  </ScrollView>
)

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <LegendList
        horizontal
        nestedScrollEnabled
        data={[0, 1, 2, 3]}
        renderItem={({ item }) => <VerticalList even={item % 2 === 0} />}
        getFixedItemSize={() => width}
      />
    </View>
  )
}

Sample Expo Snack: https://snack.expo.dev/@arabiyya/legendlist

Potentially related issues:

• nestedScrollEnabled not working with horizontal paginated LegendList containing vertical LegendList #312 (although this is rendering LegendList inside LegendList, I'm rendering ScrollView inside LegendList)
• FlashList also has the same problem: Horizontal FlashList unable to render nested ScrollViews Shopify/flash-list#1924

[Im2rnado]

Hi @abdullahibneat

Did you manage to solve this issue?

I have a Quraan app and I upgraded to Expo 54 and it seems like all the list packages like LegendList and FlashList (both v1 and v2) are now broken.

If you have found a solution I would be thankful if you let me know!