Merge pull request #45 from sendbird/fix/auto-resend-ios

[UIKIT-2363] v2/hotfix/auto resend ios

Author: bang9

packages/uikit-react-native-foundation/src/ui/Toast/index.tsx

@@ -1,5 +1,5 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, KeyboardAvoidingView, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Icon from '../../components/Icon';
@@ -22,10 +22,10 @@ type Props = React.PropsWithChildren<{
 
 const useOpacity = () => {
   const opacity = useRef(new Animated.Value(0)).current;
-  const transition = useCallback(
-    (value: number) => Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start(),
-    [],
-  );
+  const transition = (value: number) => {
+    Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start();
+  };
+
   return {
     opacity,
     show: () => transition(1),
@@ -87,9 +87,15 @@ export const ToastProvider = ({
   return (
     <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>
       {children}
-      <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>
-        {state.text}
-      </Toast>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'position' : undefined}
+        keyboardVerticalOffset={-bottom}
+        pointerEvents={'none'}
+      >
+        <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>
+          {state.text}
+        </Toast>
+      </KeyboardAvoidingView>
     </ToastContext.Provider>
   );
 };

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

@@ -96,7 +96,7 @@ export const SendbirdChatProvider = ({
     const listener = (status: AppStateStatus) => {
       // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
       if (status === 'active') sdkInstance.connectionState === 'CLOSED' && sdkInstance.setForegroundState();
-      else sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
+      else if (status === 'background') sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
     };
 
     const subscriber = AppState.addEventListener('change', listener);

sample/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AppRegistry, LogBox } from 'react-native';
 import { withTouchReload } from 'react-native-touch-reload';
+// import Sendbird from 'sendbird';
 
 import { Logger } from '@sendbird/uikit-utils';
 

sample/src/App.tsx

@@ -18,6 +18,7 @@ import {
   SetSendbirdSDK,
 } from './factory';
 import useAppearance from './hooks/useAppearance';
+// import createLogView from './libs/logView';
 import { Routes, navigationRef } from './libs/navigation';
 import { onForegroundAndroid, onForegroundIOS } from './libs/notification';
 import {
@@ -68,6 +69,8 @@ const App = () => {
   );
 };
 
+// const LogView = createLogView();
+
 const Navigations = () => {
   const { sdk, currentUser } = useSendbirdChat();
   const { scheme } = useAppearance();
@@ -89,6 +92,7 @@ const Navigations = () => {
 
   return (
     <NavigationContainer ref={navigationRef} theme={isLightTheme ? DefaultTheme : DarkTheme}>
+      {/*<LogView />*/}
       <RootStack.Navigator screenOptions={{ headerShown: false }}>
         {!currentUser ? (
           <RootStack.Screen name={Routes.SignIn} component={SignInScreen} />

sample/src/libs/logView.tsx

@@ -0,0 +1,86 @@
+import format from 'date-fns/format';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Animated, ScrollView, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
+
+interface Log {
+  type: 'log' | 'warn' | 'error' | 'info';
+  data: string;
+  timestamp: number;
+}
+
+const TypeColor: Record<Log['type'], string> = {
+  log: '#2d2d2d',
+  warn: '#ffc443',
+  error: '#ff4332',
+  info: '#0773ff',
+};
+
+const createLogView = () => {
+  return () => {
+    const [logs, setLogs] = useState<Log[]>([]);
+    const [isCollapsed, setIsCollapsed] = useState(false);
+
+    useLayoutEffect(() => {
+      (['log', 'warn', 'error', 'info'] as const).forEach((type) => {
+        const origin = console[type];
+
+        console[type] = function (...args: unknown[]) {
+          origin(...args);
+          setLogs((prev) => [
+            ...prev,
+            {
+              type,
+              data: args.join(','),
+              timestamp: Date.now(),
+            },
+          ]);
+        };
+      });
+    }, []);
+
+    useEffect(() => {
+      Animated.timing(animated, { toValue: isCollapsed ? 0 : 1, duration: 250, useNativeDriver: false }).start();
+    }, [isCollapsed]);
+
+    const animated = useRef(new Animated.Value(0)).current;
+
+    const { width } = useWindowDimensions();
+
+    return (
+      <Animated.View
+        style={{
+          position: 'absolute',
+          zIndex: 999,
+          backgroundColor: '#969696',
+          width: animated.interpolate({ extrapolate: 'clamp', inputRange: [0, 1], outputRange: [70, width] }),
+          height: animated.interpolate({ extrapolate: 'clamp', inputRange: [0, 1], outputRange: [70, width] }),
+          bottom: animated.interpolate({ extrapolate: 'clamp', inputRange: [0, 1], outputRange: [150, 0] }),
+          right: animated.interpolate({ extrapolate: 'clamp', inputRange: [0, 1], outputRange: [15, 0] }),
+        }}
+      >
+        <TouchableOpacity
+          style={{ paddingHorizontal: 8, paddingVertical: 2, backgroundColor: 'orange', alignItems: 'center' }}
+          onPress={() => setIsCollapsed((prev) => !prev)}
+        >
+          <Text>{isCollapsed ? 'Expand' : 'Collapse'}</Text>
+        </TouchableOpacity>
+        <ScrollView>
+          {logs.map(({ type, data, timestamp }, idx) => {
+            return (
+              <View
+                key={idx}
+                style={{ marginBottom: 1, backgroundColor: TypeColor[type], paddingHorizontal: 4, paddingVertical: 2 }}
+              >
+                <Text style={{ color: 'white' }}>
+                  {format(timestamp, 'p')} / {data}
+                </Text>
+              </View>
+            );
+          })}
+        </ScrollView>
+      </Animated.View>
+    );
+  };
+};
+
+export default createLogView;