Android fixes for animation

WordPress · Sep 4, 2020 · f8b0275 · f8b0275
1 parent 13b1df7
commit f8b0275
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 49 deletions.
diff --git a/...components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js b/...components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js
@@ -12,6 +12,7 @@ import {
 	useState,
 	useContext,
 	useMemo,
+	useCallback,
 	Children,
 	useRef,
 } from '@wordpress/element';
@@ -63,7 +64,6 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 	const [ currentHeight, setCurrentHeight ] = useState(
 		context.currentHeight || 1
 	);
-	const [ isFullScreen, setIsFullScreen ] = useState( false );
 
 	const backgroundStyle = usePreferredColorSchemeStyle(
 		styles.background,
@@ -78,25 +78,33 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 		},
 	};
 
-	const setHeight = ( height, layout ) => {
-		if ( currentHeight !== height && height > 1 ) {
-			if ( animate && layout && currentHeight === 1 ) {
-				setCurrentHeight( height );
-			} else if ( animate ) {
+	const setHeight = useCallback(
+		( height, layout ) => {
+			// The screen is fullHeight or changing from fullScreen to the default mode
+			if (
+				( typeof currentHeight === 'string' &&
+					typeof height !== 'string' ) ||
+				typeof height === 'string'
+			) {
 				performLayoutAnimation( ANIMATION_DURATION );
 				setCurrentHeight( height );
-			} else {
-				setCurrentHeight( height );
+
+				return;
 			}
-		}
-	};
 
-	const setNavigationFullScreen = ( isFull ) => {
-		if ( isFull !== isFullScreen ) {
-			performLayoutAnimation( ANIMATION_DURATION );
-			setIsFullScreen( isFull );
-		}
-	};
+			if ( currentHeight !== height && height > 1 ) {
+				if ( animate && layout && currentHeight === 1 ) {
+					setCurrentHeight( height );
+				} else if ( animate ) {
+					performLayoutAnimation( ANIMATION_DURATION );
+					setCurrentHeight( height );
+				} else {
+					setCurrentHeight( height );
+				}
+			}
+		},
+		[ currentHeight ]
+	);
 
 	const screens = useMemo( () => {
 		return Children.map( children, ( child ) => {
@@ -115,14 +123,13 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 		return (
 			<View
 				style={ {
-					height: isFullScreen ? '100%' : currentHeight,
+					height: currentHeight,
 				} }
 			>
 				<BottomSheetNavigationProvider
 					value={ {
 						setHeight,
 						currentHeight,
-						setNavigationFullScreen,
 					} }
 				>
 					{ main ? (
@@ -139,7 +146,7 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 				</BottomSheetNavigationProvider>
 			</View>
 		);
-	}, [ currentHeight, isFullScreen ] );
+	}, [ currentHeight ] );
 }
 
 export default BottomSheetNavigationContainer;
diff --git a/...es/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/...es/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js
@@ -6,7 +6,7 @@ import {
 	useNavigation,
 	useFocusEffect,
 } from '@react-navigation/native';
-import { View, Keyboard } from 'react-native';
+import { View } from 'react-native';
 import { debounce } from 'lodash';
 
 /**
@@ -31,31 +31,19 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => {
 		setIsFullScreen,
 	} = useContext( BottomSheetContext );
 
-	const { setHeight, setNavigationFullScreen } = useContext(
-		BottomSheetNavigationContext
-	);
+	const { setHeight } = useContext( BottomSheetNavigationContext );
 
 	const setHeightDebounce = useCallback(
 		debounce( ( height ) => {
 			setHeight( height, true );
-			setNavigationFullScreen( false );
 		}, 10 ),
-		[ setNavigationFullScreen, setHeight ]
-	);
-
-	const setFullHeight = useCallback(
-		( isFull ) => {
-			setIsFullScreen( isFull );
-			setNavigationFullScreen( isFull );
-		},
-		[ setNavigationFullScreen, setIsFullScreen ]
+		[ setHeight ]
 	);
 
 	useFocusEffect(
 		useCallback( () => {
 			onHandleHardwareButtonPress( () => {
 				if ( navigation.canGoBack() ) {
-					Keyboard.dismiss();
 					shouldEnableBottomSheetMaxHeight( true );
 					navigation.goBack();
 					return true;
@@ -64,13 +52,14 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => {
 				return false;
 			} );
 			if ( fullScreen ) {
-				setFullHeight( true );
+				setHeight( '100%' );
+				setIsFullScreen( true );
 			} else if ( heightRef.current.maxHeight !== 0 ) {
+				setIsFullScreen( false );
 				setHeight( heightRef.current.maxHeight );
-				setFullHeight( false );
 			}
 			return () => {};
-		}, [ setFullHeight ] )
+		}, [ setHeight ] )
 	);
 	const onLayout = ( { nativeEvent } ) => {
 		if ( fullScreen ) {

diff --git a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js
@@ -2,8 +2,9 @@
  * External dependencies
  */
 import React from 'react';
-import { Keyboard, InteractionManager, Platform } from 'react-native';
+import { Platform, Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import { delay } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -22,29 +23,29 @@ const LinkPickerScreen = () => {
 	const onLinkPicked = ( { url, title } ) => {
 		if ( Platform.OS === 'android' ) {
 			Keyboard.dismiss();
-			InteractionManager.runAfterInteractions( () => {
+			delay( () => {
 				navigation.navigate( linkSettingsScreens.settings, {
 					inputValue: url,
 					text: title,
 				} );
-			} );
-		} else {
-			navigation.navigate( linkSettingsScreens.settings, {
-				inputValue: url,
-				text: title,
-			} );
+			}, 100 );
+			return;
 		}
+		navigation.navigate( linkSettingsScreens.settings, {
+			inputValue: url,
+			text: title,
+		} );
 	};
 
 	const onCancel = () => {
 		if ( Platform.OS === 'android' ) {
 			Keyboard.dismiss();
-			InteractionManager.runAfterInteractions( () => {
+			delay( () => {
 				navigation.goBack();
-			} );
-		} else {
-			navigation.goBack();
+			}, 100 );
+			return;
 		}
+		navigation.goBack();
 	};
 
 	const { inputValue } = route.params;