1.2.3 • Published 4 years ago

react-native-draggable-panel v1.2.3

Weekly downloads
87
License
MIT
Repository
github
Last release
4 years ago

react-native-draggable-panel

A react native draggable panel for Android and iOS

npm.io

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

NameTypeDefaultDescription
visiblebooleanfalseControls the panel's visibility
animationDurationnumber500Controls the duration in ms to show or hide the panel
expandablebooleanfalseControls if the panel can be expanded or not
hideablebooleantrueControls if the panel can be hidden when press outside or on the android physical back button
hideOnPressOutsidebooleantrueControls neither to hide the panel when user presses on the overlay or not
overlayBackgroundColorColorblackControls the backgroundColor of the overlay
overlayOpacitynumber0.8Is a value between 0 and 1 that controls the overlay opacity
borderRadiusnumber0Controls the panel top border radius
initialHeightnumberSCREEN_HEIGHT / 2Controls the panel initial height
hideOnBackButtonPressedbooleantrueControls either the panel get dismissed on android physical button pressed or not Android ONLY
onDismisscallbackA callback function when the panel is dismissed