HomeOur TeamContact

Basic Sliding Up Panel

By Utkarsh Lubal
Published in UI
May 06, 2023
1 min read
Basic Sliding Up Panel

Table Of Contents

01
Instroduction
02
Props
03
Installation
04
Example
05
Tutorial

Instroduction

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

Props

animatedValueAnimated.ValueAn Animated.Value number between the top and bottom of draggable range. This number represents the position of the panel. If you update this prop, the panel will correspondingly update to the frame at that progress value. Default to Animated.Value(0) (Hidden at bottom of screen).
draggableRange{top: number, bottom: number}Boundary limits for draggable area. top default to visible height of device, bottom default to 0.
snappingPointsnumber[]Must be an incremental array of number and all values must be within the top & bottom of draggableRange.
minimumVelocityThresholdnumberVelocity threshold in pixel/s to trigger the fling animation after you release finger. Default is 0.1.
minimumDistanceThresholdnumberDistance threshold in pixel (virtual, not physical) to trigger the fling animation after you release finger. Default is 0.24.
heightnumberHeight of panel. Typically this should equal to the top value of draggablerange.
frictionnumberDetermines how quickly the fling animation settles down and stops. The higher the value, the faster the velocity decreases. Default is 0.998.
backdropOpacitynumberOpacity of the backdrop when the panel is active. Default is 0.75.
containerStyleStyleCustom style for the container.
backdropStyleStyleCustom style for the backdrop.
showBackdropbooleanControls the visibility of backdrop. Default true.
allowMomentumbooleanIf false, panel will not continue to move when you release your finger.
allowDraggingbooleanDefault true. Setting this to false to disable dragging.
onBackButtonPress() => booleanBy default when you press back button (Android) the panel will be closed (Move to bottom position of draggableRange). Implement this function if you want to custom the behavior. Returning true means the event has been handled.
onDragStart(position: number, gestureState: GestureState) => voidCalled when the panel is about to start dragging.
onDragEnd(position: number: gestureState: GestureState) => voidCalled when you release your finger.
onMomentumDragStart(position: number) => voidCalled when the momentum drag starts. Works exactly the same way of ScrollView#onMomentumScrollBegin.
onMomentumDragEnd(position: number) => voidCalled when the momentum drag ends. Works exactly the same way of ScrollView#onMomentumScrollEnd.
onBottomReached() => voidCalled when the panel is hidden / reaches the bottom of the screen.
childrenReact.Element | FunctionAccepts passing a function as component. Invoked with dragHandlers (that can be passed into another View like this <View {…dragHandlers}>) when the panel is mounted. Useful when you want only a part of your content becomes the drag handler.

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…


Previous Article
Circular action menu
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media