Fix iOS sheet keyboard handling using native scrollview features (#9959)

src/components/dialogs/LanguageSelectDialog.tsx

@@ -10,7 +10,7 @@ import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages'
 import {useLanguagePrefs} from '#/state/preferences/languages'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {atoms as a, useTheme, web} from '#/alf'
+import {atoms as a, tokens, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {SearchInput} from '#/components/forms/SearchInput'
@@ -84,6 +84,7 @@ export function DialogInner({
 }) {
   const control = Dialog.useDialogContext()
   const [headerHeight, setHeaderHeight] = useState(0)
+  const [footerHeight, setFooterHeight] = useState(0)
 
   const allowedLanguages = useMemo(() => {
     const uniqueLanguagesMap = LANGUAGES.filter(lang => !!lang.code2).reduce(
@@ -249,6 +250,8 @@ export function DialogInner({
     ...displayedLanguages.all.map(lang => ({type: 'item', lang})),
   ]
 
+  const numItems = flatListData.length
+
   return (
     <Toggle.Group
       values={checkedLanguagesCode2}
@@ -261,9 +264,12 @@ export function DialogInner({
         data={flatListData}
         ListHeaderComponent={listHeader}
         stickyHeaderIndices={[0]}
-        contentContainerStyle={[a.gap_0]}
-        style={[IS_NATIVE && a.px_lg, web({paddingBottom: 120})]}
-        scrollIndicatorInsets={{top: headerHeight}}
+        contentContainerStyle={[
+          a.gap_0,
+          IS_NATIVE && {paddingBottom: footerHeight + tokens.space.xl},
+        ]}
+        style={[IS_NATIVE && a.px_lg, IS_WEB && {paddingBottom: 120}]}
+        scrollIndicatorInsets={{top: headerHeight, bottom: footerHeight}}
         renderItem={({item, index}) => {
           if (item.type === 'header') {
             return (
@@ -283,6 +289,8 @@ export function DialogInner({
           }
           const lang = item.lang
 
+          const isLastItem = index === numItems - 1
+
           return (
             <Toggle.Item
               key={lang.code2}
@@ -290,7 +298,7 @@ export function DialogInner({
               label={languageName(lang, langPrefs.appLanguage)}
               style={[
                 t.atoms.border_contrast_low,
-                a.border_b,
+                !isLastItem && a.border_b,
                 a.rounded_0,
                 a.px_0,
                 a.py_md,
@@ -303,7 +311,8 @@ export function DialogInner({
           )
         }}
         footer={
-          <Dialog.FlatListFooter>
+          <Dialog.FlatListFooter
+            onLayout={evt => setFooterHeight(evt.nativeEvent.layout.height)}>
             <Button
               label={_(msg`Close dialog`)}
               onPress={handleClose}