Remove backdrop from bottom modal

dist/BUNDLE_ID

@@ -1 +1 @@
-0197ae95-6c7a-78e9-96ad-cac346b60a8f
+0197aee1-212f-7575-943f-45b6c5bcb27a

src/components/BottomModal.tsx

@@ -113,7 +113,7 @@ export function BottomModal(props: ModalProps) {
     isVisible = true,    
     onBackdropPress,
     onBackButtonPress,
-    backdropOpacity = 0.4, // if changed, statusBarOnModalOpen theme needs to be adjusted  
+    backdropOpacity = 0, // if changed, statusBarOnModalOpen theme needs to be adjusted  
     content,
     contentTx,
     contentTxOptions,
@@ -164,30 +164,31 @@ export function BottomModal(props: ModalProps) {
   ]
 
   // const statusBarOnModalOpen = useThemeColor('statusBarOnModalOpen')
-  const keyboard = useAnimatedKeyboard()
-  log.trace({keyboard})
+  // const keyboard = useAnimatedKeyboard()
+  //log.trace({keyboard})
 
   return (
-    <View>
-      {/*<StatusBar backgroundColor={isVisible ? statusBarOnModalOpen : undefined} />*/}
-    <Modal      
-      isVisible={isVisible}
-      statusBarTranslucent={true}     
-      avoidKeyboard={true}     
-      onBackdropPress={onBackdropPress}
-      onBackButtonPress={onBackButtonPress}
-      backdropOpacity={backdropOpacity}
-      style={[$outerContainerBase, $containerStyleOverride]}    
-      {...otherProps}
-    >
+    <View>   
+      <Modal      
+        isVisible={isVisible}
+        // statusBarTranslucent={true}  // makes the modal hide behind the keyboard if open
+        
+        avoidKeyboard={true}     
+        onBackdropPress={onBackdropPress}
+        onBackButtonPress={onBackButtonPress}
+        backdropOpacity={backdropOpacity}
+        
+        style={[$outerContainerBase, $containerStyleOverride]}
+        {...otherProps}
+      >
       
       <View        
         style={[
           $innerContainerBase, 
           $innerContainerStyle, 
-          keyboard.state.value === KeyboardState.OPEN ? 
-          { marginBottom: keyboard.height.value } : 
-          {}
+          // keyboard.state.value === KeyboardState.OPEN ? // does not work
+          // { marginBottom: keyboard.height.value } : 
+          //{}
         ]}      
       >
 

src/components/Header.tsx

@@ -158,7 +158,7 @@ interface HeaderActionProps {
 function FocusAwareStatusBar(props: StatusBarProps) {
   const isFocused = useIsFocused();
 
-  return isFocused ? <StatusBar {...props} /> : null;
+  return isFocused ? <StatusBar translucent={true} {...props} /> : null;
 }
 
 /**
@@ -205,9 +205,7 @@ export function Header(props: HeaderProps) {
 
   return (
     <View style={[$container, $containerInsets, { backgroundColor }, $containerStyleOverride]}>
-      <FocusAwareStatusBar
-        backgroundColor={backgroundColor}
-        // barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}        
+      <FocusAwareStatusBar            
         barStyle = 'light-content'
         {...StatusBarProps}         
       />

src/components/Loading.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react'
-import { StyleSheet, View, ActivityIndicator, ViewProps, TextStyle, ColorValue, ViewStyle, StatusBar } from 'react-native'
+import { StyleSheet, View, ActivityIndicator, ViewProps, TextStyle, ColorValue, ViewStyle } from 'react-native'
 import { useThemeColor, colors } from '../theme'
 import { Text } from './Text'
 import { spacing } from '../theme'
 
 export function Loading(props: ViewProps & { statusMessage?: string, textStyle?: TextStyle, shiftedUp?: boolean }) {
-  //const statusBarOnModalOpen = useThemeColor('statusBarOnLoading')
   const loadingIndicator = useThemeColor('loadingIndicator')
   return (
     <View style={[StyleSheet.absoluteFillObject, $loading(props?.shiftedUp ?? false), props.style]}>
-      {/*<StatusBar backgroundColor={props.style &&  props.style.backgroundColor ? props.style.backgroundColor  : statusBarOnModalOpen } />*/}
       <ActivityIndicator color={loadingIndicator} animating size="large" />
       {props.statusMessage && (<Text style={[{opacity: 1}, props.textStyle]} text={props.statusMessage}/>)}
     </View>