<Text /> with PanResponder only works if you click exactly on the letters

[mbaviera]

Hello, I'm using PanResponder to move a text tag, but it only works if you click exactly on the letters in the text, e.g if I click on the space between the letters T and E below, the text does not move:

Gravacao.de.Tela.2024-03-28.as.07.56.37.mov

const AnimatedG = Animated.createAnimatedComponent(G);

const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
      position.setOffset(position.__getValue())
    },
    onPanResponderMove: Animated.event([
      null,
      { dx: position.x, dy: position.y },
    ], { useNativeDriver: false }),
  })

 const { top: y, left: x } = position.getLayout()

return (
    <View style={{ flex: 1 }}>
      <Svg
        width={width}
        height={height}
      >
        <AnimatedG
          transform={[{ translateX: x }, { translateY: y }]}
          {...panResponder.panHandlers}
        >
          <Text
            fill={fontColor}
            fontSize={40}
            strokeWidth="3"
            stroke={fontColor}
            transform={{
              translateX: 120, // initial position
              translateY: 100,
            }}
          >
            {'Test'}
          </Text>
        </AnimatedG>
      </Svg>
    </View>
  )
}