rn-swipe-up-down
Version:
Swipe Up Down component with icon color
76 lines (54 loc) • 2.34 kB
Markdown
[](https://badge.fury.io/js/react-native-swipe-up-down)    
[](https://nodei.co/npm/react-native-swipe-up-down/)
<img src="https://raw.githubusercontent.com/agiletechvn/react-native-swipe-up-down/master/demo.gif" data-canonical-src="./demo.gif" width="300" height="536" />
<img src="https://raw.githubusercontent.com/agiletechvn/react-native-swipe-up-down/master/demo_hidden_component.gif" data-canonical-src="./demo.gif" width="300" height="536" />
`$ npm install rn-swipe-up-down --save`
- OR
`$ yarn add rn-swipe-up-down`
```javascript
import SwipeUpDown from 'rn-swipe-up-down';
// TODO: What to do with the module?
<SwipeUpDown
iconColor="white" // Image icon can be "white" or "black"
itemMini={<ItemMini />} // Pass props component when collapsed
itemFull={<ItemFull />} // Pass props component when show full
onShowMini={() => console.log('mini')}
onShowFull={() => console.log('full')}
onMoveDown={() => console.log('down')}
onMoveUp={() => console.log('up')}
disablePressToShow={false} // Press item mini to show full
style={{ backgroundColor: 'green' }} // style for swipe
/>
```
If you want hidden component just don't pass props `itemMini`. It's will hidden. And then you can use `hasRef` to show it when you want.
```jsx
hasRef={ref => (this.swipeUpDownRef = ref)}
// This ref can help you show component when hidden component
<Text onPress={() => this.swipeUpDownRef.showFull()}>Show</Text>
```
```jsx
animation="easeInEaseOut"
```
Optional
* 'linear'
* 'spring'
* 'easeInEaseOut'
* 'none'
```jsx
swipeHeight={100} // Default 60
```
---
This module is [MIT licensed](./LICENSE)
---