onDrag is not a function (it is undefined)

[hudsonbradley11]

In my application, I am experiencing this issue within the draggable plugin.

Error occurs at Draggable.js line 136.
React-native version is 0.78.0.

This is probably related to this issue: #147

[kaladivo]

Here is the fix PR: #149

In the meantime you can use this pach:

diff --git a/Draggable.js b/Draggable.js
index d1c86500503377f4ece5b0b2b01e4124fcd607a7..e4212175f4566d6d813e4f642bc09b99cfc34d00 100644
--- a/Draggable.js
+++ b/Draggable.js
@@ -20,35 +20,33 @@ function clamp(number, min, max) {
   return Math.max(min, Math.min(number, max));
 }
 
-export default function Draggable(props) {
-  const {
-    renderText,
-    isCircle,
-    renderSize,
-    imageSource,
-    renderColor,
-    children,
-    shouldReverse,
-    onReverse,
-    disabled,
-    debug,
-    animatedViewProps,
-    touchableOpacityProps,
-    onDrag,
-    onShortPressRelease,
-    onDragRelease,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-    onRelease,
-    x,
-    y,
-    z,
-    minX,
-    minY,
-    maxX,
-    maxY,
-  } = props;
+export default function Draggable({
+  renderText = '+',
+  isCircle,
+  renderSize = 36,
+  imageSource,
+  renderColor,
+  children,
+  shouldReverse = false,
+  disabled = false,
+  debug = false,
+  animatedViewProps,
+  touchableOpacityProps,
+  onDrag = () => {},
+  onShortPressRelease = () => {},
+  onDragRelease = () => {},
+  onLongPress = () => {},
+  onPressIn = () => {},
+  onPressOut = () => {},
+  onRelease = () => {},
+  x = 0,
+  y = 0,
+  z = 1,
+  minX,
+  minY,
+  maxX,
+  maxY,
+}) {
 
   // The Animated object housing our xy value so that we can spring back
   const pan = React.useRef(new Animated.ValueXY());
@@ -283,25 +281,7 @@ export default function Draggable(props) {
   );
 }
 
-/***** Default props and types */
 
-Draggable.defaultProps = {
-  renderText: '＋',
-  renderSize: 36,
-  shouldReverse: false,
-  disabled: false,
-  debug: false,
-  onDrag: () => {},
-  onShortPressRelease: () => {},
-  onDragRelease: () => {},
-  onLongPress: () => {},
-  onPressIn: () => {},
-  onPressOut: () => {},
-  onRelease: () => {},
-  x: 0,
-  y: 0,
-  z: 1,
-};
 
 Draggable.propTypes = {
   /**** props that should probably be removed in favor of "children" */
diff --git a/Draggable.tsx b/Draggable.tsx
index 363ab4ae0aaf8b98f534c58bf7dd25ba83984925..4f952022afaebd238099bf9854af46636df8b9bf 100644
--- a/Draggable.tsx
+++ b/Draggable.tsx
@@ -56,35 +56,33 @@ interface IProps {
     maxY?: number;
   };
 
-export default function Draggable(props: IProps) {
-  const {
-    renderText,
-    isCircle,
-    renderSize,
-    imageSource,
-    renderColor,
-    children,
-    shouldReverse,
-    disabled,
-    debug,
-    animatedViewProps,
-    touchableOpacityProps,
-    onDrag,
-    onShortPressRelease,
-    onDragRelease,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-    onRelease,
-    x,
-    y,
-    z,
-    minX,
-    minY,
-    maxX,
-    maxY,
-  } = props;
-
+export default function Draggable({
+  renderText = '+',
+  isCircle,
+  renderSize = 36,
+  imageSource,
+  renderColor,
+  children,
+  shouldReverse = false,
+  disabled = false,
+  debug = false,
+  animatedViewProps,
+  touchableOpacityProps,
+  onDrag = () => {},
+  onShortPressRelease = () => {},
+  onDragRelease = () => {},
+  onLongPress = () => {},
+  onPressIn = () => {},
+  onPressOut = () => {},
+  onRelease = () => {},
+  x = 0,
+  y = 0,
+  z = 1,
+  minX,
+  minY,
+  maxX,
+  maxY,
+}: IProps) {
   // The Animated object housing our xy value so that we can spring back
   const pan = React.useRef(new Animated.ValueXY());
   // Always set to xy value of pan, would like to remove
@@ -315,26 +313,6 @@ export default function Draggable(props: IProps) {
   );
 }
 
-/***** Default props and types */
-
-Draggable.defaultProps = {
-  renderText: '＋',
-  renderSize: 36,
-  shouldReverse: false,
-  disabled: false,
-  debug: false,
-  onDrag: () => {},
-  onShortPressRelease: () => {},
-  onDragRelease: () => {},
-  onLongPress: () => {},
-  onPressIn: () => {},
-  onPressOut: () => {},
-  onRelease: () => {},
-  x: 0,
-  y: 0,
-  z: 1,
-};
-
 const styles = StyleSheet.create({
   text: {color: '#fff', textAlign: 'center'},
   debugView: {