From 49c6cb41e84fe8a26e83ecebc736b8f0c8d9898d Mon Sep 17 00:00:00 2001
From: shadow351 <>
Date: Sun, 11 Oct 2020 10:35:40 -0500
Subject: [PATCH] Replace RNGH with RN PanResponder to fix Android modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Even though work has been done, it would appear that RNGH doesn’t work
on Android within modals.

- https://git.io/JTkgM
- https://git.io/JTkgS
- https://git.io/JTkg9
- https://bit.ly/3nHbpVl
---
 .../src/focal-point-picker/index.native.js    | 233 ++++++++----------
 1 file changed, 102 insertions(+), 131 deletions(-)

diff --git a/packages/components/src/focal-point-picker/index.native.js b/packages/components/src/focal-point-picker/index.native.js
index 89ec050e099930..d7cf3e9a82fe07 100644
--- a/packages/components/src/focal-point-picker/index.native.js
+++ b/packages/components/src/focal-point-picker/index.native.js
@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import { Animated, View } from 'react-native';
-import {
-	PanGestureHandler,
-	TapGestureHandler,
-	State,
-} from 'react-native-gesture-handler';
+import { Animated, PanResponder, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -14,7 +9,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { Image, RangeControl } from '@wordpress/components';
 import { Path, SVG } from '@wordpress/primitives';
-import { useRef, useState } from '@wordpress/element';
+import { useRef, useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,7 +24,41 @@ export default function FocalPointPicker( props ) {
 
 	const [ containerSize, setContainerSize ] = useState( null );
 	const [ sliderKey, setSliderKey ] = useState( 0 );
-	const panRef = useRef();
+
+	const pan = useRef( new Animated.ValueXY() ).current;
+	if ( containerSize ) {
+		pan.setValue( {
+			x: focalPoint.x * containerSize?.width,
+			y: focalPoint.y * containerSize?.height,
+		} );
+	}
+	const panResponder = useMemo(
+		() =>
+			PanResponder.create( {
+				// Ask to be the responder:
+				onStartShouldSetPanResponder: () => true,
+				onStartShouldSetPanResponderCapture: () => true,
+				onMoveShouldSetPanResponder: () => true,
+				onMoveShouldSetPanResponderCapture: () => true,
+
+				onPanResponderGrant: ( event ) => {
+					extrapolatePositionFromGesture( event );
+				},
+				onPanResponderMove: ( event ) => {
+					shouldEnableBottomSheetScroll( false );
+					extrapolatePositionFromGesture( event );
+				},
+				onPanResponderTerminationRequest: () => true,
+				onPanResponderRelease: () => {
+					shouldEnableBottomSheetScroll( true );
+					// Slider (child of RangeCell) is uncontrolled, so we must increment a
+					// key to re-mount and sync the pan gesture values to the sliders
+					// https://git.io/JTe4A
+					setSliderKey( ( prevState ) => prevState + 1 );
+				},
+			} ),
+		[ containerSize ]
+	);
 
 	function setPosition( { x, y } ) {
 		onChange( ( prevState ) => ( {
@@ -39,33 +68,8 @@ export default function FocalPointPicker( props ) {
 		} ) );
 	}
 
-	const _touchX = new Animated.Value(
-		focalPoint.x * containerSize?.width || 1
-	);
-	const _touchY = new Animated.Value(
-		focalPoint.y * containerSize?.height || 1
-	);
-
-	function onHandlerStateChange( { nativeEvent } ) {
-		switch ( nativeEvent.state ) {
-			case State.BEGAN:
-				shouldEnableBottomSheetScroll( false );
-				break;
-			case State.ACTIVE:
-				shouldEnableBottomSheetScroll( false );
-				break;
-			default:
-				shouldEnableBottomSheetScroll( true );
-				// Slider (child of RangeCell) is uncontrolled, so we must increment a
-				// key to re-mount and sync the pan gesture values to the sliders
-				// https://git.io/JTe4A
-				setSliderKey( ( prevState ) => prevState + 1 );
-				break;
-		}
-	}
-
 	function extrapolatePositionFromGesture( event ) {
-		const { x, y } = event.nativeEvent;
+		const { locationX: x, locationY: y } = event.nativeEvent;
 		setPosition( {
 			x: x / containerSize?.width,
 			y: y / containerSize?.height,
@@ -75,108 +79,75 @@ export default function FocalPointPicker( props ) {
 	return (
 		<View style={ styles.container }>
 			<View style={ [ styles.media ] }>
-				<TapGestureHandler
-					onHandlerStateChange={ ( event ) => {
-						onHandlerStateChange( event );
-						extrapolatePositionFromGesture( event );
+				<View
+					{ ...panResponder.panHandlers }
+					onLayout={ ( event ) => {
+						const { height, width } = event.nativeEvent.layout;
+
+						if (
+							width !== 0 &&
+							height !== 0 &&
+							( containerSize?.width !== width ||
+								containerSize?.height !== height )
+						) {
+							setContainerSize( { width, height } );
+						}
 					} }
-					waitFor={ panRef }
+					style={ styles.imageContainer }
 				>
-					<PanGestureHandler
-						minDist={ 1 }
-						onHandlerStateChange={ onHandlerStateChange }
-						onGestureEvent={ Animated.event(
-							[ { nativeEvent: { x: _touchX, y: _touchY } } ],
+					<Image height="100%" url={ url } />
+					<Animated.View
+						pointerEvents="none"
+						style={ [
+							styles.focalPointWrapper,
 							{
-								useNativeDriver: false,
-								listener: extrapolatePositionFromGesture,
-							}
-						) }
-						ref={ panRef }
-					>
-						<Animated.View
-							onLayout={ ( event ) => {
-								const {
-									height,
-									width,
-								} = event.nativeEvent.layout;
-
-								if (
-									width !== 0 &&
-									height !== 0 &&
-									( containerSize?.width !== width ||
-										containerSize?.height !== height )
-								) {
-									setContainerSize( { width, height } );
-								}
-							} }
-							style={ styles.imageContainer }
-						>
-							<Image height="100%" url={ url } />
-							<Animated.View
-								pointerEvents="none"
-								style={ [
-									styles.focalPointWrapper,
+								transform: [
 									{
-										transform: [
-											{
-												translateX: _touchX.interpolate(
-													{
-														inputRange: [
-															0,
-															containerSize?.width ||
-																0,
-														],
-														outputRange: [
-															0,
-															containerSize?.width ||
-																0,
-														],
-														extrapolate: 'clamp',
-													}
-												),
-											},
-											{
-												translateY: _touchY.interpolate(
-													{
-														inputRange: [
-															0,
-															containerSize?.height ||
-																0,
-														],
-														outputRange: [
-															0,
-															containerSize?.height ||
-																0,
-														],
-														extrapolate: 'clamp',
-													}
-												),
-											},
-										],
+										translateX: pan.x.interpolate( {
+											inputRange: [
+												0,
+												containerSize?.width || 0,
+											],
+											outputRange: [
+												0,
+												containerSize?.width || 0,
+											],
+											extrapolate: 'clamp',
+										} ),
 									},
-								] }
-							>
-								<SVG
-									style={ styles.focalPointIcon }
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 30 30"
-								>
-									<Path
-										style={
-											styles.focalPointIconPathOutline
-										}
-										d="M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z"
-									/>
-									<Path
-										style={ styles.focalPointIconPathFill }
-										d="M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z"
-									/>
-								</SVG>
-							</Animated.View>
-						</Animated.View>
-					</PanGestureHandler>
-				</TapGestureHandler>
+									{
+										translateY: pan.y.interpolate( {
+											inputRange: [
+												0,
+												containerSize?.height || 0,
+											],
+											outputRange: [
+												0,
+												containerSize?.height || 0,
+											],
+											extrapolate: 'clamp',
+										} ),
+									},
+								],
+							},
+						] }
+					>
+						<SVG
+							style={ styles.focalPointIcon }
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 30 30"
+						>
+							<Path
+								style={ styles.focalPointIconPathOutline }
+								d="M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z"
+							/>
+							<Path
+								style={ styles.focalPointIconPathFill }
+								d="M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z"
+							/>
+						</SVG>
+					</Animated.View>
+				</View>
 			</View>
 			<RangeControl
 				inputSuffix="%"