Merge pull request #58 from sendbird/fix/new-message-update

[UIKIT-2874] Fix/new message button is disappeared when loading prev messages

Author: bang9

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/reducer.ts

@@ -57,10 +57,6 @@ const defaultReducer = ({ ...draft }: State, action: Action) => {
           .forEach((m) => delete draft[key][m.reqId]);
       }
 
-      if (action.type === 'update_messages') {
-        draft['nextMessageMap'] = {};
-      }
-
       return draft;
     }
     case 'delete_messages':

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

@@ -39,12 +39,12 @@ const useKeyboardStatus = () => {
         setKeyboardStatus({ visible: true, height, bottomSpace });
       }),
 
-      Keyboard.addListener(hideEvent, (event) => {
+      Keyboard.addListener(hideEvent, () => {
         const height = 0;
         const bottomSpace = Platform.select({ default: height });
-        const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
+        // const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
 
-        nextLayoutAnimation(event);
+        // nextLayoutAnimation(event);
         setKeyboardStatus({ visible: false, height, bottomSpace });
       }),
     ];

packages/uikit-utils/src/hooks/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DependencyList } from 'react';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type Destructor = () => void;
 type AsyncEffectCallback = () => void | Destructor | Promise<void> | Promise<Destructor>;
@@ -72,3 +73,31 @@ export const useFreshCallback = <T extends (...args: any[]) => any>(callback: T)
   ref.current = callback;
   return useCallback(((...args) => ref.current(...args)) as T, []);
 };
+
+type EdgePaddingMap = {
+  left: 'paddingLeft';
+  right: 'paddingRight';
+  top: 'paddingTop';
+  bottom: 'paddingBottom';
+};
+const edgePaddingMap: EdgePaddingMap = {
+  left: 'paddingLeft',
+  right: 'paddingRight',
+  top: 'paddingTop',
+  bottom: 'paddingBottom',
+};
+export const useSafeAreaPadding = <
+  T extends keyof EdgeInsets,
+  Result extends { [key in EdgePaddingMap[T]]: EdgeInsets[T] },
+>(
+  edges: T[],
+): Result => {
+  const safeAreaInsets = useSafeAreaInsets();
+  return useMemo(() => {
+    return edges.reduce((map, edge) => {
+      const paddingKey = edgePaddingMap[edge];
+      map[paddingKey] = safeAreaInsets[edge];
+      return map;
+    }, {} as { [key in EdgePaddingMap[T]]: EdgeInsets[T] });
+  }, edges) as Result;
+};