rn-bottom-drawer

by jacklein

jacklein /rn-bottom-drawer

a react native bottom drawer component

153 Stars 65 Forks Last release: Not found MIT License 44 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Bottom drawer for React Native

Demo gif

Content

Installation

Install

rn-bottom-drawer
.
npm install rn-bottom-drawer --save

Usage Example

(go to the example folder for a more fleshed out example)

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 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] or create an issue

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.