Powerful Swiper Hooks For React Native

A powerful Swiper hooks component for React Native to create awesome swipers & carousels on the app.

Install & Import:

# NPM
$ npm i react-native-swiper-hooks --save
import Swiper from 'react-native-swiper-hooks'

Basic usage:

<Swiper height={300}
        paginationSelectedColor={'#CCFF66'}
        autoplay={true}
        loop={true}
        showPagination={true}
        direction={'row'}
        >
  {_renderList()}
</Swiper>
const _renderList = ()=>{
  let listData = [
      {
        title:'1',
        bgColor:'#f00'
      },
      {
        title:'2',
        bgColor:'#0f0'
      },
      {
        title:'3',
        bgColor:'#00f'
      },
    ]
    return (
      listData.map((item,idx)=>{
        return (
          <View style={{width:WIDTH,height:300,backgroundColor:item.bgColor,justifyContent: 'center',alignItems: 'center'}} key={idx}>
              <Text>{item.title}</Text>
          </View>
        )
      })
    )
}

Default props and callbacks:

width=WIDTH,
height=HEIGHT,
childWidth=null,
childHeight=null,
boxBackgroundColor='#ffffff00',
direction='row',
scrollEnabled=true,
bounces=true,
loop=true,
autoplay=true,
autoplayGapTime=3,
autoplayDirection=true,
children=[], 
animated=true,
minOffset = 10,
initIndex=0,
showPagination=true,
paginationPosition='bottom',
paginationOffset=5,
paginationUnselectedSize=6,
paginationSelectedSize=10,
paginationUnselectedColor='#fff',
paginationSelectedColor='#000',
onPaginationChange,
onScrollBeginDrag,
onScrollEndDrag,

Preview:

Powerful Swiper Hooks For React Native

Download Details:

Author: Voyzz

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Voyzz/react-native-swiper-hooks

License: MIT

You Might Be Interested In:

Tags:,

Add Comment