From 3ea33d09418e45a49a37df7c86e05e0801a33e69 Mon Sep 17 00:00:00 2001
From: minibits-cash <mail@minibits.cash>
Date: Fri, 27 Jun 2025 01:41:04 +0200
Subject: [PATCH] Fix keyboard with modal

---
 dist/BUNDLE_ID                 |  2 +-
 src/components/BottomModal.tsx | 35 ++++++++++++++++++++--------------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/dist/BUNDLE_ID b/dist/BUNDLE_ID
index e298d3e1..55d5f96e 100644
--- a/dist/BUNDLE_ID
+++ b/dist/BUNDLE_ID
@@ -1 +1 @@
-01978f90-d6d8-77d0-b0dd-18186d4c07cc
\ No newline at end of file
+0197ae95-6c7a-78e9-96ad-cac346b60a8f
\ No newline at end of file
diff --git a/src/components/BottomModal.tsx b/src/components/BottomModal.tsx
index b3403656..89b001ce 100644
--- a/src/components/BottomModal.tsx
+++ b/src/components/BottomModal.tsx
@@ -7,13 +7,16 @@ import {
   View,
   ViewStyle,
   KeyboardAvoidingView,
-  Platform, 
+  Platform,
+  StatusBar, 
 } from "react-native"
 import { colors, useThemeColor, spacing } from "../theme"
 import { Text, TextProps } from "./Text"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { Header } from "@react-navigation/stack"
 import { moderateVerticalScale } from "@gocodingnow/rn-size-matters"
+import { KeyboardState, useAnimatedKeyboard } from "react-native-reanimated"
+import { log } from "../services"
 
 
 interface ModalProps extends ViewProps {
@@ -136,7 +139,7 @@ export function BottomModal(props: ModalProps) {
   const insets = useSafeAreaInsets()
 
   const $innerContainerStyle = [    
-    $innerContainerBase, { backgroundColor: useThemeColor('card'), paddingBottom: insets.bottom + moderateVerticalScale(40) }, $containerStyleOverride   
+    $innerContainerBase, { backgroundColor: useThemeColor('card'), paddingBottom: insets.bottom + 20 }, $containerStyleOverride   
   ]
   
   const isHeadingPresent = !!(HeadingComponent || heading || headingTx)
@@ -161,27 +164,33 @@ export function BottomModal(props: ModalProps) {
   ]
 
   // const statusBarOnModalOpen = useThemeColor('statusBarOnModalOpen')
+  const keyboard = useAnimatedKeyboard()
+  log.trace({keyboard})
 
   return (
     <View>
+      {/*<StatusBar backgroundColor={isVisible ? statusBarOnModalOpen : undefined} />*/}
     <Modal      
       isVisible={isVisible}
-      statusBarTranslucent={true}
+      statusBarTranslucent={true}     
       avoidKeyboard={true}     
       onBackdropPress={onBackdropPress}
       onBackButtonPress={onBackButtonPress}
       backdropOpacity={backdropOpacity}
-      style={[$outerContainerBase]}    
+      style={[$outerContainerBase, $containerStyleOverride]}    
       {...otherProps}
     >
-      {/*<StatusBar backgroundColor={isVisible ? statusBarOnModalOpen : undefined} />*/}
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        // style={{ flex: 1 }}
-        style={[$innerContainerBase, $innerContainerStyle]}
-        keyboardVerticalOffset={Platform.OS === 'android' ? 40 : 0} // adjust based on header height if needed
+      
+      <View        
+        style={[
+          $innerContainerBase, 
+          $innerContainerStyle, 
+          keyboard.state.value === KeyboardState.OPEN ? 
+          { marginBottom: keyboard.height.value } : 
+          {}
+        ]}      
       >
-       
+
           {HeadingComponent ||
             (isHeadingPresent && (
               <Text
@@ -219,9 +228,7 @@ export function BottomModal(props: ModalProps) {
               style={$footerStyle}
             />
           ))}
-   
-      </KeyboardAvoidingView>
-      
+      </View>
     </Modal>
     </View>    
   )