Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jacklein/rn-bottom-drawer
a react native bottom drawer component
https://github.com/jacklein/rn-bottom-drawer
Last synced: 3 months ago
JSON representation
a react native bottom drawer component
- Host: GitHub
- URL: https://github.com/jacklein/rn-bottom-drawer
- Owner: jacklein
- License: mit
- Created: 2018-12-18T01:58:54.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T15:54:45.000Z (almost 2 years ago)
- Last Synced: 2024-07-03T21:40:45.941Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 5.31 MB
- Stars: 187
- Watchers: 4
- Forks: 84
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-reactnative-ui - rn-bottom-drawer - bottom-drawer/master/demo.gif)| (Others)
- awesome-reactnative-ui - rn-bottom-drawer - bottom-drawer/master/demo.gif)| (Others)
README
# Bottom drawer for React Native
## Content
- [Installation](#installation)
- [Usage example](#usage-example)
- [Configuration](#configuration)
- [Questions?](#questions)
## Installation
Install `rn-bottom-drawer`.
```
npm install rn-bottom-drawer --save
```
## Usage Example
(go to the example folder for a more fleshed out example)
```javascript
import React from 'react';
import { View, Text } from 'react-native';
import BottomDrawer from 'rn-bottom-drawer';
const TAB_BAR_HEIGHT = 49;
export default class App extends React.Component {
renderContent = () => {
return (
Get directions to your location
)
}
render() {
return (
{this.renderContent()}
)
}
}
```
[Refer to this code](https://github.com/jacklein/rn-bottom-drawer/issues/7#issuecomment-465554054) if you want to put a **scrollview** within the bottom drawer
## Configuration
| Prop | Type | Default | Description |
| ---- | ---- | ----| ---- |
| containerHeight | number | -- | The height of the drawer. |
| offset | number | 0 | If your app uses tab navigation or a header, **offset** equals their combined heights. In the demo gif, the offset is the header + tab heights so that the drawer renders correctly within the map view. |
| downDisplay | number | containerHeight / 1.5 | When the drawer is swiped into down position, **downDisplay** controls how far it settles below its up position. For example, if its value is 20, the drawer will settle 20 points below the up position. The default value shows 1/3 of the container (if containerHeight = 60, the default downDisplay value = 40). |
| backgroundColor | string | '#ffffff' | The background color of the drawer. |
| startUp | bool | true | If **true**, the drawer will start in up position. If **false**, it will start in down position. |
| roundedEdges | bool | true | If **true**, the top of the drawer will have rounded edges. |
| shadow | bool | true | if **true**, the top of the drawer will have a shadow. |
| onExpanded | func | -- | A callback function triggered when the drawer is swiped into up position |
| onCollapsed | func | -- | A callback function triggered when the drawer is swiped into down position |
### Questions?
Feel free to contact me at [[email protected]](mailto:[email protected]) or [create an issue](https://github.com/jacklein/rn-bottom-drawer/issues/new)