diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js index 463018435ffb34..65c84ef6e53ce3 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +++ b/packages/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 ( { main ? ( @@ -139,7 +146,7 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { ); - }, [ currentHeight, isFullScreen ] ); + }, [ currentHeight ] ); } export default BottomSheetNavigationContainer; diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js index 96fcb60557ae35..3e9a620582399d 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +++ b/packages/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 index 4a99067ba70f4d..30d0894281992e 100644 --- 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;