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.

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
+		);
 	} );
 } );

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 ];
 }