Event - social.plus

UIKit Component: Event components are built on top of the social.plus SDK, providing ready-to-use event creation and discovery UI with full data management handled automatically.

Feature Overview

The Event feature in social.plus UIKit v4 enables users to create scheduled events, discover upcoming/past events, manage attendees, and navigate between event-related experiences.

Key Features

Event Creation

Schedule events with rich details

Select where to create the event
Configure details (name, description, date & time)
In-person or virtual options

Event Discovery

Explore and manage your events

Explore events feed
Upcoming events page
Past events page
Community-specific event feed

Attendees & RSVP

Track and manage attendance

RSVP (Going/Not going)
Attendees list
Reminder Notifications

Platform Support

Feature	iOS	Android	Web	Flutter	React Native
Event Creation	✅	✅	✅	-	-
Event Detail & Attendees	✅	✅	✅	-	-
Event discovery	✅	✅	✅	-	-
Event in community profile	✅	✅	✅	-	-

Permission Handling

Spec 6 defines the visibility rules for entry points that trigger event creation:

Global feed: Only users with global permission will see the create event button
- Check: client.hasPermission(AmityPermission.createEvent)
Community feed: Users with global OR community permission will see the create event button
- Check: client.hasPermission(AmityPermission.createEvent, communityId)

UIKit applies these permission checks automatically. If you implement your own custom entry points, keep the same permission logic for consistent UX.

Implementation Guide

Event Creation
Event Details
Event Discovery

Event Target Selection Page

Use AmityEventTargetSelectionPage to choose the destination for the event (Note: community only).

Customization Options

Config ID	Type	Description
`select_event_target_page//`	Page	Customize page theme
`select_event_target_page/*/close_button`	Element	Customize close button image
`select_event_target_page/*/title`	Element	Customize page title

Code Examples

let page = AmityEventTargetSelectionPage()
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeEventTargetSelectionPage() {
    AmityEventTargetSelectionPage()
}

// Using Activity
fun startEventTargetSelectionActivity(context: Context) {
    val intent = AmityEventTargetSelectionPageActivity.newIntent(
        context = context,
    )
    context.startActivity(intent)
}

import { AmityUiKitProvider, AmityEventTargetSelectionPage } from '@amityco/ui-kit';

const SampleEventTargetSelectionPage = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityEventTargetSelectionPage />
    </AmityUiKitProvider>
  );
};

Event Setup Page

Use AmityEventSetupPage to create or edit an event.

Public API:

enum AmityEventSetupPageMode {
  case create(targetId, targetName)
  case edit(AmityEvent)
}

AmityEventSetupPage(mode: AmityEventSetupPageMode)

Customization Options

Config ID	Type	Description
`event_setup_page//`	Page	Customize page theme
`event_setup_page/*/title`	Element	Customize title
`event_setup_page/*/camera_button`	Element	Customize camera label/icon
`event_setup_page/*/image_button`	Element	Customize photo label/icon
`event_setup_page/*/event_name_title`	Element	Customize “Event name” label
`event_setup_page/*/event_details_title`	Element	Customize “Event details” label
`event_setup_page/*/event_date_time_title`	Element	Customize “Date and time” label
`event_setup_page/*/event_location_title`	Element	Customize “Location” label

Code Examples

// Create
let page = AmityEventSetupPage(mode: .create("<targetId>", "<targetName>"))
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

// Edit
// When you already have an AmityEvent object
let editPage = AmityEventSetupPage(mode: .edit(event))

@Composable
fun composeCreateEventSetupPage(targetId: String, targetName: String) {
    AmityEventSetupPage(mode = AmityEventSetupPageMode.Create(targetId, targetName))
}

@Composable
fun composeEditEventSetupPage(event: AmityEvent) {
    AmityEventSetupPage(mode = AmityEventSetupPageMode.Edit(event))
}

import { AmityUiKitProvider, AmityEventSetupPage } from '@amityco/ui-kit';

// Create mode
const SampleCreateEventSetupPage = ({ targetId, targetName }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityEventSetupPage
        mode="create"
        targetId={targetId}
        targetName={targetName}
      />
    </AmityUiKitProvider>
  );
};

// Edit mode
const SampleEditEventSetupPage = ({ event }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityEventSetupPage mode="edit" event={event} />
    </AmityUiKitProvider>
  );
};

Event Detail Page

Use AmityEventDetailPage to view event details and access event actions.

Public API:

AmityEventDetailPage(eventId: string)

Code Examples

let page = AmityEventDetailPage(eventId: "<eventId>")
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeEventDetailPage(eventId: String) {
    AmityEventDetailPage(eventId = eventId)
}

import { AmityUiKitProvider, AmityEventDetailPage } from '@amityco/ui-kit';

const SampleEventDetailPage = ({ eventId }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityEventDetailPage eventId={eventId} />
    </AmityUiKitProvider>
  );
};

The event detail page’s 3-dot action menu can surface shareable-link actions that open the event directly:

Action	Platforms	Behavior
Copy event link	iOS, Android, React	Copies the event URL to the clipboard and shows a “Link copied.” toast
Share to	iOS, Android	Opens the native OS share sheet with the event URL (not rendered on Web)

These actions are backed by the SDK’s Client.getShareableLinkConfiguration() and appear only when all of the following are true:

Event shareable links are configured for the network — config.isEnabled(AmitySharableContentType.EVENT) is true (deep link toggle on and an event URL pattern is set in Console).
The event’s origin community is public.
The event is not cancelled and not in a draft/unpublished state.

If any condition fails, the Copy / Share actions are hidden. See Content Sharing for the SDK link-generation API.

Event shareable links are available on iOS, Android, and React (Web). “Share to” (native share sheet) is mobile-only. Refer to the platform UIKit for Flutter and React Native availability.

Event Attendees Page

Use AmityEventAttendeesPage to browse attendees and navigate to a user profile.Public API:

AmityEventAttendeesPage(eventId: string)

Code Examples

let page = AmityEventAttendeesPage(eventId: "<eventId>")
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeEventAttendeesPage(eventId: String) {
    AmityEventAttendeesPage(eventId = eventId)
}

import { AmityUiKitProvider, AmityEventAttendeesPage } from '@amityco/ui-kit';

const SampleEventAttendeesPage = ({ eventId }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityEventAttendeesPage eventId={eventId} />
    </AmityUiKitProvider>
  );
};

Upcoming Events Pages

Use AmityUpcomingEventsPage to browse upcoming events.

Customization Options

Config ID	Type	Description
`upcoming_events_page//`	Page	Customize upcoming events page

Code Examples

// Show all upcoming events (Explore mode)
let upcomingEventsPage = AmityUpcomingEventsPage(
    context: .init(onlyMyEvents: false)
)
let viewController = AmitySwiftUIHostingController(rootView: upcomingEventsPage)
navigationController?.pushViewController(viewController, animated: true)

// Show only user's upcoming events (My Events mode)
let myEventsPage = AmityUpcomingEventsPage(
    context: .init(onlyMyEvents: true)
)
let myEventsViewController = AmitySwiftUIHostingController(rootView: myEventsPage)
navigationController?.pushViewController(myEventsViewController, animated: true)

// Using Activity - All events
fun startUpcomingEventsActivityAllEvents(context: Context) {
    val intent = AmityUpcomingEventsPageActivity.newIntent(
        context = context,
        showAllEvents = true
    )
    context.startActivity(intent)
}

// Using Activity - My events only
fun startUpcomingEventsActivityMyEvents(context: Context) {
    val intent = AmityUpcomingEventsPageActivity.newIntent(
        context = context,
        showAllEvents = false
    )
    context.startActivity(intent)
}

import { AmityUiKitProvider, AmityUpcomingEventsPage } from '@amityco/ui-kit';

const SampleAmityUpcomingEventsPage = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityUpcomingEventsPage fromExplore={true} />
    </AmityUiKitProvider>
  );
};

Past Events Page

Use AmityPastEventsPage to browse past events.

Customization Options

Config ID	Type	Description
`past_events_page//`	Page	Customize past events page

Code Examples

// Show past events page
let pastEventsPage = AmityPastEventsPage()
let viewController = AmitySwiftUIHostingController(rootView: pastEventsPage)
navigationController?.pushViewController(viewController, animated: true)

// Using Activity - All events
fun startPastEventsActivityAllEvents(context: Context) {
    val intent = AmityPastEventsPageActivity.newIntent(context)
    context.startActivity(intent)
}

// Using Activity - My events only  
fun startPastEventsActivityMyEvents(context: Context) {
    val intent = AmityPastEventsPageActivity.newIntent(context)
    context.startActivity(intent)
}

import { AmityUiKitProvider, AmityPastEventsPage } from '@amityco/ui-kit';

const SampleAmityPastEventsPageActivityPage = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityPastEventsPage />
    </AmityUiKitProvider>
  );
};

Feed Components

Event discovery surfaces embedded in existing feature pagesSpec 6 aligns the Event feature with these components:

AmityExploreEventFeedComponent
AmityMyEventFeedComponent
AmityEventInfoComponent
AmityEventDiscussionFeedComponent

These components are typically used inside existing UIKit pages (e.g., Social Home and Community Profile). If you’re using the standard Social Home experience, you get these feeds automatically.

The Explore and Happening now discovery feeds exclude events created by the current user, so people only see events from others when browsing. This is handled automatically by the UIKit — no configuration required.

Code Examples

AmityExploreEventFeedComponent

// Show explore event feed component
let exploreEventComponent = AmityExploreEventFeedComponent(pageId: .socialHomePage)
let viewController = AmitySwiftUIHostingController(rootView: exploreEventComponent)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeExploreEventFeed() {
    // Get flows directly from SDK repository
    val liveEvents = remember {
        AmitySocialClient.newEventRepository()
            .getLiveEvents()
            .cachedIn(viewModelScope)
    }.collectAsLazyPagingItems()

    val upcomingEvents = remember {
        AmitySocialClient.newEventRepository()
            .getUpcomingEvents()
            .cachedIn(viewModelScope)
    }.collectAsLazyPagingItems()

    AmityExploreEventFeedComponent(
        liveEvents = liveEvents,
        upcomingEvents = upcomingEvents
    )
}

import { AmityUiKitProvider, AmityExploreEventFeedComponent } from '@amityco/ui-kit';

const SampleAmityExploreEventFeedComponent = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityExploreEventFeedComponent pageId="your_pageId" />
    </AmityUiKitProvider>
  );
};

AmityMyEventFeedComponent

// Show my event feed component
let myEventComponent = AmityMyEventFeedComponent(pageId: .socialHomePage)
let viewController = AmitySwiftUIHostingController(rootView: myEventComponent)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeMyEventFeed() {
    // Get flows directly from SDK repository
    val liveEvents = remember {
        AmitySocialClient.newEventRepository()
            .getLiveEvents()
            .cachedIn(viewModelScope)
    }.collectAsLazyPagingItems()

    val upcomingEvents = remember {
        AmitySocialClient.newEventRepository()
            .getMyUpcomingEvents()
            .cachedIn(viewModelScope)
    }.collectAsLazyPagingItems()

    val pastEvents = remember {
        AmitySocialClient.newEventRepository()
            .getPastEvents()
            .cachedIn(viewModelScope)
    }.collectAsLazyPagingItems()

    AmityMyEventFeedComponent(
        liveEvents = liveEvents,
        upcomingEvents = upcomingEvents,
        pastEvents = pastEvents
    )
}

import { AmityUiKitProvider, AmityMyEventFeedComponent } from '@amityco/ui-kit';

const SampleAmityMyEventFeedComponent = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityMyEventFeedComponent pageId="your_pageId" />
    </AmityUiKitProvider>
  );
};

AmityEventInfoComponent

let eventDetailViewModel = AmityEventDetailPageViewModel(event: event)
let eventInfoComponent = AmityEventInfoComponent(viewModel: eventDetailViewModel)
let viewController = AmitySwiftUIHostingController(rootView: eventInfoComponent)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeEventInfo(
    event: AmityEvent
) {
    AmityEventInfoComponent(
        event = event
    )
}

import { AmityUiKitProvider, AmityEventInfoComponent } from '@amityco/ui-kit';

const SampleAmityEventInfoComponent = ({ event }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityEventInfoComponent pageId="your_pageId" event={event} />
    </AmityUiKitProvider>
  );
};

AmityEventDiscussionFeedComponent

// Show event discussion feed component (requires an event and view model)
let eventDetailViewModel = AmityEventDetailPageViewModel(event: event)
let discussionFeedComponent = AmityEventDiscussionFeedComponent(viewModel: eventDetailViewModel)
let viewController = AmitySwiftUIHostingController(rootView: discussionFeedComponent)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeEventDiscussionFeed(
    eventId: String
) {
    val viewModel: AmityEventDetailViewModel = viewModel()
    val lazyListState = rememberLazyListState()

    LaunchedEffect(eventId) {
        viewModel.loadEvent(eventId)
    }

    AmityEventDiscussionFeedComponent(
        viewModel = viewModel,
        lazyListState = lazyListState,
        shouldRefresh = false,
        header = {
            item {
                Text("Event Discussion Header")
            }
        }
    )
}

import { AmityUiKitProvider, AmityEventDiscussionFeedComponent } from '@amityco/ui-kit';

const SampleAmityEventDiscussionFeedComponent = ({ event }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityEventDiscussionFeedComponent pageId="your_pageId" event={event} />
    </AmityUiKitProvider>
  );
};

Customization Options

Config ID	Type	Description
`social_home_page/my_event_feed_component/*`	Component	Customize My Event feed section
`social_home_page/explore_event_feed_component/*`	Component	Customize Explore Event feed section
`community_profile_page/*/create_event_button`	Element	Customize create event button label
`social_home_page/create_post_menu/create_event_button`	Element	Customize create-event entry in create-post menu

If you need to hook navigation (e.g., “View all upcoming”), use the corresponding Behavior class documented in the next tab.

Customization

UIKit provides these customization keys for event entry points and pages.

{
  "*/community_sidebar/communities_sidebar_menu_item": {
    "text": "Communities",
    "icon": ""
  },
  "*/community_sidebar/events_sidebar_menu_item": {
    "text": "Events",
    "icon": ""
  },

  "social_home_page/*/communities_button": {
    "text": "Communities"
  },
  "social_home_page/*/events_button": {
    "text": "Events"
  },
  "social_home_page/create_post_menu/create_event_button": {
    "text": "Event",
    "image": ""
  },
  "social_home_page/my_event_feed_component/*": {},
  "social_home_page/explore_event_feed_component/*": {},

  "community_profile_page/*/create_event_button": {
    "text": "Event"
  },

  "select_event_target_page/*/*": {},
  "select_event_target_page/*/close_button": {
    "image": ""
  },
  "select_event_target_page/*/title": {
    "text": "Create event in"
  },

  "event_setup_page/*/*": {},
  "event_setup_page/*/title": {
    "text": "Create event"
  },
  "event_setup_page/*/camera_button": {
    "text": "Camera",
    "image": ""
  },
  "event_setup_page/*/image_button": {
    "text": "Photo",
    "image": ""
  },
  "event_setup_page/*/event_name_title": {
    "text": "Event name"
  },
  "event_setup_page/*/event_details_title": {
    "text": "Event details"
  },
  "event_setup_page/*/event_date_time_title": {
    "text": "Date and time"
  },
  "event_setup_page/*/event_location_title": {
    "text": "Location"
  },

  "upcoming_events_page/*/*": {},

  "past_events_page/*/*": {}
}

Behavior Customization

UIKit provides behavior classes to customize navigation and actions for event-related pages and components.

Page Behaviors

class AmityEventTargetSelectionPageBehavior {

    goToEventSetupPage(context): void {
      // navigation logic
    }

}

class AmityEventSetupPageBehavior {

    goToEventDetailPage(context): void {
      // navigation logic
    }

}

class AmityEventDetailPageBehavior {

    goToEventSetupPage(context): void {
      // navigation logic
    }

    goToLivestreamPostComposerPage(context): void {
      // navigation logic
    }

    goToPostDetailPage(context): void {
      // navigation logic
    }

    goToPostComposerPage(context): void {
      // navigation logic
    }

    goToPollPostComposerPage(context): void {
      // navigation logic
    }

    goToCommunityProfilePage(context): void {
      // navigation logic
    }

    goToEventAttendeesPage(context): void {
      // navigation logic
    }

}

class AmityEventAttendeesPageBehavior {

    goToUserProfilePage(context): void {
      // navigation logic
    }

}

class AmityNotificationTrayPageBehavior {

    // ... existing behaviors

    goToEventDetailPage(context): void {
      // navigation logic
    }

}

class AmityCommunityProfilePageBehavior {

    // ... existing behaviors

    goToEventDetailPage(context): void {
      // navigation logic
    }

}

Component Behaviors

Explore Event Feed
My Event Feed
Create Post Menu
My Communities

class AmityExploreEventFeedComponentBehavior {

    goToUpcomingEventsPage(context): void {
      // navigation logic
    }

}

class AmityMyEventFeedComponentBehavior {

    goToUpcomingEventsPage(context): void {
      // navigation logic
    }

    goToPastEventsPage(context): void {
      // navigation logic
    }

}

class AmityMyCommunitiesComponentBehavior {

    // ... existing behaviors

    goToCommunitySetupPage(): void {
      // navigation logic
    }

}

Events SDK

SDK event APIs and data models

Community

Community UI components

Livestream

Livestream UI components

​Feature Overview

​Key Features

Event Creation

Event Discovery

Attendees & RSVP

​Platform Support

​Permission Handling

​Implementation Guide

​Event Target Selection Page

​Customization Options

​Code Examples

​Event Setup Page

​Customization Options

​Code Examples

​Event Detail Page

​Code Examples

​Share an event

​Event Attendees Page

​Code Examples

​Upcoming Events Pages

​Customization Options

​Code Examples

​Past Events Page

​Customization Options

​Code Examples

​Feed Components

​Code Examples

​AmityExploreEventFeedComponent

​AmityMyEventFeedComponent

​AmityEventInfoComponent

​AmityEventDiscussionFeedComponent

​Customization Options

​Customization

​Behavior Customization

​Page Behaviors

​Component Behaviors

​Related Topics

Events SDK

Community

Livestream

Feature Overview

Key Features

Platform Support

Permission Handling

Implementation Guide

Event Target Selection Page

Customization Options

Code Examples

Event Setup Page

Customization Options

Code Examples

Event Detail Page

Code Examples

Share an event

Event Attendees Page

Code Examples

Upcoming Events Pages

Customization Options

Code Examples

Past Events Page

Customization Options

Code Examples

Feed Components

Code Examples

AmityExploreEventFeedComponent

AmityMyEventFeedComponent

AmityEventInfoComponent

AmityEventDiscussionFeedComponent

Customization Options

Customization

Behavior Customization

Page Behaviors

Component Behaviors

Related Topics