diff --git a/packages/uikit-react-native-foundation/src/ui/Toast/index.tsx b/packages/uikit-react-native-foundation/src/ui/Toast/index.tsx
index fa18d369..24beb4f2 100644
--- a/packages/uikit-react-native-foundation/src/ui/Toast/index.tsx
+++ b/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 (
text && setState({ text, type, visible: true }) }}>
{children}
-
- {state.text}
-
+
+
+ {state.text}
+
+
);
};
diff --git a/packages/uikit-react-native/src/contexts/SendbirdChat.tsx b/packages/uikit-react-native/src/contexts/SendbirdChat.tsx
index 06a0c86c..c8ed7cb2 100644
--- a/packages/uikit-react-native/src/contexts/SendbirdChat.tsx
+++ b/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);
diff --git a/sample/index.js b/sample/index.js
index 9f43926e..1c9267ea 100644
--- a/sample/index.js
+++ b/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';
diff --git a/sample/src/App.tsx b/sample/src/App.tsx
index 71e44ddd..5786866d 100644
--- a/sample/src/App.tsx
+++ b/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 (
+ {/**/}
{!currentUser ? (
diff --git a/sample/src/libs/logView.tsx b/sample/src/libs/logView.tsx
new file mode 100644
index 00000000..2e7bc829
--- /dev/null
+++ b/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: '#2d2d2d',
+ warn: '#ffc443',
+ error: '#ff4332',
+ info: '#0773ff',
+};
+
+const createLogView = () => {
+ return () => {
+ const [logs, setLogs] = useState([]);
+ 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 (
+
+ setIsCollapsed((prev) => !prev)}
+ >
+ {isCollapsed ? 'Expand' : 'Collapse'}
+
+
+ {logs.map(({ type, data, timestamp }, idx) => {
+ return (
+
+
+ {format(timestamp, 'p')} / {data}
+
+
+ );
+ })}
+
+
+ );
+ };
+};
+
+export default createLogView;