@amityco/react-native-social-uikit 4.0.0-ca3519f.0 → 4.0.0-cfcb02e.0

package/src/v4/component/LivestreamContent/index.tsx

@@ -7,14 +7,14 @@ import {
   ImageStyle,
 } from 'react-native';
 import React, { useEffect, useState, useCallback, Fragment } from 'react';
-import { FileRepository, StreamRepository } from '@amityco/ts-sdk-react-native';
+import { FileRepository, RoomRepository } from '@amityco/ts-sdk-react-native';
 import { useStyles } from './styles';
 import { useNavigation } from '@react-navigation/native';
 import { SvgXml } from 'react-native-svg';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { play } from '../../assets/icons';
 import { Typography } from '../Typography/Typography';
-import { LivestreamStatus } from '../../enum/livestreamStatus';
+import { RoomStatus } from '../../enum/roomStatus';
 import LiveStreamEndThumbnail from './LivestreamEndedThumbnail';
 import LiveStreamIdleThumbnail from './LivestreamIdleThumbnail';
 import RenderTextWithMention from '../RenderTextWithMention/RenderTextWithMention';
@@ -22,14 +22,14 @@ import { RootStackParamList } from '../../routes/RouteParamList';
 import LiveStreamTerminatedThumbnail from './LivestreamTerminatedThumbnail';
 
 interface ILivestreamContent {
-  streamId: Amity.Stream['streamId'];
+  roomId: Amity.Room['roomId'];
   onPressPost: () => void;
   post: Amity.Post;
 }
 
 const LivestreamContent: React.FC<ILivestreamContent> = ({
   post,
-  streamId,
+  roomId,
   onPressPost,
 }) => {
   const { styles, theme } = useStyles();
@@ -39,18 +39,18 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     >();
 
   const [error, setError] = useState<boolean>(false);
-  const [livestream, setLivestream] = useState<Amity.Stream>();
+  const [livestream, setLivestream] = useState<Amity.Room>();
   const [thumbnailUrl, setThumbnailUrl] = useState<ImageSourcePropType>();
   const [isUpcoming, setIsUpcoming] = useState<boolean>(false);
 
   const onPlayLivestream = useCallback(() => {
     navigation.navigate('LivestreamPlayer', {
       post,
-      streamId: livestream.streamId,
+      roomId: livestream.roomId,
     });
   }, [livestream, navigation, post]);
 
-  const getLivestreamThumbnail = async (currentStream: Amity.Stream) => {
+  const getLivestreamThumbnail = async (currentStream: Amity.Room) => {
     const defaultThumbnail = require('../../assets/images/livestream.png');
 
     if (currentStream.thumbnailFileId) {
@@ -71,8 +71,8 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
 
   useEffect(() => {
     setIsUpcoming(true);
-    const unsubscribe = StreamRepository.getStreamById(
-      streamId,
+    const unsubscribe = RoomRepository.getRoom(
+      roomId,
       ({ data, loading, error: streamError }) => {
         if (streamError) setError(!!streamError);
         if (!loading && data) {
@@ -86,13 +86,13 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     return () => {
       unsubscribe();
     };
-  }, [streamId]);
+  }, [roomId]);
 
   if (!livestream) return null;
 
   if (error || livestream?.isDeleted) {
     return (
-      <View key={livestream.streamId} style={styles.container}>
+      <View key={livestream.roomId} style={styles.container}>
         <LiveStreamIdleThumbnail />
       </View>
     );
@@ -102,12 +102,12 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     livestream?.moderation?.terminateLabels &&
     livestream?.moderation?.terminateLabels?.length > 0;
   const isLiveOrEnded =
-    livestream?.status === LivestreamStatus.live ||
-    livestream?.status === LivestreamStatus.ended;
+    livestream?.status === RoomStatus.live ||
+    livestream?.status === RoomStatus.ended;
 
   if (isTerminated && isLiveOrEnded) {
     return (
-      <View key={livestream.streamId} style={styles.container}>
+      <View key={livestream.roomId} style={styles.container}>
         <LiveStreamTerminatedThumbnail />
       </View>
     );
@@ -129,7 +129,7 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
         )}
       </Pressable>
       <View style={styles.container}>
-        {(livestream.status === LivestreamStatus.idle || isUpcoming) &&
+        {(livestream.status === RoomStatus.idle || isUpcoming) &&
           thumbnailUrl && (
             <View style={styles.content}>
               <Image
@@ -144,12 +144,11 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
             </View>
           )}
 
-        {livestream.status === LivestreamStatus.ended && (
-          <LiveStreamEndThumbnail />
-        )}
+        {livestream.status === RoomStatus.ended && <LiveStreamEndThumbnail />}
 
-        {(livestream.status === LivestreamStatus.live ||
-          livestream.status === LivestreamStatus.recorded) &&
+        {(livestream.status === RoomStatus.live ||
+          livestream.status === RoomStatus.recorded ||
+          livestream.status === RoomStatus.waitingReconnect) &&
           thumbnailUrl &&
           !isUpcoming && (
             <View style={styles.content}>
@@ -157,14 +156,15 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
                 source={thumbnailUrl}
                 style={styles.streamImageCover as ImageStyle}
               />
-              {livestream.status === LivestreamStatus.live && (
+              {(livestream.status === RoomStatus.live ||
+                livestream.status === RoomStatus.waitingReconnect) && (
                 <View style={styles.streamStatusLive}>
                   <Typography.CaptionBold style={styles.streamStatusText}>
                     LIVE
                   </Typography.CaptionBold>
                 </View>
               )}
-              {livestream.status === LivestreamStatus.recorded && (
+              {livestream.status === RoomStatus.recorded && (
                 <View style={styles.streamStatusRecorded}>
                   <Typography.CaptionBold style={styles.streamStatusText}>
                     RECORDED

package/src/v4/component/MyAvatar/MyAvatar.tsx

@@ -15,13 +15,19 @@ const MyAvatar: FC<MyAvatarProp> = (props) => {
 
   useEffect(() => {
     UserRepository.getUser(myId, async ({ data, loading, error }) => {
-      if (!loading && !error) {
-        const avatar = await getImage({
-          fileId: data?.avatarFileId,
-          imageSize: ImageSizeState.small,
-        });
-        setAvatarUrl(avatar ?? defaultAvatarUri);
+      if (loading || error || !data) return;
+
+      if (data.avatarCustomUrl) {
+        setAvatarUrl(data.avatarCustomUrl);
+        return;
       }
+
+      const avatar = await getImage({
+        fileId: data.avatarFileId,
+        imageSize: ImageSizeState.small,
+      });
+
+      setAvatarUrl(avatar ?? defaultAvatarUri);
     });
   }, [getImage, myId]);
 

package/src/v4/component/PollContent/PollResults.tsx

@@ -80,6 +80,7 @@ export function PollResults({ options, totalVotes }: PollResultsProps) {
                   targetType="user"
                   style={styles.optionAvatar}
                   avatarId={user?.avatarFileId}
+                  avatarCustomUrl={user?.avatarCustomUrl}
                   elementID={ElementID.WildCardElement}
                 />
               )}

package/src/v4/component/PostContent/index.tsx

@@ -43,9 +43,7 @@ const PostContent: React.FC<IPostContent> = ({
   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[]>([]);
@@ -96,7 +94,7 @@ const PostContent: React.FC<IPostContent> = ({
       const images: string[] = [];
       const videos: IVideoPost[] = [];
       const polls: { pollId: string }[] = [];
-      const livestreams: Amity.Stream['streamId'][] = [];
+      const livestreams: Amity.Room['roomId'][] = [];
 
       response.forEach((item) => {
         if (item?.dataType === 'image' && item?.data?.fileId) {
@@ -119,9 +117,9 @@ const PostContent: React.FC<IPostContent> = ({
           if (!polls.some((poll) => poll.pollId === item.data.pollId)) {
             polls.push(item.data);
           }
-        } else if (item?.dataType === 'liveStream') {
-          if (!livestreams.includes(item.data.streamId)) {
-            livestreams.push(item.data.streamId);
+        } else if (item?.dataType === 'room') {
+          if (!livestreams.includes(item.data.roomId)) {
+            livestreams.push(item.data.roomId);
           }
         }
       });
@@ -344,7 +342,7 @@ const PostContent: React.FC<IPostContent> = ({
         <LivestreamContent
           post={post}
           onPressPost={onPressPost}
-          streamId={livestreamId[0]}
+          roomId={livestreamId[0]}
         />
       ) : (
         renderMediaPosts()

package/src/v4/component/PostMenu/index.tsx

@@ -255,7 +255,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
                 ],
               },
               (post?.creator?.userId === myId || isIAmModerator) &&
-                ((childrenPost?.dataType !== 'liveStream' &&
+                ((childrenPost?.dataType !== 'room' &&
                   childrenPost?.dataType !== 'poll') ||
                   (childrenPost?.dataType === 'poll' &&
                     pollData?.status === 'open')) &&
@@ -280,7 +280,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
               </TouchableOpacity>
             )}
             {post?.creator?.userId === myId &&
-              childrenPost?.dataType !== 'liveStream' &&
+              childrenPost?.dataType !== 'room' &&
               childrenPost?.dataType !== 'poll' && (
                 <TouchableOpacity
                   onPress={goToEditPost}

package/src/v4/component/RenderTextWithMention/RenderTextWithMention.tsx

@@ -1,4 +1,4 @@
-import { Text, Linking } from 'react-native';
+import { Text, Linking, TouchableOpacity } from 'react-native';
 import { useStyles } from './styles';
 import React, { memo, useCallback } from 'react';
 import { useNavigation } from '@react-navigation/native';
@@ -6,6 +6,7 @@ import { IMentionPosition } from '../../types/type';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../routes/RouteParamList';
 import ReadMore from '@fawazahmed/react-native-read-more';
+import { URL_REGEX } from '../../../v4/constants';
 
 interface IrenderTextWithMention {
   mentionPositionArr: IMentionPosition[];
@@ -28,10 +29,9 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
   const navigation =
     useNavigation() as NativeStackNavigationProp<RootStackParamList>;
   const linkArr = useCallback((text: string): LinkInfo[] => {
-    const urlRegex = /(https?:\/\/|www\.)[^\s]+/g;
     const links: LinkInfo[] = [];
     let match;
-    while ((match = urlRegex.exec(text)) !== null) {
+    while ((match = URL_REGEX.exec(text)) !== null) {
       links.push({
         link: match[0],
         index: match.index,
@@ -54,8 +54,14 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
     },
     [navigation]
   );
-  const handleLinkClick = useCallback((url: string) => {
-    Linking.openURL(url);
+  const handleLinkClick = useCallback(async (url: string) => {
+    try {
+      const hasProtocol = /^(https?|ftp|mailto):/.test(url);
+      const formattedUrl = hasProtocol ? url : `https://${url}`;
+      await Linking.openURL(formattedUrl);
+    } catch (error) {
+      console.warn('Failed to open URL:', error);
+    }
   }, []);
 
   const handleOnClick = useCallback(
@@ -88,14 +94,14 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
       const nonHighlightedText = textPost.slice(currentPosition, index);
       // Add highlighted text
       const highlightedText = (
-        <Text
-          selectable
+        <TouchableOpacity
           onPress={() => handleOnClick(link, userId)}
           key={`highlighted-${i}`}
-          style={styles.mentionText}
         >
-          {textPost.slice(index, index + length)}
-        </Text>
+          <Text style={styles.mentionText} selectable>
+            {textPost.slice(index, index + length)}
+          </Text>
+        </TouchableOpacity>
       );
 
       // Update currentPosition for the next iteration

package/src/v4/component/SearchResultItem/SearchResultItem.tsx

@@ -91,6 +91,9 @@ const SearchResultItem: FC<SearchResultItemType> = ({
         pageID={pageId}
         componentID={componentId}
         elementID={ElementID.community_avatar}
+        avatarCustomUrl={
+          searchType === TabName.Users ? item?.avatarCustomUrl : undefined
+        }
         targetType={searchType === TabName.Communities ? 'community' : 'user'}
       />
       <View style={styles.profileInfoContainer}>

package/src/v4/component/Toast/index.tsx

@@ -8,8 +8,8 @@ import { informative, failed, success } from '../../assets/icons';
 import { CircularProgressIndicator } from '../CircularProgressIndicator';
 
 const Toast = () => {
-  const { styles, theme } = useStyles();
   const { hideToast, toast } = useToast();
+  const { styles, theme } = useStyles(toast.bottomPosition);
   const timeoutRef = useRef<number | null>(null);
   const fadeIn = useRef(new Animated.Value(0)).current;
 

package/src/v4/component/Toast/styles.ts

@@ -3,7 +3,7 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-export const useStyles = () => {
+export const useStyles = (bottomPosition: number = 16) => {
   const theme = useTheme<MyMD3Theme>();
   const { bottom } = useSafeAreaInsets();
 
@@ -13,7 +13,7 @@ export const useStyles = () => {
       zIndex: 999,
       width: '90%',
       borderRadius: 8,
-      bottom: bottom + 16,
+      bottom: bottom + bottomPosition,
       paddingVertical: 16,
       alignSelf: 'center',
       flexDirection: 'row',

package/src/v4/constants/index.ts

@@ -24,6 +24,7 @@ export const ERROR_CODE = {
   IMAGE_NUDITY: '500000',
   ONLY_ONE_MODERATOR: '400317',
   ONLY_ONE_MEMBER: '400318',
+  GLOBAL_BAN: '400312',
 };
 
 export const COMMENT_ERROR_MESSAGE = {
@@ -105,3 +106,6 @@ export const QUERY_KEY = {
   POSTS_COLLECTION: 'posts-collections',
   PINNED_POSTS_COLLECTION: 'pinned-posts-collections',
 };
+
+export const URL_REGEX =
+  /(?:(?:https?|ftp):\/\/(?:[a-zA-Z0-9.-]+|[\d.]+)(?::\d{1,5})?(?:\/(?:[^\s<>|()]*(?:\([^\s<>|()]*\)[^\s<>|()]*)*)*)?|mailto:[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}|www\.(?:[a-zA-Z0-9.-]+)(?:\/(?:[^\s<>|()]*(?:\([^\s<>|()]*\)[^\s<>|()]*)*)*)?(?!\.))/g;

package/src/v4/elements/CommunityCreatePostButton/CommunityCreatePostButton.tsx

@@ -31,7 +31,7 @@ function CommunityCreatePostButton({
         xml={plus()}
         width={32}
         height={32}
-        color={themeStyles.colors.base}
+        color={themeStyles.colors.background}
       />
     </TouchableOpacity>
   );

package/src/v4/engine/AssetDownloader.ts

@@ -60,7 +60,7 @@ class AssetDownloader {
 
     try {
       // Begin download
-      const accessToken = this.client.token.accessToken;
+      const accessToken = this?.client?.token?.accessToken;
       const downloadOptions = {
         fromUrl: url,
         headers: {

package/src/v4/enum/roomStatus.ts

@@ -0,0 +1,8 @@
+export const RoomStatus = {
+  idle: 'idle',
+  live: 'live',
+  recorded: 'recorded',
+  ended: 'ended',
+  waitingReconnect: 'waitingReconnect',
+  terminated: 'terminated',
+} as const satisfies Record<Amity.RoomStatus, Amity.RoomStatus>;

package/src/v4/features/room/hooks/useRoom.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { RoomRepository } from '@amityco/ts-sdk-react-native';
+
+export function useRoom(roomId: string) {
+  const [room, setRoom] = useState<Amity.Room | null>(null);
+
+  useEffect(() => {
+    let unsubscribe: Amity.Unsubscriber;
+    if (roomId) {
+      unsubscribe = RoomRepository.getRoom(roomId, ({ data }) => {
+        setRoom(data);
+      });
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [roomId]);
+
+  return room;
+}

package/src/v4/hook/index.ts

@@ -30,3 +30,5 @@ export * from './usePendingPostQuery';
 export * from './useMembersQuery';
 export * from './useRolesQuery';
 export * from './useFlagUserQuery';
+export * from './usePostSubscription';
+export * from './useRoomSubscription';

package/src/v4/hook/useCustomRankingGlobalFeed.ts

@@ -51,7 +51,7 @@ export const useCustomRankingGlobalFeed = () => {
                   if (
                     data?.dataType === 'image' ||
                     data?.dataType === 'video' ||
-                    // data?.dataType === 'liveStream' ||
+                    data?.dataType === 'room' ||
                     data?.dataType === 'poll'
                   ) {
                     resolve(post);

package/src/v4/hook/usePostSubscription.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import {
+  getPostTopic,
+  PostRepository,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+
+export const usePostSubscription = (postId: string) => {
+  const [subscribedPost, setSubscribedPost] = useState<Amity.Post>(null);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (postId) {
+      unsubscribe = PostRepository.getPost(postId, ({ data }) => {
+        setSubscribedPost(data);
+      });
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [postId]);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (subscribedPost) {
+      unsubscribe = subscribeTopic(getPostTopic(subscribedPost));
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [subscribedPost]);
+
+  return { subscribedPost };
+};

package/src/v4/hook/useRoomSubscription.ts

@@ -0,0 +1,19 @@
+import {
+  getRoomWatcherTopic,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+import { useEffect } from 'react';
+
+export const useRoomSubscription = ({ room }: { room?: Amity.Room | null }) => {
+  useEffect(() => {
+    const unsubscriber: Amity.Unsubscriber[] = [];
+
+    if (room?.roomId && room?.status !== 'recorded') {
+      unsubscriber.push(subscribeTopic(getRoomWatcherTopic(room)));
+    }
+
+    return () => unsubscriber.forEach((fn) => fn());
+  }, [room, room?.roomId]);
+
+  return null;
+};

package/src/v4/index.tsx

@@ -11,7 +11,7 @@ export { default as AmityMyCommunitiesSearchPage } from './PublicApi/Pages/Amity
 export { default as AmityAllCategoriesPage } from './PublicApi/Pages/AmityAllCategoriesPage/AmityAllCategoriesPage';
 export { default as AmityCommunitiesByCategoryPage } from './PublicApi/Pages/AmityCommunitiesByCategoryPage/AmityCommunitiesByCategoryPage';
 export { default as AmityCommunityProfilePage } from './PublicApi/Pages/AmityCommunityProfilePage/AmityCommunityProfilePage';
-// export { default as AmityCreateLivestreamPage } from './PublicApi/Pages/AmityCreateLivestreamPage';
+export { default as AmityCreateLivestreamPage } from './PublicApi/Pages/AmityCreateLivestreamPage';
 export { default as AmityLivestreamPostTargetSelectionPage } from './PublicApi/Pages/AmityLivestreamPostTargetSelectionPage';
 export { default as AmityLivestreamTerminatedPage } from './PublicApi/Pages/AmityLivestreamTerminatedPage';
 export { default as AmityLivestreamPlayerPage } from './PublicApi/Pages/AmityLivestreamPlayerPage';

package/src/v4/routes/AmityPageRenderer.tsx

@@ -65,6 +65,7 @@ import AmityCommunityProfilePage from '../PublicApi/Pages/AmityCommunityProfileP
 import LivestreamTerminated from '../screen/LivestreamTerminated';
 import PollTargetSelection from '../screen/PollTargetSelection';
 import LivestreamPostTargetSelection from '../screen/LivestreamPostTargetSelection';
+import CommunityMembership from '../screen/CommunityMembership';
 
 interface PageRendererProps {
   children: React.JSX.Element;
@@ -82,6 +83,7 @@ export default function PageRenderer({ children }: PageRendererProps) {
           <Stack.Navigator
             id={undefined}
             screenOptions={{
+              headerShown: false,
               headerShadowVisible: false,
               contentStyle: {
                 backgroundColor: theme.colors.background,
@@ -192,6 +194,10 @@ export default function PageRenderer({ children }: PageRendererProps) {
               name="CommunityAddMember"
               component={CommunityAddMember}
             />
+            <Stack.Screen
+              name="CommunityMembership"
+              component={CommunityMembership}
+            />
             <Stack.Screen
               name="CommunityPostPermission"
               component={CommunityPostPermission}

package/src/v4/routes/AmitySocialUIKitV4Navigator.tsx

@@ -65,13 +65,17 @@ import CommunityCommentsNotificationSetting from '../../v4/screen/CommunityComme
 import CommunityStoriesNotificationSetting from '../../v4/screen/CommunityStoriesNotificationSetting';
 import CommunityLivestreamsNotificationSetting from '../../v4/screen/CommunityLivestreamsNotificationSetting';
 import CommunityPendingRequest from '../../v4/screen/CommunityPendingRequest';
+import { GlobalBan } from '../screen/GlobalBan';
 
 export default function AmitySocialUIKitV4Navigator() {
   const Stack = createNativeStackNavigator<RootStackParamList>();
-  const { isConnected } = useAuth();
+  const { isConnected, isGlobalBan } = useAuth();
   const theme = useTheme() as MyMD3Theme;
 
   const styles = useStyles();
+
+  if (isGlobalBan) return <GlobalBan />;
+
   return (
     <NavigationIndependentTree>
       <NavigationContainer>

package/src/v4/routes/RouteParamList.tsx

@@ -35,6 +35,7 @@ export type RootStackParamList = {
     postId: string;
     showEndPopup?: boolean;
     category?: AmityPostCategory;
+    isDeleted?: boolean;
   };
   UserProfile: {
     userId: string;
@@ -72,7 +73,7 @@ export type RootStackParamList = {
     targetType: string;
   };
   LivestreamPlayer: {
-    streamId: string;
+    roomId: string;
     post: Amity.Post;
   };
   LivestreamTerminated: {

package/src/v4/screen/GlobalBan/GlobalBan.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useStyles } from './styles';
+import { Typography } from '../../../v4/component/Typography/Typography';
+import { View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { warning } from '../../../v4/assets/icons';
+
+export function GlobalBan() {
+  const { styles, theme } = useStyles();
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'left']}>
+      <View style={styles.container}>
+        <View style={styles.titleContainer}>
+          <Typography.TitleBold style={styles.title}>
+            Community
+          </Typography.TitleBold>
+        </View>
+        <View style={styles.contentContainer}>
+          <SvgXml
+            width={56}
+            height={56}
+            xml={warning()}
+            color={theme.colors.base}
+          />
+          <Typography.Headline style={styles.title}>
+            You've been banned.
+          </Typography.Headline>
+          <Typography.Body style={styles.body}>
+            Based on your previous activities, your account has been banned from
+            all feeds.
+          </Typography.Body>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}

package/src/v4/screen/GlobalBan/index.ts

@@ -0,0 +1 @@
+export { GlobalBan } from './GlobalBan';

package/src/v4/screen/GlobalBan/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    titleContainer: {
+      padding: 16,
+      borderBottomWidth: 1,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      borderBottomColor: theme.colors.baseShade4,
+    },
+    title: {
+      color: theme.colors.base,
+    },
+    contentContainer: {
+      gap: 8,
+      flex: 1,
+      paddingVertical: 24,
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
+    body: {
+      textAlign: 'center',
+      color: theme.colors.baseShade2,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/v4/screen/PostDetail/index.tsx

@@ -34,6 +34,7 @@ const PostDetail: React.FC<IPostDetailPage> = ({ defaultPostId }) => {
       isFromComponent={!!defaultPostId && !postIdFromRoute}
       postId={postId}
       category={route?.params?.category}
+      isDeleted={route?.params?.isDeleted}
     />
   );
 };