How to register touches from a nested View with an offset? [Android specific]

In the code below you can see a View with a panResponder assigned to it. The View is nested in a wrapper, although it's rendered with an offset that pushes half of the View outside the wrapper. The problem is that the View isn't responding to touches (in this case — scrolling) when they're being made outside the wrapper.

So the View touches are being registered inside the wrapper, but not outside, despite the fact that the View is actually located inside the wrapper.

How can I make touches work even outside the wrapper?

import React from 'react';
import {
  StyleSheet,
  View,
  PanResponder,
} from 'react-native';

const App = () => {
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (e, g) => {
      console.log(g.dy)
    }
  });

  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        <View style={styles.pan} {...panResponder.panHandlers}/>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  wrapper: {
    width: 100,
    height: 100,
    backgroundColor: 'black',
  },
  pan: {
    width: 50,
    height: 50,
    position: 'absolute',
    bottom: -25,
    backgroundColor: 'darkviolet',
    alignSelf: 'center',
  },
});