Story Viewing Page

The Story Viewing Page is a pivotal component of Amity UIKit 4.0, enabling users to immerse themselves in the stories shared within their communities. It provides a streamlined interface for navigating through and engaging with content, contributing significantly to the social experience within the app.

Features

Feature	Description
View story	User can view image or video story

Customization

Config ID	Type	Description
story_page/*/*	Page	You can customize 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

iOS

In the integration process for the Story Viewing Page on iOS, an essential step involves creating a StoryTarget. This object is crucial for specifying which community's stories are to be viewed, including details like the community's ID, display name, verification status, and an avatar URL. This setup ensures the stories presented are relevant and correctly attributed to the specific community context.

This setup ensures that the Story Viewing Page is initialized with community-specific stories, allowing users to engage with content that is most relevant to them.

Android

For Android, the process involves starting a new activity dedicated to story viewing, with the target community's ID as a key parameter:

This code snippet illustrates how to launch the Story Viewing Page for a particular community, ensuring that users are presented with stories from communities they are interested in or affiliated with.

Web (React)

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

const App = () => {
  return (
      <AmityViewStoryPage page="story_page" targetId="targetId"/>
  );
};

export default App;

Prop Name	Type	Default Value	Description
pageId	string	'story_page'	Specifies the unique identifier for the view stories page. It helps in distinguishing between different pages or sections within the application.
targetId	string	-	Represents the ID of the target whose stories are being viewed. It is used to fetch and display the relevant stories for that target.

React Native

For react native, the Story Drafting Page is exported as an usual React Native component. You can import AmityViewStoryPage from amity-react-native-social-ui-kit, wrap with UIKit Provider for Authentication and use anywhere you want. For story view page, UIKit support only for community now. It means targetId is communityId and targetType is 'community'.

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

const onCreateStory = () => {...}
const onDiscardStory = () => {...}
 <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      apiEndpoint="https://api.{API_REGION}.amity.co"
  >
       <AmityDraftStoryPage 
          targetId={communityId}
          targetType={"community" | "user" | "content"}
          mediaType={mediaType}
          onCreateStory={onCreateStory}
          onDiscardStory={onDiscardStory}
       />
 </AmityUiKitProvider>

Navigation Behavior

Story Viewing Page will navigate to other pages based on user's actions, you can override the behavior to navigate to your own pages.

For more details, please refer to Overriding Navigation Behavior page.

iOS

Andoid