Story Target Tab Component

The Story Target Tab Component is a dynamic feature of the Social Plus UIKit 4.0 that enhances the application page by allowing members to share and engage with stories. This new version introduces a suite of customization options and interactive capabilities designed to improve user experience and foster community interaction.

Story Target (Community Level)

Story Target (Community Level)

Story Targets (Global Level)

Features

Story Target (Community Level)	User can click to see a list of stories from a community or can create a story to a community.
Story Targets (Global Level)	A list of story targets will show in newsfeed. User can click one of the targets to see the stories posted in that community.

Customization

Explore the variety of customization options available for the Story Tab Component to align with your app's design and user expectations.

Config ID	Type	Description
*/story_tab_component/*	Component	You can customize theme
*/story_tab_component/story_ring	Element	You can specify list of colors to progress_color and background_color for ring color
*/story_tab_component/create_new_story_button	Element	You can specify create_new_story_icon and background_color

For more details on customization, please refer to the Customization page.

Usage

Integrating the Story Target Tab Component into your iOS or Android app enhances the community profile page by allowing users to engage with stories directly related to a specific community. This section provides a detailed usage description and explanation for both iOS and Android platforms.

iOS

To integrate the Story Target Tab Component in an iOS application, you utilize the AmityStoryTabComponent initializer with a specified storyFeedType. For a community-specific story feed, you pass the .community(community) as the parameter, where community is an instance of your AmityCommunity object.

This snippet creates a storyTabComponent configured for a specific community. It then wraps this component in a SwiftUIHostingController to integrate it seamlessly into your SwiftUI application structure. This approach ensures that the story tab is dedicated to displaying stories from the specified community, enhancing content relevance and user engagement within that community space.

Android

For Android, the Story Target Tab Component is available as a Composable function, making it easy to integrate within Jetpack Compose-based UI. Here's how you can use it:

This function demonstrates how to display the Story Target Tab Component for a specific community by utilizing the AmityStoryCommunityTargetTabComponent composable. You need to provide the communityId, which is obtained from the AmityCommunity object or other sources, ensuring that the stories displayed are related to this community.

Web (React)

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={() => {}},
          onChange{() => {}},
     />
  );
};

export default CommunityStoriesTab;

In this example, we define a functional component called CommunityStoriesTab that takes a communityId prop. Inside the component, we render the AmityStoryTabComponent and pass the communityId as the value for the communityFeed property within the type prop.

React Native

For react native, the Story Target Tab Component is exported as an usual React Native component. You can import AmityStoryTabComponent from amity-react-native-social-ui-kit, wrap with UIKit Provider for Authentication and use anywhere you want. AmityStoryTabComponentEnum can be globalFeed or communityFeed. communityFeed require targetId as communityId

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>

Untitled

Navigation Behavior

Story Target Tab Component will navigate to other pages based on the user's actions, you can override the behavior to navigate to your own pages.

For more details, please refer to the Overriding Navigation Behavior page.

iOS

Android