Quantcast
Channel: React-Native FlatList with 3 cards paging layout - Stack Overflow
Viewing all articles
Browse latest Browse all 3

React-Native FlatList with 3 cards paging layout

$
0
0

In this snack I am trying to have 3 cards in the center of the screen with a horizontal FlatList and enabled paging to jump to the next 3 cards on scroll.

But the layout starts getting destroyed after scrolling and some pixels of the next/previous card appears in the view.

How should I style this list to always have exactly 3 cards in the center of the screen and scroll will jump to the next page with the next 3 cards ? Or like the GooglePlay store, a fixed pixels of previous/next card be visible to the left and right of the main 3 cards. (Example screenshots below)

<View style={{flex:1,justifyContent: 'center', marginLeft: 5, marginRight: 5,}}><FlatList        horizontal        pagingEnabled        data={data}        keyExtractor={(item) => `ìtem-${item}`}        renderItem={({ item }) => (<Card style={{width:Dimensions.get("window").width/3-5,marginRight:5}}>            {/* some content */}</Card>        )}      /></View>

I do not need a library like snap-carousel or so ...

enter image description here


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images