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

# Story

> Create, view, and manage ephemeral story content with rich multimedia and engagement features

<Info>
  **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.
</Info>

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

<CardGroup cols={2}>
  <Card title="Story Creation" icon="plus">
    **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
  </Card>

  <Card title="Story Viewing" icon="eye">
    **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
  </Card>

  <Card title="Story Management" icon="gear">
    **Story lifecycle and content management**

    * Story drafting and preview capabilities
    * 24-hour automatic expiration handling
    * Story deletion and editing controls
    * Analytics and engagement tracking
  </Card>

  <Card title="Audience Targeting" icon="users">
    **Flexible content distribution options**

    * Community-specific story sharing
    * Personal timeline story creation
    * Target selection workflows
    * Privacy and visibility controls
  </Card>
</CardGroup>

### Platform Support

| Feature                    | iOS | Android | Web | Flutter | React Native |
| -------------------------- | --- | ------- | --- | ------- | ------------ |
| Story Target Tab Component | ✅   | ✅       | ✅   | ✅       | ✅            |
| Story Creation             | ✅   | ✅       | -   | ✅       | ✅            |
| Story Viewing              | ✅   | ✅       | ✅   | ✅       | ✅            |
| Story Target Selection     | ✅   | ✅       | -   | ✅       | -            |
| Story Drafting             | ✅   | ✅       | ✅   | ✅       | ✅            |
| Live Now                   | ✅   | ✅       | ✅   | -       | -            |

## Implementation Guide

<Tabs>
  <Tab title="Story Target Tab Component">
    **Story ring display and navigation component**

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

    <Frame>
      <img src="https://mintcdn.com/social-b97141fb-auto-generate-llmstxt/HK8-O4u_NqMeCf6h/images/StoryList(1).png?fit=max&auto=format&n=HK8-O4u_NqMeCf6h&q=85&s=9a7a950f600dcacff82ca0f93232a8c6" alt="Story List(1)" width="750" height="252" data-path="images/StoryList(1).png" />
    </Frame>

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

    | Feature                 | Description                                                   |
    | ----------------------- | ------------------------------------------------------------- |
    | Story Ring Indicators   | Visual circular progress indicators showing available stories |
    | Live Now Rings          | Visual indicators for currently live streams                  |
    | Community Story Targets | Access to community-specific story collections                |
    | Global Story Feed       | Browse stories from all accessible communities                |
    | Creation Shortcuts      | Quick access to story creation workflows                      |

    #### Required Properties

    | Property | Type                         | Description                              |
    | -------- | ---------------------------- | ---------------------------------------- |
    | `type`   | `AmityStoryTabComponentType` | Type of story feed (community or global) |

    #### Customization Options

    | Config ID                                       | Type      | Description                                                                   |
    | ----------------------------------------------- | --------- | ----------------------------------------------------------------------------- |
    | `*/story_tab_component/*`                       | Component | Customize component theme and styling                                         |
    | `*/story_tab_component/story_ring`              | Element   | Customize ring colors with `progress_color` and `background_color`            |
    | `*/story_tab_component/create_new_story_button` | Element   | Customize creation button with `create_new_story_icon` and `background_color` |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // 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)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeStoryTabComponent(
          community: AmityCommunity
      ) {
          val feedTypeCommunity = AmityStoryTabComponentType.CommunityFeed(community.getCommunityId())
          val feedTypeGlobal = AmityStoryTabComponentType.GlobalFeed()

          // Community Feed Story Tab
          AmityStoryTabComponent(
              type = feedTypeCommunity
          )
          
          // Global Feed Story Tab
          AmityStoryTabComponent(
              type = feedTypeGlobal
          )
      }
      ```

      ```tsx React theme={null}
      import React from 'react';
      import { AmityStoryTabComponent } from '@amityco/ui-kit';

      const CommunityStoriesTab = ({ communityId }) => {
        return (
          <AmityStoryTabComponent 
                pageId='*'
                title='Story'
                haveStoryPermission={false}
                storyRing={false}
                isSeen={false}
                uploadingStory={false}
                isErrored={false}
                avatar=""
                onClick={() => {
                  // Handle story tab click
                }}
                onChange={() => {
                  // Handle story tab change
                }}
           />
        );
      };

      export default CommunityStoriesTab;
      ```

      ```tsx React Native theme={null}
      import {
        AmityStoryTabComponent,
        AmityUiKitProvider,
        AmityStoryTabComponentEnum
      } from 'amity-react-native-social-ui-kit';

       <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            apiEndpoint="https://api.{API_REGION}.amity.co"
        >
             <AmityStoryTabComponent 
                type={AmityStoryTabComponentEnum.communityFeed}
                targetId={communityId}
             />
       </AmityUiKitProvider>
      ```

      ```dart Flutter theme={null}
      void viewStoryTabComponent(
        AmityCommunity community,
      ) {
        AmityStoryTabComponentType feedTypeCommunity = CommunityFeedStoryTab(
          communityId: community.communityId!,
        );
        
        AmityStoryTabComponentType feedTypeGlobal = GlobalFeedStoryTab();
        
        // Community Feed
        AmityStoryTabComponent(
          type: feedTypeCommunity,
        );
        
        // Global Feed
        AmityStoryTabComponent(
          type: feedTypeGlobal,
        );
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      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
      }
      ```

      ```kotlin Android theme={null}
      class CustomStoryTabComponentBehaviour : AmityStoryTabComponentBehavior() {

          override fun goToViewStoryPage(
              context: Context,
              type: AmityViewStoryPageType,
          ) {
              // Navigate to story viewing page
              val intent = AmityViewStoryPageActivity.newIntent(
                  context = context,
                  type = type
              )
              context.startActivity(intent)
          }

          override fun goToCreateStoryPage(
              context: Context,
              targetId: String,
              targetType: AmityStory.TargetType
          ) {
              // Navigate to story creation page
              val intent = AmityCreateStoryPageActivity.newIntent(
                  context = context,
                  targetId = targetId,
                  targetType = targetType
              )
              context.startActivity(intent)
          }
      }

      // Setup custom behavior
      fun setCustomBehavior() {
          val customBehaviour = CustomStoryTabComponentBehaviour()
          AmityUIKit4Manager.behavior.storyTabComponentBehavior = customBehaviour
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Story Creation">
    **Story creation and multimedia capture**

    Story Creation components enable users to create rich multimedia stories with camera integration, media selection, and content editing capabilities before publishing to their selected audience.

    ### Story Creation Page

    The Story Creation Page provides comprehensive camera functionality and media selection capabilities for creating engaging story content. Users can capture new content or select from existing media to create stories with customizable features and targeting options.

    #### Features

    | Feature            | Description                                                 |
    | ------------------ | ----------------------------------------------------------- |
    | Camera Integration | Real-time camera view for capturing images and videos       |
    | Media Selection    | Access to device gallery for selecting existing content     |
    | Content Preview    | Live preview of captured or selected content                |
    | Recording Controls | Video recording with duration controls and quality settings |

    #### Required Properties

    | Property     | Type                    | Description                                    |
    | ------------ | ----------------------- | ---------------------------------------------- |
    | `targetId`   | `String`                | The ID of the target (community ID or user ID) |
    | `targetType` | `AmityStory.TargetType` | Type of target (community or user)             |

    #### Customization Options

    | Config ID                            | Type    | Description                                                     |
    | ------------------------------------ | ------- | --------------------------------------------------------------- |
    | `camera_page/*/*`                    | Page    | Customize camera page theme and styling                         |
    | `camera_page/*/close_button`         | Element | Customize close button with `close_icon` and `background_color` |
    | `camera_page/*/capture_button`       | Element | Customize capture button styling and behavior                   |
    | `camera_page/*/switch_camera_button` | Element | Customize camera switching controls                             |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Create story for community
      let createStoryPage = AmityCreateStoryPage(
          targetId: "<community-id>", 
          targetType: .community
      )
      let viewController = AmitySwiftUIHostingController(rootView: createStoryPage)
      navigationController?.pushViewController(viewController, animated: true)

      // Create story for user timeline
      let userStoryPage = AmityCreateStoryPage(
          targetId: "<user-id>", 
          targetType: .user
      )
      let userViewController = AmitySwiftUIHostingController(rootView: userStoryPage)
      navigationController?.pushViewController(userViewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCreateStoryPage(
          community: AmityCommunity
      ) {
          AmityCreateStoryPage(
              targetId = community.getCommunityId(),
              targetType = AmityStory.TargetType.COMMUNITY
          )
      }

      // Using Activity
      fun startCreateStoryActivity(context: Context, community: AmityCommunity) {
          val intent = AmityCreateStoryPageActivity.newIntent(
              context = context,
              targetId = community.getCommunityId(),
              targetType = AmityStory.TargetType.COMMUNITY
          )
          context.startActivity(intent)
      }
      ```

      ```tsx React Native theme={null}
      import {
        AmityCreateStoryPage,
        AmityUiKitProvider
      } from 'amity-react-native-social-ui-kit';

      const onCreateStory = () => {
          // Handle story creation completion
      }

      const CreateStoryScreen = ({ communityId }) => (
       <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            apiEndpoint="https://api.{API_REGION}.amity.co"
        >
             <AmityCreateStoryPage 
                targetId={communityId}
                targetType={"community" | "user" | "content"}
                onCreateStory={onCreateStory}
             />
       </AmityUiKitProvider>
      );
      ```

      ```dart Flutter theme={null}
      void navigateToCreateStoryPage(
        BuildContext context,
        String targetId,
        AmityStoryTargetType targetType,
      ) {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => AmityCreateStoryPage(
              targetType: targetType,
              targetId: targetId,
            ),
          ),
        );
      }
      ```
    </CodeGroup>

    ### Story Drafting Page

    The Story Draft Page enables users to preview, edit, and customize their story content before publishing. This component provides comprehensive editing tools including hyperlink addition, aspect ratio adjustment, and content finalization.

    #### Features

    | Feature               | Description                                     |
    | --------------------- | ----------------------------------------------- |
    | Content Preview       | Full preview of story content before publishing |
    | Hyperlink Integration | Add clickable links with customizable text      |
    | Aspect Ratio Control  | Adjust story dimensions and presentation        |
    | Publishing Controls   | Final review and story publishing options       |

    #### Required Properties

    | Property     | Type                    | Description                                    |
    | ------------ | ----------------------- | ---------------------------------------------- |
    | `targetId`   | `String`                | The ID of the target (community ID or user ID) |
    | `targetType` | `AmityStory.TargetType` | Type of target (community or user)             |
    | `mediaType`  | `AmityStoryMediaType`   | Type and source of media content               |

    #### Customization Options

    | Config ID                                    | Type    | Description                                                       |
    | -------------------------------------------- | ------- | ----------------------------------------------------------------- |
    | `create_story_page/*/*`                      | Page    | Customize drafting page theme and styling                         |
    | `create_story_page/*/back_button`            | Element | Customize back navigation with `back_icon` and `background_color` |
    | `create_story_page/*/aspect_ratio_button`    | Element | Customize aspect ratio controls                                   |
    | `create_story_page/*/story_hyperlink_button` | Element | Customize hyperlink button styling                                |
    | `create_story_page/*/share_story_button`     | Element | Customize publish button with `share_icon` and `background_color` |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Draft Image Story
      let draftImageStoryPage = AmityDraftStoryPage(
          targetId: "<community-id>", 
          targetType: .community, 
          mediaType: .image(previewImageURL)
      )
      let viewController = AmitySwiftUIHostingController(rootView: draftImageStoryPage)
      navigationController?.pushViewController(viewController, animated: true)

      // Draft Video Story
      let draftVideoStoryPage = AmityDraftStoryPage(
          targetId: "<community-id>", 
          targetType: .community, 
          mediaType: .video(previewVideoURL)
      )
      let videoViewController = AmitySwiftUIHostingController(rootView: draftVideoStoryPage)
      navigationController?.pushViewController(videoViewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeDraftStoryPage(
          community: AmityCommunity,
          mediaType: AmityStoryMediaType = AmityStoryMediaType.Image(Uri.EMPTY)
      ) {
          AmityDraftStoryPage(
              targetId = community.getCommunityId(),
              targetType = AmityStory.TargetType.COMMUNITY,
              mediaType = mediaType,
          )
      }

      // Using Activity
      fun startDraftStoryActivity(
          context: Context,
          community: AmityCommunity,
          mediaType: AmityStoryMediaType = AmityStoryMediaType.Image(Uri.EMPTY)
      ) {
          val intent = AmityDraftStoryPageActivity.newIntent(
              context = context,
              targetId = community.getCommunityId(),
              targetType = AmityStory.TargetType.COMMUNITY,
              mediaType = mediaType,
          )
          context.startActivity(intent)
      }
      ```

      ```tsx React theme={null}
      import React from 'react';
      import { AmityCreateStoryPage } from '@amityco/ui-kit-open-source';

      const DraftStoryPage = ({ file, targetId }) => {
      return (
                <AmityCreateStoryPage 
                pageId="create_story_page"
                file={file}
                creatorAvatar=""
                onCreateStory={() => {
                  // Handle story creation
                }}
                onDiscardStory={() => {
                  // Handle story discard
                }}
                />
      );
      };

      export default DraftStoryPage;
      ```

      ```tsx React Native theme={null}
      import {
        AmityDraftStoryPage,
        AmityUiKitProvider
      } from 'amity-react-native-social-ui-kit';

      const onCreateStory = () => {
          // Handle story creation completion
      }

      const onDiscardStory = () => {
          // Handle story discard
      }

      const DraftStoryScreen = ({ communityId, mediaType }) => (
       <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            apiEndpoint="https://api.{API_REGION}.amity.co"
        >
             <AmityDraftStoryPage 
                targetId={communityId}
                targetType={"community" | "user" | "content"}
                mediaType={mediaType}
                onCreateStory={onCreateStory}
                onDiscardStory={onDiscardStory}
             />
       </AmityUiKitProvider>
      );
      ```

      ```dart Flutter theme={null}
      void navigateToStoryDraftPage(
        BuildContext context,
        String targetId,
        File image,
        AmityStoryTargetType targetType,
      ) {
        AmityStoryMediaType mediaType = AmityStoryMediaTypeImage(file: image);
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => StoryDraftPage(
              mediaType: mediaType,
              targetId: targetId,
              targetType: targetType,
            ),
          ),
        );
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomCreateStoryPageBehaviour: AmityCreateStoryPageBehaviour {
          override init() {
              super.init()
          }
          
          override func goToDraftStoryPage(context: AmityCreateStoryPageBehaviour.Context) {
              // Navigate to story draft page
              let draftPage = AmityDraftStoryPage(
                  targetId: context.targetId,
                  targetType: context.targetType,
                  mediaType: context.mediaType
              )
              let viewController = AmitySwiftUIHostingController(rootView: draftPage)
              navigationController?.pushViewController(viewController, animated: true)
          }
      }

      // Setup custom behavior
      func setCreateStoryPageBehaviour() {
          let customCreateStoryPageBehaviour = CustomCreateStoryPageBehaviour()
          AmityUIKit4Manager.behaviour.createStoryPageBehaviour = customCreateStoryPageBehaviour
      }
      ```

      ```kotlin Android theme={null}
      class CustomCreateStoryPageBehaviour : AmityCreateStoryPageBehavior() {

          override fun goToDraftStoryPage(
              context: Context,
              launcher: ActivityResultLauncher<Intent>,
              targetId: String,
              targetType: AmityStory.TargetType,
              mediaType: AmityStoryMediaType
          ) {
              // Navigate to story draft page
              val intent = AmityDraftStoryPageActivity.newIntent(
                  context = context,
                  targetId = targetId,
                  targetType = targetType,
                  mediaType = mediaType
              )
              launcher.launch(intent)
          }
      }

      // Setup custom behavior
      fun setCustomBehavior() {
          val customBehaviour = CustomCreateStoryPageBehaviour()
          AmityUIKit4Manager.behavior.createStoryPageBehavior = customBehaviour
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Story Viewing">
    **Story viewing and engagement interface**

    Story Viewing components provide immersive full-screen story consumption with navigation controls, engagement features, and seamless story progression for enhanced user experience.

    ### Story Viewing Page

    The Story Viewing Page provides an immersive full-screen interface for consuming story content. Users can navigate through story collections, engage with content through reactions and comments, and seamlessly progress through multiple stories with intuitive controls.

    #### Features

    | Feature             | Description                                              |
    | ------------------- | -------------------------------------------------------- |
    | Full-Screen Viewing | Immersive story consumption with optimized media display |
    | Progress Indicators | Visual progress tracking across story collections        |
    | Navigation Controls | Tap to advance, hold to pause, swipe gestures            |
    | Engagement Features | React, comment, and interact with story content          |
    | Audio Controls      | Mute/unmute story audio with visual indicators           |

    #### Required Properties

    | Property | Type                     | Description                                        |
    | -------- | ------------------------ | -------------------------------------------------- |
    | `type`   | `AmityViewStoryPageType` | Type of story view (community feed or global feed) |

    #### Customization Options

    | Config ID                              | Type    | Description                                                                |
    | -------------------------------------- | ------- | -------------------------------------------------------------------------- |
    | `story_page/*/*`                       | Page    | Customize story viewing page theme and styling                             |
    | `story_page/*/progress_bar`            | Element | Customize progress indicators with `progress_color` and `background_color` |
    | `story_page/*/overflow_menu`           | Element | Customize options menu with `overflow_menu_icon`                           |
    | `story_page/*/close_button`            | Element | Customize close navigation with `close_icon`                               |
    | `story_page/*/story_impression_button` | Element | Customize impression tracking with `impression_icon`                       |
    | `story_page/*/story_comment_button`    | Element | Customize comment interaction                                              |
    | `story_page/*/story_reaction_button`   | Element | Customize reaction controls                                                |
    | `story_page/*/speaker_button`          | Element | Customize audio controls with `mute_icon` and `unmute_icon`                |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Community Feed Story Viewing
      let viewStoryPage = AmityViewStoryPage(type: .communityFeed("<community-id>"))
      let viewController = AmitySwiftUIHostingController(rootView: viewStoryPage)
      navigationController?.pushViewController(viewController, animated: true)

      // Global Feed Story Viewing
      // Specify communityId to start from specific community in global feed
      let globalViewStoryPage = AmityViewStoryPage(type: .globalFeed("<start-community-id>"))
      let globalViewController = AmitySwiftUIHostingController(rootView: globalViewStoryPage)
      navigationController?.pushViewController(globalViewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeViewStoryPage(community: AmityCommunity) {
          AmityViewStoryPage(
              type = AmityViewStoryPageType.CommunityFeed(communityId = community.getCommunityId())
          )
      }

      // Using Activity
      fun startViewStoryActivity(context: Context, community: AmityCommunity) {
          val intent = AmityViewStoryPageActivity.newIntent(
              context = context,
              type = AmityViewStoryPageType.CommunityFeed(communityId = community.getCommunityId())
          )
          context.startActivity(intent)
      }
      ```

      ```tsx React theme={null}
      import React from 'react';
      import { AmityViewStoryPage } from '@amityco/ui-kit-open-source';

      const StoryViewerPage = ({ targetId }) => {
        return (
            <AmityViewStoryPage 
              page="story_page" 
              targetId={targetId}
              onStoryEnd={() => {
                // Handle story end
              }}
              onStoryError={(error) => {
                // Handle story viewing errors
              }}
            />
        );
      };

      export default StoryViewerPage;
      ```

      ```tsx React Native theme={null}
      import {
        AmityViewStoryPage,
        AmityUiKitProvider
      } from 'amity-react-native-social-ui-kit';

      const onFinish = () => {
          // Handle story viewing completion
      }

      const onPressAvatar = () => {
          // Handle avatar tap
      }

      const onPressCommunityName = () => {
          // Handle community name tap
      }

      const StoryViewerScreen = ({ communityId }) => (
       <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            apiEndpoint="https://api.{API_REGION}.amity.co"
        >
              <AmityViewStoryPage
                targetId={communityId}
                targetType="community"
                onFinish={onFinish}
                onPressAvatar={onPressAvatar}
                onPressCommunityName={onPressCommunityName}
              />
       </AmityUiKitProvider>
      );
      ```

      ```dart Flutter theme={null}
      void navigateToViewStoryPage(
        BuildContext context,
        String communityId,
      ) {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) {
              return AmityViewStoryPage(
                type: AmityViewStoryCommunityFeed(communityId: communityId),
              );
            },
          ),
        );
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomViewStoryPageBehaviour: AmityViewStoryPageBehaviour {
          override init() {
              super.init()
          }
          
          override func goToCreateStoryPage(context: AmityViewStoryPageBehaviour.Context) {
              // Navigate to story creation
              let createStoryPage = AmityCreateStoryPage(
                  targetId: context.targetId,
                  targetType: context.targetType
              )
              let viewController = AmitySwiftUIHostingController(rootView: createStoryPage)
              navigationController?.pushViewController(viewController, animated: true)
          }
          
          func handleStoryEnd() {
              // Handle story viewing completion
              navigationController?.popViewController(animated: true)
          }
          
          func handleStoryError(error: Error) {
              // Handle story viewing errors
              showErrorAlert(error: error)
          }
      }

      // Setup custom behavior
      func setViewStoryPageBehaviour() {
          let customViewStoryPageBehaviour = CustomViewStoryPageBehaviour()
          AmityUIKit4Manager.behaviour.viewStoryPageBehaviour = customViewStoryPageBehaviour
      }
      ```

      ```kotlin Android theme={null}
      class CustomViewStoryPageBehavior : AmityViewStoryPageBehavior() {

          override fun goToCreateStoryPage(
              context: Context,
              launcher: ActivityResultLauncher<Intent>,
              targetId: String,
              targetType: AmityStory.TargetType,
          ) {
              // Navigate to story creation
              val intent = AmityCreateStoryPageActivity.newIntent(
                  context = context,
                  targetId = targetId,
                  targetType = targetType
              )
              launcher.launch(intent)
          }

          override fun goToCommunityProfilePage(
              context: Context,
              community: AmityCommunity,
          ) {
              // Navigate to community profile
              val intent = AmiityMainActivityCommunityProfilePageActivity.newIntent(
                  context = context,
                  community = community
              )
              context.startActivity(intent)
          }
          
          fun handleStoryEnd(context: Context) {
              // Handle story viewing completion
              (context as? Activity)?.finish()
          }
          
          fun handleStoryError(context: Context, error: String) {
              // Handle story viewing errors
              Toast.makeText(context, "Story error: $error", Toast.LENGTH_LONG).show()
          }
      }

      // Setup custom behavior
      fun setCustomBehavior() {
          val customBehavior = CustomViewStoryPageBehavior()
          AmityUIKit4Manager.behavior.viewStoryPageBehavior = customBehavior
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Story Target Selection">
    **Audience and target selection for story distribution**

    Story Target Selection components provide users with flexible options to choose where their stories will be visible, enabling precise audience control and content distribution.

    ### Story Target Selection Page

    The Story Target Selection Page streamlines the process of choosing target audiences for story sharing. Users can select specific communities, target their personal timeline, or broadcast to multiple audiences with comprehensive visibility controls.

    #### Features

    | Feature              | Description                                                   |
    | -------------------- | ------------------------------------------------------------- |
    | Community Selection  | Browse and select specific communities for story distribution |
    | Personal Timeline    | Option to share stories on personal user timeline             |
    | Audience Preview     | Preview potential reach and engagement for selected targets   |
    | Multi-Target Support | Select multiple communities or distribution channels          |

    #### Required Properties

    | Property | Type | Description                                                   |
    | -------- | ---- | ------------------------------------------------------------- |
    | None     | -    | Page requires no mandatory properties for basic functionality |

    #### Customization Options

    | Config ID                                   | Type      | Description                                       |
    | ------------------------------------------- | --------- | ------------------------------------------------- |
    | `select_story_target_page/*/*`              | Page      | Customize target selection page theme and styling |
    | `select_story_target_page/*/close_button`   | Element   | Customize close navigation with custom `image`    |
    | `select_story_target_page/*/title`          | Element   | Customize page title with custom `text`           |
    | `select_story_target_page/*/community_list` | Component | Customize community selection interface           |

    #### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let storyTargetSelectionPage = AmityStoryTargetSelectionPage()
      let viewController = AmitySwiftUIHostingController(rootView: storyTargetSelectionPage)
      navigationController?.pushViewController(viewController, animated: true)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeStoryTargetSelectionPage() {
          AmityStoryTargetSelectionPage()
      }

      // Using Activity
      fun startStoryTargetSelectionActivity(context: Context) {
          val intent = AmityStoryTargetSelectionPageActivity.newIntent(context)
          context.startActivity(intent)
      }
      ```

      ```dart Flutter theme={null}
      void navigateToStoryTargetPage(BuildContext context) {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => const AmityStoryTargetSelectionPage(),
          ),
        );
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomStoryTargetSelectionPageBehaviour: AmityStoryTargetSelectionPageBehaviour {
          override init() {
              super.init()
          }
          
          override func goToCreateStoryPage(context: AmityStoryTargetSelectionPageBehaviour.Context) {
              // Navigate to story creation with selected target
              let createStoryPage = AmityCreateStoryPage(
                  targetId: context.targetId,
                  targetType: context.targetType
              )
              let viewController = AmitySwiftUIHostingController(rootView: createStoryPage)
              navigationController?.pushViewController(viewController, animated: true)
          }
      }

      // Setup custom behavior
      func setStoryTargetSelectionPageBehaviour() {
          let customStoryTargetSelectionPageBehaviour = CustomStoryTargetSelectionPageBehaviour()
          AmityUIKit4Manager.behaviour.storyTargetSelectionPageBehaviour = customStoryTargetSelectionPageBehaviour
      }
      ```

      ```kotlin Android theme={null}
      class CustomStoryTargetSelectionPageBehaviour : AmityStoryTargetSelectionPageBehavior() {
          override fun goToStoryCreationPage(
              context: Context,
              launcher: ActivityResultLauncher<Intent>,
              targetId: String,
              targetType: AmityStory.TargetType
          ) {
              // Navigate to story creation with selected target
              val intent = AmityCreateStoryPageActivity.newIntent(
                  context = context,
                  targetId = targetId,
                  targetType = targetType
              )
              launcher.launch(intent)
          }
      }

      // Setup custom behavior
      fun setCustomBehavior() {
          val customBehaviour = CustomStoryTargetSelectionPageBehaviour()
          AmityUIKit4Manager.behavior.storyTargetSelectionPageBehavior = customBehaviour
      }
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Related Components

<CardGroup cols={3}>
  <Card title="Posts & Media" icon="file" href="/uikit/components/social/posts">
    **Post Components** Permanent content creation and media management for lasting social content
  </Card>

  <Card title="Social Feeds" icon="newspaper" href="/uikit/components/social/feeds">
    **Feed Components** Story integration within social feeds and timeline displays
  </Card>

  <Card title="Communities" icon="building" href="/uikit/components/social/communities">
    **Community Features** Community-based story sharing and audience targeting
  </Card>

  <Card title="Users & Profiles" icon="user" href="/uikit/components/social/users">
    **User Management** User profile integration with story content and viewing history
  </Card>

  <Card title="Comments & Reactions" icon="heart" href="/uikit/components/social/comments-reactions">
    **Interaction Components** Story engagement through comments, reactions, and impressions
  </Card>

  <Card title="Livestream" icon="video" href="/uikit/components/social/livestream">
    **Live Content** Real-time video broadcasting and live story alternatives
  </Card>
</CardGroup>

<Tip>
  **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.
</Tip>