1 of 1

Story Viewing Page

The Story Viewing Page is a pivotal component of Social Plus 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 on customization, please refer to the Customization page.

Usage

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 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.

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.

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.

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>

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 the Overriding Navigation Behavior page.