forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add padding to dialogs when keyboard is open on Android (#4182)
* add keyboard padding to android dialogs
* missing `keyboardDismissMode` for `ScrollableInner`
* add to `MutedWords`
* add to `LabelsOnMe`
+54
-3
+10
-2
src/components/Dialog/index.tsx
+10
-2
src/components/Dialog/index.tsx
···
1
1
import React, {useImperativeHandle} from 'react'
2
-
import {Dimensions, Pressable, StyleProp, View, ViewStyle} from 'react-native'
2
+
import {
3
+
Dimensions,
4
+
Keyboard,
5
+
Pressable,
6
+
StyleProp,
7
+
View,
8
+
ViewStyle,
9
+
} from 'react-native'
3
10
import Animated, {useAnimatedStyle} from 'react-native-reanimated'
4
11
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
12
import BottomSheet, {
···
169
176
// Android
170
177
importantForAccessibility="yes"
171
178
style={[a.absolute, a.inset_0]}
172
-
testID={testID}>
179
+
testID={testID}
180
+
onTouchMove={() => Keyboard.dismiss()}>
173
181
<BottomSheet
174
182
enableDynamicSizing={!hasSnapPoints}
175
183
enablePanDownToClose
+31
src/components/KeyboardPadding.android.tsx
+31
src/components/KeyboardPadding.android.tsx
···
1
+
import React from 'react'
2
+
import {useKeyboardHandler} from 'react-native-keyboard-controller'
3
+
import Animated, {
4
+
useAnimatedStyle,
5
+
useSharedValue,
6
+
} from 'react-native-reanimated'
7
+
8
+
export function KeyboardPadding({maxHeight}: {maxHeight?: number}) {
9
+
const keyboardHeight = useSharedValue(0)
10
+
11
+
useKeyboardHandler(
12
+
{
13
+
onMove: e => {
14
+
'worklet'
15
+
16
+
if (maxHeight && e.height > maxHeight) {
17
+
keyboardHeight.value = maxHeight
18
+
} else {
19
+
keyboardHeight.value = e.height
20
+
}
21
+
},
22
+
},
23
+
[maxHeight],
24
+
)
25
+
26
+
const animatedStyle = useAnimatedStyle(() => ({
27
+
height: keyboardHeight.value,
28
+
}))
29
+
30
+
return <Animated.View style={animatedStyle} />
31
+
}
+3
src/components/KeyboardPadding.tsx
+3
src/components/KeyboardPadding.tsx
+2
src/components/ReportDialog/SubmitView.tsx
+2
src/components/ReportDialog/SubmitView.tsx
···
15
15
import * as Toggle from '#/components/forms/Toggle'
16
16
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
17
17
import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
18
+
import {KeyboardPadding} from '#/components/KeyboardPadding'
18
19
import {Loader} from '#/components/Loader'
19
20
import {Text} from '#/components/Typography'
20
21
import {ReportDialogProps} from './types'
···
221
222
{submitting && <ButtonIcon icon={Loader} />}
222
223
</Button>
223
224
</View>
225
+
<KeyboardPadding />
224
226
</View>
225
227
)
226
228
}
+2
src/components/dialogs/MutedWords.tsx
+2
src/components/dialogs/MutedWords.tsx
···
28
28
import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText'
29
29
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
30
30
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
31
+
import {KeyboardPadding} from '#/components/KeyboardPadding'
31
32
import {Loader} from '#/components/Loader'
32
33
import * as Prompt from '#/components/Prompt'
33
34
import {Text} from '#/components/Typography'
···
256
257
</View>
257
258
258
259
<Dialog.Close />
260
+
<KeyboardPadding maxHeight={100} />
259
261
</Dialog.ScrollableInner>
260
262
)
261
263
}
+2
-1
src/components/moderation/LabelsOnMeDialog.tsx
+2
-1
src/components/moderation/LabelsOnMeDialog.tsx
···
14
14
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
15
15
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
16
16
import * as Dialog from '#/components/Dialog'
17
+
import {KeyboardPadding} from '#/components/KeyboardPadding'
17
18
import {InlineLinkText} from '#/components/Link'
18
19
import {Text} from '#/components/Typography'
19
20
import {Divider} from '../Divider'
···
108
109
</View>
109
110
</>
110
111
)}
111
-
112
112
<Dialog.Close />
113
+
<KeyboardPadding />
113
114
</Dialog.ScrollableInner>
114
115
)
115
116
}
+2
src/view/com/composer/GifAltText.tsx
+2
src/view/com/composer/GifAltText.tsx
···
20
20
import * as TextField from '#/components/forms/TextField'
21
21
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
22
22
import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
23
+
import {KeyboardPadding} from '#/components/KeyboardPadding'
23
24
import {Text} from '#/components/Typography'
24
25
import {GifEmbed} from '../util/post-embeds/GifEmbed'
25
26
import {AltTextReminder} from './photos/Gallery'
···
180
181
</View>
181
182
</View>
182
183
<Dialog.Close />
184
+
<KeyboardPadding />
183
185
</Dialog.ScrollableInner>
184
186
)
185
187
}
+2
src/view/com/modals/Modal.tsx
+2
src/view/com/modals/Modal.tsx
···
5
5
6
6
import {useModalControls, useModals} from '#/state/modals'
7
7
import {usePalette} from 'lib/hooks/usePalette'
8
+
import {KeyboardPadding} from '#/components/KeyboardPadding'
8
9
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
9
10
import * as AddAppPassword from './AddAppPasswords'
10
11
import * as AltImageModal from './AltImage'
···
146
147
handleStyle={[styles.handle, pal.view]}
147
148
onChange={onBottomSheetChange}>
148
149
{element}
150
+
<KeyboardPadding />
149
151
</BottomSheet>
150
152
)
151
153
}