The Social Home Page is the gateway to various social interactions within the application. This page integrates multiple components such as AmityGlobalFeedNavigationComponent, AmityEmptyNewsfeedComponent, AmityNewsfeedComponent, and AmityMyCommunitiesComponent, providing a comprehensive view of the social features available to the user.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The AmitySocialHomePage can be implemented in any application to serve as the entry point to social features. Incorporate the AmitySocialHomePage within your app’s UI composition to ensure it is the first component loaded when accessing the social features.

Navigation Behavior

Custom navigation behavior can be implemented to enhance or modify the interaction flow on the AmitySocialHomePage. This includes overriding default actions to navigate to specific pages like global search or community search based on user interactions.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The component is designed to be easily integrated into your application, providing a rich user interface for social interactions.

The Newsfeed Component integrates both Story Target Tab Component and AmityGlobalFeedComponent to display a dynamic and interactive social feed. It showcases user stories at the top followed by a list of posts, providing a streamlined experience for users to engage with community content.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The component is designed to be easily integrated into your application, providing a rich user interface for social interactions.

The AmityEmptyNewsFeedComponent is used within the Social Plus platform to indicate the absence of posts in the newsfeed. This component enriches the user experience by displaying an inviting and informative placeholder when the newsfeed is empty. It includes an empty state icon, title, description, and buttons to explore or create communities.

Customization

For more details on customization, please refer to the Customization page.

Usage

This component can be seamlessly integrated into your application to handle empty states in the newsfeed.

The AmityGlobalFeedComponent is a central component within the Social Plus platform, designed to aggregate and display a diverse array of posts from the user community. It utilizes the AmityPostContentComponent to render individual posts, creating an engaging newsfeed experience. This component not only enhances user interaction by providing a seamless scroll through various types of posts but also serves as a reflection of the community’s activity, showing everything from user updates to broader community announcements.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The AmityGlobalFeedComponent is designed for easy integration across various platforms, enabling a consistent user experience by displaying a global feed of posts.

Navigation Behavior

The behavior of the AmityGlobalFeedComponent can be customized to handle navigation to the post detail page differently. Here’s how you can override the default behavior:

The AmityCreatePostMenuComponent provides users with options to create posts or stories, enhancing user engagement by facilitating content creation on community feeds or my timeline. It acts as a gateway for users to navigate to specific content creation flows.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The AmityCreatePostMenuComponent is designed for straightforward integration into any part of your application that requires user interaction with content creation options. This component is highly versatile, supporting various development scenarios.

Navigation Behavior

The behavior of the AmityCreatePostMenuComponent can be customized to manage how the application navigates upon user actions related to post and story creation. Here’s how you can override the default behavior to ensure that navigation aligns with your application’s specific user flow and business logic:

The Community Categories component displays five categories in a horizontally scrollable view and allows users to explore more categories. It is featured at the top of the Explore tab on the Social Home page, offering a streamlined experience for users to engage with community categories.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The component is designed to be easily integrated into your application, providing a rich user interface for social interactions

The Recommended Communities component displays the top four recommended communities for users to join. It appears after the Community Categories component in the Explore tab, providing a seamless experience for users to discover and engage with new communities.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The component is designed to be easily integrated into your application, providing a rich user interface for social interactions.

The Trending Communities component showcases the top five trending communities for users to interact with. Positioned after the Recommended Communities component in the Explore tab, it offers a seamless experience for users to engage with popular communities.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The component is designed to be easily integrated into your application, providing a rich user interface for social interactions.

The Global Search Page offers a robust and intuitive search functionality. By entering a keyword, you can effortlessly search for and discover communities and users that match your interests and needs. This feature is ideal for users who wish to expand their network, join new communities, or find specific individuals. With the Global Search Page, you can explore a world of opportunities and enhance your engagement within the platform.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

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

The Top Search Bar is the key component of the Global Search Page, providing a seamless and efficient way to search. Located at the top of the page for easy access, this search bar allows you to input keywords and instantly receive relevant results from all available communities and users. Its advanced filtering capabilities ensure that your search is precise and tailored to your needs. Whether you are looking to join new communities or connect with specific users, the Top Search Bar is your go-to tool for an enhanced and streamlined search experience.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Community Search Result Component is an essential element of the Global Search Page, providing a clear and organized display of communities that match your search keywords. Once you enter a keyword into the Top Search Bar, this component dynamically updates to show a list of relevant communities, complete with brief descriptions and key details. Each community in the search results is presented in an easy-to-read format, allowing you to quickly assess and decide which groups you want to explore further. This component is designed to enhance your search experience by making it simple to find and join communities that align with your interests and goals.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

When a user clicks on a community in the search results, they are seamlessly navigated to the community's profile page. This page provides detailed information about the community, including posts, members, and activities. This intuitive navigation ensures that users can quickly and effortlessly explore and engage with the communities they are interested in.

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

The User Search Result Component is a key element of the Global Search Page, providing a clear and organized display of users that match your search criteria. After entering a keyword into the Top Search Bar, this component instantly updates to show a list of relevant users. This component is designed to streamline your search process, making it simple to find and engage with users who share your interests and goals, thereby fostering a more connected and interactive platform experience.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

When a user clicks on a profile in the user search results, they are seamlessly navigated to that user's profile page. This page offers detailed information about the user, including their posts, activities, and connections. This intuitive navigation ensures that users can quickly and effortlessly explore and connect with individuals who match their interests.

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

The My Communities Search Page provides a streamlined and efficient way to find and manage your joined communities. Simply enter a keyword into the search bar, and the system will quickly display a list of communities that match your search criteria. This feature is perfect for users who are part of multiple groups and need a quick way to locate and access specific communities. Stay organized and connected with the My Communities Search Page, your gateway to a more personalized and interactive community experience.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

When a user clicks on a community in the search results, they are seamlessly navigated to the community's profile page. This page provides detailed information about the community, including posts, members, and activities. This intuitive navigation ensures that users can quickly and effortlessly explore and engage with the communities they are interested in.

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

The All Categories page provides users with an organized list of community categories, making it easy to explore and discover communities based on different interests and topics.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The component is designed to be easily integrated into your application, providing a rich user interface for social interactions

The Communities by Category page offers a quick and efficient way to view all communities within a selected category, making it ideal for users interested in exploring related communities.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The component is designed to be easily integrated into your application, providing a rich user interface for social interactions

The social UI supports rich and interactive post creation and engagement features that enhance user expression and interaction.

Post Types Supported:

• Text Posts: Users can share text-based content, with or without attachments.

• Rich Media Posts: Users can enhance their posts by attaching images and/or videos.

• Poll Posts: Users can create polls to gather opinions, allowing other users to vote and view results in real time.

Supported on: iOS, Android, Web, Flutter

Post Engagement Features:

• Reactions: Users can express their sentiments by reacting to a post using a predefined set of emojis.

• Comments: Users can engage in conversations by adding comments to posts.

Supported on: iOS, Android, Web, Flutter

Mentions in Posts and Comments:

Users can @mention other users within both posts and comments. Mentions are rendered with a highlighted visual style to make them stand out in the content. This makes interactions more direct, increases visibility, and supports better community engagement by bringing individuals into conversations.

Supported on: iOS, Android, Web, Flutter

Link Preview:

When a post includes a URL, the system automatically generates a link preview by extracting metadata from the target webpage. This provides users with a quick glance at the linked content, including the title, description, and thumbnail (if available).

Supported on: iOS, Android, Web, Flutter

Brand User:

To support more authentic and professional community interactions, our platform introduces a specialized Brand User feature. This allows designated users—typically admins—to create posts and comments as the brand, rather than as individuals.

Supported on: iOS, Android, Web, Flutter

These features collectively create a dynamic and engaging social experience for users across the platform.

The Post Details Page displays detailed information about a post, including its content, engagements, and comments, using a combination of the SocialPlusPostContentComponent and the SocialPlusCommentTrayComponent.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Post Details Page can be used in the app if you already have an AmityPost object from Social Plus SDK. The postId from the AmityPost object is needed to initialize it.

Navigation Behavior

Custom navigation behavior can be implemented to enhance or modify the interaction flow on the AmityPostDetailPage.

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

The Post Content Component displays information about a post, including its content and engagements.

Customization

For more details on customization, please refer to the Customization page.

Usage

The Post Content Component can be used in the app if you already have an AmityPost object from Social Plus SDK.

Navigation Behavior

Custom navigation behavior can be implemented to enhance or modify the interaction flow on the AmityPostContentComponent.

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

The Reaction List Component displays detailed information about users who have reacted to your post and the specific reactions they have used.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Reaction List Component can be used in the app if you already have an AmityPost object from Social Plus SDK. postId from AmityPost object will be used to initialize the component.

The Post Composer Page enables users to create and edit post by inputting text content and attaching media and files. It uses AmityMediaAttachmentComponent and AmityDetailedMediaAttachmentComponent to attach media and files.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Post Composer page can be used in two modes, creation mode to create a new post and editing mode to edit the existing post.

Navigation Behavior

Custom navigation behavior can be implemented to enhance or modify the interaction flow on the AmityPostComposerPage.

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

The Media Attachment Component allows users to add media and files to a post when creating or editing it in the AmityPostComposerPage.

Feature

Customization

This component allows user to fully customize on these items.

For more details on customization, please refer to the Customization page.

Usage

The Media Attachment Component can be used in this way if the user wants to use it separately.

The Detailed Media Attachment Component allows users to add media and files to a post when creating or editing it in the AmityPostComposerPage.

Features

Customization

This component allows user to fully customize on these items.

For more details on customization, please refer to the Customization page.

Usage

The Detailed Media Attachment Component can be used in this way if the user wants to use it separately.

The Post Target Selection Page is a crucial component designed to streamline the process of selecting the target audience or community for post sharing within the Social Plus UIKit 4.0. This feature allows users to specify where their post will be visible, whether it's a particular community, or to all followers, enhancing the user experience by providing control and flexibility over their content's visibility.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

Post Target Selection Page will navigate to post composer, you can override the behavior to navigate to your own pages.

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

The Poll Post Composer Page enables users to perform polling with communities and connected users.

Features

Customization

For more details customization, please refer to Customization page.

Usage

A poll typically includes a question and at least two answer options. The creator can decide whether participants are allowed to select one or multiple options and can set an end date for the poll.

The Poll Target Selection Page is a crucial component designed to streamline the process of selecting the target audience or community for polling within the Amity UIKit 4.0. This feature allows users to specify where their poll post will be visible, whether it's a particular community, or to all followers, enhancing the user experience by providing control and flexibility over their content's visibility.

Features

Customization

For more details customization, please refer to Customization page.

Usage

Navigation Behavior

Poll Target Selection Page will navigate to poll post composer you can override the behavior to navigate to your own pages.

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

Livestream posts allows users to broadcast live video content, which other users can view in real time or watch later as a recorded video once the stream ends.

Livestream creation

Enable creation of a live stream post on the feed of the selected target either a community or user own timeline.

Supported on: iOS, Android

Livestream viewing

Enables livestream viewing when it is live or ended.

Supported on: iOS, Android, Web

This page allows you to select target for creating live stream post.

Usage:

Customization:

Navigation Behavior:

Livestream Post Target Selection Page will navigate to live stream creation page. You can also override the behavior to navigate to your own pages.

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

This page allows you to set up a title, description, thumbnail & start your live stream.

Usage:

Customization:

This page allows you to play the live stream from the post. This page supports both live stream & recorded stream.

Usage:

This page will be shown if the live stream is terminated as a result of moderation by admin.

Customization:

The Story Target Tab Component is a dynamic feature of the Social Plus UIKit 4.0 that enhances the application page by allowing members to share and engage with stories. This new version introduces a suite of customization options and interactive capabilities designed to improve user experience and foster community interaction.

Features

Customization

Explore the variety of customization options available for the Story Tab Component to align with your app's design and user expectations.

For more details on customization, please refer to the Customization page.

Usage

Integrating the Story Target Tab Component into your iOS or Android app enhances the community profile page by allowing users to engage with stories directly related to a specific community. This section provides a detailed usage description and explanation for both iOS and Android platforms.

import React from 'react';
import { AmityStoryTabComponent } from '@amityco/ui-kit';

const CommunityStoriesTab = ({ communityId }) => {
  return (
    <AmityStoryTabComponent 
          pageId='*',
          title='Story',
          haveStoryPermission={false},
          storyRing={false},
          isSeen={false},
          uploadingStory={false},
          isErrored={false},
          avatar="",
          onClick={() => {}},
          onChange{() => {}},
     />
  );
};

export default CommunityStoriesTab;

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

 <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      apiEndpoint="https://api.{API_REGION}.amity.co"
  >
       <AmityStoryTabComponent 
          type={AmityStoryTabComponentEnum.communityFeed}
          targetId={communityId}
       />
 </AmityUiKitProvider>

Navigation Behavior

Story Target Tab Component will navigate to other pages based on the 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.

The Camera Page component of Social Plus 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

Videos

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

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

The Story Draft Page component of Social Plus 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

Customization

For more details on customization, please refer to the Customization page.

Usage

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={() => {}}
          />
);

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>

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

Customization

For more details on customization, please refer to the Customization page.

Usage

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

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

export default App;

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

The Comment Tray Component in Social Plus UIKit 4.0 facilitates a dynamic interaction layer for users to engage with stories or posts through comments and reactions. This customizable component is designed to foster community engagement and conversation directly within the content viewing experience.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

import React from 'react';
import { AmityStoryTabComponent } from '@amityco/ui-kit';

const CommunityStoriesTab = ({ communityId }) => {
  return (
    <AmityStoryTabComponent type={{ communityFeed: communityId }} />
  );
};

export default CommunityStoriesTab;

The Target Selection Page is a crucial component designed to streamline the process of selecting the target audience or community for story and post sharing within the Social Plus UIKit 4.0. This feature allows users to specify where their story will be visible, whether it's a particular community, or to all followers, enhancing the user experience by providing control and flexibility over their content's visibility.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

The target Selection Page will navigate to other pages based on the 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.

The Community Setup Page can be used to create a brand new community or updating the existing community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

The Community Setup Page will navigate to the user listing page to add users to the community if it is created as private, and to the category listing page to attach categories to the community. You can override the behavior to navigate to your own pages.

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

The Add Category Page allows user to search for categories to attach to a community. A community can have up to 10 categories.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Add Member Page allows users to search for a specific user by display name to add to a community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Community Profile Page is the main page of a community where all announcement posts, pinned posts, regular posts, and stories created within the community are stored. This page also allows users with the necessary permissions to create posts and stories in the community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

The Community Profile Page will navigate to the post composer page, story creation page, pending post page, community membership page, community setting page, and post detail page. You can override the behavior to navigate to your own pages.

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

The Community Header Component will display the cover photo, display name, description and categories, and other information about the community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Community Feed Component will display a list of posts created in this community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Community Pin Feed Component will display a list of pinned posts created in this community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Community Image Feed Component will display a list of image posts created in this community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Community Video Feed Component will display a list of video posts created in this community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The pending post page will have the list of posts needed to be reviewed. Moderator of the community can review the pending posts.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The pending post content component will display a post needed to be reviewed. Moderator of the community can review the pending post and can accept or decline.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

The Community Settings Page is the gateway for changing various settings within the community and updating its profile information. User can leave the community or close the entire community from this page.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

The Community Profile Page will navigate to each page related to the setting. You can override these behaviors to navigate to your own pages.

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

The Community Notification Setting Page is the main page to change the notification settings within the community.

Features

Customization

For more details on customization, please refer to the Customization page.

Usage

Navigation Behavior

This page will navigate to dedicated notification setting pages of posts, comments, and stories. You can override the behaviors to navigate to your own pages.

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

The Community Posts Notification Page is the page to change post-related notification settings in a community.

Features