callstack / callstack/react-native-pager-view
Why does the PagerView height growth not effect any views that it is nested inside of ?
- Langage dominant
- TypeScript
- Étoiles
- 3.4k
- Forks
- 476
- Merge moyen
- 10 j 21 h
- PR mergées (30 j)
- 2
Description
## 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%',
},
```
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Reproduisez l’exemple signalé d’un PagerView imbriqué dans une FlatList, y compris les styles minHeight et le défilement interne désactivé, sur iOS et Android. Comparez son comportement de mise en page avec l’alternative ScrollView horizontale, puis déterminez si l’imbrication est prise en charge et si le résultat doit être un fix ou de la documentation.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react-native
- Domaine
- mobile-dev
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 25/100