Refactor KavButton into SceneWrapper

- Avoids duplicate inset logic and having to set a sibling component at the callsite.
- Also make it more generic in preparation for other button layouts.

Author: Jon-edge

package.json

@@ -144,7 +144,6 @@
     "react-native-image-colors": "^2.4.0",
     "react-native-image-picker": "^8.2.1",
     "react-native-in-app-review": "^4.3.5",
-    "react-native-keyboard-accessory": "^0.1.16",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-keyboard-controller": "^1.19.0",
     "react-native-linear-gradient": "^2.8.3",

src/components/buttons/KavButtons.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+
+import { useHandler } from '../../hooks/useHandler'
+import { BlurBackgroundNoRoundedCorners } from '../common/BlurBackground'
+import { EdgeAnim, fadeInDown10 } from '../common/EdgeAnim'
+import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
+import type { ButtonInfo } from './ButtonsView'
+import { EdgeButton } from './EdgeButton'
+
+interface Props {
+  primary: ButtonInfo
+  tertiary?: ButtonInfo
+}
+
+// Renders KAV buttons content:
+// - If only primary: one full-width primary button
+// - If tertiary provided: two mini buttons (tertiary left, primary right)
+export const KavButtons: React.FC<Props> = props => {
+  const { primary, tertiary } = props
+  const theme = useTheme()
+  const styles = getStyles(theme)
+
+  const handlePrimaryPress = useHandler(() => {
+    const res = primary.onPress?.()
+    Promise.resolve(res).catch(() => {})
+  })
+  const handleTertiaryPress = useHandler(() => {
+    const res = tertiary?.onPress?.()
+    Promise.resolve(res).catch(() => {})
+  })
+
+  if (tertiary == null) {
+    return (
+      <EdgeButton
+        type="primary"
+        layout="fullWidth"
+        label={primary.label}
+        onPress={handlePrimaryPress}
+        disabled={primary.disabled}
+        spinner={primary.spinner}
+        testID={primary.testID}
+      />
+    )
+  }
+
+  return (
+    <EdgeAnim enter={fadeInDown10} style={styles.container}>
+      <BlurBackgroundNoRoundedCorners />
+      <EdgeButton
+        type="tertiary"
+        mini
+        label={tertiary.label}
+        // We don't want row layout because the buttons will fill the entire
+        // space
+        layout="column"
+        onPress={handleTertiaryPress}
+        disabled={tertiary.disabled}
+        spinner={tertiary.spinner}
+        testID={tertiary.testID}
+        marginRem={[0.25, 0, 0, 0]} // HACK: The column configuration is the only way to avoid full-width hitslop, but it tightens tertiary spacing to make it look evenly spaced. This undos that spacing.
+      />
+      <EdgeButton
+        type="primary"
+        mini
+        label={primary.label}
+        // We don't want row layout because the buttons will fill the entire
+        // space
+        layout="column"
+        onPress={handlePrimaryPress}
+        disabled={primary.disabled}
+        spinner={primary.spinner}
+        testID={primary.testID}
+      />
+    </EdgeAnim>
+  )
+}
+
+const getStyles = cacheStyles((theme: Theme) => ({
+  container: {
+    position: 'relative',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.rem(0.5)
+  },
+  tertiary: {
+    marginTop: theme.rem(0.25)
+  }
+}))

src/components/common/SceneWrapper.tsx

@@ -6,14 +6,21 @@ import {
 } from '@react-navigation/native'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
-import { Keyboard, StyleSheet, View, type ViewStyle } from 'react-native'
+import {
+  Keyboard,
+  Platform,
+  StyleSheet,
+  View,
+  type ViewStyle
+} from 'react-native'
 import {
   useKeyboardHandler,
   useReanimatedKeyboardAnimation
 } from 'react-native-keyboard-controller'
 import Reanimated, {
   useAnimatedReaction,
-  useAnimatedStyle
+  useAnimatedStyle,
+  useSharedValue
 } from 'react-native-reanimated'
 import {
   type EdgeInsets,
@@ -118,6 +125,13 @@ interface SceneWrapperProps {
 
   // True to make the scene scrolling (if avoidKeyboard is false):
   scroll?: boolean
+
+  // Optional KeyboardAccessoryView rendered as a sibling to the SceneWrapper content:
+  kavProps?: {
+    children: React.ReactNode
+    alwaysVisible?: boolean
+    contentContainerStyle?: ViewStyle
+  }
 }
 
 /**
@@ -147,12 +161,14 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
     hasTabs = false,
     padding = 0,
     renderFooter,
-    scroll = false
+    scroll = false,
+    kavProps
   } = props
 
   const notificationHeight = useSelector(state => state.ui.notificationHeight)
 
   const navigation = useNavigation<NavigationBase>()
+  const isIos = Platform.OS === 'ios'
 
   // We need to track this state in the JS thread because insets are not shared values
   const [isKeyboardOpen, setIsKeyboardOpen] = useState(false)
@@ -163,6 +179,48 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
     }
   })
 
+  // Local keyboard visible state for KAV parity (iOS willShow vs Android didShow):
+  const [isKeyboardVisibleFull, setKeyboardVisibleKav] = useState(false)
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      isIos ? 'keyboardWillShow' : 'keyboardDidShow',
+      () => {
+        setKeyboardVisibleKav(true)
+      }
+    )
+    const keyboardDidHideListener = Keyboard.addListener(
+      isIos ? 'keyboardWillHide' : 'keyboardDidHide',
+      () => {
+        setKeyboardVisibleKav(false)
+      }
+    )
+    return () => {
+      keyboardDidShowListener.remove()
+      keyboardDidHideListener.remove()
+    }
+  }, [isIos])
+
+  // Track closing/opening state explicitly for animation direction:
+  const isClosingSv = useSharedValue(false)
+  useEffect(() => {
+    const showListener = Keyboard.addListener(
+      isIos ? 'keyboardWillShow' : 'keyboardDidShow',
+      () => {
+        isClosingSv.value = false
+      }
+    )
+    const hideListener = Keyboard.addListener(
+      isIos ? 'keyboardWillHide' : 'keyboardDidHide',
+      () => {
+        isClosingSv.value = true
+      }
+    )
+    return () => {
+      showListener.remove()
+      hideListener.remove()
+    }
+  }, [isIos, isClosingSv])
+
   // Reset the footer ratio when focused
   // We can do this because multiple calls to resetFooterRatio isn't costly
   // because it just sets snapTo SharedValue to `1`
@@ -233,6 +291,22 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
     [insets.top, insets.right, insets.bottom, insets.left]
   )
 
+  // Collapsed bottom inset that ignores keyboard-open state (used to clamp during close):
+  const collapsedInsetBottom = useMemo(
+    () =>
+      safeAreaInsets.bottom +
+      (hasNotifications ? notificationHeight : 0) +
+      (hasTabs ? MAX_TAB_BAR_HEIGHT : 0) +
+      footerHeight,
+    [
+      footerHeight,
+      hasNotifications,
+      hasTabs,
+      notificationHeight,
+      safeAreaInsets.bottom
+    ]
+  )
+
   // This is a convenient styles object which may be applied to scene container
   // components to offset the inset styles applied to the SceneWrapper.
   const undoInsetStyle: UndoInsetStyle = useMemo(
@@ -267,6 +341,54 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
     return children
   }, [children, sceneWrapperInfo])
 
+  // Build KAV element (custom, no third-party lib):
+  const alwaysVisibleKav = kavProps?.alwaysVisible === true
+  const kavBaseStyle = useMemo(
+    () => ({
+      position: 'absolute' as const,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'transparent'
+    }),
+    []
+  )
+  const insetBottomSv = useSharedValue(insets.bottom)
+  const collapsedInsetSv = useSharedValue(collapsedInsetBottom)
+  useEffect(() => {
+    insetBottomSv.value = insets.bottom
+    collapsedInsetSv.value = collapsedInsetBottom
+  }, [collapsedInsetBottom, insets.bottom, collapsedInsetSv, insetBottomSv])
+  const kavAnimatedStyle = useAnimatedStyle(() => {
+    // keyboardHeightDiff.value is negative when open; invert to get height
+    const keyboardHeight =
+      keyboardHeightDiff.value < 0 ? -keyboardHeightDiff.value : 0
+    const isClosing = isClosingSv.value
+
+    let bottom: number
+    if (keyboardHeight > 0) {
+      // While opening, ignore insets to hug keyboard.
+      // While closing, never dip below the insets (avoid flicker under tab bar).
+      bottom = isClosing
+        ? Math.max(keyboardHeight, collapsedInsetSv.value)
+        : keyboardHeight
+    } else {
+      // Settled closed: rest above insets.
+      bottom = collapsedInsetSv.value
+    }
+
+    return { bottom }
+  })
+  const shouldShowKav =
+    kavProps != null && (alwaysVisibleKav || isKeyboardVisibleFull)
+  const kavElement = !shouldShowKav ? null : (
+    <Reanimated.View
+      style={[kavBaseStyle, kavAnimatedStyle, kavProps?.contentContainerStyle]}
+    >
+      {kavProps?.children}
+    </Reanimated.View>
+  )
+
   if (scroll) {
     return (
       <>
@@ -300,6 +422,7 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
             navigation={navigation}
           />
         ) : null}
+        {kavElement}
         <FloatingNavFixer navigation={navigation} />
       </>
     )
@@ -342,6 +465,7 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
             navigation={navigation}
           />
         ) : null}
+        {kavElement}
         <FloatingNavFixer navigation={navigation} />
       </>
     )
@@ -377,6 +501,7 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
           navigation={navigation}
         />
       ) : null}
+      {kavElement}
       <FloatingNavFixer navigation={navigation} />
     </>
   )