# react-native-3d-swiper

> A performant javascript only overlapping 3d swiper for react native

Latest version **2.0.7** (published 2017-07-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-3d-swiper
pnpm add react-native-3d-swiper
yarn add react-native-3d-swiper
bun add react-native-3d-swiper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.7 |
| Published | 2017-07-23 |
| First published | 2017-07-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 36 |
| Author | Bobby Hewitt |
| Maintainers | bobbyhewitt |
| Keywords | swiper, carousel, react-native, react, animated, animation |

## Links

- npm: https://www.npmjs.com/package/react-native-3d-swiper
- Repository: https://github.com/Bobby-hewitt/react-native-3d-swiper
- Homepage: https://github.com/Bobby-hewitt/react-native-3d-swiper#readme
- Issues: https://github.com/Bobby-hewitt/react-native-3d-swiper/issues
- npm.io page: https://npm.io/package/react-native-3d-swiper

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 2.0.7 (latest) — 2017-07-23
- 2.0.6 — 2017-07-23
- 2.0.5 — 2017-07-23
- 2.0.4 — 2017-07-23
- 2.0.3 — 2017-07-22
- 2.0.2 — 2017-07-22
- 2.0.0 — 2017-07-22
- 1.0.1 — 2017-07-22
- 1.0.0 — 2017-07-22

## README

# react-native-3d-swiper

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

![screenshot](https://user-images.githubusercontent.com/14819705/28497423-b7e9cfbc-6f7e-11e7-89fd-eb62f8cc6ff2.gif)

## Getting Started

```JSX
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* - <bobby@bobbhewitt.co.uk> 

See also the list of [contributors](https://github.com/Bobby-hewitt/react-native-3d-swiper) who participated in this project.

## License

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

---
_Source: https://npm.io/package/react-native-3d-swiper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._