adjusting keyboard avoid

app/client/mobile/src/conversation/Conversation.styled.ts

@@ -5,6 +5,11 @@ export const styles = StyleSheet.create({
   conversation: {
     flex: 1
   },
+  avoid: {
+    width: '100%',
+    height: '30%',
+    flexShrink: 0,
+  },
   closeIcon: {
     position: 'absolute',
     top: 0,
@@ -62,6 +67,7 @@ export const styles = StyleSheet.create({
   thread: {
     display: 'flex',
     flexGrow: 1,
+    flexShrink: 1,
     minHeight: 0,
     height: '50%',
     width: '100%',

app/client/mobile/src/conversation/Conversation.tsx

@@ -34,6 +34,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
   const [ selected, setSelected ] = useState(null as null | string);
   const [ sizeMenu, setSizeMenu ] = useState(false);
   const [ colorMenu, setColorMenu ] = useState(false);
+  const [avoid, setAvoid] = useState(false);
   const thread = useRef();
   const scrolled = useRef(false);
   const contentHeight = useRef(0);
@@ -184,7 +185,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
   });
 
   return (
-    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 50}  style={styles.conversation}>
+    <View style={styles.conversation}>
       <SafeAreaView style={{ ...styles.header, flexDirection: wide ? 'row-reverse' : 'row' }}>
         <IconButton style={styles.icon} mode="contained" icon={wide ? 'close' : 'arrow-left'} size={28} onPress={onClose} />
         <View style={styles.status}>
@@ -278,10 +279,13 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
         </Animated.View>
         <TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }}
             blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send"
+            onFocus={()=>setAvoid(true)} onBlur={()=>setAvoid(false)}
             textColor={state.textColorSet ? state.textColor : undefined} outlineColor="transparent" activeOutlineColor="transparent"spellcheck={false}
             autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} placeholderTextColor={state.textColorSet ? state.textColor : undefined}
             cursorColor={state.textColorSet ? state.textColor : undefined} value={state.message} onChangeText={value => actions.setMessage(value)} />
 
+        { Platform.OS === 'ios' && avoid && (<View style={styles.avoid} />) }
+
         <View style={styles.controls}>
           <Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
           <Pressable style={styles.control} onPress={addVideo}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
@@ -336,6 +340,6 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
           </Surface>
         </View>
       </Modal>
-    </KeyboardAvoidingView>
+    </View>
   );
 }

app/client/mobile/src/session/useSession.hook.ts

@@ -1,4 +1,5 @@
 import {useEffect, useState, useContext, useRef} from 'react';
+import { AppState } from 'react-native';
 import {AppContext} from '../context/AppContext';
 import {DisplayContext} from '../context/DisplayContext';
 import {ContextType} from '../context/ContextType';
@@ -20,7 +21,7 @@ export function useSession() {
 
   useEffect(() => {
     const setStatus = (status: string) => {
-      if (status === 'disconnected') {
+      if (state.appState === 'active' && status === 'disconnected') {
         disconnecting.current = setTimeout(() => {
           updateState({ disconnected: true });
         }, 4000);
@@ -29,10 +30,17 @@ export function useSession() {
         updateState({ disconnected: false });
       }
     }
+    const setAppState = (appState: string) => {
+      updateState({ appState });
+    }
     const session = app.state.session;
     if (session) {
       session.addStatusListener(setStatus);
-      return () => session.removeStatusListener();
+      const sub = AppState.addEventListener('change', setAppState);
+      return () => {
+        session.removeStatusListener();
+        sub.remove();
+      }
     }
   }, [app.state.session]);