a react native bottom drawer component
Branch: master
Clone or download
Latest commit a1d8875 Jan 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example made the api way more intuitive Dec 23, 2018
src made the api way more intuitive Dec 23, 2018
.babelrc initial commit Dec 18, 2018
.gitignore modified props and cleaned up code Dec 19, 2018
LICENSE Initial commit Dec 18, 2018
README.md Syntax error has been fixed Jan 22, 2019
demo.gif modified props and cleaned up code Dec 19, 2018
index.js Component and styles moved into own files Dec 20, 2018
package-lock.json 1.4.1 Dec 23, 2018
package.json 1.4.1 Dec 23, 2018

README.md

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 (
      <View>
        <Text>Get directions to your location</Text>
      </View>
    )
  }

  render() {
    return (
      <BottomDrawer
        containerHeight={100}
        offset={TAB_BAR_HEIGHT}
      >
        {this.renderContent()}
      </BottomDrawer>
    )
  }
}

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.

Questions?

Feel free to contact me at jackdillklein@gmail.com or create an issue