# docking-bottom-sheet

> DockingBottomSheet offers a React Native component that takes in 2 types of content views as props. One is Main content view and the other is Bottom-Sheet content view. Initially Main view is the active view when Bottom-Sheet is docked at the bottom. It c

Latest version **1.0.6** (published 2019-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install docking-bottom-sheet
pnpm add docking-bottom-sheet
yarn add docking-bottom-sheet
bun add docking-bottom-sheet
```

## 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.0.6 |
| Published | 2019-09-16 |
| First published | 2019-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Rajat Soni |
| Maintainers | rajatsoni |
| Keywords | react, react-native, react native, dock view, docking view, bottom sheet, bottom-sheet, bottom-sheet-view, bottom sheet view, docking bottom sheet, dockable bottom sheet, docking-bottom-sheet, dockable-bottom-sheet, expand sheet, expand dock, react native component, scrollview, scroll-view, scroll view |

## Links

- npm: https://www.npmjs.com/package/docking-bottom-sheet
- Repository: https://github.com/iamrajatsoni/DockingBottomSheet
- Homepage: https://github.com/iamrajatsoni/DockingBottomSheet#readme
- Issues: https://github.com/iamrajatsoni/DockingBottomSheet/issues
- npm.io page: https://npm.io/package/docking-bottom-sheet

## 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.0.6 (latest) — 2019-09-16
- 1.0.5 — 2019-09-16
- 1.0.4 — 2019-09-15
- 1.0.3 — 2019-09-15
- 1.0.2 — 2019-09-15
- 1.0.1 — 2019-09-15
- 1.0.0 — 2019-09-15

## README

# docking-bottom-sheet [![NPM version](https://badge.fury.io/js/docking-bottom-sheet.svg)](https://npmjs.org/package/docking-bottom-sheet) [![Build Status](https://travis-ci.org/Rajat%20Soni/docking-bottom-sheet.svg?branch=master)](https://travis-ci.org/Rajat%20Soni/docking-bottom-sheet)
Demo link: [https://github.com/iamrajatsoni/DockingBottomSheet/tree/master/demo](https://github.com/iamrajatsoni/DockingBottomSheet/tree/master/demo)

<img align="right" src="https://cdn-images-1.medium.com/max/1600/1*6r_ovW9OgoEdLxjSNuZTiA.gif" alt="DockingBottomSheet" hspace="24px" z-index="7"/>

> DockingBottomSheet offers a React Native component that takes in 2 types of content views as props.
> One is Main content view and the other is Bottom-Sheet content view. Initially Main view is the active view when Bottom-Sheet is docked at the bottom. It can also be expanded and docked at the top by dragging or using function `expandBottomSheet()`. Once expanded, `dockBottomSheet()` function can be used to programmatically dock the rendered bottom-sheet. Various other props are exposed that can be used to customise `DockingBottomSheet` depending on one's requirement.
>

## Installation
```sh
$ npm i docking-bottom-sheet
```

## Import and Basic Usage
__Import__
```js
import DockingBottomSheet from 'docking-bottom-sheet'
```
```js
var DockingBottomSheet = require('docking-bottom-sheet');
```

__Basic Usage__
```jsx
<DockingBottomSheet
    ref={ (bottomSheetRef)=> this.bottomSheetRef = bottomSheetRef }
    containerStyle={ <style object> }
    dockHeight={ <number> }
    sheetExpandedTopOffset={ <number> }
    sheetDarknessAlpha={ <float (0 to 1)> }
    mainViewDownScale={ <float (0 to 1)> }
    mainContentView={ <function that returns UI elements> }
    bottomSheetContentView={ <function that returns UI elements> }
/>
```

## Props
* __containerStyle__ [Object]: Styling for `View` that holds `main-view` and `bottom-sheet` views. `default: { flex: 1 }`

* __dockHeight__ [Number]: Visible height of `bottom-sheet` when it is docked at the bottom. `default: 96`

* __sheetExpandedTopOffset__ [Number]: Top-offset of `bottom-sheet` in its expanded state. `default: 128`

* __sheetDarknessAlpha__ [Float]: The final background darkness alpha of `bottom-sheet` when its completely expanded. `default: 0.7`

* __mainViewDownScale__ [Float]: The final scale-down value of View `[main-view]` behind `bottom-sheet` scales down when its completely expanded. `default: 0.9`

* __mainContentView__ [Function]: Function that returns View`[main-view]` to be rendered behind `bottom-sheet`. `default: () =>  null`

* __bottomSheetContentView__ [Function]: Function that returns View to be rendered as `bottom-sheet` [Note: the bottom-sheet itself is a scroll-view so do not pass scroll-view as parent view-element to this prop]. `default: () =>  null`

## Functions
* __expandBottomSheet()__: Used to programmatically expand `bottom-sheet`. `eg. bottomSheetRef.expandBottomSheet()`

* __dockBottomSheet()__: Used to programmatically dock `bottom-sheet` at the bottom. `eg. bottomSheetRef.dockBottomSheet()`
 
## Note
* Bottom-Sheet's parent is a React Native ScrollView, hence avoid passing ScrollView as root component to prop `bottomSheetContentView`.

## License
MIT © [Rajat Soni](https://www.npmjs.com/~rajatsoni)

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