callstack / callstack/react-native-pager-view

Render PagerView inside a FlatList

Open
#619 1 comment 3 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
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;
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.