callstack / callstack/react-native-pager-view

Why does the PagerView height growth not effect any views that it is nested inside of ?

Open
#436 0 comments 2 reactions 0 assignees View on GitHub
question
Dominant language
TypeScript
Stars
3.4k
Forks
476
Avg merge
10d 21h
Merged PRs (30d)
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%',
},
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the reported nested PagerView inside FlatList example, including the minHeight styles and disabled inner scrolling, on iOS and Android. Compare its layout behavior with the horizontal ScrollView alternative, then determine whether the nesting is supported and whether the outcome should be a fix or documentation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.