Fix zIndex to allow Draggable being rendered on top of others

Mentionned in tongyy#90
brdnvgn · Dec 6, 2023 · 6fae5b5 · 6fae5b5
1 parent 502f92d
commit 6fae5b5
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 42 deletions.
diff --git a/Draggable.js b/Draggable.js
@@ -86,7 +86,6 @@ export default function Draggable(props) {
       toValue: newOffset || originalOffset,
       useNativeDriver: false,
     }).start();
-
   }, [pan]);
 
   const onPanResponderRelease = React.useCallback(
@@ -164,13 +163,13 @@ export default function Draggable(props) {
     if (!shouldReverse) {
       curPan.addListener((c) => (offsetFromStart.current = c));
     } else {
-        reversePosition();
+      reversePosition();
     }
     return () => {
       curPan.removeAllListeners();
     };
   }, [shouldReverse]);
-  
+
   const positionCss = React.useMemo(() => {
     const Window = Dimensions.get('window');
     return {
@@ -179,15 +178,15 @@ export default function Draggable(props) {
       left: 0,
       width: Window.width,
       height: Window.height,
+      elevation: z,
+      zIndex: z,
     };
   }, []);
 
   const dragItemCss = React.useMemo(() => {
     const style = {
       top: y,
       left: x,
-      elevation: z,
-      zIndex: z,
     };
     if (renderColor) {
       style.backgroundColor = renderColor;

diff --git a/Draggable.tsx b/Draggable.tsx
@@ -18,43 +18,49 @@ import {
   StyleProp,
 } from 'react-native';
 import PropTypes from 'prop-types';
-import { ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 function clamp(number: number, min: number, max: number) {
   return Math.max(min, Math.min(number, max));
 }
 
 interface IProps {
-    /**** props that should probably be removed in favor of "children" */
-    renderText?: string;
-    isCircle?: boolean;
-    renderSize?: number;
-    imageSource?: number;
-    renderColor?: string;
-    /**** */
-    children?: React.ReactNode;
-    shouldReverse?: boolean;
-    disabled?: boolean;
-    debug?: boolean;
-    animatedViewProps?: object;
-    touchableOpacityProps?: object;
-    onDrag?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
-    onShortPressRelease?: (event: GestureResponderEvent) => void;
-    onDragRelease?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
-    onLongPress?: (event: GestureResponderEvent) => void;
-    onPressIn?: (event: GestureResponderEvent) => void;
-    onPressOut?: (event: GestureResponderEvent) => void;
-    onRelease?: (event: GestureResponderEvent, wasDragging: boolean) => void;
-    onReverse?: () => {x: number, y: number},
-    x?: number;
-    y?: number;
-    // z/elevation should be removed because it doesn't sync up visually and haptically
-    z?: number;
-    minX?: number;
-    minY?: number;
-    maxX?: number;
-    maxY?: number;
-  };
+  /**** props that should probably be removed in favor of "children" */
+  renderText?: string;
+  isCircle?: boolean;
+  renderSize?: number;
+  imageSource?: number;
+  renderColor?: string;
+  /**** */
+  children?: React.ReactNode;
+  shouldReverse?: boolean;
+  disabled?: boolean;
+  debug?: boolean;
+  animatedViewProps?: object;
+  touchableOpacityProps?: object;
+  onDrag?: (
+    e: GestureResponderEvent,
+    gestureState: PanResponderGestureState,
+  ) => void;
+  onShortPressRelease?: (event: GestureResponderEvent) => void;
+  onDragRelease?: (
+    e: GestureResponderEvent,
+    gestureState: PanResponderGestureState,
+  ) => void;
+  onLongPress?: (event: GestureResponderEvent) => void;
+  onPressIn?: (event: GestureResponderEvent) => void;
+  onPressOut?: (event: GestureResponderEvent) => void;
+  onRelease?: (event: GestureResponderEvent, wasDragging: boolean) => void;
+  onReverse?: () => {x: number; y: number};
+  x?: number;
+  y?: number;
+  // z/elevation should be removed because it doesn't sync up visually and haptically
+  z?: number;
+  minX?: number;
+  minY?: number;
+  maxX?: number;
+  maxY?: number;
+}
 
 export default function Draggable(props: IProps) {
   const {
@@ -108,7 +114,7 @@ export default function Draggable(props: IProps) {
   }, [x, y]);
 
   const shouldStartDrag = React.useCallback(
-    gs => {
+    (gs) => {
       return !disabled && (Math.abs(gs.dx) > 2 || Math.abs(gs.dy) > 2);
     },
     [disabled],
@@ -195,10 +201,10 @@ export default function Draggable(props: IProps) {
   React.useEffect(() => {
     const curPan = pan.current; // Using an instance to avoid losing the pointer before the cleanup
     if (!shouldReverse) {
-      curPan.addListener(c => (offsetFromStart.current = c));
+      curPan.addListener((c) => (offsetFromStart.current = c));
     }
     return () => {
-        // Typed incorrectly
+      // Typed incorrectly
       curPan.removeAllListeners();
     };
   }, [shouldReverse]);
@@ -211,15 +217,15 @@ export default function Draggable(props: IProps) {
       left: 0,
       width: Window.width,
       height: Window.height,
+      elevation: z,
+      zIndex: z,
     };
   }, []);
 
   const dragItemCss = React.useMemo(() => {
     const style: StyleProp<ViewStyle> = {
       top: y,
       left: x,
-      elevation: z,
-      zIndex: z,
     };
     if (renderColor) {
       style.backgroundColor = renderColor;
@@ -257,7 +263,7 @@ export default function Draggable(props: IProps) {
     }
   }, [children, imageSource, renderSize, renderText]);
 
-  const handleOnLayout = React.useCallback(event => {
+  const handleOnLayout = React.useCallback((event) => {
     const {height, width} = event.nativeEvent.layout;
     childSize.current = {x: width, y: height};
   }, []);