From 891f4d2638543bd3957514868d523262e70cf730 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 6 Aug 2020 15:54:57 +0200 Subject: [PATCH 1/4] Another approach to fix jumping toolbar --- .../block-library/src/button/edit.native.js | 1 - .../keyboard-avoiding-view/index.ios.js | 90 ++++++++++++++++++- .../keyboard-avoiding-view/styles.native.scss | 9 ++ .../src/components/layout/index.native.js | 1 + 4 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 packages/components/src/mobile/keyboard-avoiding-view/styles.native.scss diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index ed0f90170f56e..f4eb48866259e 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -372,7 +372,6 @@ class ButtonEdit extends Component { __unstableMobileNoFocusOnMount={ ! isSelected } selectionColor={ textColor } onBlur={ () => { - this.onToggleButtonFocus( false ); this.onSetMaxWidth(); } } onReplace={ onReplace } diff --git a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js index 4c6ee21a8e5e5..8b060514d3bbd 100644 --- a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js +++ b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js @@ -3,19 +3,103 @@ */ import { KeyboardAvoidingView as IOSKeyboardAvoidingView, + Animated, + Keyboard, Dimensions, + View, } from 'react-native'; -export const KeyboardAvoidingView = ( { parentHeight, ...otherProps } ) => { +/** + * WordPress dependencies + */ +import { useState, useEffect, useRef } from '@wordpress/element'; +import { useResizeObserver } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import styles from './styles.scss'; + +const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent( + IOSKeyboardAvoidingView +); + +const MIN_HEIGHT = 44; + +export const KeyboardAvoidingView = ( { + parentHeight, + style, + withAnimatedHeight = false, + ...otherProps +} ) => { + const [ keyboardHeight, setKeyboardHeight ] = useState( 0 ); + const [ resizeObserver, sizes ] = useResizeObserver(); + const { height = 0 } = sizes || {}; + + const animatedHeight = useRef( new Animated.Value( MIN_HEIGHT ) ).current; + const { height: fullHeight } = Dimensions.get( 'window' ); const keyboardVerticalOffset = fullHeight - parentHeight; + useEffect( () => { + Keyboard.addListener( 'keyboardWillShow', onKeyboardWillShow ); + Keyboard.addListener( 'keyboardWillHide', onKeyboardWillHide ); + return () => { + Keyboard.removeListener( 'keyboardWillShow', onKeyboardWillShow ); + Keyboard.removeListener( 'keyboardWillHide', onKeyboardWillHide ); + }; + }, [] ); + + useEffect( () => { + animate(); + }, [ keyboardHeight ] ); + + function onKeyboardWillShow( { endCoordinates } ) { + setKeyboardHeight( endCoordinates.height ); + } + + function onKeyboardWillHide() { + setKeyboardHeight( 0 ); + } + + const paddedKeyboardHeight = + keyboardHeight + MIN_HEIGHT - ( style.bottom || 0 ); + + function animate() { + if ( keyboardHeight ) { + animatedHeight.setValue( paddedKeyboardHeight ); + } else + Animated.timing( animatedHeight, { + toValue: MIN_HEIGHT, + duration: 150, + useNativeDriver: false, + } ).start(); + } + return ( - + style={ + withAnimatedHeight + ? [ style, { height: animatedHeight } ] + : style + } + > + + { resizeObserver } + { otherProps.children } + + ); }; diff --git a/packages/components/src/mobile/keyboard-avoiding-view/styles.native.scss b/packages/components/src/mobile/keyboard-avoiding-view/styles.native.scss new file mode 100644 index 0000000000000..6d4c69981fb5b --- /dev/null +++ b/packages/components/src/mobile/keyboard-avoiding-view/styles.native.scss @@ -0,0 +1,9 @@ +.animatedChildStyle { + position: absolute; + width: 100%; +} + +.defaultChildStyle { + height: 100%; + top: 0; +} diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js index 1eaaa479c9ffd..b17456d8ec9f6 100644 --- a/packages/edit-post/src/components/layout/index.native.js +++ b/packages/edit-post/src/components/layout/index.native.js @@ -153,6 +153,7 @@ class Layout extends Component { { isTemplatePickerAvailable && ( <__experimentalPageTemplatePicker From 8c659b29114cf3456162d67e5773d4f694492778 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 6 Aug 2020 19:26:11 +0200 Subject: [PATCH 2/4] Change animation duration to 200ms --- .../components/src/mobile/keyboard-avoiding-view/index.ios.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js index 8b060514d3bbd..daca2cf23d729 100644 --- a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js +++ b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js @@ -25,6 +25,7 @@ const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent( ); const MIN_HEIGHT = 44; +const ANIMATION_DURATION = 200; export const KeyboardAvoidingView = ( { parentHeight, @@ -71,7 +72,7 @@ export const KeyboardAvoidingView = ( { } else Animated.timing( animatedHeight, { toValue: MIN_HEIGHT, - duration: 150, + duration: ANIMATION_DURATION, useNativeDriver: false, } ).start(); } From f1c7f8203d266c163660b2a28b4736f02dcb9ecf Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 10 Aug 2020 14:44:46 +0200 Subject: [PATCH 3/4] Refactor animation use in KeyboardAvoidingView --- .../keyboard-avoiding-view/index.ios.js | 39 ++++++++----------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js index daca2cf23d729..d863961fc680e 100644 --- a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js +++ b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js @@ -8,11 +8,12 @@ import { Dimensions, View, } from 'react-native'; +import SafeArea from 'react-native-safe-area'; /** * WordPress dependencies */ -import { useState, useEffect, useRef } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; import { useResizeObserver } from '@wordpress/compose'; /** @@ -25,7 +26,6 @@ const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent( ); const MIN_HEIGHT = 44; -const ANIMATION_DURATION = 200; export const KeyboardAvoidingView = ( { parentHeight, @@ -33,7 +33,6 @@ export const KeyboardAvoidingView = ( { withAnimatedHeight = false, ...otherProps } ) => { - const [ keyboardHeight, setKeyboardHeight ] = useState( 0 ); const [ resizeObserver, sizes ] = useResizeObserver(); const { height = 0 } = sizes || {}; @@ -51,30 +50,26 @@ export const KeyboardAvoidingView = ( { }; }, [] ); - useEffect( () => { - animate(); - }, [ keyboardHeight ] ); - function onKeyboardWillShow( { endCoordinates } ) { - setKeyboardHeight( endCoordinates.height ); + SafeArea.getSafeAreaInsetsForRootView().then( ( result ) => { + animatedHeight.setValue( + endCoordinates.height + + MIN_HEIGHT - + result.safeAreaInsets.bottom + ); + } ); } - function onKeyboardWillHide() { - setKeyboardHeight( 0 ); + function onKeyboardWillHide( { duration } ) { + animate( duration ); } - const paddedKeyboardHeight = - keyboardHeight + MIN_HEIGHT - ( style.bottom || 0 ); - - function animate() { - if ( keyboardHeight ) { - animatedHeight.setValue( paddedKeyboardHeight ); - } else - Animated.timing( animatedHeight, { - toValue: MIN_HEIGHT, - duration: ANIMATION_DURATION, - useNativeDriver: false, - } ).start(); + function animate( duration ) { + Animated.timing( animatedHeight, { + toValue: MIN_HEIGHT, + duration, + useNativeDriver: false, + } ).start(); } return ( From f24a172aadbd798e84839dbfd5f8133d89b6003c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 12 Aug 2020 12:17:24 +0200 Subject: [PATCH 4/4] Move animate function to onKeyboardWillHide --- .../components/src/mobile/keyboard-avoiding-view/index.ios.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js index d863961fc680e..cf0a169b1ab9b 100644 --- a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js +++ b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js @@ -61,10 +61,6 @@ export const KeyboardAvoidingView = ( { } function onKeyboardWillHide( { duration } ) { - animate( duration ); - } - - function animate( duration ) { Animated.timing( animatedHeight, { toValue: MIN_HEIGHT, duration,