> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/llms.txt
> Use this file to discover all available pages before exploring further.

# Communities

> Core community features including setup, profiles, and content feeds

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

## Feature Overview

Core Community UIKit components provide comprehensive tools for building and managing community experiences. From creating and configuring communities to displaying rich content feeds, these components handle the complete community lifecycle while maintaining seamless integration with the social.plus SDK.

### Key Features

<CardGroup cols={2}>
  <Card title="Community Setup" icon="circle-plus">
    **Community creation and configuration** - Create new communities with
    avatars, names, descriptions - Category assignment (up to 10 categories) -
    Privacy settings (public/private/hidden) - Member invitation workflows
  </Card>

  <Card title="Community Profile" icon="building">
    **Community profile and header display** - Cover photo and community
    information display - Member and post count tracking - Community
    verification badges - Join/request management
  </Card>

  <Card title="Content Feeds" icon="newspaper">
    **Community feed components** - General community post feeds - Pinned posts
    display - Image-only content feeds - Video-only content feeds
  </Card>

  <Card title="Member Integration" icon="user-plus">
    **Basic member addition workflows** - Category selection for communities -
    Member search and invitation - Privacy-based member management - Community
    discovery features
  </Card>
</CardGroup>

## Implementation Guide

<Tabs>
  <Tab title="Community Setup">
    **Community creation, setup, and basic configuration**

    The Community Setup components provide comprehensive tools for creating new communities and configuring existing ones, including category assignment and member invitation workflows.

    ### Community Setup Page

    The Community Setup Page can be used to create a brand new community or update existing community information including avatar, name, description, categories, and privacy settings.

    #### Features

    | Feature                     | Description                                                                                                                                        |
    | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
    | Creating a community        | Fill in information needed to create the community like avatar, name, description and categories. Public or private community selection available. |
    | Updating existing community | Community avatar, name, description, and categories can be updated. Privacy settings can be changed from public to private and vice versa.         |

    #### Customization Options

    | Config ID                                         | Type    | Description                      |
    | ------------------------------------------------- | ------- | -------------------------------- |
    | `community_setup_page/*/*`                        | Page    | You can customize page theme     |
    | `community_setup_page/*/close_button`             | Element | You can customize image          |
    | `community_setup_page/*/title`                    | Element | You can customize text           |
    | `community_setup_page/*/community_edit_title`     | Element | You can customize text           |
    | `community_setup_page/*/community_name_title`     | Element | You can customize text           |
    | `community_setup_page/*/community_about_title`    | Element | You can customize text           |
    | `community_setup_page/*/community_category_title` | Element | You can customize text           |
    | `community_setup_page/*/community_privacy_title`  | Element | You can customize text           |
    | `community_setup_page/*/community_create_button`  | Element | You can customize text and image |
    | `community_setup_page/*/community_edit_button`    | Element | You can customize text and image |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // AmityCommunitySetupPage can be used in 2 modes:
      // Creation mode - .create
      // Editing mode - .edit(AmityCommunity)
      let page = AmityCommunitySetupPage(mode: .create)
      let viewController = AmitySwiftUIHostingController(rootView: page)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunitySetupPage(community: AmityCommunity) {
          AmityCommunitySetupPage(
              mode = AmityCommunitySetupPageMode.Create,
          )

          AmityCommunitySetupPage(
              mode = AmityCommunitySetupPageMode.Edit(community),
          )
      }
      ```

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

      const SampleCommunitySetup = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityCommunitySetupPageBehavior: {
                goToAddCategoryPage: (context) => {},
                goToAddMemberPage: (context) => {},
              },
            }}
          >
            <AmityCommunitySetupPage
              mode={AmityCommunitySetupPageMode.EDIT}
              community={community}
            />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget communitySetupPage() {
        // This page can be used to create a new community or edit an existing community.
        // CreateMode() is used to create a new community.
        // EditMode(AmityCommunity community) is used to edit an existing community.
        return AmityCommunitySetupPage(mode: const CreateMode());
      }
      ```
    </CodeGroup>

    ### Add Category Page

    The Add Category Page allows users to search for categories to attach to a community. A community can have up to 10 categories.

    #### Features

    | Feature      | Description                                                  |
    | ------------ | ------------------------------------------------------------ |
    | Add category | Up to 10 categories can be selected to attach to a community |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let categoryPage = AmityCommunityAddCategoryPage(categories: [], onAddedAction: { categories in
          // Handle selected categories
      })
      let categoryVC = AmitySwiftUIHostingController(rootView: categoryPage)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityAddCategoryPage(
          categories: List<AmityCommunityCategory>,
      ) {
          AmityCommunityAddCategoryPage(
              categories = categories,
              onAddedAction = { /* Handle categories */ }
          )
      }
      ```

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

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

      ```dart Flutter theme={null}
      Widget addCategoryPage() {
        return AmityCommunityAddCategoryPage(
          categories: const [],
          onAddedAction: (categories) {}
        );
      }
      ```
    </CodeGroup>

    ### Invite Member Page

    The Invite Member Page allows users to search for specific users by display name to invite to a community.

    #### Features

    | Feature     | Description                                                         |
    | ----------- | ------------------------------------------------------------------- |
    | Invite User | Users can be searched by display name to invite them to a community |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let invitePage = AmityCommunityInviteMemberPage(users: [], onInvitedAction: { users in
          // Handle invited users
      })
      let inviteVC = AmitySwiftUIHostingController(rootView: invitePage)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityInvitedMemberPage(users: List<AmityUser>) {
          AmityCommunityInviteMemberPage(
              users = users,
              onInvitedAction = { users: List<AmityUser> ->
                  // Handle the invited users list
              }
          )
      }
      ```

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

      const SampleAmityCommunityInviteMemberPage = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
          >
            <AmityCommunityInviteMemberPage communityId="communityId" onSubmit={(userIds) => {}} />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      // Flutter code not provided in original content
      // Please refer to platform-specific documentation
      ```
    </CodeGroup>

    ### Navigation Behavior

    The Community Setup Page will navigate to the user listing page to add users to the community if it is created as private, and to the category listing page to attach categories to the community.

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomAmityCommunitySetupPageBehavior: AmityCommunitySetupPageBehavior {
          override init() {
              super.init()
          }

          override func goToAddMemberPage(_ context: AmityCommunitySetupPageBehavior.Context) {
              // override behavior
          }

          override func goToAddCategoryPage(_ context: AmityCommunitySetupPageBehavior.Context) {
              // override behavior
          }
      }

      // Call this function to setup custom behaviour class in UIKit
      func setCommunitySetupPageBehaviour() {
          let customBehavior = CustomAmityCommunitySetupPageBehavior()
          AmityUIKit4Manager.behaviour.communitySetupPageBehavior = customBehavior
      }
      ```

      ```kotlin Android theme={null}
      class CustomCommunitySetupPageBehavior : AmityCommunitySetupPageBehavior() {
          // Override navigation methods as needed
      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehaviour = CustomCommunitySetupPageBehavior()
          AmityUIKit4Manager.behavior.communitySetupPageBehavior = customBehaviour
      }
      ```

      ```typescript React theme={null}
      const SampleCommunitySetupWithBehavior = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityCommunitySetupPageBehavior: {
                goToAddCategoryPage: (context) => {
                  // Custom category page navigation
                },
                goToAddMemberPage: (context) => {
                  // Custom member page navigation
                },
              },
            }}
          >
            <AmityCommunitySetupPage
              mode={AmityCommunitySetupPageMode.CREATE}
            />
          </AmityUiKitProvider>
        );
      };
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Community Profile">
    **Community profile page and header components**

    The Community Profile components provide the main interface for displaying community information and content, serving as the central hub for community interaction.

    ### Community Profile Page

    The Community Profile Page is the main page of a community where all announcement posts, pinned posts, regular posts, and stories created within the community are stored. This page also allows users with necessary permissions to create posts and stories in the community.

    #### Features

    | Feature             | Description                                                                   |
    | ------------------- | ----------------------------------------------------------------------------- |
    | Community Post Feed | All posts created within the community can be seen in the feed                |
    | Pinned Posts        | Pin tab displays all pinned posts                                             |
    | Announcement Posts  | Announcement posts displayed on top of community post feed at the first tab   |
    | Image Feed          | Image tab consolidates all images posted in the community                     |
    | Video Feed          | Video tab contains all videos posted in the community                         |
    | Pending Posts       | Users with moderator permission can review all pending posts in the community |

    #### Customization Options

    | Config ID                                                           | Type    | Description                  |
    | ------------------------------------------------------------------- | ------- | ---------------------------- |
    | `community_profile_page/*/*`                                        | Page    | You can customize page theme |
    | `community_profile_page/*/back_button`                              | Element | You can customize image      |
    | `community_profile_page/*/menu_button`                              | Element | You can customize image      |
    | `community_profile_page/community_pin/community_create_post_button` | Element | You can customize image      |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Community Profile Page
      let page = AmityCommunityProfilePage(communityId: "<community-id>")
      let vc = AmitySwiftUIHostingController(rootView: page)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityProfilePage(communityId: String) {
          AmityCommunityProfilePage(
              communityId = communityId
          )
      }
      ```

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

      const SampleCommunityProfile = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityCommunityProfilePageBehavior: {
                goToPostComposerPage: (context) => {},
                goToPostDetailPage: (context) => {},
                goToStoryCreationPage: (context) => {},
                goToCommunitySettingPage: (context) => {},
                goToEditCommunityPage: (context) => {},
                goToPendingPostPage: (context) => {},
                goToMembershipPage: (context) => {},
                goToPollPostComposerPage: (context) => {},
              },
            }}
          >
            <AmityCommunityProfilePage communityId="communityId" />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget communityProfilePage(String communityId) {
        return AmityCommunityProfilePage(communityId: communityId);
      }
      ```
    </CodeGroup>

    ### Community Header Component

    The Community Header Component displays the cover photo, display name, description and categories, and other information about the community.

    #### Features

    | Feature               | Description                                                                                                    |
    | --------------------- | -------------------------------------------------------------------------------------------------------------- |
    | Community Information | Display cover photo, display name, description and categories, members and posts count, stories, pending posts |

    #### Customization Options

    | Config ID                                                        | Type      | Description                       |
    | ---------------------------------------------------------------- | --------- | --------------------------------- |
    | `community_profile_page/community_header/*`                      | Component | You can customize component theme |
    | `community_profile_page/community_header/community_verify_badge` | Element   | You can customize image           |
    | `community_profile_page/community_header/community_join_button`  | Element   | You can customize image           |
    | `community_profile_page/community_header/community_pending_post` | Element   | You can customize image           |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Community Header Component
      let component = AmityCommunityHeaderComponent(community: community)
      let viewController = AmitySwiftUIHostingController(rootView: component)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityHeader(community: AmityCommunity) {
          AmityCommunityHeaderComponent(
              community = community
          )
      }
      ```

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

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

      ```dart Flutter theme={null}
      Widget communityHeaderComponent(AmityCommunity? community) {
        return AmityCommunityHeaderComponent(community: community);
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    The Community Profile Page will navigate to the post composer page, story creation page, pending post page, community membership page, community setting page, and post detail page.

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomAmityCommunityProfilePageBehavior: AmityCommunityProfilePageBehavior {
          override init() {
              super.init()
          }

          override func goToPendingPostPage(context: AmityCommunityProfilePageBehavior.Context) {
              // override behavior
          }

          override func goToCommunitySettingPage(context: AmityCommunityProfilePageBehavior.Context) {
              // override behavior
          }

          override func goToPostComposerPage(context: AmityCommunityProfilePageBehavior.Context, community: AmityCommunityModel? = nil) {
              // override behavior
          }

          override func goToCreateStoryPage(context: AmityCommunityProfilePageBehavior.Context, community: AmityCommunityModel?) {
              // override behavior
          }

          override func goToPostDetailPage(context: AmityCommunityProfilePageBehavior.Context, post: AmityPostModel?, category: AmityPostCategory = .general) {
              // override behavior
          }
      }

      // Call this function to setup custom behaviour class in UIKit
      func setCommunityProfilePageBehavior() {
          let customBehavior = CustomAmityCommunityProfilePageBehavior()
          AmityUIKit4Manager.behaviour.communityProfilePageBehavior = customBehavior
      }
      ```

      ```kotlin Android theme={null}
      class AmityCustomCommunityProfilePageBehavior : AmityCommunityProfilePageBehavior() {
          override fun goToCommunitySettingPage(context: Context) {
              // custom implementation for navigating to Community Setting Page
          }

          override fun goToPendingPostPage(context: Context) {
              // custom implementation for navigating to Post Review Page
          }
      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehavior = AmityCustomCommunityProfilePageBehavior()
          AmityUIKit4Manager.behavior.communityProfilePageBehavior = customBehavior
      }
      ```

      ```typescript React theme={null}
      const SampleCommunityProfileWithBehavior = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityCommunityProfilePageBehavior: {
                goToPostComposerPage: (context) => {
                  // Custom post composer navigation
                },
                goToPostDetailPage: (context) => {
                  // Custom post detail navigation
                },
                goToStoryCreationPage: (context) => {
                  // Custom story creation navigation
                },
                goToCommunitySettingPage: (context) => {
                  // Custom community settings navigation
                },
              },
            }}
          >
            <AmityCommunityProfilePage communityId="communityId" />
          </AmityUiKitProvider>
        );
      };
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Community Feed Components">
    **Community content feeds and media displays**

    The Community Feed components provide specialized views for different types of content within communities, offering users organized access to posts, media, and pinned content.

    ### Community Feed Component

    The Community Feed Component displays a list of posts created in the community, serving as the main content stream for community members.

    #### Features

    | Feature   | Description                                          |
    | --------- | ---------------------------------------------------- |
    | Post Feed | Display a list of posts created within the community |

    #### Customization Options

    | Config ID                                 | Type      | Description                       |
    | ----------------------------------------- | --------- | --------------------------------- |
    | `community_profile_page/community_feed/*` | Component | You can customize component theme |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Community Feed Component
      let component = AmityCommunityFeedComponent(communityId: "<community-id>")
      let viewController = AmitySwiftUIHostingController(rootView: component)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityFeed(communityId: String) {
          AmityCommunityFeedComponent(
              communityId = communityId
          )
      }
      ```

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

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

      ```dart Flutter theme={null}
      // Community feed components are not available in Flutter platform
      // Please use the Community Profile Page which includes all feed functionality
      Widget communityProfilePage(String communityId) {
        return AmityCommunityProfilePage(communityId: communityId);
      }
      ```
    </CodeGroup>

    ### Community Pin Feed Component

    The Community Pin Feed Component displays a list of pinned posts created in the community, highlighting important or featured content.

    #### Features

    | Feature       | Description                    |
    | ------------- | ------------------------------ |
    | Pin Post Feed | Display a list of pinned posts |

    #### Customization Options

    | Config ID                                | Type      | Description                       |
    | ---------------------------------------- | --------- | --------------------------------- |
    | `community_profile_page/community_pin/*` | Component | You can customize component theme |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Community Pin Feed Component
      let pinnedComponent = AmityCommunityPinnedPostComponent(communityId: "<community-id>")
      let pinnedVC = AmitySwiftUIHostingController(rootView: pinnedComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityPinnedPosts(communityId: String) {
          AmityCommunityPinnedPostComponent(
              communityId = communityId
          )
      }
      ```

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

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

      ```dart Flutter theme={null}
      // Community pin feed components are not available in Flutter platform
      // Please use the Community Profile Page which includes all feed functionality
      Widget communityProfilePage(String communityId) {
        return AmityCommunityProfilePage(communityId: communityId);
      }
      ```
    </CodeGroup>

    ### Community Image Feed Component

    The Community Image Feed Component displays a list of image posts created in the community, providing a visual gallery experience with navigation to original posts.

    #### Features

    | Feature                  | Description                                               |
    | ------------------------ | --------------------------------------------------------- |
    | Image Feed               | Display a list of image posts in gallery format           |
    | Original Post Navigation | Tap on gallery images to navigate to their original posts |

    #### Customization Options

    | Config ID                                       | Type      | Description                       |
    | ----------------------------------------------- | --------- | --------------------------------- |
    | `community_profile_page/community_image_feed/*` | Component | You can customize component theme |

    #### Navigation Callbacks

    The Image Feed Component supports navigation callbacks to handle taps on gallery items, allowing users to view the complete original post.

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Community Image Feed Component
      let imageComponent = AmityCommunityImageFeedComponent(communityId: "<community-id>")
      let imageVC = AmitySwiftUIHostingController(rootView: imageComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityImageFeed(communityId: String) {
          AmityCommunityImageFeedComponent(
              communityId = communityId
          )
      }
      ```

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

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

      ```dart Flutter theme={null}
      // Community image feed components are not available in Flutter platform
      // Please use the Community Profile Page which includes all feed functionality
      Widget communityProfilePage(String communityId) {
        return AmityCommunityProfilePage(communityId: communityId);
      }
      ```
    </CodeGroup>

    ### Community Video Feed Component

    The Community Video Feed Component displays a list of video posts created in the community, offering a dedicated video content experience with navigation to original posts.

    #### Features

    | Feature                  | Description                                               |
    | ------------------------ | --------------------------------------------------------- |
    | Video Feed               | Display a list of video posts in gallery format           |
    | Original Post Navigation | Tap on gallery videos to navigate to their original posts |

    #### Customization Options

    | Config ID                                       | Type      | Description                       |
    | ----------------------------------------------- | --------- | --------------------------------- |
    | `community_profile_page/community_video_feed/*` | Component | You can customize component theme |

    #### Navigation Callbacks

    The Video Feed Component supports navigation callbacks to handle taps on gallery items, allowing users to view the complete original post with video playback context.

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Community Video Feed Component with Original Post Navigation
      let videoComponent = AmityCommunityVideoFeedComponent(communityId: "<community-id>")
      let videoVC = AmitySwiftUIHostingController(rootView: videoComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityVideoFeed(communityId: String) {
          AmityCommunityVideoFeedComponent(
              communityId = communityId
          )
      }
      ```

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

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

      ```dart Flutter theme={null}
      // Community video feed components are not available in Flutter platform
      // Please use the Community Profile Page which includes all feed functionality
      Widget communityProfilePage(String communityId) {
        return AmityCommunityProfilePage(communityId: communityId);
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    Community feed components integrate with the main community profile navigation behavior, allowing seamless interaction with posts and content.

    <CodeGroup>
      ```swift iOS theme={null}
      // Feed components inherit navigation behavior from Community Profile Page
      // Use the Community Profile Page behavior customization for navigation control
      class CustomAmityCommunityProfilePageBehavior: AmityCommunityProfilePageBehavior {
          override func goToPostDetailPage(context: AmityCommunityProfilePageBehavior.Context, post: AmityPostModel?, category: AmityPostCategory = .general) {
              // Custom post detail navigation from feed components
          }
      }
      ```

      ```kotlin Android theme={null}
      // Feed components work within the Community Profile Page context
      // Navigation behavior is handled through the Community Profile Page behavior
      class AmityCustomCommunityProfilePageBehavior : AmityCommunityProfilePageBehavior() {
          override fun goToPostDetailPage(context: Context, postId: String) {
              // Custom post detail navigation from feed components
          }
      }
      ```

      ```typescript React theme={null}
      // Feed components integrate with Community Profile Page navigation
      const SampleFeedsWithNavigation = () => {
        return (
          <AmityUiKitProvider
            pageBehavior={{
              AmityCommunityProfilePageBehavior: {
                goToPostDetailPage: (context) => {
                  // Custom navigation for posts in feed components
                },
              },
            }}
          >
            <AmityCommunityFeedComponent communityId="communityId" />
          </AmityUiKitProvider>
        );
      };
      ```
    </CodeGroup>

    ### Community Event Feed Component

    The Community Event Feed Component displays a list of event posts created in the community, providing a dedicated view for event-related content and activities.

    #### Features

    | Feature                   | Description                                           |
    | ------------------------- | ----------------------------------------------------- |
    | Event Feed                | Display a list of event posts in the community        |
    | Original Event Navigation | Tap on event items to navigate to their detailed view |

    #### Customization Options

    | Config ID                                       | Type      | Description                       |
    | ----------------------------------------------- | --------- | --------------------------------- |
    | `community_profile_page/community_event_feed/*` | Component | You can customize component theme |

    #### Navigation Callbacks

    The Event Feed Component supports navigation callbacks to handle taps on event items, allowing users to view the complete event details.

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Community Event Feed Component
      let eventComponent = AmityCommunityEventFeedComponent(communityId: "<community-id>")
      let eventVC = AmitySwiftUIHostingController(rootView: eventComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityEventFeed(communityId: String) {
          AmityCommunityEventFeedComponent(
              communityId = communityId
          )
      }
      ```

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

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

      ```dart Flutter theme={null}
      // Community event feed components are not available in Flutter platform
      // Please use the Community Profile Page which includes all feed functionality
      Widget communityProfilePage(String communityId) {
        return AmityCommunityProfilePage(communityId: communityId);
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    Community event feed components integrate with the main community profile navigation behavior, allowing seamless interaction with event posts and details.

    <CodeGroup>
      ```swift iOS theme={null}
      // Event feed components inherit navigation behavior from Community Profile Page
      // Use the Community Profile Page behavior customization for navigation control
      class CustomAmityCommunityProfilePageBehavior: AmityCommunityProfilePageBehavior {
          override func goToEventDetailPage(context: AmityCommunityProfilePageBehavior.Context, event: AmityEventModel?) {
              // Custom event detail navigation from event feed components
          }
      }
      ```

      ```kotlin Android theme={null}
      // Event feed components work within the Community Profile Page context
      // Navigation behavior is handled through the Community Profile Page behavior
      class AmityCustomCommunityProfilePageBehavior : AmityCommunityProfilePageBehavior() {
          override fun goToEventDetailPage(context: Context, eventId: String) {
              // Custom event detail navigation from event feed components
          }
      }
      ```

      ```typescript React theme={null}
      // Event feed components integrate with Community Profile Page navigation
      const SampleEventFeedsWithNavigation = () => {
        return (
          <AmityUiKitProvider
            pageBehavior={{
              AmityCommunityProfilePageBehavior: {
                goToEventDetailPage: (context) => {
                  // Custom navigation for events in event feed components
                },
              },
            }}
          >
            <AmityCommunityEventFeedComponent communityId="communityId" />
          </AmityUiKitProvider>
        );
      };
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Related Components

<CardGroup cols={3}>
  <Card title="Community Management" href="/uikit/components/social/community-management" icon="gears">
    **Settings & Administration** Community settings, permissions, and
    moderation tools
  </Card>

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

  <Card title="Social Feeds" href="/uikit/components/social/feeds" icon="newspaper">
    **Feed Components** General social feed components and integration
  </Card>

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

  <Card title="Content Discovery" href="/uikit/components/social/content-discovery" icon="magnifying-glass">
    **Search & Discovery** Community and content discovery features
  </Card>

  <Card title="Users & Profiles" href="/uikit/components/social/users" icon="user">
    **User Management** User profiles and social interactions
  </Card>
</CardGroup>

<Tip>
  **Implementation Strategy**: Start with the AmityCommunitySetupPage for
  creating new communities, then integrate AmityCommunityProfilePage as the main
  community hub. Use specialized feed components (Pin, Image, Video) to provide
  organized content views. Configure navigation behaviors early to ensure smooth
  user flows between community creation, content viewing, and management
  features.
</Tip>