Social
Community Profile Page
This page shows community profile information as well as community feed
Features
Feature
Description
Community profile
User can view community information and feed
Post creation
User can tap the floating action button to open Post creation page to create a post in community
Story creation
User can tap the floating action button or community avatar circle to open Story creation page to create a story in community
View stories
User can tap the community avatar circle to watch the stories posted to community
Usage
let viewController = AmityCommunityProfilePageViewController
.make(withCommunityId: "<community-id>")Start an activity
val intent = Intent(this, AmityCommunityPageActivity::class.java)
startActivity(intent)Create a Fragment
AmityCommunityPageFragment
.newInstance(community or communityId)
.build(activity)Community Feed
This component shows a community feed of a specific community.
Features
Feature
Description
Community feed
User can scroll vertically to see a list of posts from a community feed
Usage
let viewController = AmityCommunityProfilePageViewController
.make(withCommunityId: "<community-id>")Create a Fragment
AmityCommunityFeedFragment
.newInstance(community or communityId)
.build(activity)Story Target Tab Component
Features
Feature
Description
Story Target
User can click to see a list of stories from a community or can create a story to a community.
Customization
*/story_tab_component/*
Component
You can customize component_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 customization, please refer to Customization page.
Usage
// This api will be changed in the next release.
let storyTarget = StoryTarget(targetName: community.displayName, isVerifiedTarget: community.isOfficial, avatar: avatarImage, stories: storyCollection)
let viewModel = AmityStoryTabComponentViewModel(storyTargets: [storyTarget], hideStoryCreation: false, creatorAvatar: avatarImage, isGlobalFeed: false, storyCreationTargetId: communityId)
let storyTabComponent = AmityStoryTabComponent(viewModel: viewModel)
let viewController = SwiftUIHostingController(rootView: storyTabComponent)It's available as Composable element
binding.composeViewStoryTarget.setContent {
AmityStoryTargetTabComponent(community = community)
}Story Creation
Story Creation includes two pages to select media and draft selected media.
Features
Feature
Description
Camera view
User can capture image or record video to create story
Media picker
User can select media image or video to create story
Usage
let createStoryPage = AmityCreateStoryPage(targetId: "<community-id>", avatar: "<UIImage>")
let viewController = SwiftUIHostingController(rootView: createStoryPage)Start an activity
val intent = AmityCreateStoryPageActivity.newIntent(
context = context,
community = community
)
startActivity(intent)Camera Page
This page provides media picking and camera for story creation
Capturing image with camera
Select image from gallery
Recording video with camera
Select video from gallery
Features
Feature
Description
Post content
User can view content of the post including reactions and comments.
Customization
camera_page/*/*
Page
You can customize page_theme
camera_page/*/close_button
Element
You can customize close_icon and background_color
For more details customization, please refer to Customization page.
Usage
let createStoryPage = AmityCreateStoryPage(targetId: "<community-id>", avatar: "<UIImage>")
let viewController = SwiftUIHostingController(rootView: createStoryPage)Start an activity
val intent = AmityCreateStoryPageActivity.newIntent(
context = context,
community = community
)
startActivity(intent)Draft Page
This page provides draft preview for story creation
Features
Feature
Description
Post content
User can view content of the post including reactions and comments.
Customization
create_story_page/*/*
Page
You can customize page_theme
create_story_page/*/back_button
Element
You can customize back_icon and background_color
create_story_page/*/aspect_ratio_button
Element
You can customize aspect_ratio_icon and background_color
create_story_page/*/story_hyperlink_button
Element
You can customize hyperlink_button_icon and background_color
create_story_page/*/hyper_link
Element
You can customize hyper_link_icon and background_color
create_story_page/*/share_story_button
Element
You can customize share_icon , background_color and hide_avatar
For more details customization, please refer to Customization page.
Usage
// Draft Video Story
let draftStoryPage = AmityDraftStoryPage(targetId: "<community-id>"", mediaType: .video(videoURL)
// Draft Image Story
let draftStoryPage = AmityDraftStoryPage(targetId: "<community-id>"", mediaType: .image(imageURL, image))
let controller = SwiftUIHostingController(rootView: draftStoryPage)Start an activity
val intent = AmityDraftStoryPageActivity.newIntent(
context = context,
community = community,
isImage = true or false,
fileUri = fileUri
)
startActivity(intent)Viewing Story Page
Features
Feature
Description
View story
User can view image or video story
Customization
story_page/*/*
Page
You can customize page_theme
story_page/*/progress_bar
Element
You can customize progress_color and background_color
story_page/*/overflow_menu
Element
You can customize overflow_menu_icon
story_page/*/close_button
Element
You can customize close_icon
story_page/*/story_impression_button
Element
You can customize impression_icon
story_page/*/story_comment_button
Element
You can customize comment_icon and background_color
story_page/*/story_reaction_button
Element
You can customize reaction_icon and background_color
story_page/*/create_new_story_button
Element
You can customize create_new_story_icon and background_color
story_page/*/speaker_button
Element
You can customize mute_icon , unmute_icon and background_color
For more details customization, please refer to Customization page.
Usage
let storyTarget = StoryTarget(targetName: community.displayName, isVerifiedTarget: community.isOfficial, avatar: avatarImage, stories: storyCollection)
let viewStoryPage = AmityViewStoryPage(storyTargets: [storyTarget])
let viewController = SwiftUIHostingController(rootView: viewStoryPage)Start an activity
val intent = AmityViewStoryPageActivity.newIntent(
context = context,
community = community,
)
startActivity(intent)Delete Story
Viewing Story page also provides deleting a story
Story Target Selection Page
This page provides a list of feed that user can create a post on
Features
Feature
Description
Story creation on community feed
When a user selects a community, UIKit will open Story Creation page with the selected community.
Customization
select_target_page/*/*
Page
You can customize page_theme
select_target_page/*/back_button
Element
You can customize back_icon
For more details customization, please refer to Customization page.
Usage
// Code snippet for iOS will be available soon.
Start an activity
val intent = Intent(this, AmityStoryTargetPickerActivity::class.java)
startActivity(intent)Create Fragment
AmityStoryTargetPickerFragment.newInstance().build(storyCreationType: String)