Fix Android composer padding: Director's Cut (#7412)

* fix android 15 composer padding

* while I'm here, alf some bits and pieces

* add comments

src/view/com/composer/Composer.tsx

@@ -264,7 +264,14 @@ export const ComposePost = ({
     () => ({
       paddingTop: isAndroid ? insets.top : 0,
       paddingBottom:
-        isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
+        // iOS - when keyboard is closed, keep the bottom bar in the safe area
+        (isIOS && !isKeyboardVisible) ||
+        // Android - Android >=35 KeyboardAvoidingView adds double padding when
+        // keyboard is closed, so we subtract that in the offset and add it back
+        // here when the keyboard is open
+        (isAndroid && isKeyboardVisible)
+          ? insets.bottom
+          : 0,
     }),
     [insets, isKeyboardVisible],
   )
@@ -642,7 +649,7 @@ export const ComposePost = ({
             ref={scrollViewRef}
             layout={native(LinearTransition)}
             onScroll={scrollHandler}
-            style={styles.scrollView}
+            style={a.flex_1}
             keyboardShouldPersistTaps="always"
             onContentSizeChange={onScrollViewContentSizeChange}
             onLayout={onScrollViewLayout}>
@@ -1396,10 +1403,14 @@ function useScrollTracker({
 }
 
 function useKeyboardVerticalOffset() {
-  const {top} = useSafeAreaInsets()
+  const {top, bottom} = useSafeAreaInsets()
 
   // Android etc
-  if (!isIOS) return 0
+  if (!isIOS) {
+    // if Android <35 or web, bottom is 0 anyway. if >=35, this is needed to account
+    // for the edge-to-edge nav bar
+    return bottom * -1
+  }
 
   // iPhone SE
   if (top === 20) return 40
@@ -1489,9 +1500,6 @@ const styles = StyleSheet.create({
   inactivePost: {
     opacity: 0.5,
   },
-  scrollView: {
-    flex: 1,
-  },
   textInputLayout: {
     flexDirection: 'row',
     paddingTop: 4,

src/view/shell/Composer.tsx

@@ -1,14 +1,14 @@
 import {useEffect} from 'react'
-import {Animated, Easing, StyleSheet, View} from 'react-native'
+import {Animated, Easing} from 'react-native'
 
 import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {useComposerState} from '#/state/shell/composer'
+import {atoms as a, useTheme} from '#/alf'
 import {ComposePost} from '../com/composer/Composer'
 
 export function Composer({winHeight}: {winHeight: number}) {
   const state = useComposerState()
-  const pal = usePalette('default')
+  const t = useTheme()
   const initInterp = useAnimatedValue(0)
 
   useEffect(() => {
@@ -38,12 +38,12 @@ export function Composer({winHeight}: {winHeight: number}) {
   // =
 
   if (!state) {
-    return <View />
+    return null
   }
 
   return (
     <Animated.View
-      style={[styles.wrapper, pal.view, wrapperAnimStyle]}
+      style={[a.absolute, a.inset_0, t.atoms.bg, wrapperAnimStyle]}
       aria-modal
       accessibilityViewIsModal>
       <ComposePost
@@ -58,12 +58,3 @@ export function Composer({winHeight}: {winHeight: number}) {
     </Animated.View>
   )
 }
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    width: '100%',
-  },
-})

src/view/shell/Composer.web.tsx

@@ -25,7 +25,7 @@ export function Composer({}: {winHeight: number}) {
   // =
 
   if (!isActive) {
-    return <View />
+    return null
   }
 
   return (