> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-auto-generate-llmstxt.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Users

> User profiles, relationships, and social interactions including follow system and user management

<Info>
  **UIKit Component**: User components are built on top of the social.plus SDK,
  providing ready-to-use user profile and relationship management UI with full
  data management handled automatically.
</Info>

## Feature Overview

The **User** feature in social.plus UIKit v4 provides a comprehensive suite of components designed to manage user profiles, relationships, and interactions within your application. It encompasses functionalities ranging from profile display and editing to managing blocked users and follow requests, ensuring a seamless and engaging user experience.

### Key Features

<CardGroup cols={2}>
  <Card title="User Profiles & Display" icon="user">
    **Comprehensive user profile management**

    * User profile page with avatar, display name, and bio
    * User feed components with flexible feed source switching (personal, community, or combined feeds)
    * User profile header with relationship controls
    * Post creation and interaction capabilities
    * Comprehensive activity views across personal and community content
  </Card>

  <Card title="Profile Management" icon="user-pen">
    **Profile editing and customization**

    * Edit user profile details and avatar
    * Update display name and bio information
    * Profile personalization and management
    * Privacy settings and controls
  </Card>

  <Card title="Social Relationships" icon="users">
    **Follow system and relationship management**

    * Follow/unfollow user interactions
    * Followers and following lists management
    * Pending follow request handling
    * User blocking and unblocking functionality
  </Card>

  <Card title="Privacy & Safety" icon="shield">
    **User safety and privacy controls**

    * Blocked users management
    * Follow request approval system
    * User reporting and safety features
    * Privacy-based content access control
  </Card>
</CardGroup>

## Implementation Guide

<Tabs>
  <Tab title="User Profiles & Display">
    **User profile pages and feed components for displaying user information and content**

    User Profile components provide comprehensive tools for displaying user information, managing user feeds, and handling user interactions within the social platform.

    ### User Profile Page

    The user profile page displays user information, follow relationships, following and followers count, manages blocked users, enables profile editing, handles follow requests, shows created post feeds, and provides post creation actions.

    #### Features

    | Feature                | Description                                                              |
    | ---------------------- | ------------------------------------------------------------------------ |
    | User Information       | Display user name, description, following and follower count             |
    | Follow Request         | User can accept or decline follow request from other users               |
    | User Feed              | Display post, image and video feed posts created by the user             |
    | Post Creation          | Allow user to create a post on own timeline                              |
    | Other User Information | User can view other user profile and can follow/unfollow/block that user |

    #### Required Properties

    | Property | Type     | Description                            |
    | -------- | -------- | -------------------------------------- |
    | `userId` | `String` | The user ID for the profile to display |

    #### Customization Options

    | Config ID                                        | Type    | Description                    |
    | ------------------------------------------------ | ------- | ------------------------------ |
    | `user_profile_page/*/*`                          | Page    | Customize page theme           |
    | `user_profile_page/*/back_button`                | Element | Customize back button image    |
    | `user_profile_page/*/menu_button`                | Element | Customize menu button image    |
    | `user_profile_page/*/user_feed_tab_button`       | Element | Customize user feed tab image  |
    | `user_profile_page/*/user_image_feed_tab_button` | Element | Customize image feed tab image |
    | `user_profile_page/*/user_video_feed_tab_button` | Element | Customize video feed tab image |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityUserProfilePage(userId: "user-id")
      let viewController = AmitySwiftUIHostingController(rootView: page)
      navigationController?.pushViewController(viewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeUserProfilePage(userId: String) {
          AmityUserProfilePage(
              userId = userId
          )
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityUserProfilePage } from '@amityco/ui-kit';

      const UserProfile = ({ userId }) => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityUserProfilePageBehavior: {
                goToEditUserPage: (context) => {
                  // Navigate to edit profile page
                },
                goToBlockedUsersPage: () => {
                  // Navigate to blocked users page
                },
                goToPostComposerPage: (context) => {
                  // Navigate to post composer
                },
              },
            }}
          >
            <AmityUserProfilePage userId={userId} />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget userProfilePage(String userId) {
        return AmityUserProfilePage(userId: userId);
      }
      ```
    </CodeGroup>

    ### User Profile Header Component

    The User Profile Header component displays user information, follow relationship, following and followers count, and handles follow request acceptance or decline.

    #### Features

    | Feature          | Description                                                  |
    | ---------------- | ------------------------------------------------------------ |
    | User Information | Display user name, description, following and follower count |
    | Follow Request   | User can accept or decline follow request from other users   |

    #### Required Properties

    | Property | Type        | Description                            |
    | -------- | ----------- | -------------------------------------- |
    | `user`   | `AmityUser` | The user object for the profile header |

    #### Customization Options

    | Config ID                                                     | Type      | Description                               |
    | ------------------------------------------------------------- | --------- | ----------------------------------------- |
    | `user_profile_page/user_profile_header/*`                     | Component | Customize component theme                 |
    | `user_profile_page/user_profile_header/follow_user_button`    | Element   | Customize follow button text and image    |
    | `user_profile_page/user_profile_header/following_user_button` | Element   | Customize following button text and image |
    | `user_profile_page/user_profile_header/unblock_user_button`   | Element   | Customize unblock button text and image   |
    | `user_profile_page/user_profile_header/user_following`        | Element   | Customize following count text            |
    | `user_profile_page/user_profile_header/user_follower`         | Element   | Customize follower count text             |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let component = AmityUserProfileHeaderComponent(user: user)
      let viewController = AmitySwiftUIHostingController(rootView: component)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeUserProfileHeader(user: AmityUser) {
          AmityUserProfileHeaderComponent(
              user = user
          )
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityUserProfileHeaderComponent } from '@amityco/ui-kit';

      const UserProfileHeader = ({ user }) => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityUserProfileHeaderComponentBehavior: {
                goToPendingFollowRequestPage: () => {
                  // Navigate to pending follow requests
                },
                goToUserRelationshipPage: (context) => {
                  // Navigate to relationship page
                },
              },
            }}
          >
            <AmityUserProfileHeaderComponent user={user} />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget userProfileHeaderComponent(AmityUser user) {
        return AmityUserProfileHeaderComponent(user: user);
      }
      ```
    </CodeGroup>

    ### User Feed Components

    User feed components display different types of content created by users, including general posts, images, and videos. The enhanced user feed now provides comprehensive activity views with the ability to switch between personal posts, community posts, or combined feeds for a complete picture of user activity across the platform.

    #### User Feed Component

    The User Feed Component displays a comprehensive list of user posts with an integrated filter dropdown to toggle between different feed sources, providing users with the ability to switch between personal posts, community posts, or a combined view.

    <Info>
      **SDK Integration**: This component uses the [Get User Feed API](/social-plus-sdk/social/discovery-engagement/feed/overview) to query user posts with configurable feed sources. Refer to the API documentation for detailed implementation and privacy rules.
    </Info>

    **UIKit Features:**

    * **Feed Source Switching**: Pre-built filter dropdown with three options: "All Posts" (combined), "Community Posts", "Profile Posts"
    * **Community Context Display**: Automatic community context display (name, avatar, moderator badges) for community posts
    * **Privacy-Aware Content**: Respects user privacy settings and community visibility rules
    * **Built-in Navigation**: Navigation handlers for community profiles and original post contexts
    * **Real-time Updates**: Live synchronization of content changes across all feed sources
    * **Comprehensive Activity View**: Unified display of user activity across personal and community content

    **Features:**

    | Feature                     | Description                                                               |
    | --------------------------- | ------------------------------------------------------------------------- |
    | Comprehensive User Activity | Display comprehensive user activity across personal and community content |
    | Feed Source Switching       | Toggle between personal posts, community posts, or combined feed view     |
    | Community Context           | Show community context for posts (name, avatar, moderator badges)         |
    | Privacy-Aware Display       | Respect user privacy settings and community visibility rules              |
    | Real-time Updates           | Live synchronization of content changes across all feed sources           |

    **Customization Options:**

    | Config ID                                       | Type      | Description                                |
    | ----------------------------------------------- | --------- | ------------------------------------------ |
    | `user_profile_page/user_feed/*`                 | Component | Customize component theme                  |
    | `user_profile_page/user_feed/empty_user_feed`   | Element   | Customize empty state text and image       |
    | `user_profile_page/user_feed/private_user_feed` | Element   | Customize private feed text and image      |
    | `user_profile_page/user_feed/blocked_user_feed` | Element   | Customize blocked user feed text and image |

    #### User Image Feed Component

    The User Image Feed Component displays a list of images from posts created by the user, providing a visual gallery experience with navigation to original posts.

    **Features:**

    | Feature                  | Description                                               |
    | ------------------------ | --------------------------------------------------------- |
    | Image Gallery            | Display user's image posts in gallery format              |
    | Original Post Navigation | Tap on gallery images to navigate to their original posts |

    **Customization Options:**

    | Config ID                                                   | Type      | Description                           |
    | ----------------------------------------------------------- | --------- | ------------------------------------- |
    | `user_profile_page/user_image_feed/*`                       | Component | Customize component theme             |
    | `user_profile_page/user_image_feed/empty_user_image_feed`   | Element   | Customize empty state text and image  |
    | `user_profile_page/user_image_feed/private_user_image_feed` | Element   | Customize private feed text and image |

    #### User Video Feed Component

    The User Video Feed Component displays a list of videos from posts created by the user, offering a dedicated video content experience with navigation to original posts.

    **Features:**

    | Feature                  | Description                                               |
    | ------------------------ | --------------------------------------------------------- |
    | Video Gallery            | Display user's video posts in gallery format              |
    | Original Post Navigation | Tap on gallery videos to navigate to their original posts |

    **Customization Options:**

    | Config ID                                                   | Type      | Description                           |
    | ----------------------------------------------------------- | --------- | ------------------------------------- |
    | `user_profile_page/user_video_feed/*`                       | Component | Customize component theme             |
    | `user_profile_page/user_video_feed/empty_user_video_feed`   | Element   | Customize empty state text and image  |
    | `user_profile_page/user_video_feed/private_user_video_feed` | Element   | Customize private feed text and image |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // User Feed Component
      let userFeed = AmityUserFeedComponent(userId: "user-id")

      // User Image Feed Component
      let imageFeed = AmityUserImageFeedComponent(userId: "user-id")

      // User Video Feed Component
      let videoFeed = AmityUserVideoFeedComponent(userId: "user-id")

      let viewController = AmitySwiftUIHostingController(rootView: userFeed)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeUserFeeds(userId: String) {
          // User Feed Component
          AmityUserFeedComponent(userId = userId)

          // User Image Feed Component
          AmityUserImageFeedComponent(userId = userId)

          // User Video Feed Component
          AmityUserVideoFeedComponent(userId = userId)
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import {
        AmityUiKitProvider,
        AmityUserFeedComponent,
        AmityUserImageFeedComponent,
        AmityUserVideoFeedComponent
      } from '@amityco/ui-kit';

      const UserFeeds = ({ userId }) => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
          >
            {/* User Feed Component */}
            <AmityUserFeedComponent userId={userId} />

            {/* User Image Feed Component */}
            <AmityUserImageFeedComponent userId={userId} />

            {/* User Video Feed Component */}
            <AmityUserVideoFeedComponent userId={userId} />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      // User Feed Component
      Widget userFeedComponent(String userId) {
        return UserFeedComponent(userId: userId);
      }

      // User Image Feed Component
      Widget userImageFeedComponent(String userId) {
        return UserImageFeedComponent(userId: userId);
      }

      // User Video Feed Component
      Widget userVideoFeedComponent(String userId) {
        return UserVideoFeedComponent(userId: userId);
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      // User Profile Page Navigation
      class CustomUserProfilePageBehavior: AmityUserProfilePageBehavior {
          override init() {
              super.init()
          }

          override func goToEditUserPage(context: AmityUserProfilePageBehavior.Context) {
              // Navigate to edit profile page
          }

          override func goToBlockedUsersPage(context: AmityUserProfilePageBehavior.Context) {
              // Navigate to blocked users page
          }

          override func goToPostComposerPage(context: AmityUserProfilePageBehavior.Context) {
              // Navigate to post composer
          }
      }

      // User Profile Header Navigation
      class CustomUserProfileHeaderComponentBehavior: AmityUserProfileHeaderComponentBehavior {
          override func goToUserRelationshipPage(context: AmityUserProfileHeaderComponentBehavior.Context) {
              // Navigate to relationship page
          }

          override func goToPendingFollowRequestPage(context: AmityUserProfileHeaderComponentBehavior.Context) {
              // Navigate to pending follow requests
          }
      }
      ```

      ```kotlin Android theme={null}
      // User Profile Page Navigation
      class CustomAmityUserProfilePageBehavior : AmityUserProfilePageBehavior() {
          override fun goToEditUserPage(context: Context) {
              // Navigate to edit profile page
          }

          override fun goToBlockedUsersPage(context: Context) {
              // Navigate to blocked users page
          }

          override fun goToPostComposerPage(context: Context) {
              // Navigate to post composer
          }
      }

      // User Profile Header Navigation
      class CustomAmityUserProfileHeaderComponentBehavior : AmityUserProfileHeaderComponentBehavior() {
          override fun goToUserRelationshipPage(context: Context) {
              // Navigate to relationship page
          }

          override fun goToPendingFollowRequestPage(context: Context) {
              // Navigate to pending follow requests
          }
      }
      ```

      ```typescript React theme={null}
      // Navigation handled through pageBehavior props
      const handleUserProfileNavigation = {
        goToEditUserPage: (context) => {
          // Navigate to edit profile page
          navigate('/profile/edit');
        },
        goToBlockedUsersPage: () => {
          // Navigate to blocked users page
          navigate('/profile/blocked-users');
        },
        goToPostComposerPage: (context) => {
          // Navigate to post composer
          navigate('/post/create');
        }
      };

      const handleUserHeaderNavigation = {
        goToPendingFollowRequestPage: () => {
          // Navigate to pending follow requests
          navigate('/profile/follow-requests');
        },
        goToUserRelationshipPage: (context) => {
          // Navigate to relationship page
          navigate(`/profile/${context.userId}/relationships`);
        }
      };
      ```

      ```dart Flutter theme={null}
      // User Profile Page Navigation
      void handleUserProfileNavigation(String action, dynamic context) {
        switch (action) {
          case 'goToEditUserPage':
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => EditUserProfilePage()),
            );
            break;
          case 'goToBlockedUsersPage':
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => BlockedUsersPage()),
            );
            break;
          case 'goToPostComposerPage':
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PostComposerPage()),
            );
            break;
        }
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Profile Management">
    **Profile editing and user management features**

    Profile Management components enable users to update their personal information, customize their profiles, and manage their account settings.

    ### Edit User Profile Page

    The Edit User Profile Page allows users to update their avatar image, display name, and about information.

    #### Features

    | Feature           | Description                                            |
    | ----------------- | ------------------------------------------------------ |
    | Edit User Profile | Update avatar image, display name or about information |

    #### Required Properties

    | Property | Type     | Description                                                     |
    | -------- | -------- | --------------------------------------------------------------- |
    | `userId` | `String` | The user ID for the profile to edit (optional for current user) |

    #### Customization Options

    | Config ID                                             | Type    | Description                        |
    | ----------------------------------------------------- | ------- | ---------------------------------- |
    | `edit_user_profile_page/*/*`                          | Page    | Customize page theme               |
    | `edit_user_profile_page/*/back_button`                | Element | Customize back button image        |
    | `edit_user_profile_page/*/title`                      | Element | Customize page title text          |
    | `edit_user_profile_page/*/user_display_name_title`    | Element | Customize display name field title |
    | `edit_user_profile_page/*/user_about_title`           | Element | Customize about field title        |
    | `edit_user_profile_page/*/update_user_profile_button` | Element | Customize update button text       |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityEditUserProfilePage()
      let viewController = AmitySwiftUIHostingController(rootView: page)
      navigationController?.pushViewController(viewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeEditUserProfilePage() {
          AmityEditUserProfilePage()
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityEditUserProfilePage } from '@amityco/ui-kit';

      const EditUserProfile = ({ userId }) => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
          >
            <AmityEditUserProfilePage userId={userId} />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget editUserProfilePage(String userId) {
        return AmityEditUserProfilePage(userId: userId);
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      // Profile editing typically navigates back to profile page
      func handleProfileUpdateSuccess() {
          // Navigate back to user profile
          navigationController?.popViewController(animated: true)
      }

      func handleProfileUpdateError(error: Error) {
          // Show error alert
          let alert = UIAlertController(
              title: "Update Failed",
              message: error.localizedDescription,
              preferredStyle: .alert
          )
          alert.addAction(UIAlertAction(title: "OK", style: .default))
          present(alert, animated: true)
      }
      ```

      ```kotlin Android theme={null}
      // Profile editing navigation
      fun handleProfileUpdate(success: Boolean, error: String? = null) {
          if (success) {
              // Navigate back to profile
              findNavController().popBackStack()
          } else {
              // Show error message
              Toast.makeText(context, "Update failed: $error", Toast.LENGTH_SHORT).show()
          }
      }
      ```

      ```typescript React theme={null}
      // Profile management navigation
      const handleProfileManagement = {
          onUpdateSuccess: () => {
              // Navigate back to profile
              navigate(-1); // Go back
              showNotification('Profile updated successfully');
          },
          onUpdateError: (error) => {
              // Show error message
              showError(`Failed to update profile: ${error.message}`);
          }
      };
      ```

      ```dart Flutter theme={null}
      // Profile editing navigation
      void handleProfileUpdate(bool success, [String? error]) {
          if (success) {
              Navigator.pop(context);
              ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Profile updated successfully')),
              );
          } else {
              ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Update failed: ${error ?? "Unknown error"}')),
              );
          }
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Social Relationships">
    **Follow system, blocked users, and relationship management**

    Social Relationship components handle user-to-user connections, including following/unfollowing, blocking/unblocking, and managing follow requests.

    ### User Relationship Page

    The User Relationship Page displays lists of users following the current user and users followed by the current user, with options to manage these relationships.

    #### Features

    | Feature        | Description                                                 |
    | -------------- | ----------------------------------------------------------- |
    | Following list | Display a list of users that the current user is following  |
    | Follower list  | Display a list of users that are following the current user |
    | User Action    | User can report or block the selected user                  |

    #### Required Properties

    | Property      | Type     | Description                                      |
    | ------------- | -------- | ------------------------------------------------ |
    | `userId`      | `String` | The user ID for the relationship page            |
    | `selectedTab` | `Tab`    | The default selected tab (following or follower) |

    #### Customization Options

    | Config ID                    | Type | Description          |
    | ---------------------------- | ---- | -------------------- |
    | `user_relationship_page/*/*` | Page | Customize page theme |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // selectedTab - .following or .follower based on the default selected tab you want
      let page = AmityUserRelationshipPage(userId: "user-id", selectedTab: .following)
      let viewController = AmitySwiftUIHostingController(rootView: page)
      navigationController?.pushViewController(viewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeUserRelationshipPage(userId: String) {
          AmityUserRelationshipPage(
              userId = userId,
              selectedTab = AmityUserRelationshipPageTab.FOLLOWING
          )
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import {
        AmityUiKitProvider,
        AmityUserRelationshipPage,
        AmityUserRelationshipPageTabs,
      } from '@amityco/ui-kit';

      const UserRelationships = ({ userId }) => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityUserRelationshipPageBehavior: {
                goToUserProfilePage: (context) => {
                  // Navigate to user profile
                  navigate(`/profile/${context.userId}`);
                },
              },
            }}
          >
            <AmityUserRelationshipPage
              userId={userId}
              selectedTab={AmityUserRelationshipPageTabs.FOLLOWING}
            />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget getUserRelationshipPage(String userId) {
        return AmityUserRelationshipPage(
          userId: userId,
          selectedTab: AmityUserRelationshipPageTab.follower
        );
      }
      ```
    </CodeGroup>

    ### Blocked User Page

    The Blocked User Page displays a list of users blocked by the current user, with options to unblock them.

    #### Features

    | Feature       | Description                     |
    | ------------- | ------------------------------- |
    | Blocked Users | Display a list of blocked users |
    | Unblock User  | User can unblock other users    |

    #### Customization Options

    | Config ID                                  | Type    | Description                   |
    | ------------------------------------------ | ------- | ----------------------------- |
    | `blocked_users_page/*/*`                   | Page    | Customize page theme          |
    | `blocked_users_page/*/back_button`         | Element | Customize back button image   |
    | `blocked_users_page/*/title`               | Element | Customize page title text     |
    | `blocked_users_page/*/unblock_user_button` | Element | Customize unblock button text |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityBlockedUsersPage()
      let viewController = AmitySwiftUIHostingController(rootView: page)
      navigationController?.pushViewController(viewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeBlockedUsersPage() {
          AmityBlockedUsersPage()
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityBlockedUserPage } from '@amityco/ui-kit';

      const BlockedUsers = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityBlockedUsersPageBehavior: {
                goToUserProfilePage: (context) => {
                  // Navigate to user profile
                  navigate(`/profile/${context.userId}`);
                },
              },
            }}
          >
            <AmityBlockedUserPage />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      // The Flutter UIKit does not currently expose a standalone Blocked Users page.
      // Blocked user management is handled through the SDK directly.
      ```
    </CodeGroup>

    ### User Pending Follow Request Page

    The User Pending Follow Request Page displays a list of users that have requested to follow the current user, with options to accept or decline requests.

    #### Features

    | Feature             | Description                                                        |
    | ------------------- | ------------------------------------------------------------------ |
    | Follow Request List | Display a list of users that have requested to follow current user |
    | User Action         | User can accept or decline follow requests                         |

    #### Customization Options

    | Config ID                              | Type | Description          |
    | -------------------------------------- | ---- | -------------------- |
    | `user_pending_follow_request_page/*/*` | Page | Customize page theme |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityUserPendingFollowRequestsPage()
      let viewController = AmitySwiftUIHostingController(rootView: page)
      navigationController?.pushViewController(viewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeUserPendingFollowRequestsPage() {
          AmityUserPendingFollowRequestsPage()
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityUserPendingFollowRequestPage } from '@amityco/ui-kit';

      const PendingFollowRequests = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityUserPendingFollowRequestsPageBehavior: {
                goToUserProfilePage: (context) => {
                  // Navigate to user profile
                  navigate(`/profile/${context.userId}`);
                },
              },
            }}
          >
            <AmityUserPendingFollowRequestPage />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget getPendingFollowRequestPage() {
        return AmityUserPendingFollowRequestsPage();
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      // User Relationship Page Navigation
      class CustomAmityUserRelationshipPageBehavior: AmityUserRelationshipPageBehavior {
          override func goToUserProfilePage(context: AmityUserRelationshipPageBehavior.Context) {
              // Navigate to user profile
              let profilePage = AmityUserProfilePage(userId: context.userId)
              let viewController = AmitySwiftUIHostingController(rootView: profilePage)
              navigationController?.pushViewController(viewController, animated: true)
          }
      }

      // Blocked Users Page Navigation
      class CustomBlockedUserPageBehavior: AmityBlockedUsersPageBehavior {
          override func goToUserProfilePage(context: AmityBlockedUsersPageBehavior.Context) {
              // Navigate to user profile
              let profilePage = AmityUserProfilePage(userId: context.userId)
              let viewController = AmitySwiftUIHostingController(rootView: profilePage)
              navigationController?.pushViewController(viewController, animated: true)
          }
      }

      // Pending Follow Requests Navigation
      class CustomAmityUserPendingFollowRequestsPageBehavior: AmityUserPendingFollowRequestsPageBehavior {
          override func goToUserProfilePage(context: AmityUserPendingFollowRequestsPageBehavior.Context) {
              // Navigate to user profile
              let profilePage = AmityUserProfilePage(userId: context.userId)
              let viewController = AmitySwiftUIHostingController(rootView: profilePage)
              navigationController?.pushViewController(viewController, animated: true)
          }
      }
      ```

      ```kotlin Android theme={null}
      // User Relationship Page Navigation
      class CustomAmityUserRelationshipPageBehavior : AmityUserRelationshipPageBehavior() {
          override fun goToUserProfilePage(context: Context) {
              // Navigate to user profile page
          }
      }

      // Blocked Users Page Navigation
      class CustomAmityBlockedUsersPageBehavior : AmityBlockedUsersPageBehavior() {
          override fun goToUserProfilePage(context: Context) {
              // Navigate to user profile page
          }
      }

      // Pending Follow Requests Navigation
      class CustomAmityUserPendingFollowRequestsPageBehavior : AmityUserPendingFollowRequestsPageBehavior() {
          override fun goToUserProfilePage(context: Context) {
              // Navigate to user profile page
          }
      }
      ```

      ```typescript React theme={null}
      // Social relationship navigation workflows
      const handleSocialRelationshipNavigation = {
          // User relationship navigation
          goToUserProfile: (userId) => {
              navigate(`/profile/${userId}`);
          },

          // Follow request actions
          handleFollowRequest: async (action, userId) => {
              try {
                  if (action === 'accept') {
                      await acceptFollowRequest(userId);
                      showNotification('Follow request accepted');
                  } else if (action === 'decline') {
                      await declineFollowRequest(userId);
                      showNotification('Follow request declined');
                  }
                  // Refresh the request list
                  refreshFollowRequests();
              } catch (error) {
                  showError(`Failed to ${action} follow request: ${error.message}`);
              }
          },

          // Block/unblock actions
          handleBlockAction: async (action, userId) => {
              try {
                  if (action === 'block') {
                      await blockUser(userId);
                      showNotification('User blocked successfully');
                  } else if (action === 'unblock') {
                      await unblockUser(userId);
                      showNotification('User unblocked successfully');
                  }
                  // Refresh appropriate lists
                  refreshUserLists();
              } catch (error) {
                  showError(`Failed to ${action} user: ${error.message}`);
              }
          }
      };
      ```

      ```dart Flutter theme={null}
      // Social relationship navigation
      class SocialRelationshipNavigation {
          // Navigate to user profile
          void goToUserProfile(String userId) {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => AmityUserProfilePage(userId: userId),
                  ),
              );
          }

          // Handle follow request actions
          Future<void> handleFollowRequest(String action, String userId) async {
              try {
                  if (action == 'accept') {
                      await acceptFollowRequest(userId);
                      ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('Follow request accepted')),
                      );
                  } else if (action == 'decline') {
                      await declineFollowRequest(userId);
                      ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('Follow request declined')),
                      );
                  }
                  // Refresh follow requests
                  refreshFollowRequests();
              } catch (error) {
                  ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Failed to $action follow request: $error')),
                  );
              }
          }

          // Handle block/unblock actions
          Future<void> handleBlockAction(String action, String userId) async {
              try {
                  if (action == 'block') {
                      await blockUser(userId);
                      ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('User blocked successfully')),
                      );
                  } else if (action == 'unblock') {
                      await unblockUser(userId);
                      ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('User unblocked successfully')),
                      );
                  }
                  // Refresh user lists
                  refreshUserLists();
              } catch (error) {
                  ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Failed to $action user: $error')),
                  );
              }
          }
      }
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Related Components

<CardGroup cols={3}>
  <Card title="Communities" href="/uikit/components/social/communities" icon="building">
    **Community Features** Community profiles, setup, and member management
  </Card>

  <Card title="Community Membership" href="/uikit/components/social/community-membership" icon="users">
    **Community Member Management** Member administration and community
    relationships
  </Card>

  <Card title="Posts & Media" href="/uikit/components/social/posts" icon="photo-film">
    **Post Components** User-generated content creation and management
  </Card>

  <Card title="Social Feeds" href="/uikit/components/social/feeds" icon="newspaper">
    **Feed Components** Content display and interaction for user feeds
  </Card>

  <Card title="Comments & Reactions" href="/uikit/components/social/comments-reactions" icon="messages">
    **Interaction Components** User engagement and social interaction features
  </Card>

  <Card title="Content Moderation" href="/uikit/components/social/moderation" icon="shield">
    **Moderation Tools** User safety and content moderation features
  </Card>
</CardGroup>

<Tip>
  **Implementation Strategy**: Start with the User Profile Page as your central
  user experience hub, then implement the Edit Profile functionality for user
  personalization. Add social relationship features (follow/unfollow, blocking)
  based on your application's social interaction requirements. Consider
  implementing follow request workflows for private accounts and ensure smooth
  navigation between user profiles, relationship management, and safety
  features. Focus on providing clear feedback for all social actions and
  maintain consistent user experience across profile viewing, editing, and
  relationship management workflows.
</Tip>