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

# Social Feeds & Content Discovery

> Complete social home page experience with feeds, content creation, community discovery, and user engagement components

<Info>
  **Key Benefit**: Build comprehensive social experiences with pre-built components for content feeds, community discovery, post creation, and user engagement - all designed to work seamlessly together in a social home page.
</Info>

## Components on this page

| Component | What it shows | Platforms |
| - | - | - |
| [For You Feed](#for-you-feed) | Posts the backend personalized for the current user | React Web, iOS, Android |
| [Social Home Page](#social-home-page) | The container that hosts the feed tabs, creation menu, and discovery | All |
| [Newsfeed](#newsfeed-component) | Stories plus the global post list | All |
| [Global Feed](#global-feed-component) | Aggregated community posts, newest first (chronological only) | All |
| [Empty Newsfeed](#empty-newsfeed-component) | The first-run state, with prompts to post or join a community | All |
| [Create Post Menu](#create-post-menu-component) | The entry point for posts, stories, polls, and live streams | All |
| [Community Discovery](#community-discovery) | Categories, recommended, and trending communities | All |

## For You Feed

As a community grows, the posts worth a member's attention get buried by volume. The **For You** tab surfaces the posts each member is most likely to care about, so the home experience stays relevant and worth returning to — without you building any ranking logic yourself.

For You is a backend-personalized feed that appears as a tab on the social home page. It is a **network-level setting** — the tab only shows when the network has For You feed enabled and the current user is not a visitor or bot. When the setting is off (or the feed reports that it is disabled), the UIKit hides the tab and falls back to the newsfeed automatically.

<Info>
  **Platform Support**: For You feed is available on the **React Web, iOS, and Android** UIKit. It is not available on Flutter or React Native.
</Info>

### What the For You feed includes

The backend assembles For You from these content sources, then ranks them for the current user:

| Source | What it contributes |
| - | - |
| Joined communities | Posts from communities the user is a member of |
| Public communities | Posts from public communities the user has **not** joined |
| Followed users | Posts from the user feeds the user follows |
| Public user feeds | Posts from user feeds that are public |
| Exploration | A small amount of random posts, for controlled discovery |
| Livestreams | Ongoing livestreams, injected while they are live |

<Note>
  Ranking, and the mix between these sources, is owned by the backend. There are no client-side knobs in the UIKit or SDK to weight or filter them. For network-level tuning, contact [social.plus Support](https://ekoapp.atlassian.net/servicedesk/customer/portal/3).
</Note>

### How ranking works

The backend ranks each post for the current user by blending four signals — **relevance** (what the user has engaged with before), **affinity** (authors and communities they're connected to), **popularity** (engagement across the network), and **freshness** (how recently it was posted) — then spaces out repetitive authors, communities, and topics so the feed stays varied. New users start with a popularity- and freshness-led feed that personalizes as they engage. The UIKit renders the ranked result as-is; the exact scoring model is backend-owned and not exposed. See [How ranking works](/social-plus-sdk/social/discovery-engagement/feed/for-you-feed#how-ranking-works) for the full behavior.

The UIKit also reports post views for you, so the feed automatically skips posts the member has already seen — on any surface — without extra wiring.

<Info>
  **Transparency.** For You is a personalized recommender. Where recommender-system transparency rules apply (such as the EU Digital Services Act), disclose the four signals above to your users in plain language and offer the non-personalized **Newsfeed** as the alternative they can switch to at any time — the tab switch is that control.
</Info>

### How the tab is gated

The social home page reads the network setting and the feed collection, then derives whether to show the For You tab:

1. `useForYouFeedSetting()` reads `forYouFeed.enabled` for the network (skipped for visitors/bots).
2. `useForYouFeedCollection()` observes the personalized posts once the setting is enabled.
3. The tab is shown only when the setting is enabled **and** the collection did not fail with a feed-disabled error. If the feed becomes unavailable while the tab is active, the page switches back to the newsfeed.

### Render the feed

`AmitySocialHomePage` wires the For You tab for you — enable For You feed on your network and it appears automatically. To embed the feed on its own, render the `ForYouFeed` component with a `pageId`:

<CodeGroup>
  ```tsx React theme={null}
  import { ForYouFeed } from '@amityco/ui-kit';

  function ForYouTab() {
    return <ForYouFeed pageId="social_home_page" />;
  }
  ```

  ```swift iOS theme={null}
  AmityForYouFeedComponent()
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeForYouFeedComponent() {
      AmityForYouFeedComponent()
  }
  ```
</CodeGroup>

### Hooks

| Hook | Returns | Use for |
| - | - | - |
| `useForYouFeedSetting({ shouldCall })` | `{ forYouFeedSetting, isPending, error }` | Decide whether to render a For You entry point. Pass `shouldCall: !isVisitorOrBot`. |
| `useForYouFeedCollection({ shouldCall })` | `{ posts, isLoading, hasMore, loadMore, error, refresh, isLoadingFirstPage }` | Render the personalized post list and paginate it. Gate `shouldCall` on the enabled setting. |

<Note>
  Both hooks and the `ForYouFeed` component are backed by the SDK's `FeedRepository.getForYouFeed()` and `Client.getForYouFeedSetting()`. See [For You Feed](/social-plus-sdk/social/discovery-engagement/feed/for-you-feed) for the SDK-level behavior.
</Note>

## Social Home Page

**Complete social home experience**

The AmitySocialHomePage serves as the central hub integrating multiple social components for a comprehensive user experience.

### Features

| Feature | Description |
| - | - |
| Global Feed Navigation | Navigate through different segments like newsfeed, explore, my communities |
| Newsfeed Viewing | Displays recent posts, updates, and activities from connections and followed communities |
| Community Access | Quick access to user communities with options to join more |
| Engagement Options | Like, comment, and interact with posts directly from the page |

### Customization Options

| Config ID | Type | Description |
| - | - | - |
| `social_home_page/*/*` | Page | Customize page theme |
| `social_home_page/*/newsfeed_button` | Element | Customize text |
| `social_home_page/*/explore_button` | Element | Customize text |
| `social_home_page/*/my_communities_button` | Element | Customize text |

### Code Examples

<CodeGroup>
  ```swift iOS theme={null}
  let socialHomePage = AmitySocialHomePage()
  let viewController = AmitySwiftUIHostingController(rootView: socialHomePage)
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeSocialHomePage() {
      AmitySocialHomePage()
  }
  ```

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

  const SampleSocialHomePage = () => {
    return (
      <AmityUIKitProvider
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        configs={config}
      >
        <AmitySocialHomePage />
      </AmityUIKitProvider>
    );
  };
  ```

  ```jsx React Native theme={null}
  import { AmitySocialHomePage, AmityUiKitProvider } from '@amityco/react-native-social-uikit';
  import config from '../../uikit.config.json';

  <AmityUiKitProvider
    configs={config}
    apiKey="API_KEY"
    apiRegion="API_REGION"
    userId="userId"
    displayName="displayName"
    apiEndpoint="https://api.{API_REGION}.amity.co"
  >
    <AmitySocialHomePage />
  </AmityUiKitProvider>
  ```

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

<Note>
  **Navigation Customization**: Custom navigation behavior can be implemented to enhance interaction flow, including overriding default actions for global search or community search.
</Note>

### Navigation Behavior

Custom navigation behavior can be implemented to enhance or modify the interaction flow on the AmitySocialHomePage.

<CodeGroup>
  ```swift iOS theme={null}
  class CustomAmitySocialHomePageBehavior: AmitySocialHomePageBehavior {
      override init() {
          super.init()
      }
      
      override func goToGlobalSearch(context: AmitySocialHomePageBehavior.Context) {
          // Custom implementation for navigating to Global Search
      }
      
      override func goToCommunitySearch(context: AmitySocialHomePageBehavior.Context) {
          // Custom implementation for navigating to Community Search
      }
  }

  // Call this function to setup custom behaviour class in UIKit
  func setSocialHomePageBehaviour() {
      let customBehavior = CustomAmitySocialHomePageBehavior()
      AmityUIKit4Manager.behaviour.socialHomePageBehavior = customBehavior
  }
  ```

  ```kotlin Android theme={null}
  class CustomSocialHomePageBehavior : AmitySocialHomePageBehavior() {
      override fun goToGlobalSearch(context: Context) {
          // custom implementation for navigating to Global Search
      }

      override fun goToCommunitySearch(context: Context) {
          // custom implementation for navigating to Community Search
      }
  }

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

  ```typescript React theme={null}
  import { AmityUIKitProvider, AmitySocialHomePage } from '@amityco/ui-kit';

  const SampleSocialHomePage = () => {
    return (
      <AmityUIKitProvider
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        configs={config}
        pageBehavior={{
          AmitySocialHomePageBehavior: {
            goToGlobalSearch: () => {
              // Navigate to global search page
            },
            goToCommunitySearch: () => {
              // Navigate to community search page
            },
          },
        }}
      >
        <AmitySocialHomePage />
      </AmityUIKitProvider>
    );
  };
  ```

  ```jsx React Native theme={null}
  import { AmitySocialHomePage, AmityUiKitProvider } from '@amityco/react-native-social-uikit';

  <AmityUiKitProvider
    configs={config}
    apiKey="API_KEY"
    apiRegion="API_REGION"
    userId="userId"
    displayName="displayName"
    apiEndpoint="https://api.{API_REGION}.amity.co"
    behaviour={{
      AmitySocialHomePageBehavior: {
        goToGlobalSearch: () => {
          // Navigate to global search page
        },
        goToCommunitySearch: () => {
          // Navigate to community search page
        },
      },
    }}
  >
    <AmitySocialHomePage />
  </AmityUiKitProvider>
  ```
</CodeGroup>

## Feed Components

**Newsfeed and content display**

Components for displaying and managing social content feeds with stories and posts.

### Newsfeed Component

Integrates story display and global feed for a complete social feed experience.

| Feature | Description |
| - | - |
| Story Display | Highlights user stories at the top, making them immediately accessible |
| Post List | Displays recent posts, updates, and activities from connections and communities |
| Engagement Options | Users can like, comment, and interact with posts directly |

<CodeGroup>
  ```swift iOS theme={null}
  let newsfeedComponent = AmityNewsFeedComponent()
  let viewController = AmitySwiftUIHostingController(rootView: newsfeedComponent)
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeNewsFeedComponent() {
      AmityNewsFeedComponent()
  }
  ```

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

### Global Feed Component

Central component for aggregating and displaying diverse community posts, newest first.

<Note>
  The component renders the SDK's chronological global feed, which shows at most the 20 most recent posts per user or community. See [Global Feed](/social-plus-sdk/social/discovery-engagement/feed/global-feed) for the SDK-level behavior and query parameters.
</Note>

<Warning>
  **Custom ranking is not available in the UIKit** on any platform, only in the SDK — see the [Feature Matrix](/feature-matrix). `AmityGlobalFeedComponent` always renders the chronological feed. To ship an engagement-ranked feed, query [`getCustomRankingGlobalFeed()`](/social-plus-sdk/social/discovery-engagement/feed/custom-ranking) directly and render the results with your own list.
</Warning>

<CodeGroup>
  ```swift iOS theme={null}
  let globalFeedComponent = AmityGlobalFeedComponent()
  let viewController = AmitySwiftUIHostingController(rootView: globalFeedComponent)
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeGlobalFeedComponent() {
      AmityGlobalFeedComponent()
  }
  ```

  ```typescript React theme={null}
  import { AmityUIKitProvider, AmityGlobalFeedComponent } from '@amityco/ui-kit';

  const SampleGlobalFeed = () => {
    return (
      <AmityUIKitProvider
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        configs={config}
        pageBehavior={{
          AmityGlobalFeedComponentBehavior: {
            goToPostDetailPage: ({ postId }) => {
              console.log('goToPostDetailPage', postId);
            },
            goToViewStoryPage: () => {},
          },
        }}
      >
        <AmityGlobalFeedComponent
          isLoading={false}
          items={[]}
          onFeedReachBottom={() => {}}
          onPostDeleted={() => {}}
        />
      </AmityUIKitProvider>
    );
  };
  ```

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

### Empty Newsfeed Component

Handles empty states with engaging placeholders and call-to-action buttons.

<CodeGroup>
  ```swift iOS theme={null}
  let emptyNewsFeedComponent = AmityEmptyNewsFeedComponent()
  let viewController = AmitySwiftUIHostingController(rootView: emptyNewsFeedComponent)
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeEmptyNewsFeedComponent() {
      AmityEmptyNewsFeedComponent()
  }
  ```

  ```typescript React theme={null}
  import { AmityUIKitProvider, AmityEmptyNewsFeedComponent } from '@amityco/ui-kit';

  const SampleEmptyNewsFeed = () => {
    return (
      <AmityUIKitProvider
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        configs={config}
      >
        <AmityEmptyNewsFeedComponent />
      </AmityUIKitProvider>
    );
  };
  ```

  ```jsx React Native theme={null}
  import { AmityEmptyNewsFeedComponent, AmityUiKitProvider } from '@amityco/react-native-social-uikit';

  <AmityUiKitProvider
    configs={config}
    apiKey="API_KEY"
    apiRegion="API_REGION"
    userId="userId"
    displayName="displayName"
    apiEndpoint="https://api.{API_REGION}.amity.co"
  >
    <AmityEmptyNewsFeedComponent />
  </AmityUiKitProvider>
  ```

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

### Navigation Behavior

The behavior of the AmityGlobalFeedComponent can be customized to handle navigation to the post detail page differently.

<CodeGroup>
  ```swift iOS theme={null}
  class CustomAmityGlobalFeedComponentBehavior: AmityGlobalFeedComponentBehavior {
      override init() {
          super.init()
      }
      
      override func goToPostDetailPage(context: AmityGlobalFeedComponentBehavior.Context) {
          // Custom implementation for navigating to Post Detail Page
      }
  }

  // Call this function to setup custom behaviour class in UIKit
  func setGlobalFeedComponentBehaviour() {
      let customBehavior = CustomAmityGlobalFeedComponentBehavior()
      AmityUIKit4Manager.behaviour.globalFeedComponentBehavior = customBehavior
  }
  ```

  ```kotlin Android theme={null}
  class CustomGlobalFeedComponentBehavior : AmityGlobalFeedComponentBehavior() {
      override fun goToPostDetailPage(context: Context, id: String, category: AmityPostCategory) {
          // custom implementation for navigating to Post Detail Page
      }
  }

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

  ```typescript React theme={null}
  import { AmityUIKitProvider, AmityGlobalFeedComponent } from '@amityco/ui-kit';

  const SampleGlobalFeed = () => {
    return (
      <AmityUIKitProvider
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        configs={config}
        pageBehavior={{
          AmityGlobalFeedComponentBehavior: {
            goToPostDetailPage: ({ postId }) => {
              console.log('goToPostDetailPage', postId);
            },
            goToViewStoryPage: () => {},
          },
        }}
      >
        <AmityGlobalFeedComponent
          isLoading={false}
          items={[]}
          onFeedReachBottom={() => {}}
          onPostDeleted={() => {}}
        />
      </AmityUIKitProvider>
    );
  };
  ```

  ```jsx React Native theme={null}
  import { AmityGlobalFeedComponent, AmityUiKitProvider } from '@amityco/react-native-social-uikit';

  <AmityUiKitProvider
    configs={config}
    apiKey="API_KEY"
    apiRegion="API_REGION"
    userId="userId"
    displayName="displayName"
    apiEndpoint="https://api.{API_REGION}.amity.co"
    behaviour={{
      AmityGlobalFeedComponentBehavior: {
        goToPostDetailPage: (postId: string) => {
          console.log(postId);
        },
      },
    }}
  >
    <AmityGlobalFeedComponent />
  </AmityUiKitProvider>
  ```
</CodeGroup>

## Content Creation

**Post and story creation tools**

Components for enabling users to create posts, stories, and other content types.

### Create Post Menu Component

Provides users with options to create various types of content.

### Features

| Feature | Description |
| - | - |
| Create Post | Navigate to post creation with target selection |
| Create Story | Direct users to story target selection for audience customization |
| Create Poll | Enable poll creation functionality |
| Create Livestream | Support for livestream content creation |

### Customization Options

| Config ID | Type | Description |
| - | - | - |
| `social_home_page/create_post_menu/*` | Component | Customize component theme |
| `social_home_page/create_post_menu/create_post_button` | Element | Customize text and image |
| `social_home_page/create_post_menu/create_story_button` | Element | Customize text and image |
| `social_home_page/create_post_menu/create_poll_button` | Element | Customize text and image |
| `social_home_page/create_post_menu/create_livestream_button` | Element | Customize text and image |

### Code Examples

<CodeGroup>
  ```swift iOS theme={null}
  let createPostMenuComponent = AmityCreatePostMenuComponent()
  let viewController = AmitySwiftUIHostingController(rootView: createPostMenuComponent)
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeCreatePostMenuComponent() {
      AmityCreatePostMenuComponent()
  }
  ```

  ```typescript React theme={null}
  import { AmityUIKitProvider, AmityCreatePostMenuComponent } from '@amityco/ui-kit';

  const SampleCreatePostMenu = () => {
    return (
      <AmityUIKitProvider
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        configs={config}
        pageBehavior={{
          AmityCreatePostMenuComponentBehavior: {
            goToSelectPostTargetPage: () => {},
            goToStoryTargetSelectionPage: () => {},
          },
        }}
      >
        <AmityCreatePostMenuComponent />
      </AmityUIKitProvider>
    );
  };
  ```

  ```jsx React Native theme={null}
  import { AmityCreatePostMenuComponent, AmityUiKitProvider } from '@amityco/react-native-social-uikit';

  <AmityUiKitProvider
    configs={config}
    apiKey="API_KEY"
    apiRegion="API_REGION"
    userId="userId"
    displayName="displayName"
    apiEndpoint="https://api.{API_REGION}.amity.co"
    behaviour={{
      AmityCreatePostMenuComponentBehavior: {
        goToSelectStoryTargetPage: () => {},
        goToSelectPostTargetPage: ({ postType }) => console.log(postType),
      },
    }}
  >
    <AmityCreatePostMenuComponent />
  </AmityUiKitProvider>
  ```
</CodeGroup>

<Note>
  **Navigation Behavior**: The component behavior can be customized to manage navigation flow for post and story creation aligned with your application's user experience.
</Note>

### Navigation Behavior

The behavior of the AmityCreatePostMenuComponent can be customized to manage how the application navigates upon user actions related to post and story creation.

<CodeGroup>
  ```swift iOS theme={null}
  class CustomAmityCreatePostMenuComponentBehavior: AmityCreatePostMenuComponentBehavior {
      override init() {
          super.init()
      }
      
      override func goToSelectPostTargetPage(context: AmityCreatePostMenuComponentBehavior.Context) {
          // Custom implementation for navigating to Select Post Target Page
      }
      
      override func goToSelectStoryTargetPage(context: AmityCreatePostMenuComponentBehavior.Context) {
          // Custom implementation for navigating to Select Story Target Page
      }
  }

  // Call this function to setup custom behaviour class in UIKit
  func setCreatePostMenuComponentBehaviour() {
      let customBehavior = CustomAmityCreatePostMenuComponentBehavior()
      AmityUIKit4Manager.behaviour.createPostMenuComponentBehavior = customBehavior
  }
  ```

  ```kotlin Android theme={null}
  class CustomCreatePostMenuComponentBehavior : AmityCreatePostMenuComponentBehavior() {
      override fun goToSelectPostTargetPage(
          context: Context,
          type: AmityPostTargetSelectionPageType
      ) {
          // custom implementation for navigating to Post Target Selection Page
      }

      override fun goToSelectStoryTargetPage(context: Context) {
          // custom implementation for navigating to Story Target Selection Page
      }
  }

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

  ```typescript React theme={null}
  import { AmityUIKitProvider, AmityCreatePostMenuComponent } from '@amityco/ui-kit';

  const SampleCreatePostMenu = () => {
    return (
      <AmityUIKitProvider
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        configs={config}
        pageBehavior={{
          AmityCreatePostMenuComponentBehavior: {
            goToSelectPostTargetPage: () => {
              // Navigate to post target selection
            },
            goToStoryTargetSelectionPage: () => {
              // Navigate to story target selection
            },
          },
        }}
      >
        <AmityCreatePostMenuComponent />
      </AmityUIKitProvider>
    );
  };
  ```

  ```jsx React Native theme={null}
  import { AmityCreatePostMenuComponent, AmityUiKitProvider } from '@amityco/react-native-social-uikit';

  <AmityUiKitProvider
    configs={config}
    apiKey="API_KEY"
    apiRegion="API_REGION"
    userId="userId"
    displayName="displayName"
    apiEndpoint="https://api.{API_REGION}.amity.co"
    behaviour={{
      AmityCreatePostMenuComponentBehavior: {
        goToSelectStoryTargetPage: () => {
          // Navigate to story target selection
        },
        goToSelectPostTargetPage: ({ postType }) => {
          console.log(postType);
          // Navigate to post target selection
        },
      },
    }}
  >
    <AmityCreatePostMenuComponent />
  </AmityUiKitProvider>
  ```
</CodeGroup>

## Community Discovery

**Explore and discover communities**

Components for helping users find and engage with communities through categories and recommendations.

### Community Categories Component

Displays five categories in a horizontally scrollable view with explore options.

| Feature | Description |
| - | - |
| Categories | Highlights 5 categories making them immediately accessible |
| See More Tab | Allows users to view all categories in a separate page |

<CodeGroup>
  ```swift iOS theme={null}
  let categoriesComponent = AmityCommunityCategoriesComponent()
  let viewController = AmitySwiftUIHostingController(rootView: categoriesComponent)
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeCommunityCategoriesComponent() {
      AmityCommunityCategoriesComponent()
  }
  ```
</CodeGroup>

### Recommended Communities Component

Shows top four recommended communities for users to join.

<CodeGroup>
  ```swift iOS theme={null}
  let recommendedComponent = AmityRecommendedCommunitiesComponent()
  let viewController = AmitySwiftUIHostingController(rootView: recommendedComponent)
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeRecommendedCommunitiesComponent() {
      AmityRecommendedCommunitiesComponent()
  }
  ```
</CodeGroup>

### Trending Communities Component

Showcases the top five trending communities for user interaction.

<CodeGroup>
  ```swift iOS theme={null}
  let trendingComponent = AmityTrendingCommunitiesComponent()
  let viewController = AmitySwiftUIHostingController(rootView: trendingComponent)
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeTrendingCommunitiesComponent() {
      AmityTrendingCommunitiesComponent()
  }
  ```
</CodeGroup>

### Customization Options

| Component | Config ID | Type | Description |
| - | - | - | - |
| Categories | `social_home_page/community_categories/*` | Component | Customize component theme |
| Recommended | `social_home_page/recommended_communities/*` | Component | Customize component theme |
| Trending | `social_home_page/trending_communities/*` | Component | Customize component theme |

## Best practices

<AccordionGroup>
  <Accordion title="Social home architecture" icon="home">
    Plan the layout by combining feed components, content creation tools, and community discovery. Consider the user flow from content consumption to creation and community engagement, and where the For You tab sits relative to the newsfeed.
  </Accordion>

  <Accordion title="Balancing consumption and creation" icon="flow">
    Position the create post menu so it encourages user-generated content without competing with content discovery. Community categories, recommendations, and trending displays give users several routes into communities.
  </Accordion>

  <Accordion title="User experience" icon="user-check">
    Keep a clear visual hierarchy between content types, smooth transitions between components, and consistent navigation across social features. Design mobile-first.
  </Accordion>

  <Accordion title="Performance" icon="gauge">
    The SDK handles data fetching and pagination, so focus on UI responsiveness: efficient list rendering, optimized media display, and stable scroll positions when new pages load.
  </Accordion>

  <Accordion title="Customization" icon="palette">
    Match themes, colors, and component behavior to your design system. Adjust styling per context — creation surfaces and consumption surfaces deserve different emphasis.
  </Accordion>
</AccordionGroup>

## Related Features

<CardGroup cols={3}>
  <Card title="Content Discovery" href="/uikit/components/social/content-discovery" icon="magnifying-glass">
    **Search & Discovery**
    Global search, categories, and notification components
  </Card>

  <Card title="Post Components" href="/uikit/components/social/posts" icon="file">
    **Content Creation**
    Post creation and management components
  </Card>

  <Card title="Community Management" href="/uikit/components/social/communities" icon="users">
    **Community Features**
    Community creation and administration tools
  </Card>
</CardGroup>

<Tip>
  **Implementation Strategy**: Start with AmitySocialHomePage for a complete experience, then customize individual components (newsfeed, create post menu, community discovery) based on your specific user engagement goals and brand requirements.
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.