react-native-swipe-up-down
Version:
106 lines (80 loc) • 2.96 kB
Markdown
# React Native Swipe Up Down
[](https://badge.fury.io/js/react-native-swipe-up-down)    
## Why using this lib?
- Support iOS & Android
- The best performance 60FPS for UI and JS when swipe up down
- Easy to use, easy to install - no more another package, only JS
<br><p><a href="https://www.buymeacoffee.com/minhchien"> <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="fateh999" /></a></p><br><br><br>
## Demo
|Full/Mini|Hidden component|
|---|---|
|<img src="https://raw.githubusercontent.com/agiletechvn/react-native-swipe-up-down/master/demo.gif" data-canonical-src="./demo.gif" width="300" height="630" />|<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="630" />|
## Install
`npm install react-native-swipe-up-down --save`
- OR
`yarn add react-native-swipe-up-down`
## Usage
```javascript
import SwipeUpDown from 'react-native-swipe-up-down';
// TODO: What to do with the module?
<SwipeUpDown
itemMini={(show) => <ItemFull show={show} />}
itemFull={(hide) => <ItemFull hide={hide} />}
onShowMini={() => console.log('mini')}
onShowFull={() => console.log('full')}
animation="spring"
disableSwipeIcon
extraMarginTop={100}
iconColor='yellow'
iconSize={30}
style={{ backgroundColor: '#000' }} // style for swipe
/>
```
## Note
- 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.
And try to using this method to show FullComponent
```jsx
const swipeUpDownRef = useRef();
// Show component
swipeUpDownRef.current.showFull();
// This ref can help you show component when hidden component
<SwipeUpDown
itemFull={<Test />}
ref={swipeUpDownRef}
/>
```
- If you want to use `ScrollView` inside `itemFull`, please add `TouchableWithoutFeedback` inside `ScrollView`.
Example
```jsx
<ScrollView>
<TouchableWithoutFeedback>
{...}
</TouchableWithoutFeedback>
</ScrollView>
```
## More Props
### `animation`
```jsx
animation="easeInEaseOut"
```
Optional
* 'linear'
* 'spring'
* 'easeInEaseOut'
* 'none'
### `swipeHeight`
```jsx
swipeHeight={100} // Default 60
```
### `extraMarginTop`
```jsx
extraMarginTop={24} // Default iOS: 24 | Android: 0 - Using for padding status bar iOS or max height full component
```
### `disableSwipeIcon`
```jsx
disableSwipeIcon={true}
```
---
## License
This module is [MIT licensed](./LICENSE)
---