DraggableRange bottom does not respect panel show or hide

[poudelsubhan]

Issue Description

Whenever I populate draggableRange.bottom with a non-zero value, it shows the panel even when I have not called panel.show() and shows it even after calling panel.hide().

Steps to Reproduce / Code Snippets / Screenshots

I only want the panel to show when someVal has been set to true. However, it just shows the panel at start anyway. I also want the panel to dismiss when otherVal is set and yet there's still the same problem.

export default const panelComp = () => {
   const [someVal, setSomeVal] = useState(false);
   const [otherVal, setOtherVal] = useState(false);
   const panelRef = useRef<SlidingUpPanel>(null);

  useEffect(() => {
     if (someVal) panelRef.current?.show();
  }, [someVal] )

  useEffect(() => {
     if (otherVal) panelRef.current?.hide();
 }, [otherVal] )

  return (
    <View stlye={ flex: 1} >
         <SomethingElse />
         <SlidingUpPanel
               ref={panelRef}
               draggableRange = {{ top: 800, bottom: 200 }}
         >
                <Component>
         </SlidingUpPanel>
   </View>
 );
}

---

Environment

• Version: ^2.4.6
• React Native version: 0.72.6
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Expo App on iOS