Can't find variable (functionName()) when updating parent State from child component in React Native

Question

I'm trying to update the position of a card in a parent component in react natvive. My parent component has this:

class JarList extends React.Component {
  state = {
    position: { width: cardWidth, height: cardHeight, x: initialCardX, y: initialCardY },
    jarSelected: false,
  };

---

updateScreenshotPosition(position) {
    springTransition();
    this.setState({ position, jarSelected: true });
  }

  handleScreenShotPosition(position) {
    updateScreenshotPosition(position);
  }

And in the return function, I'm passing to the child :

  <Screenshot
          handleScreenShotPosition={this.handleScreenShotPosition}
          position={state.position}
          velocityY={this.velocityY}
          movingState={this.gestureState}
          jarSelected={state.jarSelected}
        />

Using the PanGestureHandler from react-native-gesture-handler the child component looks like this in the retrun function:

 <PanGestureHandler
          onGestureEvent={e => {
            let newPosition = {
              width: position.width,
              height: position.height,
              x: position.x + e.nativeEvent.translationX,
              y: position.y + e.nativeEvent.translationY,
            };
            handleScreenShotPosition(newPosition);
          }}
        >
          <Animated.View
            style={{
              position: 'absolute',
              width: jarSelected ? width : this.animatedWidth,
              height: jarSelected ? height : this.animatedHeight,
              backgroundColor: 'red',
              left: jarSelected ? x : this.animatedX,
              top: y,
            }}
          ></Animated.View>
        </PanGestureHandler>

So the problem that I'm having is that the app crashes saying that the updateScreenshotPosition variable is undefined; I don't really know why the state of the parent child is not changing.

Answer 1

how is handleScreenShotPosition declared in the child? if it is a stateful component then use this.props.handleScreenShotPosition(...) Also try using the ES2015 arrow functions for the definitions in the parent