@amityco/react-native-social-uikit 4.0.1-fd53cf63.0 → 4.0.1

package/src/core/routes/AmityUIKitNavigator.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'react';
 import {
   NavigationContainer,
   NavigationIndependentTree,
@@ -44,8 +43,6 @@ import { CommunityStoriesNotificationSettingScreen } from '../../social/screens/
 import { CommunityLivestreamsNotificationSettingScreen } from '../../social/screens/CommunityLivestreamsNotificationSetting';
 import CommunityPendingRequest from '../../social/screens/CommunityPendingRequest';
 import { GlobalBan } from '../../social/screens/GlobalBan';
-import { VisitorUsageLimit } from '../../social/screens/VisitorUsageLimit';
-import { useBehaviour } from '../../social/providers/BehaviourProvider';
 import {
   ImageViewerScreen,
   VideoPlayerScreen,
@@ -63,32 +60,10 @@ const Stack = createNativeStackNavigator<
 
 export default function AmitySocialUIKitV4Navigator() {
   const theme = useTheme<MyMD3Theme>();
-  const { isGlobalBan, isVisitorUsageLimitReached } = useAuth();
-  const { AmityGlobalBehaviour } = useBehaviour();
-
-  const handleVisitorUsageLimitReached =
-    AmityGlobalBehaviour?.handleVisitorUsageLimitReached;
-
-  const hasHandledUsageLimit = useRef(false);
-
-  useEffect(() => {
-    if (!isVisitorUsageLimitReached) {
-      hasHandledUsageLimit.current = false;
-      return;
-    }
-
-    if (handleVisitorUsageLimitReached && !hasHandledUsageLimit.current) {
-      hasHandledUsageLimit.current = true;
-      handleVisitorUsageLimitReached();
-    }
-  }, [isVisitorUsageLimitReached, handleVisitorUsageLimitReached]);
+  const { isGlobalBan } = useAuth();
 
   if (isGlobalBan) return <GlobalBan />;
 
-  if (isVisitorUsageLimitReached && !handleVisitorUsageLimitReached) {
-    return <VisitorUsageLimit />;
-  }
-
   return (
     <NavigationIndependentTree>
       <NavigationContainer ref={navigationRef} onReady={onNavigationReady}>

package/src/core/types/auth.ts

@@ -10,6 +10,4 @@ export type AuthContextInterface = {
   authToken?: string;
   fcmToken?: string;
   isGlobalBan: boolean;
-  isVisitorUsageLimitReached: boolean;
-  isVisitorOrBot: boolean;
 };

package/src/core/types/behaviour.ts

@@ -17,12 +17,6 @@ export type CommunitySettingPageContext = {
 };
 
 export interface IBehaviour {
-  AmityGlobalBehaviour?: {
-    handleVisitorUserAction?: () => void;
-    handleNonMemberAction?: () => void;
-    handleVisitorUsageLimitReached?: () => void;
-    handleVisitorUsageLimitSignIn?: () => void;
-  };
   AmitySocialHomePageBehaviour?: {
     onChooseTab?: (arg?: string) => void;
   };

package/src/core/utils/fileUpload.ts

@@ -0,0 +1,60 @@
+/**
+ * fileUpload.ts
+ *
+ * Helper for attaching a local file to a FormData for upload to the Amity SDK.
+ *
+ * Why the `{ uri, name, type }` object (and NOT a Blob)
+ * -----------------------------------------------------
+ * React Native's `FormData.getParts()` only turns a value into a multipart
+ * *file* part when that value is an object carrying a `uri`:
+ *
+ *   • `name` → the `filename` in the `Content-Disposition` header
+ *   • `type` → the part's `Content-Type`
+ *   • `uri`  → the local path the native networking layer streams bytes from
+ *
+ * This is the canonical React Native upload pattern and works on BOTH the Old
+ * and the New (Bridgeless / JSI) Architecture — RN 0.83 did not change this JS
+ * API. The Amity SDK's `uploadImage` is built around it too: it calls
+ * `formData.getAll('files')` and reads `files[0].name` to set
+ * `preferredFilename`.
+ *
+ * Do NOT append a Blob here. A Blob produced by `fetch(uri).blob()` has:
+ *   • no `uri`            → RN attaches no file body, so the request carries no
+ *                           bytes and the server responds `400 "No files
+ *                           uploaded."`
+ *   • no top-level `name` → `files[0].name` is `null`, so `preferredFilename`
+ *                           is sent as `null`.
+ * That combination is exactly the failure seen in PDT-3461.
+ */
+
+import { Platform } from 'react-native';
+
+/**
+ * Append a local file to `formData` as a React-Native multipart file part.
+ *
+ * @param formData   The FormData instance to mutate.
+ * @param fieldName  The multipart field name (e.g. `'files'`).
+ * @param fileUri    Local file URI (`file://…` or `content://…`).
+ * @param fileName   The filename sent in the Content-Disposition header.
+ * @param mimeType   MIME type for the part (e.g. `'image/jpeg'`).
+ */
+export function appendFileToFormData(
+  formData: FormData,
+  fieldName: string,
+  fileUri: string,
+  fileName: string,
+  mimeType: string
+): void {
+  // Android keeps the URI as-is (`content://` / `file://` are both streamable);
+  // iOS expects the `file://` scheme stripped to a bare path.
+  const uri =
+    Platform.OS === 'android' ? fileUri : fileUri.replace('file://', '');
+
+  // RN's FormData.append is typed for the legacy `{ uri, name, type }` object
+  // but its TS types don't expose that overload, so we cast to `any`.
+  formData.append(fieldName, {
+    uri,
+    name: fileName,
+    type: mimeType,
+  } as any);
+}

package/src/social/components/Social/CommentList/CommentList.tsx

@@ -31,7 +31,6 @@ import { useToast } from '../../../../core/stores/slices/toastSlice';
 import { lock } from '../../../../core/assets/icons';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { MAX_MENTION_USERS } from '../../../../core/constants';
-import useAuth from '../../../../core/hooks/useAuth';
 
 interface ICommentListProp {
   postId: string;
@@ -69,8 +68,6 @@ const CommentList: FC<ICommentListProp> = ({
   withAvatar,
   disabledComment,
 }) => {
-  const { isVisitorOrBot } = useAuth();
-  const hideComposer = disabledInteraction || isVisitorOrBot;
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
   const onNextPageRef = useRef<() => void | null>(null);
@@ -287,7 +284,7 @@ const CommentList: FC<ICommentListProp> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!hideComposer &&
+          {!disabledInteraction &&
             (disabledComment ? (
               <View style={styles.disabledCommentWrap}>
                 <SvgXml

package/src/social/components/Social/CommentListItem/CommentListItem.tsx

@@ -44,7 +44,6 @@ import ReplyCommentList from '../../legacy/Social/ReplyCommentList';
 import AmityReactionListComponent from '../../../features/reaction/components/List';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import { useTimeDifference } from '../../../hooks/useTimeDifference';
-import { useGlobalBehavior } from '../../../hooks/useGlobalBehavior';
 import { LinkPreview } from '../../PreviewLink';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { pen, report, trash, unreport } from '../../../../core/assets/icons';
@@ -291,14 +290,6 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
-  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
-
-  const onPressLike = () =>
-    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
-
-  const onPressReply = () =>
-    handleGlobalBehavior({ defaultBehavior: onHandleReply });
-
   const onPressCommentReaction = () => {
     setIsReactionListVisible(true);
   };
@@ -357,7 +348,10 @@ const CommentListItem = ({
                     </Typography.Caption>
                   )}
                 </View>
-                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
+                <TouchableOpacity
+                  onPress={() => addReactionToComment()}
+                  style={styles.likeBtn}
+                >
                   <Typography.CaptionBold
                     style={isLike ? styles.likedText : styles.btnText}
                   >
@@ -365,22 +359,20 @@ const CommentListItem = ({
                   </Typography.CaptionBold>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  onPress={disabledComment ? undefined : onPressReply}
+                  onPress={disabledComment ? undefined : onHandleReply}
                   style={styles.likeBtn}
                 >
                   <Typography.CaptionBold style={styles.btnText}>
                     Reply
                   </Typography.CaptionBold>
                 </TouchableOpacity>
-                {!isVisitorOrBot && (
-                  <TouchableOpacity onPress={openModal}>
-                    <SvgXml
-                      xml={threeDots(theme.colors.baseShade2)}
-                      width="20"
-                      height="20"
-                    />
-                  </TouchableOpacity>
-                )}
+                <TouchableOpacity onPress={openModal}>
+                  <SvgXml
+                    xml={threeDots(theme.colors.baseShade2)}
+                    width="20"
+                    height="20"
+                  />
+                </TouchableOpacity>
               </View>
 
               {likeReaction > 0 && (

package/src/social/components/legacy/Social/ReplyCommentList/index.tsx

@@ -44,7 +44,6 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../../core/routes/RouteParamList';
 import { useTimeDifference } from '../../../../hooks';
-import { useGlobalBehavior } from '../../../../hooks/useGlobalBehavior';
 import { useToast } from '../../../../../core/stores/slices/toastSlice';
 import AmityReactionListComponent from '../../../../features/reaction/components/List';
 
@@ -156,12 +155,6 @@ export default function ReplyCommentList({
       await addCommentReaction(commentId, 'like');
     }
   };
-
-  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
-
-  const onPressLike = () =>
-    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
-
   const deletePostObject = () => {
     Alert.alert('Delete reply', `This reply will be permanently deleted.`, [
       {
@@ -176,7 +169,6 @@ export default function ReplyCommentList({
     ]);
     setIsVisible(false);
   };
-
   const reportCommentObject = async () => {
     if (isReportByMe) {
       const unReportPost = await unReportTargetById('comment', commentId);
@@ -275,7 +267,10 @@ export default function ReplyCommentList({
                   </Typography.Caption>
                 )}
               </View>
-              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
+              <TouchableOpacity
+                onPress={() => addReactionToComment()}
+                style={styles.likeBtn}
+              >
                 <Typography.CaptionBold
                   style={isLike ? styles.likedText : styles.btnText}
                 >
@@ -283,15 +278,13 @@ export default function ReplyCommentList({
                 </Typography.CaptionBold>
               </TouchableOpacity>
 
-              {!isVisitorOrBot && (
-                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.base)}
-                    width="20"
-                    height="16"
-                  />
-                </TouchableOpacity>
-              )}
+              <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                <SvgXml
+                  xml={threeDots(theme.colors.base)}
+                  width="20"
+                  height="16"
+                />
+              </TouchableOpacity>
             </View>
             {likeReaction > 0 && (
               <TouchableOpacity

package/src/social/elements/CommunityJoinButtonElement/CommunityJoinButtonElement.tsx

@@ -1,11 +1,7 @@
 import { FC, memo } from 'react';
 import { TouchableOpacityProps } from 'react-native';
 import { ComponentID, ElementID, PageID } from '../../enums/enumUIKitID';
-import {
-  useAmityElement,
-  useGlobalBehavior,
-  useJoinCommunity,
-} from '../../hooks';
+import { useAmityElement, useJoinCommunity } from '../../hooks';
 import { Button, BUTTON_SIZE } from '../../components/Button/Button';
 import { plus } from '../../../core/assets/icons';
 import { useCustomRankingGlobalFeed } from '../../hooks/useCustomRankingGlobalFeed';
@@ -40,13 +36,9 @@ const CommunityJoinButton: FC<CommunityJoinButtonType> = ({
     },
   });
 
-  const { handleGlobalBehavior } = useGlobalBehavior();
-
   const handleJoinCommunity = () => {
     if (!communityId) return;
-    handleGlobalBehavior({
-      defaultBehavior: () => joinCommunity(communityId),
-    });
+    joinCommunity(communityId);
   };
 
   if (isExcluded) return null;

package/src/social/features/comment/components/PostComment/CommentListItem/CommentListItem.tsx

@@ -43,7 +43,7 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../../../../core/providers/AmityUIKitProvider';
 import ReplyCommentList from '../ReplyCommentList/index';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
-import { useGlobalBehavior, useTimeDifference } from '../../../../../hooks';
+import { useTimeDifference } from '../../../../../hooks';
 import ModeratorBadgeElement from '../../../../../elements/ModeratorBadgeElement/ModeratorBadgeElement';
 import { BrandBadge } from '../../../../../elements/BrandBadge';
 import { ComponentID, PageID } from '../../../../../enums';
@@ -315,14 +315,6 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
-  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
-
-  const onPressLike = () =>
-    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
-
-  const onPressReply = () =>
-    handleGlobalBehavior({ defaultBehavior: onHandleReply });
-
   const onPressCommentReaction = () => {
     onNavigate && onNavigate();
     setIsReactionListVisible(true);
@@ -407,26 +399,27 @@ const CommentListItem = ({
                   )}
                 </View>
 
-                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
+                <TouchableOpacity
+                  onPress={() => addReactionToComment()}
+                  style={styles.likeBtn}
+                >
                   <Text style={isLike ? styles.likedText : styles.btnText}>
                     {!isLike ? 'Like' : 'Liked'}
                   </Text>
                 </TouchableOpacity>
-                <TouchableOpacity onPress={onPressReply} style={styles.likeBtn}>
+                <TouchableOpacity
+                  onPress={onHandleReply}
+                  style={styles.likeBtn}
+                >
                   <Text style={styles.btnText}>Reply</Text>
                 </TouchableOpacity>
-                {!isVisitorOrBot && (
-                  <TouchableOpacity
-                    onPress={openModal}
-                    style={styles.threeDots}
-                  >
-                    <SvgXml
-                      xml={threeDots(theme.colors.base)}
-                      width="20"
-                      height="16"
-                    />
-                  </TouchableOpacity>
-                )}
+                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                  <SvgXml
+                    xml={threeDots(theme.colors.base)}
+                    width="20"
+                    height="16"
+                  />
+                </TouchableOpacity>
               </View>
 
               {likeReaction > 0 && (

package/src/social/features/comment/components/PostComment/ReplyCommentList/index.tsx

@@ -27,7 +27,6 @@ import {
 import { Pressable } from 'react-native';
 import useAuth from '../../../../../../core/hooks/useAuth';
 import { useTimeDifference } from '../../../../../hooks/useTimeDifference';
-import { useGlobalBehavior } from '../../../../../hooks/useGlobalBehavior';
 import {
   isReportTarget,
   reportTargetById,
@@ -145,12 +144,6 @@ const ReplyCommentList = ({
       await addCommentReaction(commentId, 'like');
     }
   };
-
-  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
-
-  const onPressLike = () =>
-    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
-
   const deleteReplyComment = () => {
     Alert.alert('Delete reply', 'This reply will be permanently deleted.', [
       {
@@ -299,20 +292,21 @@ const ReplyCommentList = ({
                 )}
               </View>
 
-              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
+              <TouchableOpacity
+                onPress={() => addReactionToComment()}
+                style={styles.likeBtn}
+              >
                 <Text style={isLike ? styles.likedText : styles.btnText}>
                   {!isLike ? 'Like' : 'Liked'}
                 </Text>
               </TouchableOpacity>
-              {!isVisitorOrBot && (
-                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.base)}
-                    width="20"
-                    height="16"
-                  />
-                </TouchableOpacity>
-              )}
+              <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                <SvgXml
+                  xml={threeDots(theme.colors.base)}
+                  width="20"
+                  height="16"
+                />
+              </TouchableOpacity>
             </View>
 
             {likeReaction > 0 && (

package/src/social/features/feed/components/TopNavigation/TopNavigation.tsx

@@ -15,7 +15,6 @@ import AmityCreatePostMenuComponent from '../CreatePostMenu';
 import TextKeyElement from '../../../../elements/TextKeyElement/TextKeyElement';
 import { usePopup } from '../../../../hooks/usePopup';
 import Popup from '../../../../components/PopupMenu/PopupMenu';
-import useAuth from '../../../../../core/hooks/useAuth';
 
 type AmitySocialHomeTopNavigationComponentType = {
   activeTab: string;
@@ -30,7 +29,6 @@ const AmitySocialHomeTopNavigationComponent: FC<
   const theme = componentConfig.themeStyles;
   const { AmitySocialHomeTopNavigationComponentBehaviour } = useBehaviour();
   const { isOpen, setIsOpen, toggle } = usePopup();
-  const { isVisitorOrBot } = useAuth();
 
   const [myCommunitiesTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -171,7 +169,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
           >
             <Image source={searchIcon} style={styles.icon} />
           </TouchableOpacity>
-          {!isVisitorOrBot && activeTab !== exploreTab && (
+          {activeTab !== exploreTab && (
             <TouchableOpacity
               style={styles.iconBtn}
               onPress={onPressCreate}

package/src/social/features/post/Detail/index.tsx

@@ -43,7 +43,6 @@ import NetInfo from '@react-native-community/netinfo';
 import { useToast } from '../../../../core/stores/slices/toastSlice';
 import MyAvatar from '../../../components/MyAvatar/MyAvatar';
 import { MAX_MENTION_USERS } from '../../../../core/constants';
-import useAuth from '../../../../core/hooks/useAuth';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import ErrorComponent from '../../../components/ErrorComponent/ErrorComponent';
@@ -74,8 +73,6 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 }) => {
   const pageId = PageID.post_detail_page;
   const componentId = ComponentID.WildCardComponent;
-
-  const { isVisitorOrBot } = useAuth();
   const disabledInteraction = false;
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -288,7 +285,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction && !isVisitorOrBot && (
+          {!disabledInteraction && (
             <View style={styles.InputWrap}>
               <MyAvatar style={styles.myAvatar} />
               <View style={styles.inputContainer}>
@@ -401,7 +398,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
                 postData?.targetType === 'community' && postData?.targetId
               }
               postType="post"
-              disabledInteraction={disabledInteraction}
+              disabledInteraction={false}
               ListHeaderComponent={
                 postData && (
                   <AmityPostContentComponent

package/src/social/features/post/components/Content/Content.tsx

@@ -35,7 +35,6 @@ import { PostMenu } from '../../../../components/PostMenu';
 import PinBadge from '../../../../elements/PinBadge';
 import AnnouncementBadge from '../../../../elements/AnnouncementBadge';
 import { Typography } from '../../../../../core/components/Typography/Typography';
-import useAuth from '../../../../../core/hooks/useAuth';
 
 type AmityPostContentComponentProps = {
   post: Amity.Post;
@@ -75,7 +74,6 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
     componentId: componentId,
   });
   const styles = useStyles(themeStyles);
-  const { isVisitorOrBot } = useAuth();
   const [textPost, setTextPost] = useState<string>('');
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
   const navigation =
@@ -294,11 +292,10 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
             category === AmityPostCategory.PIN_AND_ANNOUNCEMENT) && (
             <PinBadge componentId={ComponentID.post_content} />
           )}
-          {!isVisitorOrBot &&
-            AmityPostContentComponentStyle ===
-              AmityPostContentComponentStyleEnum.feed && (
-              <PostMenu post={post} pageId={pageId} componentId={componentId} />
-            )}
+          {AmityPostContentComponentStyle ===
+            AmityPostContentComponentStyleEnum.feed && (
+            <PostMenu post={post} pageId={pageId} componentId={componentId} />
+          )}
         </Pressable>
         <View>
           <View style={styles.bodySection}>

package/src/social/features/post/components/EngagementActions/Components/DetailStyle.tsx

@@ -8,10 +8,7 @@ import {
 } from '@amityco/ts-sdk-react-native';
 import { AmityPostEngagementActionsSubComponentType } from './type';
 import { useStyles } from './styles';
-import {
-  useAmityComponent,
-  useInteractionBehavior,
-} from '../../../../../hooks';
+import { useAmityComponent } from '../../../../../hooks';
 import { PageID, ComponentID } from '../../../../../enums';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../../core/assets/icons/xml';
@@ -37,7 +34,6 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     componentId: ComponentID.post_content,
   });
   const styles = useStyles(themeStyles);
-  const { handleInteraction } = useInteractionBehavior();
   const [postData, setPostData] = useState<Amity.Post>(null);
 
   const { shareLink, handleSharePress } = usePostShareAction({
@@ -99,20 +95,19 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postId]);
 
-  const onPressReaction = useCallback(() => {
-    handleInteraction({
-      defaultBehavior: addReactionToPost,
-      isJoined: community ? community.isJoined : true,
-    });
-  }, [addReactionToPost, handleInteraction, community]);
-
   const onClickReactions = useCallback(() => {
-    handleInteraction({
-      defaultBehavior: () => setIsReactionListVisible(true),
-      allowNonMember: true,
-      isJoined: community?.isJoined,
-    });
-  }, [handleInteraction, community]);
+    setIsReactionListVisible(true);
+  }, []);
+
+  if (community && community.isJoined === false) {
+    return (
+      <View style={styles.actionSection}>
+        <Text style={styles.btnText}>
+          Join community to interact with all posts
+        </Text>
+      </View>
+    );
+  }
 
   return (
     <>
@@ -141,7 +136,7 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
       </View>
       <View style={[styles.actionSection, styles.detailActionSection]}>
         <View style={styles.row}>
-          <TouchableOpacity onPress={onPressReaction} style={styles.likeBtn}>
+          <TouchableOpacity onPress={addReactionToPost} style={styles.likeBtn}>
             {isLike ? (
               <SvgXml
                 xml={likeReaction(themeStyles.colors.background)}

package/src/social/features/post/components/EngagementActions/Components/FeedStyle.tsx

@@ -8,10 +8,7 @@ import {
   subscribeTopic,
 } from '@amityco/ts-sdk-react-native';
 import { useStyles } from './styles';
-import {
-  useAmityComponent,
-  useInteractionBehavior,
-} from '../../../../../hooks';
+import { useAmityComponent } from '../../../../../hooks';
 import { PageID, ComponentID } from '../../../../../enums';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../../core/assets/icons/xml';
@@ -41,7 +38,6 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
   });
   const styles = useStyles(themeStyles);
   const { AmityGlobalFeedComponentBehavior } = useBehaviour();
-  const { handleInteraction } = useInteractionBehavior();
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [postData, setPostData] = useState<Amity.Post>(null);
@@ -85,14 +81,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postData, postId]);
 
-  const onPressReaction = useCallback(() => {
-    handleInteraction({
-      defaultBehavior: addReactionToPost,
-      isJoined: community ? community.isJoined : true,
-    });
-  }, [addReactionToPost, handleInteraction, community]);
-
-  const goToPostDetail = useCallback(() => {
+  const onPressComment = useCallback(() => {
     if (AmityGlobalFeedComponentBehavior.goToPostDetailPage) {
       return AmityGlobalFeedComponentBehavior.goToPostDetailPage();
     }
@@ -101,17 +90,20 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     });
   }, [AmityGlobalFeedComponentBehavior, navigation, postId]);
 
-  const onPressComment = useCallback(() => {
-    handleInteraction({
-      defaultBehavior: goToPostDetail,
-      isJoined: community ? community.isJoined : true,
-    });
-  }, [goToPostDetail, handleInteraction, community]);
+  if (community && community.isJoined === false) {
+    return (
+      <View style={styles.actionSection}>
+        <Text style={styles.btnText}>
+          Join community to interact with all posts
+        </Text>
+      </View>
+    );
+  }
 
   return (
     <Pressable onPress={onPressComment} style={styles.actionSection}>
       <View style={styles.row}>
-        <TouchableOpacity onPress={onPressReaction} style={styles.likeBtn}>
+        <TouchableOpacity onPress={addReactionToPost} style={styles.likeBtn}>
           {isLike ? (
             <SvgXml
               xml={likeReaction(themeStyles.colors.background)}