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

[UIKIT-2363] v1/fix/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 createStyleSheet from '../../styles/createStyleSheet';
@@ -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

@@ -91,7 +91,7 @@ export const SendbirdChatProvider = ({
     const listener = (status: AppStateStatus) => {
       // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
       if (status === 'active') sdkInstance.getConnectionState() === 'CLOSED' && sdkInstance.setForegroundState();
-      else sdkInstance.getConnectionState() === 'OPEN' && sdkInstance.setBackgroundState();
+      else if (status === 'background') sdkInstance.getConnectionState() === '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/ios/Podfile.lock

@@ -717,7 +717,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: d8d346844eca5d9120c17d441a2f38596e8ed2b9
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 5337263514dd6f09803962437687240c5dc39aa4
+  glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85
   GoogleDataTransport: 5fffe35792f8b96ec8d6775f5eccd83c998d5a3b
   GoogleUtilities: e0913149f6b0625b553d70dae12b49fc62914fd1
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
@@ -730,7 +730,7 @@ SPEC CHECKSUMS:
   Permission-PhotoLibrary: fda0fda455bebaa2602f3dfdf8296b28247c1484
   Permission-PhotoLibraryAddOnly: e5ae346a7ad3effb3f4da07220cf487ff6a2bcba
   PromisesObjC: 99b6f43f9e1044bd87a95a60beff28c2c44ddb72
-  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
+  RCT-Folly: 803a9cfd78114b2ec0f140cfa6fa2a6bafb2d685
   RCTRequired: 4bf86c70714490bca4bf2696148638284622644b
   RCTTypeSafety: c475a7059eb77935fa53d2c17db299893f057d5d
   React: f64af14e3f2c50f6f2c91a5fd250e4ff1b3c3459

sample/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/sample",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "scripts": {
     "postinstall": "patch-package",

sample/src/App.tsx

@@ -17,6 +17,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 {
@@ -67,6 +68,8 @@ const App = () => {
   );
 };
 
+// const LogView = createLogView();
+
 const Navigations = () => {
   const { currentUser } = useSendbirdChat();
   const { scheme } = useAppearance();
@@ -82,6 +85,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;