How do I call a custom function in a parent class when panResponder starts moving?

Question

If I have an imported component called <Draggable /> in react-native,

How do I call a custom function in the parent component when onPanResponderGrant decides the gesture has started?

You'll see I'm passing an id of 'A' and 'B' into <Draggable /> , and I'd like to be able to call them back out on touch, and display them in the infoBox at the bottom of the main View ?

// App

import React, { Component } from 'react'; 
import { View, Text, } from 'react-native';
import styles from './cust/styles';
import Draggable from './cust/draggable';

export default class Viewport extends Component {
    constructor(props){
        super(props);
        this.state = {
            dID  : null,
        };
    }
    render(){
        return (
          <View style={styles.mainContainer}>
                <View style={styles.draggableContainer}>
                      <Text>Draggable Container</Text>
                      <Draggable id='A' />
                      <Draggable id='B' />
                </View>
                <View style={styles.infoBar}>{this.infoBarData()}</View>
          </View>
        );
    }
    infoBarData(){
        if (this.state.dID) {
            return(
                <Text>{this.state.dID}</Text>
            )

        }
    }
}

and

// Draggable

import React, { Component } from 'react'; 
import { Text, PanResponder, Animated, } from 'react-native';
import styles from './styles';

class Draggable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pan : new Animated.ValueXY(),
        };
        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder    : () => true,
            onPanResponderMove              : Animated.event([null,{
                dx  : this.state.pan.x,
                dy  : this.state.pan.y,
            }]),
            onPanResponderRelease           : () => {
              Animated.spring(this.state.pan,{toValue:{x:0, y:0}}).start();
            }
        });
    }
    render() {
        return (
            <Animated.View
                {...this.panResponder.panHandlers}
                style={[this.state.pan.getLayout(), styles.circleAlt, styles.position]}>
                <Text style={styles.textAlt}>Drag me!</Text>
                <Text style={styles.textNum}>{this.props.id}</Text>
            </Animated.View>
        )
    }
}
export default Draggable;

EDIT

I've added the following to the parent class

// Object
<Draggable 
  onPanResponderMove={this.onStopMove}
  onPanResponderRelease={this.onMove}
  id='A' />

// Methods
onMove = (dID) => {
  this.setState({ dID });
}

onStopMove = () => {
  this.setState({ dID: null });
}

And I added the following to the Draggable class.

// Methods
_handleOnPanResponderMove(evt, gestureState) {
    Animated.event([null,{
        // These animate movement on the X/Y axis
        dx  : this.state.pan.x,
        dy  : this.state.pan.y,
    }]);
    this.props.onPanResponderRelease(this.props.id);
}

But when I move the animated event out of the PanResponder.create({})

by doing the following, it loses it's ability to be dragged. I assume this is something to do with

PanResponder.create({
    ..., 
    onPanResponder : this._handleOnPanResponder.bind(this),
    ...,
})

Not being returned a value?

EDIT 2

I also tried to add the following, but again, didn't work.

PanResponder.create({
    ..., 
    onPanResponder : (evt ,gesture) => {
        Animated.event([null,{
            // These animate movement on the X/Y axis
            dx  : this.state.pan.x,
            dy  : this.state.pan.y,
    }]);
    this.props.onPanResponderRelease(this.props.id);
    }
    ...,
})

Answer 1

You need to pass a callback handler with Draggable component, like

<Draggable id="A" gestureHandler={(data) => {
/*
  do whatever you want to do with the data, like store it into state
*/
}}

In your Draggable component, call this handler as per your requirement (when it is decided that gesture has started), like

if (this.props.gestureHandler instanceof Function) {
   this.props.gestureHandler.call(this, this.props.id);
}

Answer 2

Ok,

So here is the code that works for anybody who may come across this question.

// App
import React, { Component } from 'react'; 
import {
    View,
    Text,
} from 'react-native';
import styles from './cust/styles';
import Draggable from './cust/draggable';

export default class Viewport extends Component {
    constructor(props){
        super(props);
        this.state = {
            dID  : null,
        };
    }
    render(){
        return (
          <View style={styles.mainContainer}>
                <View style={styles.draggableContainer}>
                      <Text>Draggable Container</Text>
                      <Draggable 
                        onPanResponderGrant={this.onMove}
                        onPanResponderRelease={this.onStopMove}
                        id='A' />
                      <Draggable
                        onPanResponderGrant={this.onMove}
                        onPanResponderRelease={this.onStopMove}
                        id='B' />
                </View>
                <View style={styles.infoBar}>{this.printInfo()}</View>
          </View>
        );
    }
    onMove = (dID) => {
      this.setState({ dID });
    }

    onStopMove = () => {
      this.setState({ dID: null });
    }
    printInfo(){
      if (this.state.dID) {  
        return(
          <Text>{this.state.dID}</Text>
        );
      }
    }
}


// Draggable
import React, { Component } from 'react'; 
import {
    Text,
    PanResponder,
    Animated,
} from 'react-native';
import styles from './styles';

class Draggable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pan                 : new Animated.ValueXY(),
        };
    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder    : () => true,
        onPanResponderGrant : () => {
          this.props.onPanResponderGrant(this.props.id)
        },
        onPanResponderMove              : Animated.event([null,{
            dx  : this.state.pan.x,
            dy  : this.state.pan.y,
        }]),
        onPanResponderRelease           : () => {
                  Animated.spring(
                    this.state.pan,
                    {toValue:{x:0, y:0}}
                  ).start();
                  this.props.onPanResponderRelease();
              },
    });
    }
    render() {
        return (
            <Animated.View
                {...this.panResponder.panHandlers}
                style={[this.state.pan.getLayout(), styles.circleAlt, styles.position]}>
                <Text style={styles.textAlt}>Drag me!</Text>
                <Text style={styles.textNum}>{this.props.id}</Text>
            </Animated.View>
        )
    }
}
export default Draggable;