react-native-draggable-panel

A react native draggable panel for Android and iOS

Installation

This library is available on npm, install it with: npm i react-native-draggable-panel or yarn add react-native-draggable-panel.

Usage

Import react-native-draggable-panel:

import DraggablePanel from 'react-native-draggable-panel';

Reactive way

  1. Then simply show it or hide it by setting the visible prop to true or false:
render () {
  return (
    <DraggablePanel
      visible={this.state.panelVisible}
    >
      <Text>I am a content</Text>
    </DraggablePanel>
  )
}

Declarative way

panelRef = React.createRef();

showPanel() {
  this.panelRef.current.show();
}

hidePanel() {
  this.panelRef.current.hide();
}

render () {
  return (
    <DraggablePanel
      ref={this.panelRef}
    >
      <Text>I am a content</Text>
    </DraggablePanel>
  )
}

Available props

Name Type Default Description
visible boolean false Controls the panel's visibility
animationDuration number 500 Controls the duration in ms to show or hide the panel
expandable boolean false Controls if the panel can be expanded or not
hideable boolean true Controls if the panel can be hidden when press outside or on the android physical back button
hideOnPressOutside boolean true Controls neither to hide the panel when user presses on the overlay or not
overlayBackgroundColor Color black Controls the backgroundColor of the overlay
overlayOpacity number 0.8 Is a value between 0 and 1 that controls the overlay opacity
borderRadius number 0 Controls the panel top border radius
initialHeight number SCREEN_HEIGHT / 2 Controls the panel initial height
hideOnBackButtonPressed boolean true Controls either the panel get dismissed on android physical button pressed or not [Android ONLY]
onDismiss callback A callback function when the panel is dismissed