React-native-swiper: For simple needs, I recommend using FlatList with pagingEnabled property

Created on 5 Sep 2018  路  2Comments  路  Source: leecade/react-native-swiper

If your needs are simple, like carousel and you want to avoid adding a new dependency, use the FlatList component with the pagingEnabled property. It worked for me like charm.

Most helpful comment

@mgcrea Here you are :)
The width is the screen's width as this is a horizontal list, and each item's width of the list should also be to the screen's width.

<FlatList
  bounces={false}
  getItemLayout={(data, index) => (
      { length: width, offset: width * index, index }
  )}
  showsHorizontalScrollIndicator={false}
  pagingEnabled={true}
  horizontal={true}
  style={{ flex: 1 }}
  data={...}
  renderItem={...}
/>

All 2 comments

@egunsoma any chance you could share a basic example using FlatList?

@mgcrea Here you are :)
The width is the screen's width as this is a horizontal list, and each item's width of the list should also be to the screen's width.

<FlatList
  bounces={false}
  getItemLayout={(data, index) => (
      { length: width, offset: width * index, index }
  )}
  showsHorizontalScrollIndicator={false}
  pagingEnabled={true}
  horizontal={true}
  style={{ flex: 1 }}
  data={...}
  renderItem={...}
/>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

gwhite-dayspring picture gwhite-dayspring  路  3Comments

AndriiBoiko picture AndriiBoiko  路  3Comments

wrannaman picture wrannaman  路  3Comments

hadrienbbt picture hadrienbbt  路  3Comments

tokict picture tokict  路  3Comments