The Story Target Tab Component is a dynamic feature of the Amity 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
Customization
Explore the variety of customization options available for the Story Tab Component to align with your app's design and user expectations.
For more details customization, please refer to 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.
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