@amityco/react-native-social-uikit 4.0.0-03e2bf8.0 → 4.0.0-0871dfa8.0

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,9 @@ const useAuth = (): AuthContextInterface => {
     error,
     sessionState,
     apiRegion,
+    isGlobalBan,
+    isVisitorUsageLimitReached,
+    isVisitorOrBot,
   } = useContext(AuthContext);
 
   return {
@@ -24,6 +27,9 @@ const useAuth = (): AuthContextInterface => {
     isConnected,
     sessionState,
     apiRegion,
+    isGlobalBan,
+    isVisitorUsageLimitReached,
+    isVisitorOrBot,
   };
 };
 

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,11 +26,13 @@ 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';
 import CommunityHome from './v4/screen/CommunityHome';
 import UserProfile from './v4/screen/UserProfile';
+import { VisitorUsageLimit } from './v4/screen/VisitorUsageLimit';
 import {
   AmityStoryTabComponent,
   AmityCreateStoryPage,
@@ -63,7 +65,7 @@ import {
   AmityAllCategoriesPage,
   AmityCommunitiesByCategoryPage,
   AmityCommunityProfilePage as CommunityProfilePage,
-  // AmityCreateLivestreamPage,
+  AmityCreateLivestreamPage,
   AmityLivestreamPostTargetSelectionPage,
   AmityLivestreamTerminatedPage,
   AmityLivestreamPlayerPage,
@@ -99,7 +101,7 @@ import {
   AmityPostComposerMode,
   mediaAttachment,
 } from './v4/PublicApi/types';
-import { AmityStoryTabComponentStyle } from './v4/PublicApi/Components/AmityStoryTabComponent/AmityStoryTabComponent';
+import { AmityGlobalStoryTabWrapper } from './v4/component/MyStories';
 
 const LINKING_ERROR =
   `The package 'amity-react-native-social-ui-kit' doesn't seem to be linked. Make sure: \n\n` +
@@ -123,7 +125,9 @@ export function multiply(a: number, b: number): Promise<number> {
 }
 export {
   AmityUiKitProvider,
+  ErrorBoundary,
   AmityUiKitSocial,
+  VisitorUsageLimit,
   AmityStoryTabComponent,
   AmityStoryTabComponentEnum,
   AmityCreateStoryPage,
@@ -162,7 +166,7 @@ export {
   AmityAllCategoriesPage,
   AmityCommunitiesByCategoryPage,
   CommunityProfilePage,
-  // AmityCreateLivestreamPage,
+  AmityCreateLivestreamPage,
   AmityLivestreamPostTargetSelectionPage,
   AmityLivestreamTerminatedPage,
   AmityLivestreamPlayerPage,
@@ -191,5 +195,5 @@ export {
   AmityCommunityLivestreamsNotificationSettingPage,
   AmityCommunityPinnedPostComponent,
   AmityPendingPostListComponent,
-  AmityStoryTabComponentStyle,
+  AmityGlobalStoryTabWrapper,
 };

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,10 +17,13 @@ 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 {
-  userId: string;
+  /** Omit to connect as a visitor (read-only session). */
+  userId?: string;
   displayName?: string;
   apiKey: string;
   apiRegion?: string;
@@ -143,32 +146,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,9 @@ export const AuthContext = React.createContext<AuthContextInterface>({
   apiRegion: 'sg',
   authToken: '',
   fcmToken: undefined,
+  isGlobalBan: false,
+  isVisitorUsageLimitReached: false,
+  isVisitorOrBot: false,
 });
 
 export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
@@ -37,6 +39,10 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
   const client: Amity.Client = Client.createClient(apiKey, apiRegion, {
     apiEndpoint: { http: apiEndpoint },
   });
+  const [isGlobalBan, setIsGlobalBan] = useState(false);
+  const [isVisitorUsageLimitReached, setIsVisitorUsageLimitReached] =
+    useState(false);
+  const [isVisitorOrBot, setIsVisitorOrBot] = useState(false);
 
   const sessionHandler: Amity.SessionHandler = {
     sessionWillRenewAccessToken(renewal) {
@@ -45,17 +51,32 @@ 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');
+      }
     );
   }, []);
 
   useEffect(() => {
     if (sessionState === 'established') {
       setIsConnected(true);
+      // Same check as the Web UIKit's isVisitorOrBot in SDKProvider
+      setIsVisitorOrBot(Client.getCurrentUserType() !== 'signed-in');
     }
   }, [sessionState]);
 
+  useEffect(() => {
+    // SDK emits this (throttled, 2s window) when a visitor/bot session gets
+    // error 400323 — daily usage limit exceeded. The session stays alive, so
+    // this is tracked separately from isGlobalBan. In-memory only: the flag
+    // resets when the provider remounts or the user signs in with a userId.
+    return Client.onVisitorUsageLimitReached(() => {
+      setIsVisitorUsageLimitReached(true);
+    });
+  }, []);
+
   const generateUUID = () => {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
       /[xy]/g,
@@ -68,17 +89,28 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
   };
 
   const handleConnect = useCallback(async () => {
-    let loginParam;
-
-    loginParam = {
-      userId: userId,
-      displayName: displayName, // optional
-    };
-    if (authToken?.length > 0) {
-      loginParam = { ...loginParam, authToken: authToken };
+    try {
+      if (userId) {
+        let loginParam: Amity.ConnectClientParams = {
+          userId: userId,
+          displayName: displayName, // optional
+        };
+        if (authToken?.length > 0) {
+          loginParam = { ...loginParam, authToken: authToken };
+        }
+        const response = await Client.login(loginParam, sessionHandler);
+        if (!response) return;
+      } else {
+        // No userId — connect as a visitor (read-only session, same
+        // convention as the Web UIKit's registerDevice without userId)
+        const response = await Client.loginAsVisitor({ sessionHandler });
+        if (!response) return;
+      }
+    } catch (err) {
+      if (err?.message?.includes(ERROR_CODE.GLOBAL_BAN)) {
+        setIsGlobalBan(true);
+      }
     }
-    const response = await Client.login(loginParam, sessionHandler);
-    if (!response) return;
 
     // setupAmityVideoPlayer();
 
@@ -122,6 +154,7 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     }
   };
   useEffect(() => {
+    setIsVisitorUsageLimitReached(false);
     login();
   }, [userId]);
 
@@ -149,11 +182,13 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
         isConnected,
         sessionState,
         apiRegion: apiRegion.toLowerCase(),
+        isGlobalBan,
+        isVisitorUsageLimitReached,
+        isVisitorOrBot,
       }}
     >
       {children}
     </AuthContext.Provider>
-    //
   );
 };
 export default AuthContextProvider;

package/src/providers/file-provider.tsx

@@ -38,29 +38,51 @@ export async function uploadImageFile(
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<'image'>[]> {
   return await new Promise(async (resolve, reject) => {
-    const formData = new FormData();
-    const parts = filePath.split('/');
-    const fileName = parts[parts.length - 1];
-    const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
-    const uri =
-      Platform.OS === 'android' ? filePath : filePath.replace('file://', '');
+    try {
+      const formData = new FormData();
+      const parts = filePath.split('/');
+      const fileName = parts[parts.length - 1];
+      const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
+      const uri =
+        Platform.OS === 'android' ? filePath : filePath.replace('file://', '');
 
-    formData.append('files', {
-      name: fileName,
-      type: fileType,
-      uri: uri,
-    });
+      formData.append('files', {
+        name: fileName,
+        type: fileType,
+        uri: uri,
+      });
 
-    const { data: file } = await FileRepository.uploadImage(
-      formData,
-      (percent) => {
-        perCentCallback && perCentCallback(percent);
+      const { data: file } = await FileRepository.uploadImage(
+        formData,
+        (percent) => {
+          perCentCallback && perCentCallback(percent);
+        }
+      );
+
+      if (file) {
+        resolve(file);
+      } else {
+        reject({ message: 'Upload failed - no file data returned' });
+      }
+    } catch (error: any) {
+      if (
+        error?.message?.includes('INVALID_IMAGE') ||
+        error?.message?.includes('Inappropriate')
+      ) {
+        reject({
+          message: 'Inappropriate image',
+          details: 'Please choose a different image to upload.',
+          code: 'INVALID_IMAGE',
+        });
+      } else {
+        reject({
+          message: 'Upload failed',
+          details:
+            error?.message ||
+            "We couldn't complete your upload. Please try again.",
+          originalError: error,
+        });
       }
-    );
-    if (file) {
-      resolve(file);
-    } else {
-      reject('Upload error');
     }
   });
 }