react-native-uni-carousel
This small package is based on FlatList. It provides components to help create both a horizontal list of items and a paginated horizontal list of items.
Last updated 2 years ago by jsaguiar .
MIT · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-uni-carousel 
SYNC missed versions from official npm registry.

React Native Uni Carousel

This small package is based on FlatList. It provides components to help create both a horizontal list of items and a paginated horizontal list of items.

Usage

CardList

Simple FlatList card with some helper methods

  <CardList
    // Same as item width
    spaceBetweenCards={marginBetweenCards * 2}
    // Same as item margin
    unselectedCardsWidth={otherCardsWidth}
    render={({ item, index }, { width }) => (
      // render of each item
    )}
    cards={[{ name: 'item1' }, { name: 'item2' }]} 
    options={options}
  />

Props

spaceBetweenCards - Margin between cards

selectedIndex - Item that is selected on the list

onChangeSelected - Callback called when the selectedItem changes

unselectedCardsWidth - Space from the next and previous card that is shown

render(itemToRender, CardListContainerProps) - Render callback of every single item

cards - The array of items to render

options - Object of props that get directly passed to FlatList

PaginatedCardList

Just a wrapper around CardList that handles the pagination and provides some callbacks to track page changes

  <PaginatedCardList
    // Same props as CardList (they get passed down to CardList, except cards)
    pages={pages}
    onChangePage={onChangePage}
  />

Props

pages - Object with keys as numbers ({1: [page 1 array of items], 2: [page 2 array of items]}

onChangePage - Callback that gets called on page change

Current Tags

  • 0.2.10                                ...           latest (2 years ago)

12 Versions

  • 0.2.10                                ...           2 years ago
  • 0.2.8                                ...           2 years ago
  • 0.2.7                                ...           2 years ago
  • 0.2.6                                ...           3 years ago
  • 0.2.4                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 2
Last Month 15
Dependencies (1)
Dev Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |