Merge pull request #60 from sendbird/fix/v1/app-state

Fix/v1/support compatibility for removing AppState listener under 0.65

Author: bang9

packages/uikit-react-native/src/contexts/SendbirdChat.tsx

@@ -1,9 +1,8 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { AppState, AppStateStatus } from 'react-native';
+import React, { useCallback, useState } from 'react';
 
 import { useAppFeatures } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdUser } from '@sendbird/uikit-utils';
-import { useForceUpdate } from '@sendbird/uikit-utils';
+import { useAppState, useForceUpdate } from '@sendbird/uikit-utils';
 
 import type { FileType } from '../platform/types';
 
@@ -87,16 +86,11 @@ export const SendbirdChatProvider = ({
     [sdkInstance, appFeatures.deliveryReceiptEnabled],
   );
 
-  useEffect(() => {
-    const listener = (status: AppStateStatus) => {
-      // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
-      if (status === 'active') sdkInstance.getConnectionState() === 'CLOSED' && sdkInstance.setForegroundState();
-      else if (status === 'background') sdkInstance.getConnectionState() === 'OPEN' && sdkInstance.setBackgroundState();
-    };
-
-    const subscriber = AppState.addEventListener('change', listener);
-    return () => subscriber.remove();
-  }, [sdkInstance]);
+  useAppState('change', (status) => {
+    // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
+    if (status === 'active') sdkInstance.getConnectionState() === 'CLOSED' && sdkInstance.setForegroundState();
+    else if (status === 'background') sdkInstance.getConnectionState() === 'OPEN' && sdkInstance.setBackgroundState();
+  });
 
   const value: Context = {
     sdk: sdkInstance,

packages/uikit-react-native/src/fragments/createGroupChannelListFragment.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
-import { AppState } from 'react-native';
+import React from 'react';
 
 import { useGroupChannelList } from '@sendbird/uikit-chat-hooks';
-import { Logger, PASS, useFreshCallback } from '@sendbird/uikit-utils';
+import { Logger, PASS, useAppState, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import GroupChannelPreviewContainer from '../containers/GroupChannelPreviewContainer';
@@ -35,12 +34,9 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
     });
 
     if (features.deliveryReceiptEnabled) {
-      useEffect(() => {
-        const listener = AppState.addEventListener('change', (status) => {
-          if (status === 'active') groupChannels.forEach(markAsDeliveredWithChannel);
-        });
-        return () => listener.remove();
-      }, []);
+      useAppState('change', (status) => {
+        if (status === 'active') groupChannels.forEach(markAsDeliveredWithChannel);
+      });
     }
 
     const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useFreshCallback(

packages/uikit-utils/package.json

@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@types/react": "*",
+    "@types/react-native": "*",
     "react": "17.0.2",
     "react-native": "0.66.4",
     "react-native-builder-bob": "^0.18.0",

packages/uikit-utils/src/hooks/react-native.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+import { AppState, AppStateEvent, AppStateStatus } from 'react-native';
+
+type AppStateListener = (status: AppStateStatus) => void;
+
+export const useAppState = (type: AppStateEvent, listener: AppStateListener) => {
+  const callbackRef = useRef<AppStateListener>(listener);
+  callbackRef.current = listener;
+
+  useEffect(() => {
+    const eventListener = (state: AppStateStatus) => callbackRef.current(state);
+    const subscriber = AppState.addEventListener(type, eventListener);
+
+    return () => {
+      // @ts-ignore
+      if (subscriber?.remove) {
+        subscriber.remove();
+      }
+      // @ts-ignore
+      else if (AppState.removeEventListener) {
+        // @ts-ignore
+        AppState.removeEventListener(type, eventListener);
+      }
+    };
+  }, []);
+};

packages/uikit-utils/src/index.ts

@@ -15,6 +15,7 @@ export {
 } from './shared/regex';
 
 export * from './hooks';
+export * from './hooks/react-native';
 export * from './ui-format/groupChannel';
 export * from './ui-format/common';
 export * from './sendbird/channel';