callstack / react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
MIT License
2.72k stars 418 forks source link

How I make flatlist with pagerview ? #561

Open shop-fluencer opened 2 years ago

shop-fluencer commented 2 years ago

Hello,

I want a flatlist with header with pagerview but I got this error:

[Encountered an error while measuring a list's offset from its containing VirtualizedList](https://stackoverflow.com/questions/72178734/encountered-an-error-while-measuring-a-lists-offset-from-its-containing-virtual)

Code:

  const renderInnerLists = ({ index }) => {
        return (
  //the pagerview grows to the height of its content, but it is nested inside of the flat list, and it does not cause the flat list to grow. 
    <PagerView style={s.innerScrollView} initialPage={0}>
        <View style={s.innerListCont} key="1">
            <FlatList
                data={data1}
                renderItem={rt}
                keyExtractor={(item, i) => i + Math.random(1000).toString()}
                numColumns={2}
                listKey={(item, index) => 'D' + index.toString() + Math.random(1000).toString()}
                contentContainerStyle={
                    s.myGalsContentStyle
                }
                showsVerticalScrollIndicator={false}
                scrollEnabled={false}
            />
        </View>
        <View style={s.innerListCont} key="2">
             <FlatList
                data={data2}
                renderItem={rt2}
                keyExtractor={(item, i) => i + Math.random(1000).toString()}
                listKey={(item, index) => 'S' + index.toString() + Math.random(1000).toString()}
                numColumns={2}
                contentContainerStyle={
                    s.myGalsContentStyle
                }
                showsVerticalScrollIndicator={false}
                scrollEnabled={false}
            />
        </View>
    </PagerView>
)
}

  return (
    <FlatList
      nestedScrollEnabled={true}
      stickyHeaderIndices={[2]}
      ListHeaderComponent={renderHeader}
      renderItem={renderInnerLists}
      contentContainerStyle={s.outerListStyle}
      data={fakeData}
      keyExtractor={(item, i) => item.id + Math.random(1000).toString()}
    />
  )
bryanltobing commented 1 year ago

did you find the answer to this?