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

package/src/v4/PublicApi/Pages/AmitySocialHomePage/AmitySocialHomePage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useCallback, useState } from 'react';
-import { LogBox, SafeAreaView, StyleSheet } from 'react-native';
+import { useCallback, useRef, useState } from 'react';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
 import CustomSocialTab from '../../../../v4/component/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../../../v4/hook';
 import {
@@ -12,15 +12,11 @@ import {
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
 import AmitySocialHomeTopNavigationComponent from '../../../../v4/PublicApi/Components/AmitySocialHomeTopNavigationComponent/AmitySocialHomeTopNavigationComponent';
-import AmityEmptyNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/AmityEmptyNewsFeedComponent';
 import AmityMyCommunitiesComponent from '../../../../v4/PublicApi/Components/AmityMyCommunitiesComponent/AmityMyCommunitiesComponent';
 import AmityNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityNewsFeedComponent/AmityNewsFeedComponent';
 import AmityExploreComponent from '../../../../v4/PublicApi/Components/AmityExploreComponent/AmityExploreComponent';
-import NewsFeedLoadingComponent from '../../../../v4/component/NewsFeedLoadingComponent/NewsFeedLoadingComponent';
-import { useCustomRankingGlobalFeed } from '../../../../v4/hook/useCustomRankingGlobalFeed';
 import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider';
 
-LogBox.ignoreAllLogs(true);
 const AmitySocialHomePage = () => {
   const theme = useTheme() as MyMD3Theme;
   const styles = StyleSheet.create({
@@ -31,8 +27,6 @@ const AmitySocialHomePage = () => {
   });
 
   const { AmitySocialHomePageBehaviour } = useBehaviour();
-  const { itemWithAds: globalFeedPosts, loading } =
-    useCustomRankingGlobalFeed();
 
   const [newsFeedTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -56,11 +50,13 @@ const AmitySocialHomePage = () => {
   }) as string[];
 
   const [activeTab, setActiveTab] = useState<string>(newsFeedTab);
+  const visitedTabs = useRef<Set<string>>(new Set([newsFeedTab]));
 
   const onTabChange = useCallback(
     (tabName: string) => {
       if (AmitySocialHomePageBehaviour.onChooseTab)
         return AmitySocialHomePageBehaviour.onChooseTab(tabName);
+      visitedTabs.current.add(tabName);
       setActiveTab(tabName);
     },
     [AmitySocialHomePageBehaviour]
@@ -70,30 +66,10 @@ const AmitySocialHomePage = () => {
     onTabChange(exploreTab);
   }, [exploreTab, onTabChange]);
 
-  const renderNewsFeed = () => {
-    if (loading) return <NewsFeedLoadingComponent />;
-    if (activeTab === exploreTab)
-      return <AmityExploreComponent pageId={PageID.social_home_page} />;
-
-    if (activeTab === newsFeedTab) {
-      if (!loading && globalFeedPosts?.length === 0)
-        return (
-          <AmityEmptyNewsFeedComponent
-            pageId={PageID.social_home_page}
-            onPressExploreCommunity={onPressExploreCommunity}
-          />
-        );
-      return <AmityNewsFeedComponent pageId={PageID.social_home_page} />;
-    }
-    if (activeTab === myCommunitiesTab)
-      return (
-        <AmityMyCommunitiesComponent
-          pageId={PageID.social_home_page}
-          componentId={ComponentID.my_communities}
-        />
-      );
-    return null;
-  };
+  const tabStyle = (tab: string) => ({
+    flex: 1,
+    display: activeTab === tab ? ('flex' as const) : ('none' as const),
+  });
 
   return (
     <SafeAreaView
@@ -108,7 +84,25 @@ const AmitySocialHomePage = () => {
         onTabChange={onTabChange}
         activeTab={activeTab}
       />
-      {renderNewsFeed()}
+      <View style={tabStyle(newsFeedTab)}>
+        <AmityNewsFeedComponent
+          pageId={PageID.social_home_page}
+          onPressExploreCommunity={onPressExploreCommunity}
+        />
+      </View>
+      {visitedTabs.current.has(exploreTab) && (
+        <View style={tabStyle(exploreTab)}>
+          <AmityExploreComponent pageId={PageID.social_home_page} />
+        </View>
+      )}
+      {visitedTabs.current.has(myCommunitiesTab) && (
+        <View style={tabStyle(myCommunitiesTab)}>
+          <AmityMyCommunitiesComponent
+            pageId={PageID.social_home_page}
+            componentId={ComponentID.my_communities}
+          />
+        </View>
+      )}
     </SafeAreaView>
   );
 };

package/src/v4/PublicApi/Pages/AmityUserProfilePage/AmityUserProfilePage.tsx

@@ -152,7 +152,9 @@ function UserProfile({
         </TouchableOpacity>
       ),
       headerLeft: () => {
-        return isShowBackButton ? <BackButton onPress={handleGoBack} /> : null;
+        return isShowBackButton ? (
+          <BackButton goBack={false} onPress={handleGoBack} />
+        ) : null;
       },
     });
   }, [
@@ -174,17 +176,32 @@ function UserProfile({
   }, [client]);
 
   useEffect(() => {
-    if (!user?.avatarFileId) {
-      return setAvatar(defaultAvatarUri);
-    }
-    (async () => {
+    const loadAvatar = async () => {
+      if (!user) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
+      if (user.avatarCustomUrl) {
+        setAvatar(user.avatarCustomUrl);
+        return;
+      }
+
+      if (!user.avatarFileId) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
       const avatarUrl = await getImage({
         fileId: user.avatarFileId,
         imageSize: ImageSizeState.small,
       });
+
       setAvatar(avatarUrl ?? defaultAvatarUri);
-    })();
-  }, [getImage, user?.avatarFileId]);
+    };
+
+    loadAvatar();
+  }, [getImage, user]);
 
   useFocusEffect(
     useCallback(() => {

package/src/v4/PublicApi/Pages/AmityViewStoryPage/AmityViewStoryPage.tsx

@@ -34,7 +34,7 @@ const AmityViewStoryPage: FC<IAmityViewStoryPage> = ({
 }) => {
   const { client } = useAuth();
   const userId = (client as Amity.Client).userId;
-  const hasStoryPermission = useStoryPermission(targetId);
+  const { hasStoryPermission } = useStoryPermission(targetId);
   const styles = useStyles();
   const { getStories, stories, loading } = useStory();
   const { getImage } = useFile();

package/src/v4/PublicApi/Pages/AmityViewStoryPage/Components/AmityViewStoryItem.tsx

@@ -43,6 +43,8 @@ import { Typography } from '../../../../component/Typography/Typography';
 import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from '../../../../../providers/amity-ui-kit-provider';
 import { useUIKitDispatch } from '../../../../../redux/store';
+import { informative } from '../../../../../v4/assets/icons/toast';
+import { close as closeIcon } from '../../../../assets/icons';
 
 interface IAmityViewStoryItem {
   communityData: Amity.Community;
@@ -96,7 +98,6 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
   const [isLiked, setIsLiked] = useState<boolean>(myReactions?.length > 0);
   const [openCommentSheet, setOpenCommentSheet] = useState(false);
   const [load, setLoad] = useState(true);
-  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
@@ -248,10 +249,20 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
       );
       if (deleted) {
         current === 0 && previous();
-        dispatch(showToastMessage({ toastMessage: 'Story deleted' }));
+        dispatch(
+          showToastMessage({
+            toastMessage: 'Story deleted',
+            isSuccessToast: true,
+          })
+        );
       }
     } catch (err) {
-      dispatch(showToastMessage({ toastMessage: 'Delete Story Error!' }));
+      dispatch(
+        showToastMessage({
+          toastMessage: 'Failed to delete story. Please try again.',
+          isSuccessToast: false,
+        })
+      );
     } finally {
       setLoading(false);
       sheetRef?.current?.close();
@@ -288,6 +299,30 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
     sheetRef.current?.open();
   }, [progress]);
 
+  const onPressMenuButtonFailed = useCallback(() => {
+    progress.stopAnimation(() => setPressed(true));
+    Alert.alert(
+      'Failed to upload story',
+      'Would you like to discard uploading?',
+      [
+        { text: 'Cancel', onPress: () => sheetRef?.current?.close() },
+        { text: 'Delete', style: 'destructive', onPress: deleteStory },
+      ]
+    );
+  }, [deleteStory, progress]);
+
+  const isFailedImageUpload =
+    currentStory?.dataType === 'image' &&
+    (currentStory?.syncState === 'error' ||
+      currentStory?.syncState === 'syncing' ||
+      !currentStory?.imageData?.fileUrl);
+
+  const isFailedVideoUpload =
+    currentStory?.dataType === 'video' &&
+    (currentStory?.syncState === 'error' ||
+      currentStory?.syncState === 'syncing' ||
+      !currentStory?.videoData?.fileUrl);
+
   return (
     <View style={[styles.container]}>
       <SafeAreaView>
@@ -296,7 +331,13 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
             <Video
               onLoadStart={() => setLoad(true)}
               onProgress={({ currentTime }) => setCurrentSeek(currentTime)}
-              source={{ uri: currentStory?.videoData.fileUrl }}
+              source={{
+                uri:
+                  currentStory?.videoData?.fileUrl ||
+                  (typeof currentStory?.data?.fileData === 'string'
+                    ? currentStory?.data?.fileData
+                    : ''),
+              }}
               style={styles.video}
               resizeMode="contain"
               controls={false}
@@ -308,12 +349,15 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
           ) : currentStory?.dataType === 'image' ? (
             <Image
               onLoadStart={() => setLoad(true)}
-              onError={({ nativeEvent: { error: err } }) =>
-                err && setError(true)
-              }
               onLoadEnd={() => start()}
-              source={{ uri: currentStory?.imageData.fileUrl }}
-              style={[styles.image]}
+              source={{
+                uri:
+                  currentStory?.imageData?.fileUrl ||
+                  (typeof currentStory?.data?.fileData === 'string'
+                    ? currentStory?.data?.fileData
+                    : ''),
+              }}
+              style={[styles.image, isFailedImageUpload && { opacity: 0.6 }]}
               resizeMode="contain"
             />
           ) : null}
@@ -322,11 +366,6 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
               <ActivityIndicator size="large" color={'white'} />
             </View>
           )}
-          {error && (
-            <View style={styles.spinnerContainer}>
-              <Text style={styles.error}>Story load error</Text>
-            </View>
-          )}
         </View>
       </SafeAreaView>
       <GestureRecognizer onSwipeUp={onPressComment} style={styles.flexCol}>
@@ -399,7 +438,12 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
                 </TouchableOpacity>
               )}
               <TouchableOpacity hitSlop={5} onPress={() => onClose()}>
-                <Text style={styles.whiteText}>X</Text>
+                <SvgXml
+                  xml={closeIcon()}
+                  width="28"
+                  height="28"
+                  color="white"
+                />
               </TouchableOpacity>
             </View>
           </View>
@@ -465,49 +509,70 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
           </TouchableOpacity>
         )}
       </GestureRecognizer>
-      <View style={styles.footer}>
-        {hasStoryImpressionPermission ? (
-          <TouchableOpacity
-            style={[
-              styles.seenContainer,
-              { backgroundColor: storyViewerBgColor },
-            ]}
-          >
-            <SvgXml xml={seenIcon()} width="25" height="25" />
-            <Text style={styles.seen}>{reachCount}</Text>
-          </TouchableOpacity>
-        ) : (
-          <View style={styles.seenContainer} />
-        )}
-        <View style={styles.seenContainer}>
-          <TouchableOpacity
-            style={[
-              styles.iconContainer,
-              { backgroundColor: storyCommentBgColor },
-            ]}
-            onPress={onPressComment}
-          >
-            <SvgXml xml={storyCommentIcon()} width="25" height="25" />
-            <Text style={styles.seen}>{commentsCounts}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[
-              styles.iconContainer,
-              {
-                backgroundColor: storyReactionBgColor,
-              },
-            ]}
-            onPress={onPressReaction}
-          >
-            <SvgXml
-              xml={isLiked ? storyLikedIcon : storyLikeIcon}
-              width="25"
-              height="25"
-            />
-            <Text style={styles.seen}>{totalReaction}</Text>
-          </TouchableOpacity>
+      {(isFailedImageUpload || isFailedVideoUpload) && hasStoryPermission ? (
+        <View style={styles.errorContainer}>
+          <View style={styles.errorContainerLeft}>
+            <SvgXml xml={informative('white')} width="20" height="20" />
+            <Typography.Body style={styles.errorText}>
+              Failed to upload story
+            </Typography.Body>
+          </View>
+          {
+            <TouchableOpacity
+              hitSlop={5}
+              style={styles.threeDotsMenu}
+              onPress={onPressMenuButtonFailed}
+            >
+              <SvgXml xml={storyThreedotsMenu()} width="20" height="20" />
+            </TouchableOpacity>
+          }
         </View>
-      </View>
+      ) : (
+        <View style={styles.footer}>
+          {hasStoryImpressionPermission ? (
+            <TouchableOpacity
+              style={[
+                styles.seenContainer,
+                { backgroundColor: storyViewerBgColor },
+              ]}
+            >
+              <SvgXml xml={seenIcon()} width="25" height="25" />
+              <Text style={styles.seen}>{reachCount}</Text>
+            </TouchableOpacity>
+          ) : (
+            <View style={styles.seenContainer} />
+          )}
+          <View style={styles.seenContainer}>
+            <TouchableOpacity
+              style={[
+                styles.iconContainer,
+                { backgroundColor: storyCommentBgColor },
+              ]}
+              onPress={onPressComment}
+            >
+              <SvgXml xml={storyCommentIcon()} width="25" height="25" />
+              <Text style={styles.seen}>{commentsCounts}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.iconContainer,
+                {
+                  backgroundColor: storyReactionBgColor,
+                },
+              ]}
+              onPress={onPressReaction}
+            >
+              <SvgXml
+                xml={isLiked ? storyLikedIcon : storyLikeIcon}
+                width="25"
+                height="25"
+              />
+              <Text style={styles.seen}>{totalReaction}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
       {openCommentSheet && (
         <Modal
           style={styles.bottomSheet}
@@ -530,6 +595,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
             <CommentList
               postId={currentStory?.storyId}
               postType="story"
+              disabledComment={!communityData?.allowCommentInStory}
               disabledInteraction={!communityData?.isJoined}
               onNavigate={onClose}
             />

package/src/v4/PublicApi/Pages/AmityViewStoryPage/styles.ts

@@ -14,6 +14,7 @@ export const useStyles = () => {
       flex: 1,
       width: width,
       backgroundColor: '#000',
+      position: 'relative',
     },
     flex: {
       flex: 1,
@@ -73,7 +74,7 @@ export const useStyles = () => {
       fontSize: 14,
     },
     avatarSubText: {
-      color: theme.colors.background,
+      color: 'white',
       fontSize: 12,
     },
     closeIconContainer: {
@@ -219,6 +220,27 @@ export const useStyles = () => {
       color: theme.colors.base,
       fontSize: 14,
     },
+    errorContainer: {
+      width: '100%',
+      position: 'absolute',
+      bottom: 120,
+      left: 0,
+      backgroundColor: theme.colors.alert,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+    },
+    errorContainerLeft: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    errorText: {
+      color: 'white',
+    },
   });
 
   return styles;

package/src/v4/assets/icons/lock.tsx

@@ -1,9 +1,10 @@
-export const icon = (
-  color: string = '#292B32'
-) => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 14.1562C9.625 14.1562 9.34375 13.875 9.34375 13.5V12C9.34375 11.6484 9.625 11.3438 10 11.3438C10.3516 11.3438 10.6562 11.6484 10.6562 12V13.5C10.6562 13.875 10.3516 14.1562 10 14.1562ZM15.25 10.125V15.375C15.25 16.0078 14.7344 16.5 14.125 16.5H5.875C5.24219 16.5 4.75 16.0078 4.75 15.375V10.125C4.75 9.51562 5.24219 9 5.875 9H6.625V7.875C6.625 6.02344 8.125 4.5 10 4.5C11.875 4.52344 13.375 6.04688 13.375 7.92188V9H14.125C14.7344 9 15.25 9.51562 15.25 10.125ZM7.75 9H12.25V7.875C12.25 6.65625 11.2188 5.625 10 5.625C8.75781 5.625 7.75 6.65625 7.75 7.875V9ZM14.125 10.125H5.875V15.375H14.125V10.125Z" fill="${color}"/>
-</svg>
-
+export const icon =
+  () => `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 20 20">
+      <path
+        fill="currentColor"
+        d="M15.5 8c.813 0 1.5.688 1.5 1.5v7a1.5 1.5 0 01-1.5 1.5h-11A1.48 1.48 0 013 16.5v-7A1.5 1.5 0 014.5 8h1V6.5C5.5 4.031 7.5 2 10 2c2.5.031 4.5 2.063 4.5 4.563V8h1zM7 6.5V8h6V6.5c0-1.625-1.375-3-3-3-1.656 0-3 1.375-3 3zm8.5 10v-7h-11v7h11z"
+      ></path>
+    </svg>
 `;
 
 export default icon;

package/src/v4/assets/icons/poll.tsx

@@ -1,6 +1,6 @@
 export const icon =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.1875 4.375C19.1016 4.375 19.875 5.14844 19.875 6.0625V18.4375C19.875 19.3867 19.1016 20.125 18.1875 20.125H5.8125C4.86328 20.125 4.125 19.3867 4.125 18.4375V6.0625C4.125 5.14844 4.86328 4.375 5.8125 4.375H18.1875ZM18.1875 18.4375V6.0625H5.8125V18.4375H18.1875ZM8.34375 16.75C8.02734 16.75 7.78125 16.5039 7.78125 16.1875V11.6875C7.78125 11.4062 8.02734 11.125 8.34375 11.125H8.90625C9.1875 11.125 9.46875 11.4062 9.46875 11.6875V16.1875C9.46875 16.5039 9.1875 16.75 8.90625 16.75H8.34375ZM11.7188 16.75C11.4023 16.75 11.1562 16.5039 11.1562 16.1875V8.3125C11.1562 8.03125 11.4023 7.75 11.7188 7.75H12.2812C12.5625 7.75 12.8438 8.03125 12.8438 8.3125V16.1875C12.8438 16.5039 12.5625 16.75 12.2812 16.75H11.7188ZM15.0938 16.75C14.7773 16.75 14.5312 16.5039 14.5312 16.1875V13.9375C14.5312 13.6562 14.7773 13.375 15.0938 13.375H15.6562C15.9375 13.375 16.2188 13.6562 16.2188 13.9375V16.1875C16.2188 16.5039 15.9375 16.75 15.6562 16.75H15.0938Z" fill="currentColor"/>
+  () => `<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1875 2.375C17.1016 2.375 17.875 3.14844 17.875 4.0625V16.4375C17.875 17.3867 17.1016 18.125 16.1875 18.125H3.8125C2.86328 18.125 2.125 17.3867 2.125 16.4375V4.0625C2.125 3.14844 2.86328 2.375 3.8125 2.375H16.1875ZM16.1875 16.4375V4.0625H3.8125V16.4375H16.1875ZM6.34375 14.75C6.02734 14.75 5.78125 14.5039 5.78125 14.1875V9.6875C5.78125 9.40625 6.02734 9.125 6.34375 9.125H6.90625C7.1875 9.125 7.46875 9.40625 7.46875 9.6875V14.1875C7.46875 14.5039 7.1875 14.75 6.90625 14.75H6.34375ZM9.71875 14.75C9.40234 14.75 9.15625 14.5039 9.15625 14.1875V6.3125C9.15625 6.03125 9.40234 5.75 9.71875 5.75H10.2812C10.5625 5.75 10.8438 6.03125 10.8438 6.3125V14.1875C10.8438 14.5039 10.5625 14.75 10.2812 14.75H9.71875ZM13.0938 14.75C12.7773 14.75 12.5312 14.5039 12.5312 14.1875V11.9375C12.5312 11.6562 12.7773 11.375 13.0938 11.375H13.6562C13.9375 11.375 14.2188 11.6562 14.2188 11.9375V14.1875C14.2188 14.5039 13.9375 14.75 13.6562 14.75H13.0938Z" fill="currentColor" style="fill:currentColor;fill:color(display-p3 0.1624 0.1694 0.1976);fill-opacity:1;"/>
 </svg>
 `;
 

package/src/v4/assets/icons/toast.tsx

@@ -1,18 +1,21 @@
-export const failed =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM13.4766 15.625C13.4766 16.4688 12.8086 17.1016 12 17.1016C11.1562 17.1016 10.5234 16.4688 10.5234 15.625C10.5234 14.8164 11.1562 14.1484 12 14.1484C12.8086 14.1484 13.4766 14.8164 13.4766 15.625ZM10.5938 8.20703C10.5938 7.96094 10.7695 7.75 11.0156 7.75H12.9492C13.1953 7.75 13.3711 7.96094 13.3711 8.20703L13.125 12.9883C13.125 13.1992 12.9141 13.375 12.7031 13.375H11.2617C11.0508 13.375 10.8398 13.1992 10.8398 12.9883L10.5938 8.20703Z" fill="white"/>
+export const failed = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM13.4766 15.625C13.4766 16.4688 12.8086 17.1016 12 17.1016C11.1562 17.1016 10.5234 16.4688 10.5234 15.625C10.5234 14.8164 11.1562 14.1484 12 14.1484C12.8086 14.1484 13.4766 14.8164 13.4766 15.625ZM10.5938 8.20703C10.5938 7.96094 10.7695 7.75 11.0156 7.75H12.9492C13.1953 7.75 13.3711 7.96094 13.3711 8.20703L13.125 12.9883C13.125 13.1992 12.9141 13.375 12.7031 13.375H11.2617C11.0508 13.375 10.8398 13.1992 10.8398 12.9883L10.5938 8.20703Z" fill=${color}/>
 </svg>
 
 `;
 
-export const success =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875ZM16.9219 9.82422C17.0625 9.96484 17.0625 10.2461 16.9219 10.4219L10.8398 16.4336C10.6641 16.6094 10.418 16.6094 10.2422 16.4336L7.04297 13.1992C6.90234 13.0586 6.90234 12.7773 7.04297 12.6016L7.85156 11.8281C8.02734 11.6523 8.27344 11.6523 8.44922 11.8281L10.5586 13.9375L15.5156 9.01562C15.6914 8.83984 15.9727 8.83984 16.1133 9.01562L16.9219 9.82422Z" fill="currentColor"/>
+export const success = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875ZM16.9219 9.82422C17.0625 9.96484 17.0625 10.2461 16.9219 10.4219L10.8398 16.4336C10.6641 16.6094 10.418 16.6094 10.2422 16.4336L7.04297 13.1992C6.90234 13.0586 6.90234 12.7773 7.04297 12.6016L7.85156 11.8281C8.02734 11.6523 8.27344 11.6523 8.44922 11.8281L10.5586 13.9375L15.5156 9.01562C15.6914 8.83984 15.9727 8.83984 16.1133 9.01562L16.9219 9.82422Z" fill=${color}/>
 </svg>
 `;
 
-export const informative =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM12 7.39844C12.8086 7.39844 13.4766 8.06641 13.4766 8.875C13.4766 9.71875 12.8086 10.3516 12 10.3516C11.1562 10.3516 10.5234 9.71875 10.5234 8.875C10.5234 8.06641 11.1562 7.39844 12 7.39844ZM13.9688 16.3281C13.9688 16.5742 13.7578 16.75 13.5469 16.75H10.4531C10.207 16.75 10.0312 16.5742 10.0312 16.3281V15.4844C10.0312 15.2734 10.207 15.0625 10.4531 15.0625H10.875V12.8125H10.4531C10.207 12.8125 10.0312 12.6367 10.0312 12.3906V11.5469C10.0312 11.3359 10.207 11.125 10.4531 11.125H12.7031C12.9141 11.125 13.125 11.3359 13.125 11.5469V15.0625H13.5469C13.7578 15.0625 13.9688 15.2734 13.9688 15.4844V16.3281Z" fill="white"/>
+export const informative = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM12 7.39844C12.8086 7.39844 13.4766 8.06641 13.4766 8.875C13.4766 9.71875 12.8086 10.3516 12 10.3516C11.1562 10.3516 10.5234 9.71875 10.5234 8.875C10.5234 8.06641 11.1562 7.39844 12 7.39844ZM13.9688 16.3281C13.9688 16.5742 13.7578 16.75 13.5469 16.75H10.4531C10.207 16.75 10.0312 16.5742 10.0312 16.3281V15.4844C10.0312 15.2734 10.207 15.0625 10.4531 15.0625H10.875V12.8125H10.4531C10.207 12.8125 10.0312 12.6367 10.0312 12.3906V11.5469C10.0312 11.3359 10.207 11.125 10.4531 11.125H12.7031C12.9141 11.125 13.125 11.3359 13.125 11.5469V15.0625H13.5469C13.7578 15.0625 13.9688 15.2734 13.9688 15.4844V16.3281Z" fill=${color}/>
 </svg>
 `;

package/src/v4/component/Avatar/Avatar.tsx

@@ -54,12 +54,15 @@ function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
         {...imageProps}
         onError={() => setImageError(true)}
       />
+      {userAvatarProps?.roles && isModerator(userAvatarProps?.roles) && (
+        <ModeratorBadge style={styles.moderatorBadge} />
+      )}
     </TouchableOpacity>
   ) : iconProps ? (
     <SvgXml {...iconProps} />
   ) : (
     <TouchableOpacity
-      style={[styles.defaultUserAvatar, userAvatarProps.style]}
+      style={[styles.defaultUserAvatar, userAvatarProps?.style]}
       activeOpacity={0.7}
       onPress={() => {
         if (userAvatarProps?.shouldRedirectToUserProfile) {
@@ -72,7 +75,7 @@ function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
       <Typography.Body style={styles.firstChar}>
         {userAvatarProps.userName?.trim()?.charAt(0).toUpperCase()}
       </Typography.Body>
-      {userAvatarProps.roles && isModerator(userAvatarProps.roles) && (
+      {userAvatarProps?.roles && isModerator(userAvatarProps.roles) && (
         <ModeratorBadge style={styles.moderatorBadge} />
       )}
     </TouchableOpacity>

package/src/v4/component/CommunityRowItem/CommunityRowItem.tsx

@@ -6,11 +6,11 @@ import { View } from 'react-native';
 import CommunityJoinedButtonElement from '../../elements/CommunityJoinedButtonElement/CommunityJoinedButtonElement';
 import CommunityJoinButtonElement from '../../elements/CommunityJoinButtonElement/CommunityJoinButtonElement';
 import CommunityDisplayname from '../../elements/CommunityDisplayname/CommunityDisplayname';
-import CommunityCategory from '../../elements/CommunityCatetory/CommunityCategory';
 import CommunityMemeberCount from '../../elements/CommunityMemeberCount/CommunityMemeberCount';
 import { useStyles } from './styles';
 import CommunityPrivateBadge from '../../elements/CommunityPrivateBadge/CommunityPrivateBadge';
 import CommunityOfficialBadge from '../../elements/CommunityOfficialBadge/CommunityOfficialBadge';
+import { CommunityCategories } from '../../../v4/features/feed/components';
 
 type CommunityRowItemProps = {
   pageId?: PageID;
@@ -34,7 +34,7 @@ const CommunityRowItem: FC<CommunityRowItemProps> = ({
       <CommunityRowImage
         pageId={pageId}
         componentId={componentId}
-        fileId={community.avatarFileId}
+        fileUrl={community.avatar?.fileUrl}
         label={label}
       />
       <View style={styles.detailWrap}>
@@ -54,8 +54,8 @@ const CommunityRowItem: FC<CommunityRowItemProps> = ({
         </View>
         <View style={styles.detailBottomWrap}>
           <View style={styles.detailBottomWrapLeft}>
-            <CommunityCategory
-              categoryIds={community.categoryIds}
+            <CommunityCategories
+              categories={community.categories}
               pageId={pageId}
               componentId={componentId}
             />

package/src/v4/component/CommunitySearchResult/CommunitySearchResult.tsx

@@ -108,7 +108,9 @@ const CommunitySearchResult: FC<CommunitySearchResultProps> = ({
             />
           </Pressable>
         )}
-        keyExtractor={(item, index) => item.communityId + index}
+        keyExtractor={(item, index) =>
+          (item.communityId ?? index).toString() + '_' + index
+        }
         onEndReachedThreshold={0.5}
         style={styles.list}
         contentContainerStyle={styles.listContent}