forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix Android composer padding: Director's Cut (#7412)
* fix android 15 composer padding
* while I'm here, alf some bits and pieces
* add comments
authored by
Samuel Newman
and committed by
GitHub
3b9a51c4
e5c58745
+21
-22
+15
-7
src/view/com/composer/Composer.tsx
+15
-7
src/view/com/composer/Composer.tsx
···
264
264
() => ({
265
265
paddingTop: isAndroid ? insets.top : 0,
266
266
paddingBottom:
267
-
isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
267
+
// iOS - when keyboard is closed, keep the bottom bar in the safe area
268
+
(isIOS && !isKeyboardVisible) ||
269
+
// Android - Android >=35 KeyboardAvoidingView adds double padding when
270
+
// keyboard is closed, so we subtract that in the offset and add it back
271
+
// here when the keyboard is open
272
+
(isAndroid && isKeyboardVisible)
273
+
? insets.bottom
274
+
: 0,
268
275
}),
269
276
[insets, isKeyboardVisible],
270
277
)
···
642
649
ref={scrollViewRef}
643
650
layout={native(LinearTransition)}
644
651
onScroll={scrollHandler}
645
-
style={styles.scrollView}
652
+
style={a.flex_1}
646
653
keyboardShouldPersistTaps="always"
647
654
onContentSizeChange={onScrollViewContentSizeChange}
648
655
onLayout={onScrollViewLayout}>
···
1396
1403
}
1397
1404
1398
1405
function useKeyboardVerticalOffset() {
1399
-
const {top} = useSafeAreaInsets()
1406
+
const {top, bottom} = useSafeAreaInsets()
1400
1407
1401
1408
// Android etc
1402
-
if (!isIOS) return 0
1409
+
if (!isIOS) {
1410
+
// if Android <35 or web, bottom is 0 anyway. if >=35, this is needed to account
1411
+
// for the edge-to-edge nav bar
1412
+
return bottom * -1
1413
+
}
1403
1414
1404
1415
// iPhone SE
1405
1416
if (top === 20) return 40
···
1488
1499
},
1489
1500
inactivePost: {
1490
1501
opacity: 0.5,
1491
-
},
1492
-
scrollView: {
1493
-
flex: 1,
1494
1502
},
1495
1503
textInputLayout: {
1496
1504
flexDirection: 'row',
+5
-14
src/view/shell/Composer.tsx
+5
-14
src/view/shell/Composer.tsx
···
1
1
import {useEffect} from 'react'
2
-
import {Animated, Easing, StyleSheet, View} from 'react-native'
2
+
import {Animated, Easing} from 'react-native'
3
3
4
4
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
5
-
import {usePalette} from '#/lib/hooks/usePalette'
6
5
import {useComposerState} from '#/state/shell/composer'
6
+
import {atoms as a, useTheme} from '#/alf'
7
7
import {ComposePost} from '../com/composer/Composer'
8
8
9
9
export function Composer({winHeight}: {winHeight: number}) {
10
10
const state = useComposerState()
11
-
const pal = usePalette('default')
11
+
const t = useTheme()
12
12
const initInterp = useAnimatedValue(0)
13
13
14
14
useEffect(() => {
···
38
38
// =
39
39
40
40
if (!state) {
41
-
return <View />
41
+
return null
42
42
}
43
43
44
44
return (
45
45
<Animated.View
46
-
style={[styles.wrapper, pal.view, wrapperAnimStyle]}
46
+
style={[a.absolute, a.inset_0, t.atoms.bg, wrapperAnimStyle]}
47
47
aria-modal
48
48
accessibilityViewIsModal>
49
49
<ComposePost
···
58
58
</Animated.View>
59
59
)
60
60
}
61
-
62
-
const styles = StyleSheet.create({
63
-
wrapper: {
64
-
position: 'absolute',
65
-
top: 0,
66
-
bottom: 0,
67
-
width: '100%',
68
-
},
69
-
})