Post Components - social.plus

Key Benefit: Enable rich content creation and engagement with comprehensive post components supporting text, media, polls, mentions, link previews, and advanced accessibility features across all platforms.

Feature Overview

The Post Components UIKit provides a complete suite of tools for post creation, editing, and content management. From rich media posts and interactive polls to advanced features like @mentions, link previews, and accessibility support, these components create the foundation for engaging social content experiences.

Text & Media Posts

Create rich content with text, images, and videos. Support for optional titles, mentions, hashtags, and multiple attachments.

Interactive Polls

Engage users with text or image-based polls. Users can change/remove votes with customizable duration and multiple selections.

Livestream Posts

Real-time livestreaming with interactive chat and reactions, available in Livestreaming post in a community.

Engagement & Comments

Inline comments, reactions, @mentions, and real-time interaction tracking for active discussions.

Sharing & Discovery

Shareable deep links, link previews, hashtags, and gallery-to-post linking for better content discovery.

Management & Moderation

Post editing, content moderation tools, and comprehensive management for all post types.

Platform Support

Feature	iOS	Android	React	React Native	Flutter
Create Text, Image, Video Post	✅	✅	✅	✅	✅
Edit Text, Image, Video Post	✅	✅	✅	✅	✅
Media Carousel (multiple images/videos)	✅	✅	✅	✅	❌
Create Livestream Post	✅	✅	❌	✅	❌
Community Livestream with chat and reaction	✅	✅	✅	❌	❌
Create Poll Post	✅	✅	✅	❌	✅
Create Image Poll Post	✅	✅	✅	❌	❌
Update Poll Answer	✅	✅	✅	❌	❌
Report Post	✅	✅	✅	✅	✅
Comments & Reactions	✅	✅	✅	✅	✅
Recent Comment preview	✅	✅	✅	❌	❌
Mention	✅	✅	✅	✅	✅
Link Preview	✅	✅	✅	✅	✅
Brand User Post	✅	✅	✅	❌	✅
(Optional) Post title	✅	✅	✅	❌	❌
Hashtag	✅	✅	✅	❌	❌
Sharable Links	✅	✅	✅	❌	❌
Ads	✅	✅	✅	✅	❌
Alt text for Image Post	✅	✅	✅	❌	❌
Url Preview Removal	✅	✅	✅	❌	❌
Product Mentions in Text	✅	✅	✅	❌	❌
Product Tags on Media	✅	✅	✅	❌	❌
Product Carousel Display	✅	✅	✅	❌	❌
Edit Product Tags	✅	✅	✅	❌	❌

Legend: ✅ Full Support | ❌ Not Available

Post Types & Features

Post Types

Supported Content Types

Text Posts: Rich text content with optional post titles and free-form hashtags for better discoverability
Rich Media Posts: Images and videos with enhanced display, alt text support, and a swipeable carousel for posts with multiple attachments
Livestream Posts: Livestreaming with interactive chat and reactions
Poll Posts: Interactive polls with voting and real-time results
- Text-only polls with multiple choice options
- Image polls with visual voting options (supported on iOS, Android, React)
- Vote management - users can change or remove their poll votes

Engagement Features

User Interaction Capabilities

Reactions: Multiple sentiment expressions
Inline Comments: Threaded conversations displayed directly under posts on feeds for improved engagement
Mentions: @username functionality with notifications and user discovery
Sharing: Content distribution with shareable deep links for posts
Poll Voting: Interactive voting with the ability to change or remove votes before poll closes

Advanced Features

Enhanced Functionality

Post Titles: Optional titles for better post organization and context
Free-form Hashtags: Add hashtags anywhere in post content for improved content discovery and categorization
Shareable Deep Links: Generate and share direct links to specific posts for seamless navigation
Link Preview: Automatic metadata extraction and display for URLs shared in posts
Link Highlighting: Detect links using AmityLink.index and AmityLink.length, highlight matching text, and open link.url on tap
Gallery-to-Post Linking: Community gallery media is linked to original posts, providing full context when viewing images
Brand User: Professional/admin posting capabilities with enhanced visibility
Accessibility: Comprehensive alt text support for images ensuring inclusive content
Moderation: Content reporting and management for community safety

Product Tagging

Commerce Integration & Product Discovery

Text Product Mentions: Tag products in post captions using @ trigger with product suggestion overlay for easy discovery
Media Product Tags: Tag products directly on images and videos with coordinate-based positioning to highlight specific items
Product Search: Real-time product search for quick product discovery
Multi-select Support: Select multiple products per post (maximum 20 products combined across text and media)
Product Carousel Display: View all tagged products in a scrollable carousel below post content
Product Links: Tap products to open in in-app browser without interrupting social experience
Edit Product Tags: Add, remove, or modify product tags on existing posts while maintaining engagement metrics
Per-Media Limits: Support per-media tagging with individual product limits (max 5 products per media item)
Product Tag Indicator: Visual indicator on media thumbnails showing count of tagged products
Context-Aware Headers: Different labels for product display based on content type (post vs image/video)

Implementation Guide

Post Detail Page
Post Content Component
Post Composer
Media Attachments
Poll Components

Complete post viewing experienceThe Post Detail Page displays comprehensive post information, including content, engagements, and comments.

Features

Feature	Description
Engagement Options	Users can like, comment, and interact with posts directly from this page
Content Display	Full post content with media, polls, and interactive elements
Comment Integration	Integrated comment tray for discussions

Customization Options

Config ID	Type	Description
`post_detail_page//`	Theme	You can customize page theme
`post_detail_page/*/back_button`	Element	You can update back button icon
`post_detail_page/*/menu_button`	Element	You can update menu button icon

Code Examples

let postDetailPage = AmityPostDetailPage(id: "<post-id>")
let viewController = AmitySwiftUIHostingController(rootView: postDetailPage)

@Composable
fun composePostDetailPage(postId: String) {
    AmityPostDetailPage(
        id = postId,
        style = AmityPostContentComponentStyle.DETAIL,
        hideTarget = false,
    )
}

fun startAnActivity(context: Context, postId: String) {
    val intent = AmityPostDetailPageActivity.newIntent(
        context = context,
        id = postId,
    )
    context.startActivity(intent)
}

import React from 'react';
import { AmityUiKitProvider, AmityPostDetailPage } from '@amityco/ui-kit';

const SampleAmityPostDetailPage = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
    >
      <AmityPostDetailPage
        id="post-id"
        hideTarget={false}
        category="post"
        commentId="comment-id"
        parentId="parent-id"
      />
    </AmityUiKitProvider>
  );
};

import {
  AmityPostDetailPage,
  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"
>
  <AmityPostDetailPage postId="7297262927392" />
</AmityUiKitProvider>

Widget postDetailPageWidget() {
  return AmityPostDetailPage(
    postId: 'post-id',
  );
}

class CustomAmityPostDetailPageBehavior: AmityPostDetailPageBehavior {
    override init() {
        super.init()
    }
}

// Call this function to setup custom behaviour class in UIKit
func setPostDetailPageBehaviour() {
    let customBehavior = CustomAmityPostDetailPageBehavior()
    AmityUIKit4Manager.behaviour.postDetailPageBehavior = customBehavior
}

class CustomPostDetailPageBehaviour : AmityPostDetailPageBehavior() {

}

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

import React from 'react';
import { AmityUIKitProvider, AmityPostDetailPage } from '@amityco/ui-kit';

const SampleAmityPostDetailPage = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
    >
      <AmityPostDetailPage id="post-id" />
    </AmityUIKitProvider>
  );
};

import {
  AmityPostDetailPage,
  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"
>
  <AmityPostDetailPage postId="7297262927392" />
</AmityUiKitProvider>

Flexible post display componentThe Post Content Component displays post information including content and engagements in a reusable format.

Customization Options

Config ID	Type	Description
`/post_content/`	Theme	You can customize component theme
`*/post_content/moderator_badge`	Element	You can change icon and wording of Moderator Badge
`*/post_content/timestamp`	Element	You can hide timestamp
`*/post_content/menu_button`	Element	You can change icon of menu button
`*/post_content/reaction_button`	Element	You can change reaction button icon and wording
`*/post_content/comment_button`	Element	You can change comment button icon and wording
`*/post_content/share_button`	Element	You can change share button icon and wording

Code Examples

let postContentComponent = AmityPostContentComponent(
    post: post, 
    style: .feed, 
    hideMenuButton: false, 
    onTapAction: { _ in
        // Action called when Post Content area is tapped
    }
)
let viewController = AmitySwiftUIHostingController(rootView: postContentComponent)

@Composable
fun composePostContentComponent(
    post: AmityPost,
    style: AmityPostContentComponentStyle,
    hideMenuButton: Boolean,
) {
    AmityPostContentComponent(
        post = post,
        style = style,
        hideMenuButton = hideMenuButton,
        onTapAction = {}
    )
}

import React from 'react';
import { AmityUIKitProvider, AmityPostContentComponent } from '@amityco/ui-kit';

const SampleAmityPostContentComponent = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
      pageBehavior={{
        AmityGlobalFeedComponentBehavior: {
          goToPostDetailPage: ({ postId }) => {
            console.log('goToPostDetailPage', postId);
          },
          goToViewStoryPage: () => {},
        },
      }}
    >
      <AmityPostContentComponent
        post={post}
        type="feed"
        onClick={() => {}}
        onPostDeleted={() => {}}
      />
    </AmityUIKitProvider>
  );
};

import {
  AmityPostContentComponent,
  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"
>
  <AmityPostContentComponent post={{} as Amity.Post} />
</AmityUiKitProvider>

Widget postContentComponentWidget() {
  return AmityPostContentComponent(
    post: post,
    style: AmityPostContentComponentStyle.feed,
  );
}

Link Preview Behavior

Preview Selection

If multiple links have renderPreview = true, UIKit shows the preview card for the link with the lowest index value.

Legacy Post Fallback

If the post has no links field but a URL is still detected in the text, UIKit can fall back to getLinkPreviewMetadata and render a preview from the extracted metadata.

Preview Layout Rules

Preview cards display the title at the top and the domain at the bottom. If title is missing, UIKit uses domain as the title. If imageUrl is missing, the image section is hidden.

Tap Behavior

Tapping either highlighted link text or the preview card opens link.url.

class CustomAmityPostContentComponentBehavior: AmityPostContentComponentBehavior {
    override init() {
        super.init()
    }
    
    override func goToUserProfilePage(context: AmityPostContentComponentBehavior.Context) {
        // Custom implementation for navigatin to User Profile Page
    }
    
    override func goToCommunityProfilePage(context: AmityPostContentComponentBehavior.Context) {
        // Custom implementation for navigatin to Community Profile Page
    }
}

// Call this function to setup custom behaviour class in UIKit
func setPostContentComponentBehaviour() {
    let customBehavior = CustomAmityPostContentComponentBehavior()
    AmityUIKit4Manager.behaviour.postContentComponentBehavior = customBehavior
}

class CustomPostContentComponentBehaviour : AmityPostContentComponentBehavior() {
    override fun goToCommunityProfilePage(context: Context, community: AmityCommunity) {
        // custom implementation for navigating to Community Profile Page
    }

    override fun goToUserProfilePage(context: Context, userId: String) {
        // custom implementation for navigating to User Profile Page
    }

    override fun goToPostComposerPage(context: Context, post: AmityPost) {
        // custom implementation for navigating to Post Composer Page
    }
}

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

import React from 'react';
import { AmityUIKitProvider, AmityPostContentComponent } from '@amityco/ui-kit';

const SampleAmityPostContentComponent = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
      pageBehavior={{
        AmityGlobalFeedComponentBehavior: {
          goToPostDetailPage: ({ postId }) => {
            console.log('goToPostDetailPage', postId);
          },
          goToViewStoryPage: () => {},
        },
      }}
    >
      <AmityPostContentComponent
        post={post}
        type="feed"
        onClick={() => {}}
        onPostDeleted={() => {}}
      />
    </AmityUIKitProvider>
  );
};

class CustomPostContentComponentBehaviour : AmityPostContentComponentBehavior() {
    override fun goToCommunityProfilePage(context: Context, community: AmityCommunity) {
        // custom implementation for navigating to Community Profile Page
    }

    override fun goToUserProfilePage(context: Context, userId: String) {
        // custom implementation for navigating to User Profile Page
    }

    override fun goToPostComposerPage(context: Context, post: AmityPost) {
        // custom implementation for navigating to Post Composer Page
    }
}

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

Create and edit postsThe Post Composer Page enables users to create and edit posts with text content, media attachments, and rich features.

Features

Feature	Description
Post Composition	Create posts with text content, images, videos and files
Post Editing	Edit existing posts using edit mode
Media Integration	Uses AmityMediaAttachmentComponent and AmityDetailedMediaAttachmentComponent

Customization Options

Config ID	Type	Description
`post_composer_page//`	Theme	You can customize page theme
`post_composer_page/*/close_button`	Element	You can update close button icon
`post_composer_page/*/community_display_name`	Element	You can hide community name on navigation bar
`post_composer_page/*/create_new_post_button`	Element	You can change wording of post button on navigation bar
`post_composer_page/*/edit_post_button`	Element	You can change wording of save button on navigation bar if this page is used as edit mode
`post_composer_page/*/edit_post_title`	Element	You can change navigation title appeared in the edit mode

Code Examples

// Create Option to use AmityPostComposerPage to create post
let createOption = AmityPostComposerOptions.createOptions(
    mode: .create, 
    targetId: "<target-id>", 
    targetType: .community, 
    community: community
)
// Edit Option to use AmityPostComposerPage to edit existing post
let editOption = AmityPostComposerOptions.editOptions(mode: .edit, post: post)

let postComposerPage = AmityPostComposerPage(options: createOption)
let viewController = AmitySwiftUIHostingController(rootView: postComposerPage)

@Composable
fun composePostComposerPage(
    options: AmityPostComposerOptions
) {
    AmityPostComposerPage(
        options = options,
    )
}

import React from 'react';
import { AmityUIKitProvider, AmityPostComposerPage } from '@amityco/ui-kit';

const SampleAmityPostComposerPage = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
      pageBehavior={{
        AmityPostComposerPageBehavior: {
          goToSocialHomePage: () => {},
        },
      }}
    >
      <AmityPostComposerPage
        mode="create"
        community={{} as Amity.Community}
        targetId="your-targetId"
        targetType="community"
      />
    </AmityUIKitProvider>
  );
};

import {
  AmityPostComposerPage,
  AmityUiKitProvider,
  AmityPostComposerMode,
} 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"
>
  <AmityPostComposerPage
    mode={AmityPostComposerMode.CREATE}
    community={{} as Amity.Community}
    targetId="9263297329"
    targetType="Community"
  />
</AmityUiKitProvider>

Widget postComposerPageWidget() {
  // Create post composer options
  AmityPostComposerOptions createOptions =
      AmityPostComposerOptions.createOptions(
          targetType: AmityPostTargetType.COMMUNITY,
          targetId: 'targetId',
          community: community);

  // Edit post composer options
  AmityPostComposerOptions editOptions = AmityPostComposerOptions.editOptions(
    post: post,
  );

  return AmityPostComposerPage(options: createOptions);
}

class CustomAmityPostComposerPageBehavior: AmityPostComposerPageBehavior {
    override init() {
        super.init()
    }
}

// Call this function to setup custom behaviour class in UIKit
func setPostComposerPageBehaviour() {
    let customBehavior = CustomAmityPostComposerPageBehavior()
    AmityUIKit4Manager.behaviour.postComposerPageBehavior = customBehavior
}

class CustomPostComposerPageBehavior : AmityPostComposerPageBehavior() {

}

fun setCustomBehavior() {
    val customBehaviour = CustomPostComposerPageBehavior()
    AmityUIKit4Manager.behavior.postComposerPageBehavior = customBehaviour
}

import React from 'react';
import { AmityUIKitProvider, AmityPostComposerPage } from '@amityco/ui-kit';

const SampleAmityPostComposerPage = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
      pageBehavior={{
        AmityPostComposerPageBehavior: {
          goToSocialHomePage: () => {},
        },
      }}
    >
      <AmityPostComposerPage
        mode="create"
        community={{} as Amity.Community}
        targetId="your-targetId"
        targetType="community"
      />
    </AmityUIKitProvider>
  );
};

import {
  AmityPostComposerPage,
  AmityUiKitProvider,
  AmityPostComposerMode,
} 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"
>
  <AmityPostComposerPage
    mode={AmityPostComposerMode.CREATE}
    community={{} as Amity.Community}
    targetId="9263297329"
    targetType="Community"
  />
</AmityUiKitProvider>

Media upload and managementComponents for adding media and files to posts during creation or editing.

Media Attachment Component

Compact media attachment interface for quick media addition.

Feature	Description
Attach media and files	Add images, videos, and files to posts

Customization Options

Config ID	Type	Description
`post_composer_page/media_attachment/*`	Theme	You can change component theme
`post_composer_page/media_attachment/camera_button`	Element	You can change camera button icon
`post_composer_page/media_attachment/image_button`	Element	You can change photo button icon
`post_composer_page/media_attachment/video_button`	Element	You can change video button icon
`post_composer_page/media_attachment/file_button`	Element	You can change attachment button icon

let viewModel = AmityMediaAttachmentViewModel()
let mediaAttachmentComponent = AmityMediaAttachmentComponent(viewModel: viewModel)
let viewController = AmitySwiftUIHostingController(rootView: mediaAttachmentComponent)

@Composable
fun composeMediaAttachmentComponent(
    viewModel: AmityMediaAttachmentViewModel,
) {
    AmityMediaAttachmentComponent(
        viewModel = viewModel
    )
}

import React from 'react';
import { AmityUIKitProvider, AmityMediaAttachmentComponent } from '@amityco/ui-kit';

const SampleAmityMediaAttachmentComponent = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
    >
      <AmityMediaAttachmentComponent
        uploadLoading={false}
        onChangeImages={() => {}}
        onChangeThumbnail={() => {}}
        videoThumbnail=""
        onChangeVideos={() => {}}
        isVisibleCamera={true}
        isVisibleImage={true}
        isVisibleVideo={true}
        totalMedia={0}
      />
    </AmityUIKitProvider>
  );
};

import {
  AmityMediaAttachmentComponent,
  AmityUiKitProvider,
  mediaAttachment,
} 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"
>
  <AmityMediaAttachmentComponent
    onPressCamera={() => {}}
    onPressImage={() => {}}
    onPressVideo={() => {}}
    chosenMediaType={mediaAttachment.image}
  />
</AmityUiKitProvider>

Widget mediaAttachmentComponentWidget() {
  return AmityMediaAttachmentComponent(
    onCameraTap: () {
      // Handle camera action
    },
    onImageTap: () {
      // Handle image action
    },
    onVideoTap: () {
      // Handle video action
    },
  );
}

Detailed Media Attachment Component

Enhanced media attachment interface with detailed options.

Config ID	Type	Description
`post_composer_page/detailed_media_attachment/*`	Theme	You can change component theme
`post_composer_page/detailed_media_attachment/camera_button`	Element	You can change camera button icon and wording
`post_composer_page/detailed_media_attachment/image_button`	Element	You can change photo button icon and wording
`post_composer_page/detailed_media_attachment/video_button`	Element	You can change video button icon and wording
`post_composer_page/detailed_media_attachment/file_button`	Element	You can change attachment button icon and wording

let viewModel = AmityMediaAttachmentViewModel()
let detailMediaAttachmentComponent = AmityDetailedMediaAttachmentComponent(viewModel: viewModel)
let viewController = AmitySwiftUIHostingController(rootView: detailMediaAttachmentComponent)

@Composable
fun composeDetailedMediaAttachmentComponent(
    viewModel: AmityMediaAttachmentViewModel,
) {
    AmityDetailedMediaAttachmentComponent(
        viewModel = viewModel
    )
}

import React from 'react';
import { AmityUIKitProvider, AmityDetailedMediaAttachmentComponent } from '@amityco/ui-kit';

const SampleAmityDetailedMediaAttachmentComponent = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
    >
      <AmityDetailedMediaAttachmentComponent
        uploadLoading={false}
        onChangeImages={() => {}}
        onChangeThumbnail={() => {}}
        videoThumbnail=""
        onChangeVideos={() => {}}
        isVisibleCamera={true}
        isVisibleImage={true}
        isVisibleVideo={true}
        totalMedia={0}
      />
    </AmityUIKitProvider>
  );
};

import {
  AmityDetailedMediaAttachmentComponent,
  AmityUiKitProvider,
  mediaAttachment,
} 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"
>
  <AmityDetailedMediaAttachmentComponent
    onPressCamera={() => {}}
    onPressImage={() => {}}
    onPressVideo={() => {}}
    chosenMediaType={mediaAttachment.image}
  />
</AmityUiKitProvider>

Widget detailedMediaAttachmentComponentWidget() {
  return AmityDetailedMediaAttachmentComponent(
    onCameraTap: () {
      // Handle camera action
    },
    onImageTap: () {
      // Handle image action
    },
    onVideoTap: () {
      // Handle video action
    },
  );
}

Interactive polling featuresComponents for creating and managing interactive polls with target audience selection.

Poll Target Selection Page

Streamlines the process of selecting target audience for polls.

Feature	Description
Post creation	Select a community or my timeline to create a poll post with the selected target

Customization Options

Config ID	Type	Description
`select_poll_target_page//`	Page	You can customize page theme
`select_poll_target_page/*/close_button`	Element	You can customize image
`select_poll_target_page/*/title`	Element	You can customize text
`select_poll_target_page/*/my_timeline_text`	Element	You can customize text

let postTargetSelectionPage = AmityPostTargetSelectionPage()
let viewController = AmitySwiftUIHostingController(rootView: postTargetSelectionPage)

@Composable
fun composePostTargetSelectionPage(
    type: AmityPostTargetSelectionPageType
) {
    AmityPostTargetSelectionPage(
        type = type,
    )
}

fun startAnActivity(context: Context) {
    val intent = AmityPostTargetSelectionPageActivity.newIntent(
        context = context,
        type = AmityPostTargetSelectionPageType.POST
    )
    context.startActivity(intent)
}

import React from 'react';
import { AmityUIKitProvider, AmityPostTargetSelectionPage } from '@amityco/ui-kit';

const SampleAmityPostTargetSelectionPage = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
      pageBehavior={{
        AmityPostTargetSelectionPage: {
          goToPostComposerPage: () => {},
        },
      }}
    >
      <AmityPostTargetSelectionPage />
    </AmityUIKitProvider>
  );
};

import {
  AmityPostTargetSelectionPage,
  AmityUiKitProvider,
  AmityPostTargetSelectionPageType,
} 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"
  behaviour={{
    AmityPostTargetSelectionPageBehavior: {
      goToPostComposerPage: () => {},
      goToLivestreamComposerPage: () => {},
      goToPollComposerPage: () => {},
    },
  }}
>
  <AmityPostTargetSelectionPage
    postType={AmityPostTargetSelectionPageType.post}
  />
</AmityUiKitProvider>

Widget postTargetSelctionPageWidget() {
  return AmityPostTargetSelectionPage();
}

Poll Post Composer Page

Enables users to create interactive polls with questions and multiple answer options. Supports both text-only polls and image polls with visual voting options.

Feature	Description
Post Composition	Create poll posts with text questions and text options
Image Poll Support	Create image polls with visual voting options (iOS, Android, React)

Customization Options

Config ID	Type	Description
`poll_post_composer_page//`	Theme	You can customize page theme
`poll_post_composer_page/*/poll_question_tile`	Element	You can change wording of poll question title
`poll_post_composer_page/*/poll_options_title`	Element	You can change wording of poll question title
`poll_post_composer_page/*/poll_options_desc`	Element	You can change wording of poll options description
`poll_post_composer_page/*/poll_add_option_button`	Element	You can change wording of add option button and its corresponding icon
`poll_post_composer_page/*/poll_duration_title`	Element	You can change wording of poll duration title
`poll_post_composer_page/*/poll_duration_desc`	Element	You can change wording of poll duration description
`poll_post_composer_page/*/poll_multiple_selection_title`	Element	You can change wording of poll multiple selection title
`poll_post_composer_page/*/poll_multiple_selection_desc`	Element	You can change wording of poll multiple selection description

let pollComposer = AmityPollPostComposerPage(
    targetId: "user-id|community-id", 
    targetType: .community
)

@Composable
fun pollPostComposerPage(
    targetId: String,
    targetType: AmityPost.TargetType,
) {
    AmityPollPostComposerPage(
        targetId = targetId,
        targetType = targetType,
    )
}

import React from 'react';
import { AmityUiKitProvider, AmityPollPostComposerPage } from '@amityco/ui-kit';

const SampleAmityPollPostComposerPage = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityPollPostComposerPage
        targetId="targetId"
        targetType="community"
        // Use pollType="text" for text polls or pollType="image" for image polls
        pollType="text"
      />
    </AmityUiKitProvider>
  );
};

Widget pollComposerPageWidget() {
  return AmityPollPostComposerPage(
      targetType: AmityPostTargetType.COMMUNITY,
      targetId: 'targetId',
  );
}

class CustomAmityPostTargetSelectionPageBehavior: AmityPostTargetSelectionPageBehavior {
    override init() {
        super.init()
    }
    
    override func goToPostComposerPage(context: AmityPostTargetSelectionPageBehavior.Context) {
        // Custom implementation for navigating to Post Composer Page
    }
}

// Call this function to setup custom behaviour class in UIKit
func setPostTargetSelectionPageBehaviour() {
    let customBehavior = CustomAmityPostTargetSelectionPageBehavior()
    AmityUIKit4Manager.behaviour.postTargetSelectionPageBehavior = customBehavior
}

class CustomPostTargetSelectionPageBehaviour : AmityPostTargetSelectionPageBehavior() {
    override fun goToPostComposerPage(
        context: Context,
        launcher: ActivityResultLauncher<Intent>,
        targetId: String?,
        targetType: AmityPostTargetType,
        community: AmityCommunity?
    ) {
        // custom implementation for navigating to Post Composer Page
    }
}

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

import React from 'react';
import { AmityUIKitProvider, AmityPostTargetSelectionPage } from '@amityco/ui-kit';

const SampleAmityPostTargetSelectionPage = () => {
  return (
    <AmityUIKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={config}
      pageBehavior={{
        AmityPostTargetSelectionPage: {
          goToPostComposerPage: () => {},
        },
      }}
    >
      <AmityPostTargetSelectionPage />
    </AmityUIKitProvider>
  );
};

import {
  AmityPostTargetSelectionPage,
  AmityUiKitProvider,
  AmityPostTargetSelectionPageType,
} 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"
  behaviour={{
    AmityPostTargetSelectionPageBehavior: {
      goToPostComposerPage: () => {},
      goToLivestreamComposerPage: () => {},
      goToPollComposerPage: () => {},
    },
  }}
>
  <AmityPostTargetSelectionPage
    postType={AmityPostTargetSelectionPageType.post}
  />
</AmityUiKitProvider>

Media Carousel

Posts with two or more images or videos are displayed as a horizontally swipeable carousel — one full-width frame per attachment, shown in the order they were added. A post with a single attachment is shown as one full-width frame.

Every attachment is reachable by swiping, so nothing is hidden or truncated. The media carousel is available on iOS, Android, React, and React Native.

How It Works

Navigation

Each image or video gets its own full-width frame, with no wrap-around at the first or last frame. On mobile, members swipe one frame at a time. On desktop, swipe is disabled and members use the arrow buttons on the frame — the left arrow is hidden on the first frame and the right arrow on the last.

Consistent Height

The frame shape is classified from the first attachment and locked for the whole carousel, so the post height never jumps between frames.

Position Indicator

A pagination indicator and an n/total counter show the current frame and update as members move through the carousel. Desktop shows an indicator strip alongside the arrow buttons.

Full-Screen Viewer

Tapping a frame opens the full-screen viewer at that frame in its original aspect ratio; closing returns to the same frame. In the viewer, videos autoplay and keep their mute state across swipes.

Frame Ratio

The carousel picks one frame shape from the first attachment — landscape (16:9), square (1:1), or portrait (4:5) — and locks it for every frame, so the post height never shifts as members move through the carousel. Each frame is cropped to fill the locked shape, while the full-screen viewer shows each item at its original aspect ratio. Portrait videos keep their orientation. In the composer, if the first attachment is removed, the shape re-derives from the new first attachment.

Composer Preview

When creating or editing a post, the composer previews attachments in the same carousel format before publishing. Each frame carries its own controls:

Remove — delete that attachment from the post
Alt text — add descriptive text (images only)
Product tag — open the product picker for that frame

Limits & Constraints

Limit	Value
Attachments per post	2–10 render as a carousel (a single attachment renders as one frame)
Media types per post	Images or videos — a single post cannot mix images and videos
Duplicate selection	Duplicate files are silently excluded before upload

Product Tagging

Product tagging enables commerce integration within posts, allowing users to tag products in text and media, and viewers to discover and open tagged products directly from a post.

Product tagging requires the Product Catalog to be configured and enabled for your network in the console. The feature is available on iOS, Android, and Web only.

How It Works

Text Mentions

Type @ in the post caption to trigger a suggestion overlay with a Products tab. Selecting a product inserts it as a single token — backspace removes the entire mention.

Media Tags

Each image or video in a post has its own tag entry point. Tap the tag button on a media item to open the product picker for that item.

Product Carousel

All tagged products are displayed in a scrollable list below the post content — in both the feed and post detail view.

In-App Browser

Tapping a product opens its link in an in-app browser on iOS and Android, and in a new tab on Web. Override this to route the tap yourself — see below.

Customize the Product Tap

Opening the product link is the default. Override onPostProductTagClick on AmityGlobalBehavior to send the tap to your own product screen or commerce flow instead. The handler receives the tapped product on the context. Read it to decide where to go.

Context field	Type	Available on
`product`	`AmityProduct`	iOS, Android, Web
`pageContext`	`android.content.Context`	Android

AmityProduct carries productId, productName, productUrl, price, currency, and thumbnailUrl. Use productId to look the item up in your own catalogue, or productUrl to open it yourself.

class MyGlobalBehavior: AmityGlobalBehavior {
    override func onPostProductTagClick(context: AmityGlobalBehavior.Context) {
        guard let product = context.product else { return }

        if let item = MyCatalogue.find(id: product.productId) {
            MyNavigator.showProduct(item)
        } else {
            // Fall back to the UIKit in-app browser.
            super.onPostProductTagClick(context: context)
        }
    }
}

AmityUIKit4Manager.behaviour.globalBehavior = MyGlobalBehavior()

AmityUIKit4Manager.behavior.globalBehavior = object : AmityGlobalBehavior() {
    override fun onPostProductTagClick(context: AmityGlobalBehavior.Context): Boolean {
        val product = context.product ?: return false

        val intent = Intent(context.pageContext, ProductActivity::class.java)
        intent.putExtra("productId", product.getProductId())
        context.pageContext.startActivity(intent)

        // Return true to claim the tap, so the in-app browser is skipped.
        return true
    }
}

<AmityUIKitProvider
  pageBehavior={{
    AmityGlobalBehavior: {
      onPostProductTagClick: ({ product }) => {
        router.push(`/products/${product.productId}`);
      },
    },
  }}
>

The platforms differ in how you fall back to the default.

Android — the handler returns a Boolean. Return true when your app handled the tap, or false to get the built-in product web view.
iOS — the handler returns no value, so an override always replaces the default. Call super.onPostProductTagClick(context:) where you want the in-app browser instead.
Web — the handler returns no value and behaves like iOS. There is no super to call: open product.productUrl yourself if you want the default behavior for some products.

Limits & Constraints

Limit	Value
Max products per post	20 (combined across text mentions and media tags)
Max products per media item	5
Platforms supported	iOS, Android, Web

Components Used in Posts

Product tagging in posts uses two shared UIKit components. See Product Tagging Components for full parameter reference and code examples.

Component	Used for
`ProductTagSelectionComponent`	Searching and selecting products (via `create` or `edit` mode)
`ProductTagListComponent`	Displaying tagged products below post content (via `post`, `image`, or `video` render mode)

The ProductTagSelectionComponent is opened from the Post Composer Page — either from the @ mention flow in the text editor, or from the tag button on a media attachment. The ProductTagListComponent is rendered automatically within Post Detail and feed views when a post has tagged products.

Pinned & Featured Posts

When a post is pinned or featured, the UIKit renders a read-only badge on it in the feed. This applies to any post, not just events. Pinning and featuring are managed in the Console — there is no in-app control in the UIKit to change that state; the component only reflects it. See the pin/feature note for how the state is set.

A post published to a user’s own feed can never be pinned. Global featuring requires a public community.

Social Feeds

Content Display Feed components for displaying and organizing posts

Comments & Reactions

Engagement Features User interaction and engagement components

Communities

Community Features Community management and participation tools

Product Tagging Components

Commerce Integration Shared UIKit components for product selection and display

​Feature Overview

Text & Media Posts

Interactive Polls

Livestream Posts

Engagement & Comments

Sharing & Discovery

Management & Moderation

​Platform Support

​Post Types & Features

​Implementation Guide

​Features

​Customization Options

​Code Examples

​Navigation Behavior

​Customization Options

​Code Examples

​Link Preview Behavior

​Navigation Behavior

​Features

​Customization Options

​Code Examples

​Navigation Behavior

​Media Attachment Component

​Customization Options

​Detailed Media Attachment Component

​Poll Target Selection Page

​Customization Options

​Poll Post Composer Page

​Customization Options

​Navigation Behavior

​Media Carousel

​How It Works

Navigation

Consistent Height

Position Indicator

Full-Screen Viewer

​Frame Ratio

​Composer Preview

​Limits & Constraints

​Product Tagging

​How It Works

Text Mentions

Media Tags

Product Carousel

In-App Browser

​Customize the Product Tap

​Limits & Constraints

​Components Used in Posts

​Pinned & Featured Posts

​Related Features

Social Feeds

Comments & Reactions

Communities

Product Tagging Components

Feature Overview

Platform Support

Post Types & Features

Implementation Guide

Features

Customization Options

Code Examples

Navigation Behavior

Customization Options

Code Examples

Link Preview Behavior

Navigation Behavior

Features

Customization Options

Code Examples

Navigation Behavior

Media Attachment Component

Customization Options

Detailed Media Attachment Component

Poll Target Selection Page

Customization Options

Poll Post Composer Page

Customization Options

Navigation Behavior

Media Carousel

How It Works

Frame Ratio

Composer Preview

Limits & Constraints

Product Tagging

How It Works

Customize the Product Tap

Limits & Constraints

Components Used in Posts

Pinned & Featured Posts

Related Features