Mobile - useKeyboardOffset: Remove usage of keyboardWillShow and just…

… rely on keyboardDidShow and keyboardDidHide, this will be useful when this logic is shared with Android. It also updates the hook to just store the current keyboard offset avoiding storing the keyboard visibility as well.
WordPress · Mar 31, 2023 · bf36349 · bf36349
1 parent 4374115
commit bf36349
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 49 deletions.
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js
@@ -12,18 +12,16 @@ import useKeyboardOffset from '../use-keyboard-offset';
 
 describe( 'useKeyboardOffset', () => {
 	beforeEach( () => {
-		Keyboard.removeAllListeners( 'keyboardWillShow' );
 		Keyboard.removeAllListeners( 'keyboardDidShow' );
-		Keyboard.removeAllListeners( 'keyboardWillHide' );
+		Keyboard.removeAllListeners( 'keyboardDidHide' );
 	} );
 
 	it( 'returns the initial state', () => {
 		// Arrange
 		const { result } = renderHook( () => useKeyboardOffset( true ) );
-		const [ isKeyboardVisible, keyboardOffset ] = result.current;
+		const [ keyboardOffset ] = result.current;
 
 		// Assert
-		expect( isKeyboardVisible ).toBe( false );
 		expect( keyboardOffset ).toBe( 0 );
 	} );
 
@@ -33,15 +31,13 @@ describe( 'useKeyboardOffset', () => {
 
 		// Act
 		act( () => {
-			RCTDeviceEventEmitter.emit( 'keyboardWillShow' );
 			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
 				endCoordinates: { height: 250 },
 			} );
 		} );
 
 		// Assert
-		const [ isKeyboardVisible, keyboardOffset ] = result.current;
-		expect( isKeyboardVisible ).toBe( true );
+		const [ keyboardOffset ] = result.current;
 		expect( keyboardOffset ).toBe( 250 );
 	} );
 
@@ -51,19 +47,17 @@ describe( 'useKeyboardOffset', () => {
 
 		// Act
 		act( () => {
-			RCTDeviceEventEmitter.emit( 'keyboardWillShow' );
 			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
 				endCoordinates: { height: 250 },
 			} );
 		} );
 
 		act( () => {
-			RCTDeviceEventEmitter.emit( 'keyboardWillHide' );
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
 		} );
 
 		// Assert
-		const [ isKeyboardVisible, keyboardOffset ] = result.current;
-		expect( isKeyboardVisible ).toBe( false );
+		const [ keyboardOffset ] = result.current;
 		expect( keyboardOffset ).toBe( 0 );
 	} );
 
@@ -75,23 +69,19 @@ describe( 'useKeyboardOffset', () => {
 				initialProps: { scrollEnabled: true },
 			}
 		);
-		const [ isKeyboardVisible, keyboardOffset ] = result.current;
+		const [ keyboardOffset ] = result.current;
 
 		// Act
 		rerender( { scrollEnabled: false } );
 
 		// Assert
-		expect( isKeyboardVisible ).toBe( false );
 		expect( keyboardOffset ).toBe( 0 );
-		expect(
-			RCTDeviceEventEmitter.listenerCount( 'keyboardWillShow' )
-		).toBe( 0 );
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidHide' ) ).toBe(
+			0
+		);
 		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidShow' ) ).toBe(
 			0
 		);
-		expect(
-			RCTDeviceEventEmitter.listenerCount( 'keyboardWillHide' )
-		).toBe( 0 );
 	} );
 
 	it( 'adds all keyboard listeners when scrollEnabled changes to true', () => {
@@ -108,25 +98,20 @@ describe( 'useKeyboardOffset', () => {
 		} );
 
 		act( () => {
-			RCTDeviceEventEmitter.emit( 'keyboardWillShow' );
 			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
 				endCoordinates: { height: 250 },
 			} );
 		} );
 
-		const [ isKeyboardVisible, keyboardOffset ] = result.current;
+		const [ keyboardOffset ] = result.current;
 
 		// Assert
-		expect( isKeyboardVisible ).toBe( true );
 		expect( keyboardOffset ).toBe( 250 );
-		expect(
-			RCTDeviceEventEmitter.listenerCount( 'keyboardWillShow' )
-		).toBe( 1 );
 		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidShow' ) ).toBe(
 			1
 		);
-		expect(
-			RCTDeviceEventEmitter.listenerCount( 'keyboardWillHide' )
-		).toBe( 1 );
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidHide' ) ).toBe(
+			1
+		);
 	} );
 } );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js
@@ -7,52 +7,48 @@ import { Keyboard } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useCallback, useState } from '@wordpress/element';
 
 /**
  * Hook that adds Keyboard listeners to get the offset space
  * when the keyboard is opened, taking into account focused AztecViews.
  *
  * @param {boolean} scrollEnabled Whether the scroll is enabled or not.
- * @return {[boolean, number]} Keyboard visibility state and Keyboard offset.
+ * @return {[number]} Keyboard offset.
  */
 export default function useKeyboardOffset( scrollEnabled ) {
 	const [ keyboardOffset, setKeyboardOffset ] = useState( 0 );
-	const [ isKeyboardVisible, setIsKeyboardVisible ] = useState( false );
+
+	const onKeyboardDidShow = useCallback( ( { endCoordinates } ) => {
+		setKeyboardOffset( endCoordinates.height );
+	}, [] );
+
+	const onKeyboardDidHide = useCallback( () => {
+		setKeyboardOffset( 0 );
+	}, [] );
 
 	useEffect( () => {
-		let willShowSubscription;
 		let showSubscription;
 		let hideSubscription;
 
 		if ( scrollEnabled ) {
-			willShowSubscription = Keyboard.addListener(
-				'keyboardWillShow',
-				() => {
-					setIsKeyboardVisible( true );
-				}
-			);
 			showSubscription = Keyboard.addListener(
 				'keyboardDidShow',
-				( { endCoordinates } ) => {
-					setKeyboardOffset( endCoordinates.height );
-				}
+				onKeyboardDidShow
+			);
+			hideSubscription = Keyboard.addListener(
+				'keyboardDidHide',
+				onKeyboardDidHide
 			);
-			hideSubscription = Keyboard.addListener( 'keyboardWillHide', () => {
-				setKeyboardOffset( 0 );
-				setIsKeyboardVisible( false );
-			} );
 		} else {
-			willShowSubscription?.remove();
 			showSubscription?.remove();
 			hideSubscription?.remove();
 		}
 
 		return () => {
-			willShowSubscription?.remove();
 			showSubscription?.remove();
 			hideSubscription?.remove();
 		};
-	}, [ scrollEnabled ] );
-	return [ isKeyboardVisible, keyboardOffset ];
+	}, [ scrollEnabled, onKeyboardDidShow, onKeyboardDidHide ] );
+	return [ keyboardOffset ];
 }