GIFT CHAT doesn't actualize messages state when using Drawer Navigator

[JymmyxDanger]

Issue Description

Hi! I have an issue with Gifted Chat when using Drawer Navigator on a Chat Project . If you reproduce the link below by replacing Tab Navigator in the Project by Drawer Navigator, you will see that messages states doesn't work correctly. Thanks for your help!

Steps to Reproduce / Code Snippets

https://github.com/3stbn/wp-clone/tree/main

Expected Results

https://user-images.githubusercontent.com/95508068/167968212-c46a5493-19c9-4ccd-84de-a130bcc73ffd.mp4

Actual Results

https://user-images.githubusercontent.com/95508068/167968383-cb43882f-f762-41f5-ad94-75421abb5abd.mp4

Additional Information

• Nodejs version: 16
• React version: 17.0.1
• React Native version: 0.64
• react-native-gifted-chat version: 0.16.3
• Platform(s) (iOS, Android, or both?): both
• TypeScript version: 4.3.5

[fukemy]

may be your logic code problem, could u provide some codes?

[JymmyxDanger]

you can refer to : https://github.com/3stbn/wp-clone/tree/main

//App.js import Chats from "./screens/Chats"; import Chat from './screens/Chat' import ChatHeader from './components/ChatHeader' import { Homming } from "./screens/Homing";

function Home({navigation}) { return ( <Drawer.Navigator drawerContent={props => <Chats {...props} />} screenOptions={{ headerShown: false, }} initialRouteName={"Homing"} > <Drawer.Screen name="Homing" component={Homming} /> <Drawer.Screen name="chat" component={Chat} options={{headerTitle: (props) => <ChatHeader {...props} />}}/> </Drawer.Navigator> ); };

When I tap on a room on Chat List, messages of this room must charge I Use a key in SafeAreaView to index each room and refresh state if I press another room in Chat List , but this doesn't work. I am using firebase for backend! //Chat.js ...................... .............. ......... useEffect(() => {

const unsubscribe = onSnapshot(roomMessagesRef, (querySnapshot) => { const messagesFirestore = querySnapshot .docChanges() .filter(({ type }) => type === "added") .map(({ doc }) => { const message = doc.data(); return { ...message, createdAt: message.createdAt.toDate(), }; }) .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()); appendMessages(messagesFirestore);

}); return () => unsubscribe();

}, [ ]);

const appendMessages = useCallback( (messages) => { messages.pending = true; setMessages((previousMessages) => GiftedChat.append(previousMessages, messages) ); }, [messages] ); //......

return (

<SafeAreaView
  style={{ flex: 1 }}
 key={roomId}
>
  
    <GiftedChat
    
    onLongPress={onLongPress}
    placeholder={'Message...'}
    renderTicks ={renderTicks } 
    keyboardShouldPersistTaps={'never'}
      onSend={onSend}
      messages={messages}
      user={senderUser}
      renderAvatar={null}

//....................................... ................ .....