Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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 - })
+1 -1
src/view/shell/Composer.web.tsx
··· 25 25 // = 26 26 27 27 if (!isActive) { 28 - return <View /> 28 + return null 29 29 } 30 30 31 31 return (