fixup! Refactor KavButton into SceneWrapper

Author: Jon-edge

src/components/common/SceneWrapper.tsx

@@ -126,10 +126,11 @@ 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?: {
+  // Optional "dock" view rendered at the bottom of the scene, attached to the
+  // keyboard, tabs, footer, etc, whatever is highest:
+  dockProps?: {
     children: React.ReactNode
-    alwaysVisible?: boolean
+    keyboardVisibleOnly?: boolean
     contentContainerStyle?: ViewStyle
   }
 }
@@ -162,7 +163,7 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
     padding = 0,
     renderFooter,
     scroll = false,
-    kavProps
+    dockProps
   } = props
 
   const notificationHeight = useSelector(state => state.ui.notificationHeight)
@@ -179,47 +180,32 @@ 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])
-
+  // Local keyboard opening/closing start/end state for dock parity between iOS
+  // and Android. `keyboardWillShow`/`keyboardDidShow` mean different things on
+  // each platform:
+  const [isKeyboardVisibleDock, setKeyboardVisibleDock] = useState(false)
   // 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
-      }
-    )
+    const showEvent = isIos ? 'keyboardWillShow' : 'keyboardDidShow'
+    const hideEvent = isIos ? 'keyboardWillHide' : 'keyboardDidHide'
+    const onShow = (): void => {
+      setKeyboardVisibleDock(true)
+      isClosingSv.value = false
+    }
+    const onHide = (): void => {
+      setKeyboardVisibleDock(false)
+      isClosingSv.value = true
+    }
+    const showListener = Keyboard.addListener(showEvent, onShow)
+    const hideListener = Keyboard.addListener(hideEvent, onHide)
     return () => {
       showListener.remove()
       hideListener.remove()
     }
-  }, [isIos, isClosingSv])
+    // No need to depend on `isClosingSv` since it's a shared value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isIos])
 
   // Reset the footer ratio when focused
   // We can do this because multiple calls to resetFooterRatio isn't costly
@@ -341,9 +327,9 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
     return children
   }, [children, sceneWrapperInfo])
 
-  // Build Keyboard Accessory View element
-  const alwaysVisibleKav = kavProps?.alwaysVisible === true
-  const kavBaseStyle = useMemo(
+  // Build Dock View element
+  const keyboardVisibleOnlyDoc = dockProps?.keyboardVisibleOnly ?? true
+  const dockBaseStyle = useMemo(
     () => ({
       position: 'absolute' as const,
       left: 0,
@@ -359,7 +345,7 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
     insetBottomSv.value = insets.bottom
     collapsedInsetSv.value = collapsedInsetBottom
   }, [collapsedInsetBottom, insets.bottom, collapsedInsetSv, insetBottomSv])
-  const kavAnimatedStyle = useAnimatedStyle(() => {
+  const dockAnimatedStyle = useAnimatedStyle(() => {
     // keyboardHeightDiff.value is negative when open; invert to get height
     const keyboardHeight =
       keyboardHeightDiff.value < 0 ? -keyboardHeightDiff.value : 0
@@ -379,13 +365,17 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
 
     return { bottom }
   })
-  const shouldShowKav =
-    kavProps != null && (alwaysVisibleKav || isKeyboardVisibleFull)
-  const kavElement = !shouldShowKav ? null : (
+  const shouldShowDock =
+    dockProps != null && (!keyboardVisibleOnlyDoc || isKeyboardVisibleDock)
+  const dockElement = !shouldShowDock ? null : (
     <Reanimated.View
-      style={[kavBaseStyle, kavAnimatedStyle, kavProps?.contentContainerStyle]}
+      style={[
+        dockBaseStyle,
+        dockAnimatedStyle,
+        dockProps?.contentContainerStyle
+      ]}
     >
-      {kavProps?.children}
+      {dockProps?.children}
     </Reanimated.View>
   )
 
@@ -422,7 +412,7 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
             navigation={navigation}
           />
         ) : null}
-        {kavElement}
+        {dockElement}
         <FloatingNavFixer navigation={navigation} />
       </>
     )
@@ -465,7 +455,7 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
             navigation={navigation}
           />
         ) : null}
-        {kavElement}
+        {dockElement}
         <FloatingNavFixer navigation={navigation} />
       </>
     )
@@ -501,7 +491,7 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
           navigation={navigation}
         />
       ) : null}
-      {kavElement}
+      {dockElement}
       <FloatingNavFixer navigation={navigation} />
     </>
   )

src/components/scenes/RampCreateScene.tsx

@@ -776,8 +776,8 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
     <SceneWrapper
       scroll
       hasTabs
-      kavProps={{
-        alwaysVisible: true,
+      dockProps={{
+        keyboardVisibleOnly: false,
         children: (
           <KavButtons
             primary={{

src/components/scenes/RampKycFormScene.tsx

@@ -193,8 +193,8 @@ export const RampKycFormScene = React.memo((props: Props) => {
       scroll
       hasTabs
       avoidKeyboard
-      kavProps={{
-        alwaysVisible: true,
+      dockProps={{
+        keyboardVisibleOnly: false,
         children: (
           <KavButtons
             primary={{

src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx

@@ -241,8 +241,8 @@ export const FiatPluginEnterAmountScene = React.memo((props: Props) => {
       keyboardShouldPersistTaps="handled"
       hasNotifications
       hasTabs
-      kavProps={{
-        alwaysVisible: true,
+      dockProps={{
+        keyboardVisibleOnly: false,
         children: (
           <KavButtons
             primary={{