callstack / callstack/react-native-pager-view
Render PagerView inside a FlatList
- Lenguaje dominante
- TypeScript
- Estrellas
- 3.4k
- Forks
- 476
- Merge medio
- 10 d 21 h
- PR fusionados (30 d)
- 2
Descripción
## 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 :
```
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 }) => (
{title}
{title}
);
const Test = () => {
const renderItem = ({ item }) => (
);
return (
item.id}
/>
);
}
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;
```
Guía de contribución
Línea de trabajo
Comienza ejecutando la reproducción proporcionada de React Native y comparando el comportamiento de PagerView dentro de FlatList con el caso de ScrollView descrito. Sigue la ruta de renderizado de PagerView y verifica que el pager se vuelva visible cuando se utiliza desde el renderItem de FlatList.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 25/100