# react-native-swipe-modal-up-down

> react native swipe up down it's animation modal to swipe down or up as Facebook comments, profile picture animation. it support flat-list and scroll view inside it without conflict with animation down and scrolling down

Latest version **1.1.0** (published 2021-09-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-swipe-modal-up-down
pnpm add react-native-swipe-modal-up-down
yarn add react-native-swipe-modal-up-down
bun add react-native-swipe-modal-up-down
```

## 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 | 1.1.0 |
| Published | 2021-09-26 |
| First published | 2020-07-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 87 |
| Author | Mina Samir Shafik |
| Maintainers | minasamir |
| Keywords | react, native, swipe, down, up, android, ios, flatlist, animation, facebook, comments, facebook profile pic animation, Modal, view |

## Links

- npm: https://www.npmjs.com/package/react-native-swipe-modal-up-down
- Repository: https://github.com/MinaSamir11/react-native-swipe-modal-up-down
- Homepage: https://github.com/MinaSamir11/react-native-swipe-modal-up-down#readme
- Issues: https://github.com/MinaSamir11/react-native-swipe-modal-up-down/issues
- npm.io page: https://npm.io/package/react-native-swipe-modal-up-down

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2021-09-26
- 1.0.9 — 2020-10-30
- 1.0.8 — 2020-10-30
- 1.0.7 — 2020-10-30
- 1.0.6 — 2020-10-30
- 1.0.5 — 2020-10-23
- 1.0.4 — 2020-08-22
- 1.0.3 — 2020-07-29
- 1.0.2 — 2020-07-29
- 1.0.1 — 2020-07-28
- 1.0.0 — 2020-07-28

## README

# react-native-swipe-modal-up-down
react native swipe up down it's animation modal to swipe down or up as Facebook comments, profile picture animation. it support flat-list and scroll view inside it without conflict with animation down and scrolling down

[![N|Solid](https://media.giphy.com/media/SlYD5g75AF5HvvGQ0s/giphy.gif)]


# Getting Started
```sh
$ npm install react-native-swipe-modal-up-down
```

# Usage
```sh
import SwipeUpDownModal from 'react-native-swipe-modal-up-down';
```

```javascript

  let [ShowComment, setShowModelComment] = useState(false);
  let [animateModal, setanimateModal] = useState(false);

<SwipeUpDownModal
  modalVisible={ShowComment}
  PressToanimate={animateModal}
  //if you don't pass HeaderContent you should pass marginTop in view of ContentModel to Make modal swipeable
  ContentModal={
    <View style={styles.containerContent}>
      <FlatList
        data={data}
        renderItem={({item, index}) => (
          <item key={index} Data={item} />
        )}
        keyExtractor={item => item.id}
      />
    </View>
  }
  HeaderStyle={styles.headerContent}
  ContentModalStyle={styles.Modal}
  HeaderContent={
    <View style={styles.containerHeader}>
          <Button 
              Title={"Press Me"}
              onPress={() => {
                setanimateModal(true);
              }}
           />
    </View>
  }
  onClose={() => {
      setModelComment(false);
      setanimateModal(false);
  }}
/>

const styles = StyleSheet.create({
  containerContent: {flex: 1, marginTop: 40},
  containerHeader: {
    flex: 1,
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    height: 40,
    backgroundColor: '#F1F1F1',
  },
  headerContent:{
    marginTop: 0,
  },
  Modal: {
    backgroundColor: '#005252',
    marginTop: 0,
  }
});


```
# props
                    
Props | Type | default | Note 
------------- | ------------- | ------------- | -------------
modalVisible  | Boolean | false | Set visiablity of Modal
ContentModal  | React Element | null | `for example: <View><Button text="Hello Mina" align="center" onPress={() => {}}/></View>`
ContentModalStyle  | any | opacity, flex: 1, marginTop: 55 | you shouldn't pass opacity or transform 
HeaderContent  | React Element | null | `for example: <View style={{flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center', height: 40}}><Text> Header Content </Text></View>`
HeaderStyle  | any | opacity, width: 700, marginTop: 50, position: 'absolute' | you shouldn't pass opacity or transform
onClose  | func | () => null | Called when Modal closed
ImageBackgroundModal  | image | null | you can set imagebackground of modal instead of backgroundColor
ImageBackgroundModalStyle | any | null | `for example : borderTopLeftRadius: 25, borderTopRightRadius: 25`
duration | milliseconds | 450 | Length of animation
DisableHandAnimation | Boolean | false | Disable Hand animate 
PressToanimate | Boolean | null | close modal showing animation by set value equal true
PressToanimateDirection | String | 'down' | Direction of animating Modal while closing, accepted value('up','down').
OpenModalDirection | String | 'down' | Direction of animating Modal while Opening, accepted value('up','down').
fade | Boolean | true | fading animation while opening/closing
MainContainerModal | style | backgroundColor: 'rgba(0, 0, 0, 0.5)',flex:1 | Main Container of modal

---
_Source: https://npm.io/package/react-native-swipe-modal-up-down · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._