# react-native-backdrop

> Backdrop component built with Material Guidelines for React Native

Latest version **2.1.2** (published 2020-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-backdrop
pnpm add react-native-backdrop
yarn add react-native-backdrop
bun add react-native-backdrop
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2020-09-10 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 108.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 110 |
| Author | tmmgn |
| Maintainers | tmmgn |
| Keywords | react-native, backdrop |

## Links

- npm: https://www.npmjs.com/package/react-native-backdrop
- Repository: https://github.com/tmmgn/react-native-backdrop
- Homepage: https://github.com/tmmgn/react-native-backdrop#readme
- Issues: https://github.com/tmmgn/react-native-backdrop/issues
- npm.io page: https://npm.io/package/react-native-backdrop

## Recent versions

- 2.1.2 (latest) — 2020-09-10
- 2.1.1 — 2020-07-09
- 2.1.0 — 2020-07-09
- 2.0.0 — 2020-05-29
- 1.0.16 — 2019-11-26
- 1.0.15 — 2019-11-01
- 1.0.14 — 2019-10-28
- 1.0.13 — 2019-09-27
- 1.0.12 — 2019-09-27
- 1.0.11 — 2019-09-27
- 1.0.10 — 2019-09-26
- 1.0.7 — 2019-09-02
- 1.0.6 — 2019-09-02
- 1.0.5 — 2019-08-28
- 1.0.4 — 2019-08-28
- … 1 more at https://npm.io/package/react-native-backdrop/versions

## README

# React Native Backdrop

React Native Backdrop component built with material guidelines for android and ios

| <img src="https://user-images.githubusercontent.com/11463030/64115482-726d4e80-cd98-11e9-8f7d-f2d1f64f6daf.gif" width="300" alt="Without closedHeight"> | <img src="https://user-images.githubusercontent.com/11463030/64115483-74cfa880-cd98-11e9-9413-525568983873.gif" width="300" alt="With closedHeight"> |



## Installation

`$ npm install react-native-backdrop --save`

## Usage

```js
import { Backdrop } from "react-native-backdrop";

const App = () => {
  const [visible, setVisible] = useState(false);
  
  const handleOpen = () => {
    setVisible(true);
  };
  
  const handleClose = () => {
    setVisible(false);
  };

  return (
    <Fragment>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TouchableOpacity
          onPress={() => setVisible(true)}
          style={{
            width: 200,
            height: 40,
            justifyContent: 'center',
            alignItems: 'center',
            elevation: 1,
            backgroundColor: '#fff',
          }}>
          <Text>Handle Backdrop</Text>
        </TouchableOpacity>
      </View>
      <Backdrop
        visible={visible}
        handleOpen={handleOpen}
        handleClose={handleClose}
        onClose={() => {}}
        swipeConfig={{
          velocityThreshold: 0.3,
          directionalOffsetThreshold: 80,
        }}
        animationConfig={{
          speed: 14,
          bounciness: 4,
        }}
        overlayColor="rgba(0,0,0,0.32)"
        backdropStyle={{
          backgroundColor: '#fff',
        }}>
        <View>
          <Text>Backdrop Content</Text>
        </View>
      </Backdrop>
    );
}


```

### Backdrop Properties

| Prop                  | Description                                                  | Default                                                                                      |
| --------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| **`children`**        | Content of backdrop (required)                               |                                                                                              |
| **`visible`**         | Whether the backdrop is visible (required, boolean)          | `false`     
| **`handleOpen`**     | Function to open backdrop (required, function)              | `() => {}`       |
| **`handleClose`**     | Function to close backdrop (required, function)              | `() => {}`                                                                                   |
| **`beforeClose`**         | Callback that is called before close animation    | `() => {}`                                                                                   |
| **`afterClose`**         | Callback that is called after close animation    | `() => {}`                                                                                   |
| **`beforeOpen`**         | Callback that is called before open animation    | `() => {}`                                                                                   |
| **`afterOpen`**         | Callback that is called after open animation    | `() => {}`                                                                                   |
| **`animationConfig`** | Configures Open and Close Animation speed and bounciness     | `{speed: 14, bounciness: 4}`                                                                 |
| **`swipeConfig`**     | Configures Swipe Gesture to close backdrop                   | `{velocityThreshold: 0.3, directionalOffsetThreshold: 80}`                                   |
| **`backdropStyle`**   | Style object for backdrop styling                            | `{}`                                                                                         |
| **`containerStyle`**   | Style object for container styling                            | `{ backgroundColor: "#fff" }`                                                                                         |
| **`overlayColor`**    | Color of backdrop overlay                                    | `rgba(0, 0, 0, 0.32)`                                                                        |
| **`header`**          | Display custom header in backdrop                            | `() => (<View style={styles.closePlateContainer}><View style={styles.closePlate} /></View>)` |
| **`closedHeight`**    | Height of closed backdrop that will be visible and touchable | `0`                                                                                          |
| **`closeOnBackButton`**    | Close backdrop on back button press on android | `false`                                                                                          |

velocityThreshold - Velocity that has to be breached in order for swipe to be triggered (vx and vy properties of gestureState)
directionalOffsetThreshold - Absolute offset that shouldn't be breached for swipe to be triggered (dy for horizontal swipe, dx for vertical swipe)

## License

[MIT License](http://opensource.org/licenses/mit-license.html). © Alexander Bogdanov 2019-

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