Social Feeds & Content Discovery

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.

Components on this page

Component	What it shows	Platforms
For You Feed	Posts the backend personalized for the current user	React Web, iOS, Android
Social Home Page	The container that hosts the feed tabs, creation menu, and discovery	All
Newsfeed	Stories plus the global post list	All
Global Feed	Aggregated community posts, newest first (chronological only)	All
Empty Newsfeed	The first-run state, with prompts to post or join a community	All
Create Post Menu	The entry point for posts, stories, polls, and live streams	All
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.

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

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

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.

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 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.

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.

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:

useForYouFeedSetting() reads forYouFeed.enabled for the network (skipped for visitors/bots).
useForYouFeedCollection() observes the personalized posts once the setting is enabled.
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:

import { ForYouFeed } from '@amityco/ui-kit';

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

AmityForYouFeedComponent()

@Composable
fun composeForYouFeedComponent() {
    AmityForYouFeedComponent()
}

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.

Both hooks and the ForYouFeed component are backed by the SDK’s FeedRepository.getForYouFeed() and Client.getForYouFeedSetting(). See For You Feed for the SDK-level behavior.

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

let socialHomePage = AmitySocialHomePage()
let viewController = AmitySwiftUIHostingController(rootView: socialHomePage)

@Composable
fun composeSocialHomePage() {
    AmitySocialHomePage()
}

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>
  );
};

import { AmitySocialHomePage, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';
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>

Widget socialHomePage() {
  return AmitySocialHomePage();
}

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

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

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
}

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
}

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>
  );
};

import { AmitySocialHomePage, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

<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>

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

let newsfeedComponent = AmityNewsFeedComponent()
let viewController = AmitySwiftUIHostingController(rootView: newsfeedComponent)

@Composable
fun composeNewsFeedComponent() {
    AmityNewsFeedComponent()
}

Widget newsFeedComponent() {
  return AmityNewsFeedComponent();
}

Global Feed Component

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

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 for the SDK-level behavior and query parameters.

Custom ranking is not available in the UIKit on any platform, only in the SDK — see the Feature Matrix. AmityGlobalFeedComponent always renders the chronological feed. To ship an engagement-ranked feed, query getCustomRankingGlobalFeed() directly and render the results with your own list.

let globalFeedComponent = AmityGlobalFeedComponent()
let viewController = AmitySwiftUIHostingController(rootView: globalFeedComponent)

@Composable
fun composeGlobalFeedComponent() {
    AmityGlobalFeedComponent()
}

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>
  );
};

Widget globalFeedComponent() {
  return AmityGlobalFeedComponent();
}

Empty Newsfeed Component

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

let emptyNewsFeedComponent = AmityEmptyNewsFeedComponent()
let viewController = AmitySwiftUIHostingController(rootView: emptyNewsFeedComponent)

@Composable
fun composeEmptyNewsFeedComponent() {
    AmityEmptyNewsFeedComponent()
}

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>
  );
};

import { AmityEmptyNewsFeedComponent, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

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

Widget emptyNewsfeedComponent() {
  return AmityEmptyNewsFeedComponent();
}

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

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
}

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
}

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>
  );
};

import { AmityGlobalFeedComponent, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

<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>

Content Creation

Post and story creation tools Components for enabling users to create posts, stories, and other content types. 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

let createPostMenuComponent = AmityCreatePostMenuComponent()
let viewController = AmitySwiftUIHostingController(rootView: createPostMenuComponent)

@Composable
fun composeCreatePostMenuComponent() {
    AmityCreatePostMenuComponent()
}

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>
  );
};

import { AmityCreatePostMenuComponent, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

<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>

Navigation Behavior: The component behavior can be customized to manage navigation flow for post and story creation aligned with your application’s user experience.

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

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
}

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
}

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>
  );
};

import { AmityCreatePostMenuComponent, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

<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>

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

let categoriesComponent = AmityCommunityCategoriesComponent()
let viewController = AmitySwiftUIHostingController(rootView: categoriesComponent)

@Composable
fun composeCommunityCategoriesComponent() {
    AmityCommunityCategoriesComponent()
}

Recommended Communities Component

Shows top four recommended communities for users to join.

let recommendedComponent = AmityRecommendedCommunitiesComponent()
let viewController = AmitySwiftUIHostingController(rootView: recommendedComponent)

@Composable
fun composeRecommendedCommunitiesComponent() {
    AmityRecommendedCommunitiesComponent()
}

Showcases the top five trending communities for user interaction.

let trendingComponent = AmityTrendingCommunitiesComponent()
let viewController = AmitySwiftUIHostingController(rootView: trendingComponent)

@Composable
fun composeTrendingCommunitiesComponent() {
    AmityTrendingCommunitiesComponent()
}

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

Balancing consumption and creation

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.

User experience

Keep a clear visual hierarchy between content types, smooth transitions between components, and consistent navigation across social features. Design mobile-first.

Performance

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.

Customization

Match themes, colors, and component behavior to your design system. Adjust styling per context — creation surfaces and consumption surfaces deserve different emphasis.

Content Discovery

Search & Discovery Global search, categories, and notification components

Post Components

Content Creation Post creation and management components

Community Management

Community Features Community creation and administration tools

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.

Powered by

Getting Started

Customization

Components

Release Notes

Support

Social Feeds & Content Discovery

Components on this page

For You Feed

What the For You feed includes

How ranking works

How the tab is gated

Render the feed

Hooks

Features

Customization Options

Code Examples

Navigation Behavior

Feed Components

Newsfeed Component

Global Feed Component

Empty Newsfeed Component

Navigation Behavior

Content Creation

Create Post Menu Component

Features

Customization Options

Code Examples

Navigation Behavior

Community Discovery

Community Categories Component

Recommended Communities Component

Customization Options

Best practices

Content Discovery

Post Components

Community Management

​Components on this page

​For You Feed

​What the For You feed includes

​How ranking works

​How the tab is gated

​Render the feed

​Hooks

​Social Home Page

​Features

​Customization Options

​Code Examples

​Navigation Behavior

​Feed Components

​Newsfeed Component

​Global Feed Component

​Empty Newsfeed Component

​Navigation Behavior

​Content Creation

​Create Post Menu Component

​Features

​Customization Options

​Code Examples

​Navigation Behavior

​Community Discovery

​Community Categories Component

​Recommended Communities Component

​Trending Communities Component

​Customization Options

​Best practices

​Related Features

Content Discovery

Post Components

Community Management

Components on this page

For You Feed

What the For You feed includes

How ranking works

How the tab is gated

Render the feed

Hooks

Social Home Page

Features

Customization Options

Code Examples

Navigation Behavior

Feed Components

Newsfeed Component

Global Feed Component

Empty Newsfeed Component

Navigation Behavior

Content Creation

Create Post Menu Component

Features

Customization Options

Code Examples

Navigation Behavior

Community Discovery

Community Categories Component

Recommended Communities Component

Trending Communities Component

Customization Options

Best practices

Related Features