diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.android.ts b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.android.ts index 3eae1b35eeaf..d0e74e259c39 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.android.ts +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.android.ts @@ -1,6 +1,31 @@ -// Selection position returned from react-native-keyboard-controller is platform-dependent, so set different paddings for Android and iOS. -function getBottomSuggestionPadding(): number { - return 30; +import {Dimensions} from 'react-native'; + +function getBottomSuggestionPadding(bottom: number): number { + const {height} = Dimensions.get('window'); + const basePadding = 30; + + // Calculate what percentage of the screen height the bottom position represents + const bottomPercentageToHeight = (bottom / height) * 100; + + // Reference values for interpolation + const referenceHeightMin = 900; + const referencePaddingMin = -10; + const referenceHeightMax = 1000; + const referencePaddingMax = -44; + + // If the bottom position is more than 7% of the screen, the value is too big and we need adjust the padding + if (bottomPercentageToHeight > 7) { + // Calculate the rate of change between reference points + const paddingRate = (referencePaddingMax - referencePaddingMin) / (referenceHeightMax - referenceHeightMin); + + // Interpolate the padding value based on the current screen height + const padding = referencePaddingMin + (height - referenceHeightMin) * paddingRate; + + // Clamp the padding value between -60 and -5 to prevent extreme values + return Math.round(Math.max(-60, Math.min(-5, padding))); + } + + return basePadding; } export default getBottomSuggestionPadding; diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts index 5bb671c5edac..4e57eb889f33 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts @@ -1,4 +1,5 @@ -function getBottomSuggestionPadding(): number { +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function getBottomSuggestionPadding(bottom?: number): number { return 16; } diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts index acdc643b6b70..577b278250df 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts @@ -1,4 +1,5 @@ -function getBottomSuggestionPadding(): number { +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function getBottomSuggestionPadding(bottom?: number): number { return 6; } diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx index d4f6f0eb28d4..2d8c1d2f3087 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx @@ -9,7 +9,8 @@ import type {AutoCompleteSuggestionsPortalProps} from './types'; function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom = 0, resetSuggestions = () => {}, ...props}: AutoCompleteSuggestionsPortalProps) { const StyleUtils = useStyleUtils(); - const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + getBottomSuggestionPadding()}), [StyleUtils, left, width, bottom]); + const bottomPadding = getBottomSuggestionPadding(bottom); + const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + bottomPadding}), [StyleUtils, left, width, bottom, bottomPadding]); if (!width) { return null;