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.
Features
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.
*/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.
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.
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.
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.
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>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.
Last updated
Was this helpful?