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.

Feature Overview

The Social Feeds & Content Discovery UIKit provides a complete suite of components for building engaging social home experiences. From dynamic newsfeeds and story displays to community discovery and content creation tools, these components create the foundation for modern social applications.

Content Feeds

Dynamic Social Streams

Global newsfeed with posts and stories
Real-time content updates and interactions
Empty state handling and loading
Post engagement (likes, comments, shares)

Content Creation

User-Generated Content

Post and story creation menus
Multiple content types support
Target audience selection
Quick creation workflows

Community Discovery

Explore & Connect

Community categories browsing
Recommended communities
Trending communities display
Discovery optimization

Navigation & Organization

Seamless User Experience

Tab-based navigation system
Custom navigation behaviors
Feed organization and filtering
User flow optimization

Implementation Guide

Social Home Page
Feed Components
Content Creation
Community Discovery

Complete social home experienceThe 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>

Newsfeed and content displayComponents 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.

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>

Post and story creation toolsComponents 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>

Explore and discover communitiesComponents 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

For You Feed

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.

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.

Rendering 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 Feeds & Timelines for the SDK-level behavior.

Component Management Strategies

Content Flow Optimization

Balancing consumption and creationDesign the balance between content display (feeds, stories) and content creation opportunities. Position creation menus strategically to encourage user-generated content while maintaining focus on content discovery and consumption.

Community Engagement Strategy

Driving community participationUse community discovery components strategically to introduce users to relevant communities. Combine categories, recommendations, and trending displays to provide multiple pathways for community exploration and joining.

Best Practices

User Experience Design

Creating intuitive social interfacesDesign clear visual hierarchy between different content types, provide smooth transitions between components, and ensure navigation patterns are consistent across all social features. Consider mobile-first design for optimal user engagement.

Performance Optimization

Ensuring smooth social experiencesImplement efficient loading strategies for feeds, optimize image and media display, and use appropriate pagination for community discovery. The underlying SDK handles data optimization, so focus on UI responsiveness and user interaction patterns.

Customization Strategy

Aligning with your brand identityCustomize themes, colors, and component behaviors to match your application’s design system. Consider different user contexts (content creation vs consumption) and adjust styling to guide user attention appropriately.

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

Feature Overview

Content Feeds

Content Creation

Community Discovery

Navigation & Organization

Implementation Guide

Newsfeed Component

Global Feed Component

Empty Newsfeed Component

Navigation Behavior

Create Post Menu Component

Features

Customization Options

Code Examples

Navigation Behavior

Community Categories Component

Recommended Communities Component

Customization Options

For You Feed

How the tab is gated

Rendering the feed

Hooks

Component Management Strategies

Best Practices

Content Discovery

Post Components

Community Management

​Feature Overview

Content Feeds

Content Creation

Community Discovery

Navigation & Organization

​Implementation Guide

​Features

​Customization Options

​Code Examples

​Navigation Behavior

​Newsfeed Component

​Global Feed Component

​Empty Newsfeed Component

​Navigation Behavior

​Create Post Menu Component

​Features

​Customization Options

​Code Examples

​Navigation Behavior

​Community Categories Component

​Recommended Communities Component

​Trending Communities Component

​Customization Options

​For You Feed

​How the tab is gated

​Rendering the feed

​Hooks

​Component Management Strategies

​Best Practices

​Related Features

Content Discovery

Post Components

Community Management

Feature Overview

Implementation Guide

Features

Customization Options

Code Examples

Navigation Behavior

Newsfeed Component

Global Feed Component

Empty Newsfeed Component

Navigation Behavior

Create Post Menu Component

Features

Customization Options

Code Examples

Navigation Behavior

Community Categories Component

Recommended Communities Component

Trending Communities Component

Customization Options

For You Feed

How the tab is gated

Rendering the feed

Hooks

Component Management Strategies

Best Practices

Related Features