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 index 1e6445d3dd6b47..b5e374fb799b26 100644 --- 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 index cf9d21d2883f0b..ceafaf2c76eeb4 100644 --- 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 ]; }