@amityco/react-native-social-uikit 4.0.0-1fa7ca8.0 → 4.0.0-3473a9ea.0

package/lib/typescript/src/v4/stores/slices/toast.d.ts

@@ -4,6 +4,7 @@ type ToastState = {
     message: string;
     type: 'failed' | 'success' | 'informative' | 'loading';
     duration?: number;
+    bottomPosition?: number;
 };
 declare const toastSlice: import("@reduxjs/toolkit").Slice<ToastState, {
     showToast: (state: import("immer/dist/internal").WritableDraft<ToastState>, action: PayloadAction<ToastState>) => void;

package/lib/typescript/src/v4/stores/slices/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/stores/slices/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,kBAAkB,CAAC;AAO9D,KAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAQF,QAAA,MAAM,UAAU;wFAIe,aAAa,CAAC,UAAU,CAAC;;WAatD,CAAC;AAEH,eAAe,UAAU,CAAC;AAE1B,eAAO,MAAM,QAAQ;;;;;;yBAOS,UAAU;;;;mCAEA,KAAK;CAW5C,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/stores/slices/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,kBAAkB,CAAC;AAO9D,KAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AASF,QAAA,MAAM,UAAU;wFAIe,aAAa,CAAC,UAAU,CAAC;;WAgBtD,CAAC;AAEH,eAAe,UAAU,CAAC;AAE1B,eAAO,MAAM,QAAQ;;;;;;yBAOS,UAAU;;;;mCAEA,KAAK;CAW5C,CAAC"}

package/lib/typescript/src/v4/utils/permissions.d.ts

@@ -3,5 +3,5 @@ export declare const checkEditCommunityPermission: (communityId?: string) => boo
 export declare const checkEditRolePermission: (communityId: string) => boolean;
 export declare const isModerator: (roles?: string[]) => boolean;
 export declare const isAdmin: (roles?: string[]) => boolean;
-export declare const checkStoryPermission: (client: Amity.Client, communityId: string) => boolean;
+export declare const checkStoryPermission: (client: Amity.Client | null | undefined, communityId?: string) => boolean;
 //# sourceMappingURL=permissions.d.ts.map

package/lib/typescript/src/v4/utils/permissions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"permissions.d.ts","sourceRoot":"","sources":["../../../../../src/v4/utils/permissions.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,GAAI,aAAa,MAAM,YAOjE,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,cAAc,MAAM,YAOhE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,aAAa,MAAM,YAQ1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAO,MAAM,EAAO,YAW/C,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,QAAO,MAAM,EAAO,YAI3C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,KAAK,CAAC,MAAM,EACpB,aAAa,MAAM,YASpB,CAAC"}
+{"version":3,"file":"permissions.d.ts","sourceRoot":"","sources":["../../../../../src/v4/utils/permissions.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,GAAI,aAAa,MAAM,YAOjE,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,cAAc,MAAM,YAOhE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,aAAa,MAAM,YAQ1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAO,MAAM,EAAO,YAW/C,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,QAAO,MAAM,EAAO,YAI3C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,KAAK,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,EACvC,cAAc,MAAM,KACnB,OAaF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.0.0-1fa7ca8.0",
+  "version": "4.0.0-3473a9ea.0",
   "description": "Social UIKit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -57,10 +57,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@amityco/ts-sdk-react-native": "^7.9.2",
+    "@amityco/ts-sdk-react-native": "^7.17.0",
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
+    "@livekit/react-native": "^2.9.6",
+    "@livekit/react-native-webrtc": "^137.0.2",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.4.4",
     "@react-native-community/eslint-config": "^3.0.2",
@@ -84,6 +86,7 @@
     "husky": "^8.0.0",
     "jest": "^29.6.3",
     "lint-staged": "^15.2.0",
+    "livekit-client": "^2.17.0",
     "pod-install": "^0.1.0",
     "prettier": "2.8.8",
     "react": "18.3.1",
@@ -113,7 +116,9 @@
     "@types/react": "18.2.37"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk-react-native": "^7.9.2",
+    "@amityco/ts-sdk-react-native": "^7.17.0",
+    "@livekit/react-native": "^2.9.6",
+    "@livekit/react-native-webrtc": "^137.0.2",
     "@react-native-async-storage/async-storage": "^1.19.3",
     "@react-native-community/netinfo": "^11.3.1",
     "@react-native-firebase/app": "^20.1.0",
@@ -121,6 +126,7 @@
     "@react-navigation/native": "^7.1.8",
     "@react-navigation/native-stack": "^7.3.12",
     "@react-navigation/stack": "^7.3.1",
+    "livekit-client": "^2.17.0",
     "react": "*",
     "react-native": "*",
     "react-native-compressor": "^1.13.0",
@@ -137,7 +143,7 @@
     "react-native-vision-camera": "^4.7.1"
   },
   "engines": {
-    "node": ">= 18.0.0"
+    "node": ">= 20.0.0"
   },
   "jest": {
     "preset": "react-native",

package/src/components/AddMembersModal/index.tsx

@@ -1,4 +1,7 @@
-import { UserRepository } from '@amityco/ts-sdk-react-native';
+import {
+  SearchUsersByEnum,
+  UserRepository,
+} from '@amityco/ts-sdk-react-native';
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import {
   TouchableOpacity,
@@ -54,7 +57,12 @@ const AddMembersModal = ({
   const queryAccounts = useCallback(
     (text: string = '') => {
       const unsubscribe = UserRepository.searchUserByDisplayName(
-        { displayName: text, limit: 20 },
+        {
+          displayName: text,
+          limit: 20,
+          searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+          matchType: UserRepository.AmityUserSearchMatchType.PARTIAL,
+        },
         ({ data, onNextPage }) => {
           userNextPageRef.current = onNextPage;
           setSectionedGroupUserList(null);

package/src/components/CreatePostChooseTargetModal/CreatePostChooseTargetModal.tsx

@@ -126,7 +126,7 @@ const CreatePostChooseTargetModal = ({
     const targetscreen = () => {
       if (postType === 'post') return 'CreatePost';
       if (postType === 'poll') return 'CreatePoll';
-      // if (postType === 'livestream') return 'CreateLivestream';
+      if (postType === 'room') return 'CreateLivestream';
       return null;
     };
     navigation.navigate(targetscreen(), {

package/src/components/CustomText/index.tsx

@@ -9,13 +9,14 @@ interface CustomTextProps {
   ellipsizeMode?: 'tail' | 'head' | 'middle' | 'clip' | undefined;
 }
 
-const CustomText: React.FC<CustomTextProps> = (
-  { children, style, numberOfLines, ellipsizeMode = 'tail' }: CustomTextProps,
-  props
-) => {
+const CustomText: React.FC<CustomTextProps> = ({
+  children,
+  style,
+  numberOfLines,
+  ellipsizeMode = 'tail',
+}) => {
   return (
     <Text
-      {...props}
       style={[styles.text, style]}
       numberOfLines={numberOfLines}
       ellipsizeMode={ellipsizeMode}

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,84 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { errorPage } from '../../v4/assets/icons';
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  onReset?: () => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  handleReset = (): void => {
+    this.setState({ hasError: false, error: null });
+    this.props.onReset?.();
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <View style={styles.container}>
+          <SvgXml xml={errorPage('#EBECEF')} />
+          <View>
+            <Text style={styles.title}>Something went wrong</Text>
+
+            <Text style={styles.description}>
+              The content you're looking for is unavailable.
+            </Text>
+          </View>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+    flexDirection: 'column',
+  },
+  title: {
+    color: '#A5A9B5',
+    textAlign: 'center',
+    fontSize: 20,
+  },
+  description: {
+    color: '#A5A9B5',
+    textAlign: 'center',
+    fontSize: 15,
+  },
+});
+
+export default ErrorBoundary;

package/src/components/ErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary';
+export { default } from './ErrorBoundary';

package/src/components/MediaSection/index.tsx

@@ -25,9 +25,7 @@ const MediaSection: React.FC<IMediaSection> = ({ childrenPosts }) => {
   const [imagePosts, setImagePosts] = useState<string[]>([]);
   const [videoPosts, setVideoPosts] = useState<IVideoPost[]>([]);
   const [pollIds, setPollIds] = useState<{ pollId: string }[]>([]);
-  const [livestreamId, setLivestreamId] = useState<Amity.Stream['streamId'][]>(
-    []
-  );
+  const [livestreamId, setLivestreamId] = useState<Amity.Room['roomId'][]>([]);
 
   const [imagePostsFullSize, setImagePostsFullSize] = useState<MediaUri[]>([]);
   const [videoPostsFullSize, setVideoPostsFullSize] = useState<MediaUri[]>([]);
@@ -95,10 +93,10 @@ const MediaSection: React.FC<IMediaSection> = ({ childrenPosts }) => {
           setPollIds((prev) => {
             return !prev.includes(item.data) ? [...prev, item.data] : [...prev];
           });
-        } else if (item?.dataType === 'liveStream') {
+        } else if (item?.dataType === 'room') {
           setLivestreamId((prev) => {
             return !prev.includes(item.data)
-              ? [...prev, item.data.streamId]
+              ? [...prev, item.data.roomId]
               : [...prev];
           });
         }
@@ -264,7 +262,7 @@ const MediaSection: React.FC<IMediaSection> = ({ childrenPosts }) => {
         <PollSection pollId={pollIds[0].pollId} />
       ) : livestreamId.length > 0 ? (
         <LivestreamContent
-          streamId={livestreamId[0]}
+          roomId={livestreamId[0]}
           post={null}
           onPressPost={() => {}}
         />

package/src/components/PostTypeChoiceModal/PostTypeChoiceModal.tsx

@@ -9,7 +9,7 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import { SvgXml } from 'react-native-svg';
 import CreatePostChooseTargetModal from '../CreatePostChooseTargetModal/CreatePostChooseTargetModal';
 import {
-  // livestreamIcon,
+  livestreamIcon,
   pollIcon,
   postIconOutlined,
 } from '../../svg/svg-xml-list';
@@ -124,25 +124,14 @@ const PostTypeChoiceModal = () => {
     >
       <Pressable onPress={closeModal} style={styles.modalContainer}>
         <Animated.View style={[styles.modalContent, modalStyle]}>
-          {/* <TouchableOpacity
-            onPress={() => onChooseType('livestream')}
-            style={styles.modalRow}
-          >
-            <SvgXml
-              xml={livestreamIcon(theme.colors.base)}
-              width="28"
-              height="28"
-            />
-            <Text style={styles.postText}>Livestream</Text>
-          </TouchableOpacity> */}
           <TouchableOpacity
             onPress={() => onChooseType('post')}
             style={styles.modalRow}
           >
             <SvgXml
               xml={postIconOutlined(theme.colors.base)}
-              width="28"
-              height="28"
+              width="24"
+              height="24"
             />
             <Text style={styles.postText}>Post</Text>
           </TouchableOpacity>
@@ -150,9 +139,20 @@ const PostTypeChoiceModal = () => {
             onPress={() => onChooseType('poll')}
             style={styles.modalRow}
           >
-            <SvgXml xml={pollIcon(theme.colors.base)} width="28" height="28" />
+            <SvgXml xml={pollIcon(theme.colors.base)} width="24" height="24" />
             <Text style={styles.postText}>Poll</Text>
           </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => onChooseType('livestream')}
+            style={styles.modalRow}
+          >
+            <SvgXml
+              xml={livestreamIcon(theme.colors.base)}
+              width="24"
+              height="24"
+            />
+            <Text style={styles.postText}>Livestream</Text>
+          </TouchableOpacity>
           <CreatePostChooseTargetModal
             visible={createPostModalVisible}
             onClose={closeCreatePostModal}

package/src/components/PostTypeChoiceModal/style.ts

@@ -37,8 +37,7 @@ export const useStyles = () => {
     modalRow: {
       flexDirection: 'row',
       alignItems: 'center',
-      padding: 5,
-      marginVertical: 5,
+      paddingVertical: 16,
     },
     closeButtonText: {
       color: '#FFF',

package/src/components/Social/PostList/Components/RenderTextWithMention.tsx

@@ -27,7 +27,7 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
     });
   };
   let currentPosition = 0;
-  const result: (string | JSX.Element)[][] = mentionPositionArr.map(
+  const result: (string | React.ReactElement)[][] = mentionPositionArr.map(
     ({ index, length, userId }, i) => {
       // Add non-highlighted text before the mention
       const nonHighlightedText = textPost.slice(currentPosition, index);

package/src/components/Social/PostList/index.tsx

@@ -67,7 +67,7 @@ export interface IPost {
 export interface IPostList {
   onDelete?: (postId: string) => void;
   onChange?: (postDetail: Amity.Post<any>) => void;
-  postDetail: Amity.Post<any> & { structureType?: string };
+  postDetail: Amity.Post<any>;
   postIndex?: number;
   isGlobalfeed?: boolean;
 }
@@ -124,7 +124,6 @@ export default function PostList({
     children: childrenPosts = [],
     editedAt,
     metadata,
-    structureType,
   } = postDetail ?? {};
   const mentionPosition = metadata?.mentioned;
 
@@ -412,17 +411,20 @@ export default function PostList({
     });
   };
 
-  if (structureType === 'liveStream') return null;
-
   return (
     <View key={postId} style={styles.postWrap}>
       <View style={styles.headerSection}>
         <View style={styles.user}>
-          {user?.avatarFileId ? (
+          {user?.avatarCustomUrl ? (
+            <Image
+              style={styles.avatar as ImageStyle}
+              source={{ uri: user.avatarCustomUrl }}
+            />
+          ) : user?.avatarFileId ? (
             <Image
               style={styles.avatar as ImageStyle}
               source={{
-                uri: `https://api.${apiRegion}.amity.co/api/v3/files/${user?.avatarFileId}/download`,
+                uri: `https://api.${apiRegion}.amity.co/api/v3/files/${user.avatarFileId}/download`,
               }}
             />
           ) : (

package/src/components/StoryKit/src/Story.tsx

@@ -45,7 +45,9 @@ export const Story = ({
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [selectedData, setSelectedData] = useState<IUserStory[]>([]);
-  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>();
+  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect | null>(
+    null
+  );
 
   // Component Functions
   const _handleStoryItemPress = (item: IUserStory, index?: number) => {

package/src/components/StoryKit/src/helpers/StateHelpers.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
-export function usePrevious(value: any) {
-  const ref = useRef();
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>(undefined);
   useEffect(() => {
     ref.current = value;
   });

package/src/components/Toast/Toast.tsx

@@ -53,6 +53,7 @@ const Toast: FC = () => {
       alignSelf: 'center',
       flexDirection: 'row',
       alignItems: 'center',
+      gap: 12,
     },
     message: {
       lineHeight: 24,

package/src/hooks/useAuth.ts

@@ -13,6 +13,7 @@ const useAuth = (): AuthContextInterface => {
     error,
     sessionState,
     apiRegion,
+    isGlobalBan,
   } = useContext(AuthContext);
 
   return {
@@ -24,6 +25,7 @@ const useAuth = (): AuthContextInterface => {
     isConnected,
     sessionState,
     apiRegion,
+    isGlobalBan,
   };
 };
 

package/src/hooks/useSearch.ts

@@ -1,5 +1,6 @@
 import {
   CommunityRepository,
+  SearchUsersByEnum,
   UserRepository,
 } from '@amityco/ts-sdk-react-native';
 import { useCallback, useEffect, useState, useRef } from 'react';
@@ -45,7 +46,12 @@ const useSearch = (
 
   const searchAllUsers = useCallback((text: string) => {
     return UserRepository.searchUserByDisplayName(
-      { displayName: text, limit: 5 },
+      {
+        displayName: text,
+        limit: 5,
+        searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+        matchType: UserRepository.AmityUserSearchMatchType.PARTIAL,
+      },
       ({ data, error, hasNextPage, onNextPage }) => {
         if (error) return null;
         hasNextPage

package/src/index.tsx

@@ -26,6 +26,7 @@ if (!(BackHandler as any).removeEventListener) {
 }
 
 import AmityUiKitProvider from './providers/amity-ui-kit-provider';
+import { ErrorBoundary } from './components/ErrorBoundary';
 import AmityUiKitSocial from './v4/routes/AmitySocialUIKitV4Navigator';
 import AmityPageRenderer from './v4/routes/AmityPageRenderer';
 import PostDetail from './v4/screen/PostDetail';
@@ -63,7 +64,7 @@ import {
   AmityAllCategoriesPage,
   AmityCommunitiesByCategoryPage,
   AmityCommunityProfilePage as CommunityProfilePage,
-  // AmityCreateLivestreamPage,
+  AmityCreateLivestreamPage,
   AmityLivestreamPostTargetSelectionPage,
   AmityLivestreamTerminatedPage,
   AmityLivestreamPlayerPage,
@@ -123,6 +124,7 @@ export function multiply(a: number, b: number): Promise<number> {
 }
 export {
   AmityUiKitProvider,
+  ErrorBoundary,
   AmityUiKitSocial,
   AmityStoryTabComponent,
   AmityStoryTabComponentEnum,
@@ -162,7 +164,7 @@ export {
   AmityAllCategoriesPage,
   AmityCommunitiesByCategoryPage,
   CommunityProfilePage,
-  // AmityCreateLivestreamPage,
+  AmityCreateLivestreamPage,
   AmityLivestreamPostTargetSelectionPage,
   AmityLivestreamTerminatedPage,
   AmityLivestreamPlayerPage,

package/src/providers/Social/communities-sdk.ts

@@ -83,7 +83,7 @@ export async function checkCommunityPermission(
   apiRegion: string
 ): Promise<any> {
   const url: string = `https://api.${apiRegion}.amity.co/api/v3/communities/${communityId}/permissions/me`;
-  const accessToken = client.token.accessToken;
+  const accessToken = client?.token?.accessToken;
 
   try {
     const response = await fetch(url, {

package/src/providers/amity-ui-kit-provider.tsx

@@ -17,6 +17,8 @@ import { AdEngineProvider } from '../v4/providers/AdEngineProvider';
 import BottomSheetComponent from '../v4/component/BottomSheetComponent/BottomSheetComponent';
 import Toast from '../v4/component/Toast';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ErrorBoundary } from '../components/ErrorBoundary';
 
 export type CusTomTheme = typeof DefaultTheme;
 export interface IAmityUIkitProvider {
@@ -143,32 +145,36 @@ export default function AmityUiKitProvider({
   };
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <Provider store={store} context={AmityUIKitReduxContext}>
-        <AuthContextProvider
-          userId={userId}
-          displayName={displayName || userId}
-          apiKey={apiKey}
-          apiRegion={apiRegion}
-          apiEndpoint={apiEndpoint}
-          authToken={authToken}
-          fcmToken={fcmToken}
-        >
-          <AdEngineProvider>
-            <ConfigProvider configs={configData}>
-              <BehaviourProvider behaviour={behaviour}>
-                <ExploreProvider>
-                  <PaperProvider theme={globalTheme}>
-                    {children}
-                    <BottomSheetComponent />
-                    <Toast />
-                  </PaperProvider>
-                </ExploreProvider>
-              </BehaviourProvider>
-            </ConfigProvider>
-          </AdEngineProvider>
-        </AuthContextProvider>
-      </Provider>
-    </QueryClientProvider>
+    <ErrorBoundary>
+      <SafeAreaProvider>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={store} context={AmityUIKitReduxContext}>
+            <AuthContextProvider
+              userId={userId}
+              displayName={displayName || userId}
+              apiKey={apiKey}
+              apiRegion={apiRegion}
+              apiEndpoint={apiEndpoint}
+              authToken={authToken}
+              fcmToken={fcmToken}
+            >
+              <AdEngineProvider>
+                <ConfigProvider configs={configData}>
+                  <BehaviourProvider behaviour={behaviour}>
+                    <ExploreProvider>
+                      <PaperProvider theme={globalTheme}>
+                        {children}
+                        <BottomSheetComponent />
+                        <Toast />
+                      </PaperProvider>
+                    </ExploreProvider>
+                  </BehaviourProvider>
+                </ConfigProvider>
+              </AdEngineProvider>
+            </AuthContextProvider>
+          </Provider>
+        </QueryClientProvider>
+      </SafeAreaProvider>
+    </ErrorBoundary>
   );
 }

package/src/providers/auth-provider.tsx

@@ -4,8 +4,7 @@ import { Client } from '@amityco/ts-sdk-react-native';
 import type { AuthContextInterface } from '../types/auth.interface';
 import { Alert, Platform } from 'react-native';
 import type { IAmityUIkitProvider } from './amity-ui-kit-provider';
-// @ts-ignore
-// import { setupAmityVideoPlayer } from '@amityco/video-player-react-native';
+import { ERROR_CODE } from '../v4/constants';
 
 export const AuthContext = React.createContext<AuthContextInterface>({
   client: null,
@@ -18,6 +17,7 @@ export const AuthContext = React.createContext<AuthContextInterface>({
   apiRegion: 'sg',
   authToken: '',
   fcmToken: undefined,
+  isGlobalBan: false,
 });
 
 export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
@@ -37,6 +37,7 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
   const client: Amity.Client = Client.createClient(apiKey, apiRegion, {
     apiEndpoint: { http: apiEndpoint },
   });
+  const [isGlobalBan, setIsGlobalBan] = useState(false);
 
   const sessionHandler: Amity.SessionHandler = {
     sessionWillRenewAccessToken(renewal) {
@@ -45,8 +46,11 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
   };
 
   useEffect(() => {
-    return Client.onSessionStateChange((state: Amity.SessionStates) =>
-      setSessionState(state)
+    return Client.onSessionStateChange(
+      (state: Amity.SessionStates, reason: Amity.TokenTerminationReason) => {
+        setSessionState(state);
+        setIsGlobalBan(reason === 'globalBan');
+      }
     );
   }, []);
 
@@ -77,8 +81,14 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     if (authToken?.length > 0) {
       loginParam = { ...loginParam, authToken: authToken };
     }
-    const response = await Client.login(loginParam, sessionHandler);
-    if (!response) return;
+    try {
+      const response = await Client.login(loginParam, sessionHandler);
+      if (!response) return;
+    } catch (err) {
+      if (err?.message?.includes(ERROR_CODE.GLOBAL_BAN)) {
+        setIsGlobalBan(true);
+      }
+    }
 
     // setupAmityVideoPlayer();
 
@@ -149,11 +159,11 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
         isConnected,
         sessionState,
         apiRegion: apiRegion.toLowerCase(),
+        isGlobalBan,
       }}
     >
       {children}
     </AuthContext.Provider>
-    //
   );
 };
 export default AuthContextProvider;