Merge pull request #759 from GetStream/typing-stop-background

fix: Clean user's typing state when app goes to background

Author: tsirlucas

package/src/components/Channel/Channel.tsx

@@ -9,9 +9,11 @@ import {
   MessageResponse,
   SendMessageAPIResponse,
   StreamChat,
+  Event as StreamEvent,
   Message as StreamMessage,
 } from 'stream-chat';
 
+import { useAppStateListener } from '../../hooks/useAppStateListener';
 import { useCreateChannelContext } from './hooks/useCreateChannelContext';
 import { useCreateInputMessageInputContext } from './hooks/useCreateInputMessageInputContext';
 import { useCreateMessagesContext } from './hooks/useCreateMessagesContext';
@@ -608,6 +610,22 @@ const ChannelWithContext = <
     }
   }, [threadPropsExists]);
 
+  const handleAppBackground = useCallback(() => {
+    if (channel) {
+      channel.sendEvent({ parent_id: thread?.id, type: 'typing.stop' } as StreamEvent<
+        At,
+        Ch,
+        Co,
+        Ev,
+        Me,
+        Re,
+        Us
+      >);
+    }
+  }, [thread?.id, channelId]);
+
+  useAppStateListener(undefined, handleAppBackground);
+
   /**
    * CHANNEL CONSTANTS
    */

package/src/components/Chat/hooks/useIsOnline.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { useAppStateListener } from './useAppStateListener';
+import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { NetInfo } from '../../../native';
 
 import type { NetInfoSubscription } from '@react-native-community/netinfo';

package/src/components/index.ts

@@ -70,7 +70,6 @@ export * from './ChannelPreview/hooks/useChannelPreviewDisplayPresence';
 export * from './ChannelPreview/hooks/useLatestMessagePreview';
 
 export * from './Chat/Chat';
-export * from './Chat/hooks/useAppStateListener';
 export * from './Chat/hooks/useCreateChatContext';
 export * from './Chat/hooks/useIsOnline';
 export * from './Chat/hooks/useMutedUsers';

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useAppStateListener';

package/src/components/Chat/hooks/useAppStateListener.ts renamed to package/src/hooks/useAppStateListener.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './hooks';
 export { registerNativeHandlers, NetInfo } from './native';
 export * from './contexts';
 export * from './emoji-data/compiled';