Story Drafting Page

This page provides draft preview for story creation

The Story Draft Page component of Amity UIKit 4.0 is designed to offer users the ability to prepare and preview their story content before publishing. It supports both image and video media types, enhancing the storytelling process with a seamless draft and review experience.

Features

Feature	Description
Draft view	User can view content of the story before sharing, add hyperlink or adjust image.
Hyperlink	User can add link and customize link text to story.

Customization

Config ID	Type	Description
create_story_page/*/*	Page	You can customize 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
*/hyper_link_config_component/*	Component	You can customize theme
*/hyper_link_config_component/done_button	Element	You can customize done_icon ,done_button_text and background_color
*/hyper_link_config_component/cancel_button	Element	You can customize cancel_icon and cancel_button_text

For more details customization, please refer to Customization page.

Usage

iOS

Integrating the Story Draft Page allows users to preview and potentially edit their story drafts before publication. This integration involves creating instances of the AmityDraftStoryPage for image or video media types, showcasing the versatility of the component in handling different content forms:

These snippets illustrate how to instantiate the draft page for both image and video stories, integrating them into the SwiftUI view hierarchy. The distinction between media types (image vs. video) allows for tailored preview experiences, ensuring users can effectively review and adjust their stories as needed.

Android

On Android, integrating the Story Draft Page into your application involves launching an activity tailored for either image or video story drafts. Here's an example of how to initiate this activity, which takes into account the media type (image or video) and the associated file URI:

This Kotlin function demonstrates initiating the Story Draft Page activity with essential parameters like the community ID, a boolean indicating if the draft is an image, and the URI of the file. This allows for a dynamic draft creation experience where users can prepare and preview their stories, whether they're sharing an image or a video.

Web (React)

import React from 'react';
import { AmityCreateStoryPage } from '@amityco/ui-kit-open-source';

const DraftPage = () => {
return (
          <AmityCreateStoryPage 
          pageId="create_story_page"
          file={null}
          creatorAvatar=""
          onCreateStory={() => {}}
          onDiscardStory={() => {}}
          />
);

Prop Name	Type	Description
pageId	string	Specifies the unique identifier for the create story page. It helps in distinguishing between different pages or sections within the application.
file	File or null	Represents the file (image or video) selected by the user for creating the story. If no file is selected, it should be set to null.
creatorAvatar	string	Specifies the URL or path to the avatar image of the user who is creating the story. It is used to display the user's avatar in the create story page.
onCreateStory	function	A callback function that is invoked when the user submits the story creation form. It should be implemented to handle the story creation logic based on the selected file and other parameters.
onDiscardStory	function	A callback function that is invoked when the user discards or cancels the story creation process. It should be implemented to handle the discard logic and any necessary cleanup.

React Native

For react native, the Story Drafting Page is exported as an usual React Native component. You can import AmityDraftStoryPage from amity-react-native-social-ui-kit, wrap with UIKit Provider for Authentication and use anywhere you want. For story draft page, UIKit support only for community now. It means targetId is communityId and targetType is 'community'. mediaType: PhotoFile or VideoFile type from react-native-vision-camera + {uri: string, name: string} onFinish: will be called after story finished. onPressAvatar: will be called when user pressed avatar icon onPressCommunityName: will be called when user press community name

import {
  AmityViewStoryPage,
  AmityUiKitProvider
} from 'amity-react-native-social-ui-kit';

const onFinish = () => {...}
const onPressAvatar = () => {...}
const onPressCommunityName = () => {...}
 <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      apiEndpoint="https://api.{API_REGION}.amity.co"
  >
        <AmityViewStoryPage
          targetId={communityId}
          targetType="community"
          onFinish={onFinish}
          onPressAvatar={onPressAvatar}
          onPressCommunityName={onPressCommunityName}
        />
 </AmityUiKitProvider>