@amityco/react-native-social-uikit 4.0.0-df1703f8.0 → 4.0.0-e0eb8745.0

package/src/social/features/user/CreateProfile/styles.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../../../core/providers/AmityUIKitProvider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    keyboardAvoidingView: {
+      flex: 1,
+    },
+    contentContainer: {
+      paddingVertical: 16,
+    },
+    inputContainer: {
+      paddingHorizontal: 16,
+      paddingTop: 24,
+    },
+    submitButtonContainer: {
+      padding: 16,
+      borderTopWidth: 1,
+      paddingBottom: 16,
+      borderTopColor: theme.colors.baseShade4,
+      backgroundColor: theme.colors.background,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/social/features/user/Edit/Edit.tsx

@@ -23,6 +23,7 @@ export function EditUser({ userId }: EditUserProps) {
     isSubmitting,
     handleSubmit,
     accessibilityId,
+    isDisplayNameDisabled,
   } = useEditUser(userId);
 
   return (
@@ -54,6 +55,7 @@ export function EditUser({ userId }: EditUserProps) {
                   pageId={PageID.edit_user_profile_page}
                   maxLength={CHARACTER_LIMIT.USER_DISPLAY_NAME}
                   elementId={ElementID.user_display_name_title}
+                  editable={!isDisplayNameDisabled}
                 />
               )}
             />

package/src/social/features/user/Edit/components/ImageUpload/ImageUpload.tsx

@@ -1,11 +1,31 @@
-import { TouchableOpacity, View } from 'react-native';
+import {
+  ActionSheetIOS,
+  Alert,
+  Platform,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { useStyles } from './styles';
 import { SvgXml } from 'react-native-svg';
 import { camera } from '../../../../../../core/assets/icons';
-import { getFileUrlWithSize } from '../../../../../utils';
 import { Avatar } from '../../../../../components';
 import useImagePicker from '../../../../../hooks/useImagePicker';
 import { CircularProgressIndicator } from '../../../../../components/CircularProgressIndicator';
+import type {
+  CameraOptions,
+  ImageLibraryOptions,
+} from 'react-native-image-picker';
+
+// Downscale the avatar at pick time so the upload stays fast (the avatar is
+// only ever shown small). Shared by the camera and library flows.
+const PICKER_OPTIONS: ImageLibraryOptions & CameraOptions = {
+  mediaType: 'photo',
+  selectionLimit: 1,
+  includeBase64: false,
+  maxWidth: 1024,
+  maxHeight: 1024,
+  quality: 0.8,
+};
 
 type ImageUploadProps = {
   user?: Amity.User;
@@ -15,7 +35,41 @@ type ImageUploadProps = {
 
 export function ImageUpload({ user, value, onChange }: ImageUploadProps) {
   const { styles, theme } = useStyles();
-  const { openImageGallery, progress } = useImagePicker();
+  const { openImageGallery, openCamera, progress } = useImagePicker();
+
+  const handlePickedFile = (file: void | Amity.File<'image'>) => {
+    if (file) onChange(file);
+  };
+
+  const takePhoto = () => openCamera(PICKER_OPTIONS).then(handlePickedFile);
+  const uploadPhoto = () =>
+    openImageGallery(PICKER_OPTIONS).then(handlePickedFile);
+
+  // Let the user choose between the camera and the photo library using the
+  // native action sheet. iOS has a real action sheet (ActionSheetIOS); Android
+  // has no system equivalent, so fall back to a native Alert with the same
+  // options. The picker uploads immediately (the user is already signed in).
+  const onPickImage = () => {
+    if (Platform.OS === 'ios') {
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options: ['Take photo', 'Upload photo', 'Cancel'],
+          cancelButtonIndex: 2,
+        },
+        (buttonIndex) => {
+          if (buttonIndex === 0) takePhoto();
+          else if (buttonIndex === 1) uploadPhoto();
+        }
+      );
+      return;
+    }
+
+    Alert.alert('Profile photo', undefined, [
+      { text: 'Take photo', onPress: takePhoto },
+      { text: 'Upload photo', onPress: uploadPhoto },
+      { text: 'Cancel', style: 'cancel' },
+    ]);
+  };
 
   return (
     <View style={styles.container}>
@@ -24,18 +78,7 @@ export function ImageUpload({ user, value, onChange }: ImageUploadProps) {
         activeOpacity={0.7}
         style={styles.imageContainer}
         disabled={progress > 0}
-        onPress={() => {
-          openImageGallery({
-            mediaType: 'photo',
-            selectionLimit: 1,
-            includeBase64: false,
-            quality: 1,
-          }).then((file) => {
-            if (file) {
-              onChange(file);
-            }
-          });
-        }}
+        onPress={onPickImage}
       >
         <Avatar.User
           viewable={false}
@@ -43,7 +86,10 @@ export function ImageUpload({ user, value, onChange }: ImageUploadProps) {
           imageStyle={styles.image}
           userId={user?.userId || ''}
           shouldRedirectToUserProfile={false}
-          uri={getFileUrlWithSize(value?.fileUrl || user?.avatar?.fileUrl)}
+          // Pass the raw fileUrl — Avatar.User applies fileUrlWithSize itself.
+          // Pre-sizing here double-applies the size param and yields a broken
+          // URL, so the image fails to load.
+          uri={value?.fileUrl || user?.avatar?.fileUrl}
         />
         <View style={styles.iconContainer}>
           {progress > 0 ? (

package/src/social/features/user/Edit/hooks/useEditUser.ts

@@ -12,6 +12,7 @@ import { useToast } from '../../../../../core/stores/slices/toastSlice';
 import { ERROR_CODE } from '../../../../../core/constants';
 import { PageID } from '../../../../enums';
 import { useAmityPage } from '../../../../hooks';
+import { useState } from 'react';
 
 const schema = z.object({
   image: z.custom<Amity.File<'image'>>().optional(),
@@ -35,10 +36,12 @@ export const useEditUser = (userId: string) => {
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const { showToast } = useToast();
+  const [isDisplayNameDisabled, setIsDisplayNameDisabled] = useState(false);
 
   const {
     watch,
     control,
+    resetField,
     handleSubmit,
     formState: { isDirty, isSubmitting, isValid },
   } = useForm<EditUserFormValues>({
@@ -67,6 +70,8 @@ export const useEditUser = (userId: string) => {
     },
     onError: (error) => {
       if (error.message?.includes(ERROR_CODE.DISPLAY_NAME_UPDATE)) {
+        setIsDisplayNameDisabled(true);
+        resetField('displayName');
         showToast({
           type: 'informative',
           message: 'Only administrator can update user display name.',
@@ -83,7 +88,7 @@ export const useEditUser = (userId: string) => {
   const onSubmit = async (data: EditUserFormValues) => {
     await mutateAsync({
       avatarFileId: data.image?.fileId,
-      displayName: data.displayName,
+      ...(isDisplayNameDisabled ? {} : { displayName: data.displayName }),
       description: data.description,
     });
   };
@@ -100,5 +105,6 @@ export const useEditUser = (userId: string) => {
     isValid,
     onSubmit,
     accessibilityId,
+    isDisplayNameDisabled,
   };
 };

package/src/social/features/user/Profile/Profile.tsx

@@ -11,18 +11,18 @@ import {
 import { useUserProfile } from './hooks/useUserProfile';
 import Tabs from '../../../../core/components/Tabs';
 import { UserProfileTab } from './types';
-import { feed, image, video } from '../../../../core/assets/icons';
+import { feed, image, mediaIcon } from '../../../../core/assets/icons';
 
 export type UserProfilePageProps = {
   userId: string;
-  isFromComponent?: boolean;
-  isShowBackButton?: boolean;
+  inline?: boolean;
+  stickyTab?: boolean;
 };
 
 function UserProfile({
   userId,
-  isFromComponent,
-  isShowBackButton,
+  inline,
+  stickyTab = true,
 }: UserProfilePageProps) {
   const {
     user,
@@ -43,14 +43,19 @@ function UserProfile({
   } = useUserProfile(userId);
 
   return (
-    <SafeAreaView testID={accessibilityId} style={styles.container}>
-      <TopBar
-        userId={userId}
-        displayName={user?.displayName}
-        isShownDisplayName={isTabSticky}
-        isFromComponent={isFromComponent}
-        isShowBackButton={isShowBackButton}
-      />
+    <SafeAreaView
+      testID={accessibilityId}
+      style={styles.container}
+      edges={inline ? [] : undefined}
+    >
+      {!inline && (
+        <TopBar
+          userId={userId}
+          displayName={user?.displayName}
+          isShownDisplayName={isTabSticky}
+          inline={inline}
+        />
+      )}
       <Tabs<UserProfileTab>
         variant="icon"
         activeTab={activeTab}
@@ -63,7 +68,7 @@ function UserProfile({
         <ScrollView
           ref={scrollRef}
           scrollEventThrottle={50}
-          stickyHeaderIndices={[1]}
+          stickyHeaderIndices={stickyTab ? [1] : []}
           onScroll={(e) => {
             const { contentOffset, layoutMeasurement, contentSize } =
               e.nativeEvent;
@@ -79,7 +84,7 @@ function UserProfile({
             {isUserLoading || !user ? (
               <Header.Skeleton />
             ) : (
-              <Header user={user} />
+              <Header user={user} inline={inline} />
             )}
           </View>
           <Tabs.List>
@@ -99,21 +104,36 @@ function UserProfile({
               testID={videoTabId}
               aria-label="User Video Feed"
               value={UserProfileTab.Video}
-              iconProps={{ xml: video() }}
+              iconProps={{ xml: mediaIcon() }}
             />
           </Tabs.List>
           <Tabs.Content value={UserProfileTab.Feed}>
-            <Feed ref={feedRef} userId={userId} />
+            <Feed
+              ref={feedRef}
+              userId={userId}
+              isBrand={user?.isBrand}
+              isUserLoading={isUserLoading}
+            />
           </Tabs.Content>
           <Tabs.Content value={UserProfileTab.Image}>
-            <ImageFeed ref={feedRef} userId={userId} />
+            <ImageFeed
+              ref={feedRef}
+              userId={userId}
+              isBrand={user?.isBrand}
+              isUserLoading={isUserLoading}
+            />
           </Tabs.Content>
           <Tabs.Content value={UserProfileTab.Video}>
-            <VideoFeed ref={feedRef} userId={userId} />
+            <VideoFeed
+              ref={feedRef}
+              userId={userId}
+              isBrand={user?.isBrand}
+              isUserLoading={isUserLoading}
+            />
           </Tabs.Content>
         </ScrollView>
       </Tabs>
-      <Action userId={userId} />
+      {!inline && <Action userId={userId} />}
     </SafeAreaView>
   );
 }

package/src/social/features/user/Profile/components/Feed/Feed.tsx

@@ -11,10 +11,12 @@ import { useFeed } from './hooks/useFeed';
 
 type UserFeedProps = {
   userId: string;
+  isBrand?: boolean;
+  isUserLoading?: boolean;
 };
 
 export const Feed = forwardRef<FeedRef, UserFeedProps>(function Feed(
-  { userId },
+  { userId, isBrand, isUserLoading },
   ref
 ) {
   const { styles } = useStyles();
@@ -31,7 +33,7 @@ export const Feed = forwardRef<FeedRef, UserFeedProps>(function Feed(
     privateInfoConfig,
     blockedConfig,
     blockedInfoConfig,
-  } = useFeed({ userId, ref });
+  } = useFeed({ userId, isBrand, isUserLoading, ref });
 
   if (isBlockedByMe) {
     return (

package/src/social/features/user/Profile/components/Feed/hooks/useFeed.ts

@@ -8,11 +8,22 @@ import { FeedRef } from '../../../types';
 
 type UseFeedParams = {
   userId: string;
+  isBrand?: boolean;
+  isUserLoading?: boolean;
   ref: React.ForwardedRef<FeedRef>;
 };
 
-export function useFeed({ userId, ref }: UseFeedParams) {
-  const { isBlockedByMe, isPrivate, feedEnabled } = useFeedState({ userId });
+export function useFeed({
+  userId,
+  isBrand,
+  isUserLoading,
+  ref,
+}: UseFeedParams) {
+  const { isBlockedByMe, isPrivate, feedEnabled } = useFeedState({
+    userId,
+    isBrand,
+    isUserLoading,
+  });
 
   const pageId = PageID.user_profile_page;
   const componentId = ComponentID.user_feed;

package/src/social/features/user/Profile/components/Header/Header.tsx

@@ -1,8 +1,8 @@
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, Text, TextLayoutLine } from 'react-native';
 import Avatar from '../../../../../components/Avatar';
 import { BrandBadge } from '../../../../../elements/BrandBadge';
 import { Typography } from '../../../../../../core/components/Typography/Typography';
-import ReadMore from '@fawazahmed/react-native-read-more';
+import { useEffect, useState } from 'react';
 import { useHeader } from './hooks/useHeader';
 import { UserRelationshipTab } from '../../../../../types';
 import Skeleton from '../../../../../../core/components/Skeleton/Skeleton';
@@ -15,12 +15,39 @@ import {
   PendingFollowRequestsBanner,
 } from '../../elements';
 import MenuAction from '../../../../../elements/MenuAction';
+import { Menu } from '../../elements';
 
 type HeaderProps = {
   user?: Amity.User;
+  inline?: boolean;
 };
 
-export function Header({ user }: HeaderProps) {
+export function Header({ user, inline }: HeaderProps) {
+  const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+  const [truncatedDescription, setTruncatedDescription] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    setDescriptionExpanded(false);
+    setTruncatedDescription(null);
+  }, [user?.userId, user?.description]);
+
+  const onDescriptionTextLayout = (lines: TextLayoutLine[]) => {
+    if (lines.length <= 4 || truncatedDescription !== null) return;
+    const fourthLine = lines[3];
+    const avgCharWidth = fourthLine.width / (fourthLine.text.length || 1);
+
+    const seeMorePixelWidth = avgCharWidth * '... see more'.length + 4;
+    const charsToRemove = Math.ceil(seeMorePixelWidth / avgCharWidth);
+    const firstThreeText = lines
+      .slice(0, 3)
+      .map((l) => l.text)
+      .join('');
+    const fourthLineText = fourthLine.text.replace(/\n$/, '');
+    const trimmedFourth = fourthLineText.slice(0, -charsToRemove).trimEnd();
+    setTruncatedDescription(firstThreeText + trimmedFourth);
+  };
   const {
     styles,
     showBadge,
@@ -55,6 +82,7 @@ export function Header({ user }: HeaderProps) {
           imageStyle={styles.image}
           userName={user?.displayName}
           uri={user?.avatarCustomUrl ?? user?.avatar?.fileUrl}
+          firstCharFontSize={24}
         />
         <View style={styles.displayNameContainer}>
           <Typography.Headline numberOfLines={4} onTextLayout={onTextLayout}>
@@ -66,18 +94,36 @@ export function Header({ user }: HeaderProps) {
             </View>
           )}
         </View>
+        {inline && (
+          <Menu userId={user?.userId} displayName={user?.displayName} />
+        )}
       </View>
       {!!user?.description && (
         <View style={styles.descriptionContainer}>
-          <ReadMore
-            seeLessText=""
-            numberOfLines={4}
-            style={styles.description}
-            seeMoreStyle={styles.seeMore}
-            seeLessStyle={styles.description}
-          >
-            {user.description}
-          </ReadMore>
+          {/* Hidden full text — used only to measure line layout */}
+          {!descriptionExpanded && truncatedDescription === null && (
+            <Text
+              style={[styles.description, styles.hiddenText]}
+              onTextLayout={(e) => onDescriptionTextLayout(e.nativeEvent.lines)}
+            >
+              {user.description}
+            </Text>
+          )}
+          {descriptionExpanded ? (
+            <Text style={styles.description}>{user.description}</Text>
+          ) : (
+            <Text style={styles.description}>
+              {truncatedDescription ?? user.description}
+              {truncatedDescription !== null && (
+                <Text
+                  style={styles.seeMore}
+                  onPress={() => setDescriptionExpanded(true)}
+                >
+                  {'... see more'}
+                </Text>
+              )}
+            </Text>
+          )}
         </View>
       )}
       <View style={styles.followInfoContainer}>

package/src/social/features/user/Profile/components/Header/hooks/useHeader.ts

@@ -8,7 +8,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../../../../core/routes/RouteParamList';
 import { UserRelationshipTab } from '../../../../../../types';
 import { useBehaviour } from '../../../../../../providers/BehaviourProvider';
-import { useBlockUser } from '../../../../../../hooks';
+import { useBlockUser, useGlobalBehavior } from '../../../../../../hooks';
 import useAuth from '../../../../../../../core/hooks/useAuth';
 import { useFollowUser } from '../../../../../../hooks/queries/useFollowUser';
 import useSocialSettings from '../../../../../../../core/hooks/useSocialSettings';
@@ -31,6 +31,7 @@ export function useHeader(user?: Amity.User) {
   const { openBottomSheet, closeBottomSheet, bottomSheetHeight } =
     useBottomSheet();
   const { showToast } = useToast();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const {
     followUser,
     unfollowUser,
@@ -56,7 +57,9 @@ export function useHeader(user?: Amity.User) {
 
   const handleFollow = () => {
     if (!user?.userId) return;
-    followUser(user.userId);
+    handleGlobalBehavior({
+      defaultBehavior: () => followUser(user.userId),
+    });
   };
 
   const handleUnfollow = () => {
@@ -83,7 +86,7 @@ export function useHeader(user?: Amity.User) {
   } | null>(null);
 
   const { styles, theme } = useStyles({
-    badgePaddingRight: !user?.isBrand ? BADGE_SIZE + BADGE_GAP : 0,
+    badgePaddingRight: user?.isBrand ? BADGE_SIZE + BADGE_GAP : 0,
     badgeTop: badgePosition?.top ?? 0,
     badgeLeft: badgePosition?.left ?? 0,
   });
@@ -136,7 +139,8 @@ export function useHeader(user?: Amity.User) {
     badgePosition,
     badgeSize: BADGE_SIZE,
     navigateToRelationship,
-    showBadge: !user?.isBrand,
+    showBadge: user?.isBrand,
+    brandBadgeAccessibilityLabel: 'Brand verified',
     followingCount: formatCount(followInfo?.followingCount ?? 0),
     followerCount: formatCount(followInfo?.followerCount ?? 0),
     isMyProfile,

package/src/social/features/user/Profile/components/Header/styles.ts

@@ -49,6 +49,10 @@ export const useStyles = (
       fontWeight: '400',
       lineHeight: 20,
     },
+    hiddenText: {
+      position: 'absolute',
+      opacity: 0,
+    },
     seeMore: {
       color: theme.colors.primary,
       fontSize: 15,

package/src/social/features/user/Profile/components/ImageFeed/ImageFeed.tsx

@@ -6,10 +6,12 @@ import { useImageFeed } from './hooks/useImageFeed';
 
 type ImageFeedProps = {
   userId: string;
+  isBrand?: boolean;
+  isUserLoading?: boolean;
 };
 
 export const ImageFeed = forwardRef<FeedRef, ImageFeedProps>(function ImageFeed(
-  { userId },
+  { userId, isBrand, isUserLoading },
   ref
 ) {
   const {
@@ -25,7 +27,7 @@ export const ImageFeed = forwardRef<FeedRef, ImageFeedProps>(function ImageFeed(
     privateInfoConfig,
     blockedConfig,
     blockedInfoConfig,
-  } = useImageFeed({ userId, ref });
+  } = useImageFeed({ userId, isBrand, isUserLoading, ref });
 
   if (isBlockedByMe) {
     return (

package/src/social/features/user/Profile/components/ImageFeed/hooks/useImageFeed.ts

@@ -11,13 +11,24 @@ import { FeedRef } from '../../../types';
 
 type UseImageFeedParams = {
   userId: string;
+  isBrand?: boolean;
+  isUserLoading?: boolean;
   ref: React.ForwardedRef<FeedRef>;
 };
 
-export function useImageFeed({ userId, ref }: UseImageFeedParams) {
+export function useImageFeed({
+  userId,
+  isBrand,
+  isUserLoading,
+  ref,
+}: UseImageFeedParams) {
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { isBlockedByMe, isPrivate, feedEnabled } = useFeedState({ userId });
+  const { isBlockedByMe, isPrivate, feedEnabled } = useFeedState({
+    userId,
+    isBrand,
+    isUserLoading,
+  });
 
   const pageId = PageID.user_profile_page;
   const componentId = ComponentID.user_image_feed;

package/src/social/features/user/Profile/components/TopBar/TopBar.tsx

@@ -1,18 +1,12 @@
 import { View } from 'react-native';
-import { ReactNode } from 'react';
-import MenuAction from '../../../../../elements/MenuAction';
 import BackButton from '../../../../../elements/BackButton';
-import MenuButton from '../../../../../elements/MenuButton';
 import { Typography } from '../../../../../../core/components/Typography/Typography';
 import { useTopBar } from './hooks/useTopBar';
-import { CopyLinkAction } from '../../../../../elements/CopyLinkAction';
-import { ShareAction } from '../../../../../elements/ShareAction';
-import { PageID } from '../../../../../enums';
+import { Menu } from '../../elements';
 
 type TopBarProps = {
   userId?: string;
-  isFromComponent?: boolean;
-  isShowBackButton?: boolean;
+  inline?: boolean;
   isShownDisplayName?: boolean;
   displayName?: string;
 };
@@ -20,55 +14,14 @@ type TopBarProps = {
 export function TopBar({
   userId,
   displayName,
-  isFromComponent,
-  isShowBackButton,
+  inline,
   isShownDisplayName,
 }: TopBarProps) {
-  const {
-    styles,
-    actions,
-    shareLink,
-    openBottomSheet,
-    bottomSheetHeight,
-    handleGoBack,
-    backButtonId,
-    menuButtonId,
-  } = useTopBar({ userId, displayName, isFromComponent });
-
-  const menuActions: { show: boolean; action: ReactNode }[] = [
-    ...actions.map((action) => ({
-      show: true,
-      action: <MenuAction gap="small" {...action} key={action.label} />,
-    })),
-    {
-      show: !!shareLink,
-      action: (
-        <CopyLinkAction
-          key="copy"
-          link={shareLink ?? ''}
-          pageId={PageID.user_profile_page}
-        />
-      ),
-    },
-    {
-      show: !!shareLink,
-      action: (
-        <ShareAction
-          key="share"
-          link={shareLink ?? ''}
-          pageId={PageID.user_profile_page}
-        />
-      ),
-    },
-  ].filter(({ show }) => show);
+  const { styles, handleGoBack, backButtonId } = useTopBar({ inline });
 
   return (
     <View style={styles.container}>
-      {isShowBackButton ? (
-        <BackButton testID={backButtonId} onPress={handleGoBack} />
-      ) : (
-        <View />
-      )}
+      <BackButton testID={backButtonId} onPress={handleGoBack} />
       {isShownDisplayName && (
         <Typography.TitleBold
           numberOfLines={1}
@@ -78,16 +31,7 @@ export function TopBar({
           {displayName}
         </Typography.TitleBold>
       )}
-      <MenuButton
-        accessibilityLabel="User profile menu"
-        testID={menuButtonId}
-        onPress={() => {
-          openBottomSheet({
-            height: bottomSheetHeight[menuActions.length],
-            content: <View>{menuActions.map(({ action }) => action)}</View>,
-          });
-        }}
-      />
+      <Menu userId={userId} displayName={displayName} />
     </View>
   );
 }