react-native-3d-swiper

A javascript only perfromant, customisable 3d swiper for react-native.

Getting Started

import RNSwiper from 'react-native-3d-swiper'

onSwipeUp(index){
  //parameter returned is the index of active child
  console.log(index)
}

onSwipeDown(index){
  //parameter returned is the index of active child
  console.log(index)
}

onPress(index){
  //parameter returned is the index of active child
  console.log(index)
}

<View
 <RNSwiper
      minimumScale={0.7}  //scale of out of focus components
      minimumOpacity={0.9} // opacity of out of focus components
      overlap={60}  // the degree to which components overlap.  
      cardWidth={400} // the width of each component
      duration={100} // animation duration on swipe
      swipeThreshold={100}// minimum distance to swipe to trigger change in state 
      onSwipeUp={this.onSwipeUp}
      onSwipeDown={this.onSwipeDown}
      onPress={this.onPress}
      >
        <SwipeCard color="#ebebeb" text="Hellooooo"/> {/* Takes any component as child */}
        <SwipeCard color="#998877" text="Hellooooo"/>
        <SwipeCard color="#123abc" text="Hellooooo"/>
        <SwipeCard color="#ebebeb" text="Hellooooo"/>
        <SwipeCard color="#987654" text="Hellooooo"/>
    </RNSwiper>
</View>

Installing

npm i --save react-native-3d-swiper

Contributing

TODO: Customisable animation, Lazy loading

Authors

• Bobby Hewitt - Initial work - [email protected]

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details