@amityco/react-native-social-uikit 4.0.0-36607be.0 → 4.0.0-3e7b2eb7.0

package/src/v4/{component/CommunityCategoryChips/CommunityCategoryChips.tsx → features/feed/components/CommunityCategories/CommunityCategories.tsx}

@@ -1,26 +1,26 @@
 import React from 'react';
 import { Text, View, ViewProps, ScrollView } from 'react-native';
-import { CommunityCategoryChip } from './CommunityCategoryChip/CommunityCategoryChip';
-import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+import { CommunityCategory } from '../../elements/CommunityCategory/CommunityCategory';
 import { useStyles } from './styles';
+import { ComponentID, PageID } from '../../../../enum';
 
-type CommunityCategoryChipsProps = ViewProps & {
-  themeStyles: MyMD3Theme;
-  categoryIds: string[];
+type CommunityCategoriesProps = ViewProps & {
+  categories: Amity.Category[];
+  pageId?: PageID;
+  componentId?: ComponentID;
   allVisible?: boolean;
 };
 
 const MAX_VISIBLE_CATEGORIES = 2;
 
-export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
-  categoryIds,
-  themeStyles,
+export function CommunityCategories({
+  categories = [],
   allVisible,
   ...props
-}) => {
-  const styles = useStyles(themeStyles);
-  const visibleCategories = categoryIds.slice(0, MAX_VISIBLE_CATEGORIES);
-  const hiddenCategoriesCount = categoryIds.length - MAX_VISIBLE_CATEGORIES;
+}: CommunityCategoriesProps) {
+  const { styles } = useStyles();
+  const visibleCategories = categories.slice(0, MAX_VISIBLE_CATEGORIES);
+  const hiddenCategoriesCount = categories.length - MAX_VISIBLE_CATEGORIES;
   const showMoreText =
     hiddenCategoriesCount > 0 ? `+${hiddenCategoriesCount}` : '';
   const showMore = hiddenCategoriesCount > 0;
@@ -51,7 +51,7 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
   };
 
   // Choose all categories or just the visible ones based on allVisible
-  const displayCategories = allVisible ? categoryIds : visibleCategories;
+  const displayCategories = allVisible ? categories : visibleCategories;
   // Only show more indicator if not showing all categories
   const displayShowMore = !allVisible && showMore;
 
@@ -63,23 +63,21 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.scrollableContainer}
         >
-          {displayCategories.map((id, index) => (
-            <CommunityCategoryChip
+          {displayCategories.map((category, index) => (
+            <CommunityCategory
               key={index}
-              categoryId={id}
+              categoryName={category.name}
               maxWidth={getMaxWidthForItem(displayCategories.length)}
-              themeStyles={themeStyles}
             />
           ))}
         </ScrollView>
       ) : (
         <>
-          {displayCategories.map((id, index) => (
-            <CommunityCategoryChip
+          {displayCategories.map((category, index) => (
+            <CommunityCategory
               key={index}
-              categoryId={id}
+              categoryName={category.name}
               maxWidth={getMaxWidthForItem(displayCategories.length)}
-              themeStyles={themeStyles}
             />
           ))}
           {displayShowMore && (
@@ -91,4 +89,4 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
       )}
     </View>
   );
-};
+}

package/src/v4/features/feed/components/CommunityCategories/index.ts

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

package/src/v4/{component/CommunityCategoryChips → features/feed/components/CommunityCategories}/styles.ts

@@ -1,7 +1,9 @@
 import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
 
-export const useStyles = (theme: MyMD3Theme) => {
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
   const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',
@@ -27,5 +29,5 @@ export const useStyles = (theme: MyMD3Theme) => {
       color: theme.colors.base,
     },
   });
-  return styles;
+  return { styles, theme };
 };

package/src/v4/features/feed/components/index.ts

@@ -0,0 +1 @@
+export * from './CommunityCategories';

package/src/v4/features/feed/elements/CommunityCategory/CommunityCategory.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DimensionValue, Text, View } from 'react-native';
+import { useStyles } from './styles';
+import { useAmityElement } from '../../../../hook';
+import { ComponentID, ElementID, PageID } from '../../../../enum';
+
+type CommunityCategoryProps = {
+  categoryName: string;
+  style?: object;
+  maxWidth?: number | string;
+  pageId?: PageID;
+  componentId?: ComponentID;
+};
+
+export function CommunityCategory({
+  categoryName,
+  style,
+  maxWidth,
+  pageId,
+  componentId,
+}: CommunityCategoryProps) {
+  const { styles } = useStyles();
+  const { accessibilityId, isExcluded } = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.community_category,
+  });
+
+  if (isExcluded) return null;
+
+  return (
+    <View
+      testID={accessibilityId}
+      style={[
+        styles.chipContainer,
+        maxWidth ? { maxWidth: maxWidth as DimensionValue } : null,
+        style,
+      ]}
+    >
+      <Text style={styles.chipText} numberOfLines={1}>
+        {categoryName}
+      </Text>
+    </View>
+  );
+}

package/src/v4/features/feed/elements/CommunityCategory/index.ts

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

package/src/v4/features/feed/elements/CommunityCategory/styles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+  const styles = StyleSheet.create({
+    chipContainer: {
+      backgroundColor: theme.colors.baseShade4,
+      paddingHorizontal: 6,
+      borderRadius: 20,
+    },
+    chipText: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: theme.colors.base,
+    },
+  });
+  return { styles, theme };
+};

package/src/v4/features/feed/elements/index.ts

@@ -0,0 +1 @@
+export * from './CommunityCategory';

package/src/v4/hook/useAmityGlobalSearchViewModel.ts

@@ -1,5 +1,6 @@
 import {
   CommunityRepository,
+  SearchUsersByEnum,
   UserRepository,
 } from '@amityco/ts-sdk-react-native';
 import { useState, useEffect } from 'react';
@@ -65,7 +66,11 @@ export const useAmityGlobalSearchViewModel = (
     } else if (searchType === TabName.Users && searchValue?.length >= 3) {
       setSearchResult(null);
       const unsubscribeUser = UserRepository.searchUserByDisplayName(
-        { displayName: searchValue, limit: 20 },
+        {
+          displayName: searchValue,
+          limit: 20,
+          searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+        },
         ({ error, loading, data, hasNextPage, onNextPage }) => {
           if (error) return setSearchResult(null);
           if (!loading) {

package/src/v4/hook/useCustomRankingGlobalFeed.ts

@@ -1,5 +1,9 @@
-import { FeedRepository, PostRepository } from '@amityco/ts-sdk-react-native';
+import {
+  FeedRepository,
+  PostStructureType,
+} from '@amityco/ts-sdk-react-native';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { InteractionManager } from 'react-native';
 import globalFeedSlice from '../../redux/slices/globalfeedSlice';
 import { globalFeedPageLimit } from '../../v4/PublicApi/Components/AmityGlobalFeedComponent/AmityGlobalFeedComponent';
 import {
@@ -17,11 +21,18 @@ export const isAmityAd = (
   return (item as Amity.Ad)?.adId !== undefined;
 };
 
-export const useCustomRankingGlobalFeed = () => {
+type UseCustomRankingGlobalFeed = {
+  enabled?: boolean;
+};
+
+export const useCustomRankingGlobalFeed = ({
+  enabled = true,
+}: UseCustomRankingGlobalFeed = {}) => {
   const { isConnected } = useAuth();
   const dispatch = useUIKitDispatch();
   const unsubscribeRef = useRef<() => void | null>(null);
   const onNextPageRef = useRef<() => void | null>(null);
+  const interactionHandleRef = useRef<{ cancel: () => void } | null>(null);
 
   const { setNewGlobalFeed } = globalFeedSlice.actions;
 
@@ -39,70 +50,67 @@ export const useCustomRankingGlobalFeed = () => {
     getItemId: (item) => (item as Amity.Post).postId.toString(),
   });
 
-  const processPosts = async (posts: Amity.Post[]) => {
-    const results = await Promise.all(
-      posts.map((post) => {
-        if (post?.children.length > 0) {
-          return new Promise((resolve) => {
-            const unsubscribe = PostRepository.getPost(
-              post?.children[0],
-              ({ error: $error, loading, data }) => {
-                if (!$error && !loading) {
-                  if (
-                    data?.dataType === 'image' ||
-                    data?.dataType === 'video' ||
-                    data?.dataType === 'room' ||
-                    data?.dataType === 'poll'
-                  ) {
-                    resolve(post);
-                  } else {
-                    resolve(null);
-                  }
-                } else {
-                  resolve(null);
-                }
-              }
-            );
-
-            unsubscribe();
-          });
-        } else {
-          return post;
-        }
-      })
-    );
-
-    return results.filter((result) => result !== null) as Amity.Post<any>[];
-  };
+  const hasInitialDataRef = useRef(false);
 
   const fetchCustomRanking = useCallback(() => {
     if (!isConnected) return null;
 
-    return FeedRepository.getCustomRankingGlobalFeed(
-      { limit: globalFeedPageLimit },
-      ({ data, loading, error: $error, onNextPage }) => {
-        setFetching(loading);
+    hasInitialDataRef.current = false;
 
-        if (!loading && data) {
-          processPosts(data).then((posts) => dispatch(setNewGlobalFeed(posts)));
+    return FeedRepository.getGlobalFeed(
+      { limit: globalFeedPageLimit },
+      ({ data, loading: isLoading, error: $error, onNextPage }) => {
+        if (isLoading) {
+          // Only show loading state on initial fetch, not on pagination
+          if (!hasInitialDataRef.current) {
+            setFetching(true);
+          }
+          return;
         }
 
         if (onNextPage) onNextPageRef.current = onNextPage;
-
         if ($error) setError($error);
+
+        if (data) {
+          const filtered = data.filter(
+            (post) =>
+              post.structureType !== PostStructureType.AUDIO &&
+              post.structureType !== PostStructureType.FILE &&
+              post.structureType !== PostStructureType.MIXED
+          );
+          interactionHandleRef.current?.cancel();
+          interactionHandleRef.current =
+            InteractionManager.runAfterInteractions(() => {
+              dispatch(setNewGlobalFeed(filtered));
+              setFetching(false);
+              hasInitialDataRef.current = true;
+              interactionHandleRef.current = null;
+            });
+        } else {
+          setFetching(false);
+        }
       }
     );
   }, [dispatch, setNewGlobalFeed, isConnected]);
 
   useEffect(() => {
+    if (!enabled) return undefined;
+
     unsubscribeRef.current = fetchCustomRanking();
 
-    return () => unsubscribeRef.current?.();
-  }, [fetchCustomRanking]);
+    return () => {
+      unsubscribeRef.current?.();
+      interactionHandleRef.current?.cancel();
+      interactionHandleRef.current = null;
+    };
+  }, [fetchCustomRanking, enabled]);
 
   const refresh = useCallback(() => {
     if (unsubscribeRef.current) unsubscribeRef.current?.();
+    interactionHandleRef.current?.cancel();
+    interactionHandleRef.current = null;
     onNextPageRef.current = null;
+    hasInitialDataRef.current = false;
 
     unsubscribeRef.current = fetchCustomRanking();
   }, [fetchCustomRanking]);
@@ -113,5 +121,6 @@ export const useCustomRankingGlobalFeed = () => {
     itemWithAds,
     onNextPage: onNextPageRef.current,
     error,
+    globalFeedPosts: postList,
   };
 };

package/src/v4/hook/usePaginator.ts

@@ -1,10 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
 import { AdEngine } from '../engine/AdEngine';
 import {
   useAdSettings,
   useRecommendAds,
 } from '../../v4/providers/AdEngineProvider';
-import { useFocusEffect } from '@react-navigation/native';
 
 type ItemWithAd<T> = [T] | [T, Amity.Ad];
 
@@ -41,21 +40,19 @@ export const usePaginatorCore = <T>({
     newItems: T[],
     newItemIds: Set<string>
   ): Array<ItemWithAd<T>> => {
+    const newItemsMap = new Map<string, T>(
+      newItems.map((item) => [getItemId(item), item])
+    );
     return (itemWithAdsRef.current || [])
       .map((itemWithAd) => {
         const itemId = getItemId(itemWithAd[0]);
 
-        // Skip items not in new items list
         if (!newItemIds.has(itemId)) {
           return null;
         }
 
-        // Find the updated version of this item
-        const updatedItem = newItems.find(
-          (newItem) => getItemId(newItem) === itemId
-        );
+        const updatedItem = newItemsMap.get(itemId);
 
-        // Update the item while preserving its ad (if any)
         if (updatedItem) {
           if (itemWithAd.length === 1) {
             return [updatedItem] as [T];
@@ -86,13 +83,14 @@ export const usePaginatorCore = <T>({
     topIndex: number,
     prevItems: Array<ItemWithAd<T>>
   ): T[] => {
-    return newItems.slice(topIndex).filter((newItem) => {
-      const itemId = getItemId(newItem);
-      return !prevItems.some(
-        (prevItem) =>
-          prevItem && prevItem[0] && getItemId(prevItem[0]) === itemId
-      );
-    });
+    const prevItemIds = new Set<string>(
+      prevItems
+        .filter((item) => item && item[0])
+        .map((item) => getItemId(item[0]))
+    );
+    return newItems
+      .slice(topIndex)
+      .filter((newItem) => !prevItemIds.has(getItemId(newItem)));
   };
 
   const frequency = AdEngine.instance.getAdFrequencyByPlacement(placement);
@@ -142,7 +140,13 @@ export const usePaginatorCore = <T>({
         .slice(0, topIndex)
         .map((item) => [item]);
 
-      const prevItems = [...newestItems, ...prevItemWithAds];
+      const prevItemWithAdsIds = new Set(
+        prevItemWithAds.map((item) => getItemId(item[0]))
+      );
+      const dedupedNewestItems = newestItems.filter(
+        (item) => !prevItemWithAdsIds.has(getItemId(item[0]))
+      );
+      const prevItems = [...dedupedNewestItems, ...prevItemWithAds];
 
       // filteredNewItems is the newest items in the next page that are not in prevItems
       const filteredNewItems = filterNewItems(newItems, topIndex, prevItems);
@@ -174,14 +178,24 @@ export const usePaginatorCore = <T>({
 
       const newItemsWithAds = [...prevItems, ...suffixItems];
 
-      updateItemWithAds(newItemsWithAds);
+      const seenPostIds = new Set<string>();
+      const dedupedItemsWithAds = newItemsWithAds.filter((tuple) => {
+        const id = getItemId(tuple[0]);
+        if (seenPostIds.has(id)) return false;
+        seenPostIds.add(id);
+        return true;
+      });
 
-      if (newItemsWithAds.length === 0) {
+      updateItemWithAds(dedupedItemsWithAds);
+
+      if (dedupedItemsWithAds.length === 0) {
         setCurrentAdIndex(0);
         setCurrentIndex(0);
       }
 
-      const result = newItemsWithAds.flatMap((item) => item).filter(Boolean);
+      const result = dedupedItemsWithAds
+        .flatMap((item) => item)
+        .filter(Boolean);
       return result;
     } else if (frequency?.type === 'time-window') {
       const newItemIds = new Set(newItems.map((item) => getItemId(item)));
@@ -192,7 +206,13 @@ export const usePaginatorCore = <T>({
         .slice(0, topIndex)
         .map((item) => [item]);
 
-      const prevItems = [...newestItems, ...prevItemWithAds];
+      const twPrevItemWithAdsIds = new Set(
+        prevItemWithAds.map((item) => getItemId(item[0]))
+      );
+      const twDedupedNewestItems = newestItems.filter(
+        (item) => !twPrevItemWithAdsIds.has(getItemId(item[0]))
+      );
+      const prevItems = [...twDedupedNewestItems, ...prevItemWithAds];
       const filteredNewItems = filterNewItems(newItems, topIndex, prevItems);
       const suffixItems: Array<ItemWithAd<T>> = filteredNewItems.map(
         (newItem, index) => {
@@ -213,11 +233,21 @@ export const usePaginatorCore = <T>({
 
       setHasAppenedFirstRoundAds(true);
 
-      const newItemsWithAds = [...prevItems, ...suffixItems];
+      const seenTwPostIds = new Set<string>();
+      const dedupedTwItemsWithAds = [...prevItems, ...suffixItems].filter(
+        (tuple) => {
+          const id = getItemId(tuple[0]);
+          if (seenTwPostIds.has(id)) return false;
+          seenTwPostIds.add(id);
+          return true;
+        }
+      );
 
-      updateItemWithAds(newItemsWithAds);
+      updateItemWithAds(dedupedTwItemsWithAds);
 
-      const result = newItemsWithAds.flatMap((item) => item).filter(Boolean);
+      const result = dedupedTwItemsWithAds
+        .flatMap((item) => item)
+        .filter(Boolean);
       return result;
     }
     return newItems;
@@ -256,6 +286,7 @@ export const usePaginatorApi = <T>(params: {
   const [itemWithAds, setItemWithAds] = useState<
     (Amity.Ad | T)[] | undefined
   >();
+  const [_, startTransition] = useTransition();
 
   const { items, isLoading, ...rest } = params;
   const {
@@ -275,16 +306,14 @@ export const usePaginatorApi = <T>(params: {
     setHasAppenedFirstRoundAds(false);
   }, [coreReset]);
 
-  useFocusEffect(
-    useCallback(() => {
-      if (!adsLoaded || isLoading) return;
-
+  useEffect(() => {
+    if (!adsLoaded || isLoading) return;
+    startTransition(() => {
       const newItems = combineItemsWithAds(items);
-
       setItemWithAds(newItems);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [adsLoaded, items, isLoading])
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [adsLoaded, items, isLoading]);
 
   return { itemWithAds, reset };
 };

package/src/v4/hook/usePostPermission.ts

@@ -0,0 +1,46 @@
+import {
+  CommunityPostSettings,
+  CommunityRepository,
+} from '@amityco/ts-sdk-react-native';
+import { useEffect, useState } from 'react';
+import useAuth from '../../hooks/useAuth';
+import { isModerator } from '../utils/permissions';
+
+type UsePostPermissionParams = {
+  community?: Amity.Community;
+};
+
+export function usePostPermission({ community }: UsePostPermissionParams) {
+  const { client } = useAuth();
+  const [hasPostPermission, setHasPostPermission] = useState(false);
+
+  const isOnlyAdminCanPost =
+    community?.postSetting === CommunityPostSettings.ONLY_ADMIN_CAN_POST;
+
+  useEffect(() => {
+    if (!community?.communityId || !client?.userId) return;
+
+    CommunityRepository.Membership.searchMembers(
+      {
+        communityId: community.communityId,
+        search: client.userId,
+        limit: 1,
+        memberships: ['member'],
+        includeDeleted: false,
+      },
+      ({ data }) => {
+        const userRoles = data[0]?.roles ?? [];
+        setHasPostPermission(
+          isOnlyAdminCanPost ? isModerator(userRoles) : !!community?.isJoined
+        );
+      }
+    );
+  }, [
+    community?.communityId,
+    client?.userId,
+    isOnlyAdminCanPost,
+    community?.isJoined,
+  ]);
+
+  return hasPostPermission;
+}

package/src/v4/hook/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,11 @@ const useSearch = (
 
   const searchAllUsers = useCallback((text: string) => {
     return UserRepository.searchUserByDisplayName(
-      { displayName: text, limit: 5 },
+      {
+        displayName: text,
+        limit: 5,
+        searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+      },
       ({ data, error, hasNextPage, onNextPage }) => {
         if (error) return null;
         hasNextPage

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

@@ -289,6 +289,7 @@ export default function AmitySocialUIKitV4Navigator() {
                   params: { displayName },
                 },
               }: any) => ({
+                headerShown: true,
                 title: displayName,
                 headerLeft: () => <BackButton />,
               })}

package/src/v4/screen/FollowerList/Components/FollowerListItem.tsx

@@ -70,7 +70,7 @@ const FollowerListItem: FC<FollowerListItemType> = ({
           fileId: data.avatarFileId,
           imageSize: ImageSizeState.small,
         });
-        setAvatar(userAvatar ?? defaultAvatarUri);
+        setAvatar(data?.avatarCustomUrl ?? userAvatar ?? defaultAvatarUri);
       }
     });
   }, [getImage, userId]);

package/lib/commonjs/v4/component/CommunityCategoryChips/CommunityCategoryChip/CommunityCategoryChip.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CommunityCategoryChip = void 0;
-var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _styles = require("../styles");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const CommunityCategoryChip = ({
-  categoryId,
-  style,
-  maxWidth,
-  themeStyles
-}) => {
-  const [category, setCategory] = (0, _react.useState)(null);
-  const styles = (0, _styles.useStyles)(themeStyles);
-  (0, _react.useEffect)(() => {
-    const fetch = async () => {
-      const result = await _tsSdkReactNative.CategoryRepository.getCategory(categoryId);
-      setCategory(result.data);
-    };
-    fetch();
-  }, [categoryId]);
-  if (category == null) return null;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.chipContainer, maxWidth ? {
-      maxWidth: maxWidth
-    } : null, style]
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.chipText,
-    numberOfLines: 1
-  }, category.name));
-};
-exports.CommunityCategoryChip = CommunityCategoryChip;
-//# sourceMappingURL=CommunityCategoryChip.js.map