UIKit Component: Story components are built on top of the social.plus SDK, providing ready-to-use story creation and viewing UI with full data management handled automatically.

​
Feature Overview

The Story feature in social.plus UIKit v4 enables users to create, share, and view ephemeral content, enhancing engagement and fostering community interaction. This suite of components provides a seamless experience for users to capture moments, share multimedia content, and engage with their communities through time-limited stories that disappear after 24 hours.

​
Key Features

Story Creation

Rich multimedia story creation
  • Camera integration with image and video capture
  • Media picker for existing content selection
  • Story composer with editing tools and hyperlinks
  • Audience targeting and content customization

Story Viewing

Immersive story viewing experience
  • Full-screen story viewer with navigation controls
  • Story ring indicators and progress tracking
  • Auto-play and manual navigation options
  • Interactive engagement features

Story Management

Story lifecycle and content management
  • Story drafting and preview capabilities
  • 24-hour automatic expiration handling
  • Story deletion and editing controls
  • Analytics and engagement tracking

Audience Targeting

Flexible content distribution options
  • Community-specific story sharing
  • Personal timeline story creation
  • Target selection workflows
  • Privacy and visibility controls

​
Platform Support

FeatureiOSAndroidWebFlutterReact Native
Story Target Tab Component✅✅✅✅✅
Story Creation✅✅-✅✅
Story Viewing✅✅✅✅✅
Story Target Selection✅✅-✅-
Story Drafting✅✅✅✅✅

​
Implementation Guide

Story ring display and navigation componentThe Story Target Tab Component enables users to view and navigate story collections through circular ring indicators. This component provides seamless story discovery and creation workflows for both community and global feeds.

​
Story Target Tab Component

The Story Target Tab Component is a dynamic feature that enhances the application page by allowing users to discover, view, and create stories. This component provides visual indicators for story availability and enables quick access to story creation and viewing workflows.

​
Features

FeatureDescription
Story Ring IndicatorsVisual circular progress indicators showing available stories
Community Story TargetsAccess to community-specific story collections
Global Story FeedBrowse stories from all accessible communities
Creation ShortcutsQuick access to story creation workflows

​
Required Properties

PropertyTypeDescription
typeAmityStoryTabComponentTypeType of story feed (community or global)

​
Customization Options

Config IDTypeDescription
*/story_tab_component/*ComponentCustomize component theme and styling
*/story_tab_component/story_ringElementCustomize ring colors with progress_color and background_color
*/story_tab_component/create_new_story_buttonElementCustomize creation button with create_new_story_icon and background_color

​
Code Examples

// Community Feed Story Tab
let storyTabComponent = AmityStoryTabComponent(type: .communityFeed("<community-id>"))
let viewController = AmitySwiftUIHostingController(rootView: storyTabComponent)
navigationController?.pushViewController(viewController, animated: true)

// Global Feed Story Tab
let globalStoryTabComponent = AmityStoryTabComponent(type: .globalFeed)
let globalViewController = AmitySwiftUIHostingController(rootView: globalStoryTabComponent)
navigationController?.pushViewController(globalViewController, animated: true)

class CustomStoryTabComponentBehaviour: AmityStoryTabComponentBehaviour {
    override init() {
        super.init()
    }
    
    override func goToViewStoryPage(context: AmityStoryTabComponentBehaviour.Context) {
        // Navigate to story viewing page
        let viewStoryPage = AmityViewStoryPage(type: .communityFeed(context.targetId))
        let viewController = AmitySwiftUIHostingController(rootView: viewStoryPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
    
    override func goToCreateStoryPage(context: AmityStoryTabComponentBehaviour.Context) {
        // Navigate to story creation page
        let createStoryPage = AmityCreateStoryPage(targetId: context.targetId, targetType: context.targetType)
        let viewController = AmitySwiftUIHostingController(rootView: createStoryPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Setup custom behavior
func setStoryTabComponentBehaviour() {
    let customStoryTabComponentBehaviour = CustomStoryTabComponentBehaviour()
    AmityUIKit4Manager.behaviour.storyTabComponentBehaviour = customStoryTabComponentBehaviour
}

Posts & Media

Post Components Permanent content creation and media management for lasting social content

Social Feeds

Feed Components Story integration within social feeds and timeline displays

Communities

Community Features Community-based story sharing and audience targeting

Users & Profiles

User Management User profile integration with story content and viewing history

Comments & Reactions

Interaction Components Story engagement through comments, reactions, and impressions

Livestream

Live Content Real-time video broadcasting and live story alternatives
Implementation Strategy: Begin with the Story Target Tab Component to establish story discovery workflows, then implement Story Creation for capturing and drafting content. Add Story Viewing for consumption experiences and ensure proper target selection with the Selection Page. Remember that stories are ephemeral content with 24-hour expiration - implement proper cleanup mechanisms and user notifications. Focus on smooth media transitions, responsive controls, and seamless navigation between story creation, viewing, and engagement features.