diff --git a/native/profile/keyserver-selection-bottom-sheet.react.js b/native/profile/keyserver-selection-bottom-sheet.react.js --- a/native/profile/keyserver-selection-bottom-sheet.react.js +++ b/native/profile/keyserver-selection-bottom-sheet.react.js @@ -1,10 +1,13 @@ // @flow +import invariant from 'invariant'; import * as React from 'react'; import { View, Text } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; +import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js'; import BottomSheet from '../bottom-sheet/bottom-sheet.react.js'; import Button from '../components/button.react.js'; import CommIcon from '../components/comm-icon.react.js'; @@ -19,6 +22,9 @@ +keyserverInfo: KeyserverInfo, }; +// header + paddingTop + paddingBottom + marginBottom +const keyserverHeaderHeight = 84 + 16 + 16 + 24; + type Props = { +navigation: RootNavigationProp<'KeyserverSelectionBottomSheet'>, +route: NavigationRoute<'KeyserverSelectionBottomSheet'>, @@ -34,11 +40,35 @@ const { goBack } = navigation; + const bottomSheetContext = React.useContext(BottomSheetContext); + invariant(bottomSheetContext, 'bottomSheetContext should be set'); + const { setContentHeight } = bottomSheetContext; + + const removeKeyserverContainerRef = React.useRef(); const bottomSheetRef = React.useRef(); const colors = useColors(); const styles = useStyles(unboundStyles); + const insets = useSafeAreaInsets(); + + const onLayout = React.useCallback(() => { + removeKeyserverContainerRef.current?.measure( + (x, y, width, height, pageX, pageY) => { + if ( + height === null || + height === undefined || + pageY === null || + pageY === undefined + ) { + return; + } + + setContentHeight(height + keyserverHeaderHeight + insets.bottom); + }, + ); + }, [insets.bottom, setContentHeight]); + const cloudIcon = React.useMemo( () => ( {keyserverInfo.urlPrefix} - {removeKeyserver} + + {removeKeyserver} + );