Open anatoleblanc opened 1 year ago
Hi, Thank you so much for the great lib!
I have a hard time rendering a PagerView as an item of a FlatList. PagerView just won't show. It is working when I replace FlatList with a ScrollView. Would love to see a PagerView working inside a renderItem function.
Here is a simple repro :
import React from 'react'; import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native'; import PagerView from 'react-native-pager-view' const DATA = [ { id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', title: 'First Item', }, { id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', title: 'Second Item', }, { id: '58694a0f-3da1-471f-bd96-145571e29d72', title: 'Third Item', }, ]; const Item = ({ title }) => ( <PagerView> <View style={styles.item} key="1"> <Text style={styles.title}>{title}</Text> </View> <View style={styles.item} key="2"> <Text style={styles.title}>{title}</Text> </View> </PagerView> ); const Test = () => { const renderItem = ({ item }) => ( <Item title={item.title} /> ); return ( <SafeAreaView style={styles.container}> <FlatList data={DATA} renderItem={renderItem} keyExtractor={item => item.id} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, }, item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, }); export default Test;
I have the same issue, and it seems to be iOS only.
Versions: "expo": "^49.0.0", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.72.3", "react-native-pager-view": "6.2.0",
Ask your Question
Hi, Thank you so much for the great lib!
I have a hard time rendering a PagerView as an item of a FlatList. PagerView just won't show. It is working when I replace FlatList with a ScrollView. Would love to see a PagerView working inside a renderItem function.
Here is a simple repro :