improved handling of virtual keyboard

app/mobile/ios/Podfile.lock

@@ -250,8 +250,6 @@ PODS:
     - RCTTypeSafety
     - React-Core
     - ReactCommon/turbomodule/core
-  - react-native-slider (4.3.2):
-    - React-Core
   - react-native-sqlite-storage (6.0.1):
     - React-Core
   - react-native-video (5.2.1):
@@ -431,7 +429,6 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
-  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-sqlite-storage (from `../node_modules/react-native-sqlite-storage`)
   - react-native-video (from `../node_modules/react-native-video`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -518,8 +515,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-document-picker"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
-  react-native-slider:
-    :path: "../node_modules/@react-native-community/slider"
   react-native-sqlite-storage:
     :path: "../node_modules/react-native-sqlite-storage"
   react-native-video:
@@ -591,7 +586,6 @@ SPEC CHECKSUMS:
   React-logger: 15c734997c06fe9c9b88e528fb7757601e7a56df
   react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
   react-native-safe-area-context: b456e1c40ec86f5593d58b275bd0e9603169daca
-  react-native-slider: e540525ea731783850802b7af457d8551edb0711
   react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261
   react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253
   React-perflogger: 367418425c5e4a9f0f80385ee1eaacd2a7348f8e

app/mobile/src/session/conversation/Conversation.jsx

@@ -1,4 +1,4 @@
-import { Platform, TextInput, View, TouchableOpacity, Text, } from 'react-native';
+import { KeyboardAvoidingView, Platform, TextInput, View, TouchableOpacity, Text, } from 'react-native';
 import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';
 import { memo, useState, useRef, useEffect } from 'react';
 import { useConversation } from './useConversation.hook';
@@ -56,8 +56,8 @@ export function ConversationBody() {
   const noop = () => {};
 
   return (
-    <View style={styles.topics}>
-      <FlatList
+    <KeyboardAvoidingView style={styles.thread} behavior="padding" keyboardVerticalOffset="100">
+      <FlatList style={styles.topics}
         ref={ref}
         data={state.topics}
         onMomentumScrollEnd={ Platform.OS === 'ios' ? noop : actions.unlatch }
@@ -77,7 +77,7 @@ export function ConversationBody() {
           )} 
         </View>
       </View>
-    </View>
+    </KeyboardAvoidingView>
   );
 }
 

app/mobile/src/session/conversation/Conversation.styled.js

@@ -43,9 +43,15 @@ export const styles = StyleSheet.create({
   action: {
     paddingLeft: 8,
   },
+  thread: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+  },
   topics: {
     flexShrink: 1,
     flexGrow: 1,
+    minHeight: 0,
   },
   close: {
     flexGrow: 1,

app/mobile/src/session/conversation/addTopic/AddTopic.jsx

@@ -16,6 +16,7 @@ import ColorPicker from 'react-native-wheel-color-picker'
 export function AddTopic() {
 
   const { state, actions } = useAddTopic();
+  const message = useRef();
 
   const addImage = async () => {
     try {
@@ -29,6 +30,7 @@ export function AddTopic() {
 
   const sendMessage = async () => {
     try {
+      message.current.blur();
       await actions.addTopic();
     }
     catch (err) {
@@ -114,7 +116,8 @@ export function AddTopic() {
           renderItem={renderAsset}
         />
       )}
-      <TextInput style={styles.input} value={state.message} onChangeText={actions.setMessage}
+      <TextInput style={styles.input} value={state.message} onChangeText={actions.setMessage} ref={message}
+          blurOnSubmit="true" onSubmitEditing={sendMessage} returnKeyType="send"
           autoCapitalize="sentences" placeholder="New Message" multiline={true} />
       <View style={styles.addButtons}>
         <TouchableOpacity style={styles.addButton} onPress={addImage}>

app/mobile/src/session/profile/Profile.jsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { Modal, Alert, TextInput, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native';
+import { KeyboardAvoidingView, Modal, Alert, TextInput, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native';
 import { styles } from './Profile.styled';
 import { useProfile } from './useProfile.hook';
 import { Logo } from 'utils/Logo';
@@ -174,7 +174,7 @@ export function Profile() {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideBlockedCards}
       >
-        <View style={styles.editWrapper}>
+        <KeyboardAvoidingView behavior="padding" style={styles.editWrapper}>
           <View style={styles.editContainer}>
             <Text style={styles.editHeader}>Blocked Contacts:</Text>
             <View style={styles.editList}>
@@ -186,7 +186,7 @@ export function Profile() {
               </TouchableOpacity>
             </View>
           </View>
-        </View>
+        </KeyboardAvoidingView>
       </Modal>
       <Modal
         animationType="fade"
@@ -195,7 +195,7 @@ export function Profile() {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideBlockedChannels}
       >
-        <View style={styles.editWrapper}>
+        <KeyboardAvoidingView behavior="padding" style={styles.editWrapper}>
           <View style={styles.editContainer}>
             <Text style={styles.editHeader}>Blocked Topics:</Text>
             <View style={styles.editList}>
@@ -207,7 +207,7 @@ export function Profile() {
               </TouchableOpacity>
             </View>
           </View>
-        </View>
+        </KeyboardAvoidingView>
       </Modal>
       <Modal
         animationType="fade"
@@ -216,7 +216,7 @@ export function Profile() {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideDetailEdit}
       >
-        <View style={styles.editWrapper}>
+        <KeyboardAvoidingView behavior="padding" style={styles.editWrapper}>
           <View style={styles.editContainer}>
             <Text style={styles.editHeader}>Edit Details:</Text>
             <View style={styles.inputField}>
@@ -240,7 +240,7 @@ export function Profile() {
               </TouchableOpacity>
             </View>
           </View>
-        </View>
+        </KeyboardAvoidingView>
       </Modal>
       <Modal
         animationType="fade"
@@ -249,7 +249,7 @@ export function Profile() {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideLoginEdit}
       >
-        <View style={styles.editWrapper}>
+        <KeyboardAvoidingView behavior="padding" style={styles.editWrapper}>
           <View style={styles.editContainer}>
             <Text style={styles.editHeader}>Change Login:</Text>
             <View style={styles.inputField}>
@@ -314,7 +314,7 @@ export function Profile() {
               )}
             </View>
           </View>
-        </View>
+        </KeyboardAvoidingView>
       </Modal>
     </ScrollView>
   )