callstack / callstack/react-native-pager-view
Why does the PagerView height growth not effect any views that it is nested inside of ?
- Lenguaje dominante
- TypeScript
- Estrellas
- 3.4k
- Forks
- 476
- Merge medio
- 10 d 21 h
- PR fusionados (30 d)
- 2
Descripción
## Ask your Question
I have a unique situation where I have nested the PagerView inside of a FlatList. Reason for this is the necessity for a sticky header, onEndReached, and more... my issue is that the PagerView does not cause the FlatList that it is nested inside of to grow to the height of its content. This only occurs with PagerView. What do I mean? So as an alternative I used a ScrollView instead of the PagerView, made it horizontal and turned on Pagination, this worked perfectly fine but the scrolling speed is just terrible on iOS so I would much rather use PagerView. Please let me know if theres a way to fix this.
```
const renderInnerLists = useCallback(
({ index }) => {
if (index === 1) {
return
}
if (index === 2) {
return (
)
}
},
[reducedGalleries, galleries]
)
return (
)
}
const styles = StyleSheet.create({
topCont: {
width: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: colors.placeHolder,
},
header: {
position: 'absolute',
top: 0,
},
button: {
width: 100,
marginTop: 5,
height: 30,
borderRadius: 8,
backgroundColor: 'white',
},
outerListStyle: {
minHeight: '100%',
width: width,
backgroundColor: 'white',
borderWidth: 2,
},
innerScrollView: {
width: width,
minHeight: '100%',
},
myGalsContentStyle: {
paddingBottom: 10,
},
innerListCont: {
width: width,
minHeight: '100%',
},
```
Guía de contribución
Línea de trabajo
Reproduce el ejemplo reportado de un PagerView anidado dentro de FlatList, incluidos los estilos minHeight y el desplazamiento interno deshabilitado, en iOS y Android. Compara su comportamiento de layout con la alternativa de ScrollView horizontal y determina después si el anidamiento está soportado y si el resultado debería ser un fix o documentación.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react-native
- Área
- mobile-dev
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 25/100