Package Exports

rn-sliding-up-panel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-sliding-up-panel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Sliding up panel

React Native draggable sliding up panel purly implemented in Javascript. Inspired by AndroidSlidingUpPanel. Works nicely on both iOS and Android.

Installation

npm install --save rn-sliding-up-panel

or if you are using yarn

yarn add rn-sliding-up-panel

Usage

import React from 'react'
import {View, Button, Text} from 'react-native'

import SlidingUpPanel from 'rn-sliding-up-panel'

const styles = {
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  }
}

class MyComponent extends React.Component {
  state = {
    visible: false
  }

  render() {
    return (
      <View style={styles.container}>
        <SlidingUpPanelComponent
          ref={c => this._panel = c}
          visible={this.state.visible}
          onRequestClose={() => this.setState({visible: false})}
          contentStyle={styles.container}>
          <Text>Here is the content inside panel</Text>
          <Button title='hide' onPress={() => this._panel.transitionTo(0)} />
        </SlidingUpPanelComponent>
        <TouchableOpacity onPress={() => this.setState({visible: true})}>
          <Text>Show panel</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

Props

Property	Type	Description
visible	boolean	Controls how panel should visible or not.
draggableRange	{top: number, bottom: number}	You can not drag panel out of this range. `top` default to visible height of device, `bottom` default to 0.
onDragStart	Function	Called when panel is about to start dragging.
onDrag	Function	Called when panel is dragging. Fires at most once per frame.
onDragEnd	Function	Called when you release your fingers.
showBackdrop	boolean	Set to `false` to hide the backdrop behide panel. Default `true`.
allowDragging	boolean	Set to `false` to disable dragging. Touch outside panel or press back button (Android) to hide. Default `true`.
allowMomentum	boolean	If `false`, panel will not continue to move when you release your fingers. Default `true`.
contentStyle	any	The style of the content inside panel.

Methods

transitionTo: (value: number, onComplete: Function)

Programmatically move panel to a given value.