How to stop the panel to go beyond the top of the screen.

[ankur-1989]

Issue Description

I am using this api for the iOS app. When I drag the sliding panel and when I leave it at last it automatically slide into the top of the screen. I want it to slide till some height. How can I achieve it?

Steps to Reproduce / Code Snippets / Screenshots

import React from "react";
import { Text, View, Dimensions, Animated, SafeAreaView } from "react-native";

import SlidingUpPanel from "rn-sliding-up-panel";

const { width, height } = Dimensions.get('window');

/* const landScape = width > height;
const topPadding = SafeAreaView.getInset('top', landScape);
const bottomPadding = SafeAreaView.getInset('bottom', landScape); */

const styles = {
  container: {

  },
  panel: {
    flex: 1,
    backgroundColor: "white",
    position: "relative",

  },
  panelHeader: {
    height: 100,
    backgroundColor: "#b197fc",
    justifyContent: "flex-end",
    padding: 24
  },
  textHeader: {
    fontSize: 28,
    color: "#FFF"
  },
  icon: {
    alignItems: "center",
    justifyContent: "center",
    position: "absolute",
    top: -24,
    right: 18,
    width: 48,
    height: 48,
    zIndex: 1
  },
  iconBg: {
    backgroundColor: "#2b8a3e",
    position: "absolute",
    top: -24,
    right: 18,
    width: 48,
    height: 48,
    borderRadius: 24,
    zIndex: 1
  }
};

class BottomSheet extends React.Component {

 constructor(props) {
   super(props);
   this.state= {
     allowDragging: true
   }
 }

  static defaultProps = {
    draggableRange: { top: height + 100, bottom: 100 }
  };

  _draggedValue = new Animated.Value(100);

  stopDragging(value){
    console.log(value);
    if(value >= 800) {
        this.setState({allowDragging: false});
    }
  } 

  render() {
    const { top, bottom } = this.props.draggableRange;

    const backgoundOpacity = this._draggedValue.interpolate({
      inputRange: [height - 48, height],
      outputRange: [1, 0],
      extrapolate: "clamp"
    });

    const iconTranslateY = this._draggedValue.interpolate({
      inputRange: [height - 56, height, top],
      outputRange: [0, 56, 180 - 32],
      extrapolate: "clamp"
    });

    const textTranslateY = this._draggedValue.interpolate({
      inputRange: [bottom, top],
      outputRange: [0, 8],
      extrapolate: "clamp"
    });

    const textTranslateX = this._draggedValue.interpolate({
      inputRange: [bottom, top],
      outputRange: [0, -112],
      extrapolate: "clamp"
    });

    const textScale = this._draggedValue.interpolate({
      inputRange: [bottom, top],
      outputRange: [1, 0.7],
      extrapolate: "clamp"
    });

    return (

        <SlidingUpPanel
          ref={c => (this._panel = c)}
          draggableRange={this.props.draggableRange}
          animatedValue={this._draggedValue}
          snappingPoints={[360]}
          height={height + 100}
          minimumDistanceThreshold={100}
          friction={0.5}
          onDragStart={(value, gestureState) => {console.log('Drag Start ', value, gestureState)}}
          onDragEnd={(value, gestureState) => {console.log('Drag End ', value, gestureState)}}
          onMomentumDragStart={(value, gestureState) => {console.log('mDrag Start ', value, gestureState)}}
          onMomentumDragEnd={(value, gestureState) => {this.stopDragging.bind(this, value)}}
        >
          <SafeAreaView style={styles.panel}>
            <Animated.View
              style={[
                styles.iconBg,
                {
                  opacity: backgoundOpacity,
                  transform: [{ translateY: iconTranslateY }]
                }
              ]}
            />
            <View style={styles.panelHeader}>
              <Animated.View
                style={{
                  transform: [
                    { translateY: textTranslateY },
                    { translateX: textTranslateX },
                    { scale: textScale }
                  ]
                }}
              >
                <Text style={styles.textHeader}>Sliding Up Panel</Text>
              </Animated.View>
            </View>
            <View style={styles.container}>
              <Text>Bottom sheet content</Text>
            </View>
          </SafeAreaView>
        </SlidingUpPanel>

    );
  }
}

export default BottomSheet;

---

Environment

• Version: 2.4.0
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator iphone 11 pro

[ankur-1989]

Solved. Therefore closing it.