Instroduction

React Native draggable sliding up panel purly implemented in Javascript. Inspired by AndroidSlidingUpPanel. Works nicely on any platforms.

Props

A gestureState (is forwarded from PanResponder’s callbacks) object has the following: • stateID - ID of the gestureState - persisted as long as there at least one touch on screen • moveX - the latest screen coordinates of the recently-moved touch • moveY - the latest screen coordinates of the recently-moved touch • x0 - the screen coordinates of the responder grant • y0 - the screen coordinates of the responder grant • dx - accumulated distance of the gesture since the touch started • dy - accumulated distance of the gesture since the touch started • vx - current velocity of the gesture • vy - current velocity of the gesture • numberActiveTouches - Number of touches currently on screen

Installation

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

Or if you are using yarn:

yarn add rn-sliding-up-panel

Example

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 {
  render() {
    return (
      <View style={styles.container}>
        <Button title='Show panel' onPress={() => this._panel.show()} />
        <SlidingUpPanel ref={c => this._panel = c}>
          <View style={styles.container}>
            <Text>Here is the content inside panel</Text>
            <Button title='Hide' onPress={() => this._panel.hide()} />
          </View>
        </SlidingUpPanel>
      </View>
    )
  }
}
export default MyComponent;

Tutorial

Coming Soon…