Story Creation Page

This page provides media picking and camera for story creation

The Camera Page component of Amity UIKit 4.0 offers an immersive, easy-to-integrate solution for adding camera functionality to your app. It enables users to capture and share moments directly within stories, enhancing the storytelling experience within communities.

Photos

Capturing a photo with camera

Selecting an image from gallery

Videos

Recording a video with camera

Selecting a video from gallery

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

Customization

Config ID	Type	Description
camera_page/*/*	Page	You can customize theme
camera_page/*/close_button	Element	You can customize close_icon and background_color

For more details customization, please refer to Customization page.

Usage

iOS

For integrating the Story Creation Page into an iOS app, use the AmityCreateStoryPage component. Here's a simple example of navigating to the story creation page, specifying a community ID and optionally an avatar image URL.

This code snippet demonstrates how to initialize the story creation component with a specific target community ID and user avatar, then embed it within a SwiftUI hosting controller for presentation.

Android

Integrating the Story Creation Page in an Android application involves starting a new activity. Below is a method example that launches the story creation activity, utilizing the community ID to tailor the experience.

This function shows how to initiate the story creation page activity with the community ID as the target for the story, ensuring the content is relevant to the specified community.

React Native

For react native, the Story Create Story Page is exported as an usual React Native component. You can import AmityCreateStoryPage from amity-react-native-social-ui-kit, wrap with UIKit Provider for Authentication and use anywhere you want. For story creation, UIKit support only for community now. It means targetId is communityId and targetType is 'community'. onCreateStory: will be called after creation finished.

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

const onCreateStory = () => {...}

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

Navigation Behavior

Story Creation 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

Android