fix: chatitem scrolling out of view closing keyboard

Vali-98 · Feb 25, 2024 · 9338f33 · 9338f33
1 parent 644a2dd
commit 9338f33
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/components/ChatMenu/ChatWindow/ChatItem.tsx b/components/ChatMenu/ChatWindow/ChatItem.tsx
@@ -109,7 +109,12 @@ const ChatItem: React.FC<ChatItemProps> = ({
 
                     {showEditor && (
                         <View>
-                            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    marginBottom: 2,
+                                }}>
                                 {id !== 0 && (
                                     <EditorButton name="delete" onPress={handleDeleteMessage} />
                                 )}
@@ -129,6 +134,7 @@ const ChatItem: React.FC<ChatItemProps> = ({
                                     onChangeText={setPlaceholderText}
                                     textBreakStrategy="simple"
                                     multiline
+                                    autoFocus
                                 />
                             </View>
                         </View>

diff --git a/components/ChatMenu/ChatWindow/ChatWindow.tsx b/components/ChatMenu/ChatWindow/ChatWindow.tsx
@@ -1,6 +1,6 @@
-import { StyleSheet, KeyboardAvoidingView, FlatList } from 'react-native'
+import { StyleSheet, FlatList } from 'react-native'
 import { ChatItem } from './ChatItem'
-import { Chats, Color, Global } from '@globals'
+import { Chats, Global } from '@globals'
 import { useMMKVBoolean, useMMKVString } from 'react-native-mmkv'
 import { useEffect, useRef } from 'react'
 
@@ -46,16 +46,17 @@ const ChatWindow = () => {
     }
 
     return (
-        <KeyboardAvoidingView style={styles.chatHistory}>
-            <FlatList
-                ref={flatListRef}
-                inverted
-                windowSize={3}
-                data={getItems()}
-                keyExtractor={(item) => item.key.toString()}
-                renderItem={renderItems}
-            />
-        </KeyboardAvoidingView>
+        <FlatList
+            style={styles.chatHistory}
+            ref={flatListRef}
+            keyboardShouldPersistTaps={'handled'}
+            removeClippedSubviews={false}
+            inverted
+            windowSize={3}
+            data={getItems()}
+            keyExtractor={(item) => item.key.toString()}
+            renderItem={renderItems}
+        />
     )
 }