react-native-hooks-swiper v1.1.1

Tips: This component has been moved to the new new npm & github repository named "react-native-swiper-hooks".

you can still use this component, but I will updata it only on the new repository

• Github / NPM

Hello, folks!

🦄 This is a wonderful animated carsouel hooks component for React-Native

✨ 为React Native开发的轮播展示动画组件

👨🏻‍💻 Powered by Voyz Shen

🏫 Shanghai Jiao Tong University, Ctrip

react-native-hooks-swiper

Catalog

• Demo
• How to use
• Properties
• Functions

Demo

autoplay ↓

non-autoplay ↓

non-loop ↓

How to use

• install

npm i react-native-hooks-swiper --save

• import

import Swiper from 'react-native-hooks-swiper'

• Demo

...
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>
        )
      })
    )
}

...

<Swiper height={300}
        autoplay={true}
        loop={true}
        showPagination={true}
        bounces={false}>
  {_renderList()}
</Swiper>

...

Properties

- Basic -

- Pagination -

Functions

- callback -