1 of 10

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

Story creation

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

Config ID

Type

Description

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

Config ID

Type

Description

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

Config ID

Type

Description

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

Config ID

Type

Description

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

Features

Feature

Description

Delete story

User can also delete a story while viewing 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

Config ID

Type

Description

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)

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

Config ID

Type

Description

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

Config ID

Type

Description

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)