feat: add reaction.onPressUserProfile to SendbirdUIKitContainer props

packages/uikit-react-native/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -22,7 +22,7 @@ const ReactionUserListBottomSheet = ({
  reactionCtx,
  chatCtx,
  localizationCtx,
- userProfileCtx,
+ onPressUserProfile,
 }: ReactionBottomSheetProps) => {
  const { width } = useWindowDimensions();
  const { bottom, left, right } = useSafeAreaInsets();
@@ -134,7 +134,7 @@ const ReactionUserListBottomSheet = ({
  onPress={async () => {
  if (user) {
  await onClose();
- userProfileCtx.show(user);
+ onPressUserProfile(user);
  }
  }}
  style={styles.pageItem}

packages/uikit-react-native/src/components/ReactionBottomSheets/index.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
 
+import type { SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+
 import type { LocalizationContext } from '../../contexts/LocalizationCtx';
 import type { ReactionContext } from '../../contexts/ReactionCtx';
 import type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';
-import type { UserProfileContext } from '../../contexts/UserProfileCtx';
 import ReactionList from './ReactionListBottomSheet';
 import UserList from './ReactionUserListBottomSheet';
 
@@ -12,10 +13,10 @@ export type ReactionBottomSheetProps = {
  visible: boolean;
  onDismiss: () => void;
  onClose: () => Promise<void>;
+ onPressUserProfile: (user: SendbirdUser | SendbirdMember) => void;
  chatCtx: GetFromContext<typeof SendbirdChatContext>;
  reactionCtx: GetFromContext<typeof ReactionContext>;
  localizationCtx: GetFromContext<typeof LocalizationContext>;
- userProfileCtx: GetFromContext<typeof UserProfileContext>;
 };
 
 export const ReactionBottomSheets = {

packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx

@@ -110,6 +110,9 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
  users: SendbirdUser[] | SendbirdMember[],
  ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
  };
+ reaction?: {
+ onPressUserProfile?: (user: SendbirdUser | SendbirdMember) => void;
+ };
  userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
  imageCompression?: Partial<ImageCompressionConfigInterface>;
 }>;
@@ -125,6 +128,7 @@ const SendbirdUIKitContainer = ({
  errorBoundary,
  toast,
  userProfile,
+ reaction,
  userMention,
  imageCompression,
 }: SendbirdUIKitContainerProps) => {
@@ -232,12 +236,8 @@ const SendbirdUIKitContainer = ({
  statusBarTranslucent={styles?.statusBarTranslucent ?? true}
  >
  <ToastProvider dismissTimeout={toast?.dismissTimeout}>
- <UserProfileProvider
- onCreateChannel={userProfile?.onCreateChannel}
- onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
- statusBarTranslucent={styles?.statusBarTranslucent ?? true}
- >
- <ReactionProvider>
+ <UserProfileProvider {...userProfile} statusBarTranslucent={styles?.statusBarTranslucent ?? true}>
+ <ReactionProvider {...reaction}>
  <LocalizationContext.Consumer>
  {(value) => {
  const STRINGS = value?.STRINGS || defaultStringSet;

packages/uikit-react-native/src/contexts/ReactionCtx.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useReducer, useRef, useState } from 're
 import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
 import { NOOP } from '@sendbird/uikit-utils';
 
-import { ReactionBottomSheets } from '../components/ReactionBottomSheets';
+import { ReactionBottomSheetProps, ReactionBottomSheets } from '../components/ReactionBottomSheets';
 import { LocalizationContext } from '../contexts/LocalizationCtx';
 import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
 import { UserProfileContext } from '../contexts/UserProfileCtx';
@@ -19,10 +19,12 @@ export type ReactionContextType = {
  focusIndex: number;
 } & State;
 
-type Props = React.PropsWithChildren<{}>;
+type Props = React.PropsWithChildren<{
+ onPressUserProfile?: ReactionBottomSheetProps['onPressUserProfile'];
+}>;
 
 export const ReactionContext = React.createContext<ReactionContextType | null>(null);
-export const ReactionProvider = ({ children }: Props) => {
+export const ReactionProvider = ({ children, onPressUserProfile }: Props) => {
  const chatCtx = useContext(SendbirdChatContext);
  const localizationCtx = useContext(LocalizationContext);
  const userProfileCtx = useContext(UserProfileContext);
@@ -73,11 +75,11 @@ export const ReactionProvider = ({ children }: Props) => {
  focusIndex: reactionUserListFocusIndex,
  };
 
- const sheetProps = {
+ const sheetProps: Omit<ReactionBottomSheetProps, 'visible' | 'onClose'> = {
  chatCtx,
  reactionCtx,
  localizationCtx,
- userProfileCtx,
+ onPressUserProfile: onPressUserProfile ?? userProfileCtx.show,
  onDismiss: () => {
  setState({});
  closeResolver.current?.();