No bounds arg on onDragRelease

[alexandertsema]

v3.3.0

[baconcheese113]

You're not getting a 3rd parameter?

Can you share the relevant code

[tylerablake]

The following code receives the bounds argument in a standard react-native project, but not in an expo project. Same exact code in both projects, and same version in both projects "react-native-draggable": "^3.3.0".

import React, {Component} from 'react';
import {
  Button,
  StyleSheet,
  Image,
  TouchableOpacity,
  Text,
  TextInput,
  View,
} from 'react-native';
import Draggable from 'react-native-draggable';

class App extends Component {
  updatedAnnotations = [];

  state = {
    annotations: [
      {
        id: 1,
        color: 'gray',
        note: 'Bent',
        hidden: false,
        left: 10,
        top: 10,
      },
    ],
  };

  handleDragRelease(annotation, event, gestureState, bounds) {
    console.log(`bounds`, bounds);
  }

  renderCircles() {
    return this.state.annotations.map(annotation => {
      return (
        <Draggable
          key={annotation.id}
          x={Number(annotation.left)}
          y={Number(annotation.top)}
          onDragRelease={(event, gestureState, bounds) =>
            this.handleDragRelease(annotation, event, gestureState, bounds)
          }>
          <View style={styles.circle} />
        </Draggable>
      );
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          source={{
            uri:
              'https://images-na.ssl-images-amazon.com/images/I/41g8yeF0NWL._AC_SY355_.jpg',
          }}
          style={styles.image}
        />

        <View style={styles.circleSandbox}>{this.renderCircles()}</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginBottom: 10,
  },
  circle: {
    width: 80,
    height: 80,
    borderRadius: 100 / 2,
    borderWidth: 3,
    borderColor: 'red',
  },
  circleNumber: {
    fontSize: 18,
    textAlign: 'center',
  },
  image: {
    width: 405,
    height: 300,
    marginLeft: 5,
  },
  circleSandbox: {
    width: 405,
    height: 300,
    marginLeft: 5,
    marginTop: -300,
  },
});

export default App;

[contention]

Same issue here with an expo project and 3.3.0

Any fixes for this one yet? Thanks. :o)

[kevinvayro]

Also experiencing the same running an expo project but if I copy the Draggable code into a fresh file in my project it works as expected.

[kaltoft]

Solution #77