@stream-io/video-react-native-sdk 0.0.28 → 0.1.0

package/dist/typescript/components/Participant/ParticipantView/ParticipantView.d.ts

@@ -6,7 +6,7 @@ import { ParticipantReactionProps } from './ParticipantReaction';
 import { ParticipantLabelProps } from './ParticipantLabel';
 import { ParticipantVideoFallbackProps } from './ParticipantVideoFallback';
 import { VideoRendererProps } from './VideoRenderer';
-export type ParticipantVideoType = VideoTrackType;
+import { CallContentProps } from '../../Call';
 export type ParticipantViewComponentProps = {
     /**
      * Component to customize the Label of the participant.
@@ -32,7 +32,7 @@ export type ParticipantViewComponentProps = {
 /**
  * Props to be passed for the Participant component.
  */
-export type ParticipantViewProps = ParticipantViewComponentProps & {
+export type ParticipantViewProps = ParticipantViewComponentProps & Pick<CallContentProps, 'supportedReactions'> & {
     /**
      * The participant that will be displayed.
      */
@@ -49,7 +49,7 @@ export type ParticipantViewProps = ParticipantViewComponentProps & {
     /**
      * The video track that is to be displayed.
      */
-    trackType?: ParticipantVideoType;
+    trackType?: VideoTrackType;
     /**
      * Custom style to be merged with the participant view.
      */
@@ -66,5 +66,5 @@ export type ParticipantViewProps = ParticipantViewComponentProps & {
  * and additional info. By an absence of a video track or when isVisible is truthy,
  * only an avatar and audio track will be rendered.
  */
-export declare const ParticipantView: ({ participant, trackType, isVisible, style, ParticipantLabel, ParticipantReaction, VideoRenderer, ParticipantNetworkQualityIndicator, ParticipantVideoFallback, videoZOrder, }: ParticipantViewProps) => JSX.Element;
+export declare const ParticipantView: ({ participant, trackType, isVisible, style, ParticipantLabel, ParticipantReaction, VideoRenderer, ParticipantNetworkQualityIndicator, ParticipantVideoFallback, videoZOrder, supportedReactions, }: ParticipantViewProps) => JSX.Element;
 //# sourceMappingURL=ParticipantView.d.ts.map

package/dist/typescript/components/Participant/ParticipantView/ParticipantView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipantView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Participant/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EACL,sBAAsB,EACtB,cAAc,EACf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,uCAAuC,EACxC,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAEL,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAEL,6BAA6B,EAC9B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,6BAA6B,GAAG;IAC1C;;OAEG;IACH,gBAAgB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,mBAAmB,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC;IACrE;;OAEG;IACH,wBAAwB,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,GAAG,IAAI,CAAC;IAC/E;;OAEG;IACH,kCAAkC,CAAC,EAAE,aAAa,CAAC,uCAAuC,CAAC,GAAG,IAAI,CAAC;IACnG;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,6BAA6B,GAAG;IACjE;;OAEG;IACH,WAAW,EAAE,sBAAsB,CAAC;IACpC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,mLAWzB,oBAAoB,gBA4CtB,CAAC"}
+{"version":3,"file":"ParticipantView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Participant/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EACL,sBAAsB,EACtB,cAAc,EACf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,uCAAuC,EACxC,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAEL,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAEL,6BAA6B,EAC9B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,MAAM,6BAA6B,GAAG;IAC1C;;OAEG;IACH,gBAAgB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,mBAAmB,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC;IACrE;;OAEG;IACH,wBAAwB,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,GAAG,IAAI,CAAC;IAC/E;;OAEG;IACH,kCAAkC,CAAC,EAAE,aAAa,CAAC,uCAAuC,CAAC,GAAG,IAAI,CAAC;IACnG;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,6BAA6B,GAC9D,IAAI,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,GAAG;IAC7C;;OAEG;IACH,WAAW,EAAE,sBAAsB,CAAC;IACpC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,eAAe,uMAYzB,oBAAoB,gBAiDtB,CAAC"}

package/dist/typescript/constants/index.d.ts

@@ -1,11 +1,11 @@
-import { StreamVideoConfig } from '../utils/StreamVideoRN/types';
+import { StreamReactionType } from '../components';
 export declare const FLOATING_VIDEO_VIEW_STYLE: {
     height: number;
     width: number;
     borderRadius: number;
 };
 export declare const LOBBY_VIDEO_VIEW_HEIGHT = 280;
-export declare const defaultEmojiReactions: StreamVideoConfig['supportedReactions'];
+export declare const defaultEmojiReactions: StreamReactionType[];
 export declare const Z_INDEX: {
     IN_BACK: number;
     IN_MIDDLE: number;

package/dist/typescript/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,eAAO,MAAM,yBAAyB;;;;CAIrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE,iBAAiB,CAAC,oBAAoB,CAmBzE,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,eAAO,MAAM,yBAAyB;;;;CAIrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE,kBAAkB,EAmBrD,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}

package/dist/typescript/utils/StreamVideoRN/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/StreamVideoRN/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAqB5C,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,MAAM,CAA+B;IACpD;;;;OAIG;IACH,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IAO1E;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAUvE,MAAM,CAAC,SAAS;CAGjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/StreamVideoRN/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAoB5C,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,MAAM,CAA+B;IAEpD;;;;OAIG;IACH,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IAO1E;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAUvE,MAAM,CAAC,SAAS;CAGjB"}

package/dist/typescript/utils/StreamVideoRN/types.d.ts

@@ -1,15 +1,6 @@
-import { StreamReaction, StreamVideoClient } from '@stream-io/video-client';
+import { StreamVideoClient } from '@stream-io/video-client';
 import { AndroidChannel } from '@notifee/react-native';
-type StreamReactionType = Required<StreamReaction> & {
-    icon: string | JSX.Element;
-};
 export type StreamVideoConfig = {
-    /**
-     * Reactions that are to be supported in the app.
-     *
-     * Note: This is an array of reactions that is rendered in the Reaction list.
-     */
-    supportedReactions: StreamReactionType[];
     /**
      * The configuration to be used for push notifications.
      * If undefined, push notifications will not be enabled for the app
@@ -91,5 +82,4 @@ export type StreamVideoConfig = {
         };
     };
 };
-export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/typescript/utils/StreamVideoRN/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/utils/StreamVideoRN/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,KAAK,kBAAkB,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG;IACnD,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,kBAAkB,EAAE,kBAAkB,EAAE,CAAC;IACzC;;;;OAIG;IACH,IAAI,CAAC,EAAE;QACL,GAAG,EAAE;YACH;;;eAGG;YACH,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,OAAO,EAAE;YACP;;;;;;;;eAQG;YACH,mBAAmB,EAAE,cAAc,CAAC;YACpC;;;;;;;eAOG;YACH,mCAAmC,EAAE;gBACnC,QAAQ,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;gBAC9C,OAAO,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;aAC9C,CAAC;YACF;;;eAGG;YACH,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF;;;;;;;;;;;;;;;;WAgBG;QACH,uBAAuB,EAAE,MAAM,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;QACtE,+EAA+E;QAC/E,kBAAkB,EAAE,MAAM,IAAI,CAAC;QAC/B,mIAAmI;QACnI,sBAAsB,EAAE,MAAM,IAAI,CAAC;KACpC,CAAC;IACF,iBAAiB,EAAE;QACjB,OAAO,EAAE;YACP;;eAEG;YACH,OAAO,EAAE,cAAc,CAAC;YACxB;;eAEG;YACH,iBAAiB,EAAE;gBACjB,KAAK,EAAE,MAAM,CAAC;gBACd,IAAI,EAAE,MAAM,CAAC;aACd,CAAC;SACH,CAAC;KACH,CAAC;CACH,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/utils/StreamVideoRN/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE;QACL,GAAG,EAAE;YACH;;;eAGG;YACH,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,OAAO,EAAE;YACP;;;;;;;;eAQG;YACH,mBAAmB,EAAE,cAAc,CAAC;YACpC;;;;;;;eAOG;YACH,mCAAmC,EAAE;gBACnC,QAAQ,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;gBAC9C,OAAO,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;aAC9C,CAAC;YACF;;;eAGG;YACH,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF;;;;;;;;;;;;;;;;WAgBG;QACH,uBAAuB,EAAE,MAAM,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;QACtE,+EAA+E;QAC/E,kBAAkB,EAAE,MAAM,IAAI,CAAC;QAC/B,mIAAmI;QACnI,sBAAsB,EAAE,MAAM,IAAI,CAAC;KACpC,CAAC;IACF,iBAAiB,EAAE;QACjB,OAAO,EAAE;YACP;;eAEG;YACH,OAAO,EAAE,cAAc,CAAC;YACxB;;eAEG;YACH,iBAAiB,EAAE;gBACjB,KAAK,EAAE,MAAM,CAAC;gBACd,IAAI,EAAE,MAAM,CAAC;aACd,CAAC;SACH,CAAC;KACH,CAAC;CACH,CAAC"}

package/dist/typescript/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.0.28";
+export declare const version = "0.1.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/typescript/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.0.28",
+  "version": "0.1.0",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",

package/src/components/Call/CallContent/CallContent.tsx

@@ -13,9 +13,10 @@ import {
 import {
   CallControlProps,
   CallControls as DefaultCallControls,
+  HangUpCallButtonProps,
 } from '../CallControls';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
-import { CallingState } from '@stream-io/video-client';
+import { CallingState, StreamReaction } from '@stream-io/video-client';
 import { useIncallManager } from '../../../hooks';
 import { Z_INDEX } from '../../../constants';
 import { useDebouncedValue } from '../../../utils/hooks';
@@ -25,42 +26,53 @@ import {
   ParticipantViewComponentProps,
 } from '../../Participant';
 import { useTheme } from '../../../contexts';
+import {
+  CallParticipantsListComponentProps,
+  CallParticipantsListProps,
+} from '../CallParticipantsList';
 
-export type CallParticipantsComponentProps = Pick<
-  CallParticipantsGridProps,
-  | 'CallParticipantsList'
-  | 'ParticipantLabel'
-  | 'ParticipantNetworkQualityIndicator'
-  | 'ParticipantReaction'
-  | 'ParticipantVideoFallback'
-  | 'ParticipantView'
-  | 'VideoRenderer'
-> & {
-  /**
-   * Component to customize the CallTopView component.
-   */
-  CallTopView?: React.ComponentType<CallTopViewProps> | null;
-  /**
-   * Component to customize the CallControls component.
-   */
-  CallControls?: React.ComponentType<CallControlProps> | null;
-  /**
-   * Component to customize the FloatingParticipantView.
-   */
-  FloatingParticipantView?: React.ComponentType<FloatingParticipantViewProps> | null;
+export type StreamReactionType = StreamReaction & {
+  icon: string;
 };
 
-export type CallContentProps = Pick<CallControlProps, 'onHangupCallHandler'> &
+type CallContentComponentProps = ParticipantViewComponentProps &
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
+    /**
+     * Component to customize the CallTopView component.
+     */
+    CallTopView?: React.ComponentType<CallTopViewProps> | null;
+    /**
+     * Component to customize the CallControls component.
+     */
+    CallControls?: React.ComponentType<CallControlProps> | null;
+    /**
+     * Component to customize the FloatingParticipantView.
+     */
+    FloatingParticipantView?: React.ComponentType<FloatingParticipantViewProps> | null;
+    /**
+     * Component to customize the CallParticipantsList.
+     */
+    CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
+  };
+
+export type CallContentProps = Pick<
+  HangUpCallButtonProps,
+  'onHangupCallHandler'
+> &
   Pick<
     CallTopViewProps,
     'onBackPressed' | 'onParticipantInfoPress' | 'ParticipantsInfoBadge'
   > &
-  CallParticipantsComponentProps & {
+  CallContentComponentProps & {
     /**
      * This switches the participant's layout between the grid and the spotlight mode.
      */
     layout?: 'grid' | 'spotlight';
     /**
+     * Reactions that are to be supported in the call
+     */
+    supportedReactions?: StreamReactionType[];
+    /*
      * Check if device is in landscape mode.
      * This will apply the landscape mode styles to the component.
      */
@@ -83,6 +95,7 @@ export const CallContent = ({
   ParticipantsInfoBadge,
   VideoRenderer,
   layout = 'grid',
+  supportedReactions,
   landscape = true,
 }: CallContentProps) => {
   const [
@@ -150,6 +163,7 @@ export const CallContent = ({
     showLocalParticipant: isRemoteParticipantInFloatingView,
     ParticipantView,
     CallParticipantsList,
+    supportedReactions,
   };
 
   const callParticipantsSpotlightProps: CallParticipantsSpotlightProps = {
@@ -157,6 +171,7 @@ export const CallContent = ({
     landscape,
     ParticipantView,
     CallParticipantsList,
+    supportedReactions,
   };
 
   const landScapeStyles: ViewStyle = {
@@ -187,6 +202,7 @@ export const CallContent = ({
                   : localParticipant
               }
               onPressHandler={handleFloatingViewParticipantSwitch}
+              supportedReactions={supportedReactions}
               {...participantViewProps}
             />
           )}

package/src/components/Call/CallControls/CallControls.tsx

@@ -4,24 +4,20 @@ import { ToggleAudioPublishingButton } from './ToggleAudioPublishingButton';
 import { ToggleVideoPublishingButton } from './ToggleVideoPublishingButton';
 import { ToggleCameraFaceButton } from './ToggleCameraFaceButton';
 import { Z_INDEX } from '../../../constants';
-import { HangUpCallButton } from './HangupCallButton';
+import { HangUpCallButton, HangUpCallButtonProps } from './HangupCallButton';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 /**
  * Props for the CallControls Component.
  */
-export type CallControlProps = Pick<ViewProps, 'style'> & {
-  /**
-   * Handler to override the hang up handler when the hangup button is pressed.
-   * @returns void
-   */
-  onHangupCallHandler?: () => void;
-  /**
-   * Check if device is in landscape mode.
-   * This will apply the landscape mode styles to the component.
-   */
-  landscape?: boolean;
-};
+export type CallControlProps = Pick<ViewProps, 'style'> &
+  Pick<HangUpCallButtonProps, 'onHangupCallHandler'> & {
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
+  };
 
 /**
  * A list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)

package/src/components/Call/CallControls/{ReactionButton.tsx → ReactionsButton.tsx}

@@ -5,14 +5,18 @@ import { OwnCapability } from '@stream-io/video-client';
 import { ButtonTestIds } from '../../../constants/TestIds';
 import { Reaction } from '../../../icons';
 import { ReactionsPicker } from './internal/ReactionsPicker';
-import { StreamVideoRN } from '../../../utils';
 import { LayoutChangeEvent, LayoutRectangle } from 'react-native';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { StreamReactionType } from '../CallContent';
 
 /**
  * Props for the Reaction button
  */
-export type ReactionButtonProps = {
+export type ReactionsButtonProps = {
+  /**
+   * Supported Reactions to be sent while in the call.
+   */
+  supportedReactions?: StreamReactionType[];
   /**
    * Handler to be called when the reaction button is pressed.
    */
@@ -23,7 +27,10 @@ export type ReactionButtonProps = {
  * Button to display the list of Reactions supported in the call.
  * On press, it opens a view that can be used to send Reaction.
  */
-export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
+export const ReactionsButton = ({
+  supportedReactions,
+  onPressHandler,
+}: ReactionsButtonProps) => {
   const [showReactionsPicker, setShowReactionsPicker] =
     useState<boolean>(false);
   const [reactionsButtonLayoutRectangle, setReactionsButtonLayoutRectangle] =
@@ -48,7 +55,7 @@ export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
     });
   };
 
-  const reactionButtonHandler = () => {
+  const reactionsButtonHandler = () => {
     if (onPressHandler) {
       onPressHandler();
       return;
@@ -61,7 +68,7 @@ export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
       <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
         <CallControlsButton
           testID={ButtonTestIds.REACTION}
-          onPress={reactionButtonHandler}
+          onPress={reactionsButtonHandler}
           onLayout={onReactionsButtonLayout}
         >
           <Reaction color={colors.static_black} />
@@ -69,7 +76,7 @@ export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
       </Restricted>
       {showReactionsPicker && (
         <ReactionsPicker
-          reactions={StreamVideoRN.getConfig().supportedReactions}
+          supportedReactions={supportedReactions}
           reactionsButtonLayoutRectangle={reactionsButtonLayoutRectangle}
           onRequestedClose={() => {
             setShowReactionsPicker(false);

package/src/components/Call/CallControls/index.tsx

@@ -7,7 +7,7 @@ export * from './ToggleAudioPublishingButton';
 export * from './ToggleVideoPublishingButton';
 export * from './ToggleCameraFaceButton';
 export * from './ChatButton';
-export * from './ReactionButton';
+export * from './ReactionsButton';
 export * from './CallControls';
 export * from './LobbyControls';
 export * from './IncomingCallControls';

package/src/components/Call/CallControls/internal/ReactionsPicker.tsx

@@ -6,26 +6,26 @@ import {
   Animated,
   Easing,
 } from 'react-native';
-import { StreamVideoConfig } from '../../../../utils/StreamVideoRN/types';
 import { useCall } from '@stream-io/video-react-bindings';
 import { SendReactionRequest } from '@stream-io/video-client';
 import { ComponentTestIds } from '../../../../constants/TestIds';
 import { useTheme } from '../../../../contexts/ThemeContext';
+import { ReactionsButtonProps } from '../ReactionsButton';
+import { defaultEmojiReactions } from '../../../../constants';
 
-interface Props {
-  reactions: StreamVideoConfig['supportedReactions'];
+type ReactionPickerProps = Pick<ReactionsButtonProps, 'supportedReactions'> & {
   reactionsButtonLayoutRectangle?: LayoutRectangle;
   onRequestedClose: () => void;
-}
+};
 
 const TOP_PADDING = 4;
 const REACTION_MARGIN_BOTTOM = 4;
 
 export const ReactionsPicker = ({
-  reactions,
+  supportedReactions = defaultEmojiReactions,
   reactionsButtonLayoutRectangle,
   onRequestedClose,
-}: Props) => {
+}: ReactionPickerProps) => {
   const {
     theme: { colors, reactionsPicker },
   } = useTheme();
@@ -37,9 +37,9 @@ export const ReactionsPicker = ({
     // the top padding
     TOP_PADDING +
     // take margins into account
-    REACTION_MARGIN_BOTTOM * reactions.length +
+    REACTION_MARGIN_BOTTOM * supportedReactions.length +
     // the size of the reaction icon items (same size as reactions button * amount of reactions)
-    reactionItemSize * reactions.length;
+    reactionItemSize * supportedReactions.length;
 
   const reactionsPopupStyle = {
     // we should show the popup right above the reactions button and not top of it
@@ -112,9 +112,9 @@ export const ReactionsPicker = ({
         }}
       >
         {/* all the reactions */}
-        {reactions.map((reaction) => (
+        {supportedReactions.map((supportedReaction) => (
           <Pressable
-            key={reaction.emoji_code}
+            key={supportedReaction.emoji_code}
             style={[
               styles.reactionItem,
               reactionItemStyle,
@@ -126,9 +126,9 @@ export const ReactionsPicker = ({
             ]}
             onPress={() => {
               onClose({
-                type: reaction.type,
-                custom: reaction.custom,
-                emoji_code: reaction.emoji_code,
+                type: supportedReaction.type,
+                custom: supportedReaction.custom,
+                emoji_code: supportedReaction.emoji_code,
               });
             }}
           >
@@ -148,7 +148,7 @@ export const ReactionsPicker = ({
                 reactionsPicker.reactionText,
               ]}
             >
-              {reaction.icon}
+              {supportedReaction.icon}
             </Animated.Text>
           </Pressable>
         ))}

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -4,30 +4,29 @@ import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
-  CallParticipantsListProps,
   CallParticipantsListComponentProps,
 } from '../CallParticipantsList/CallParticipantsList';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { CallContentProps } from '../CallContent';
+import { ParticipantViewComponentProps } from '../../Participant';
 
 /**
  * Props for the CallParticipantsGrid component.
  */
-export type CallParticipantsGridProps = CallParticipantsListComponentProps & {
-  /**
-   * Component to customize the CallParticipantsList.
-   */
-  CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
-  /**
-   * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
-   */
-  showLocalParticipant?: boolean;
-  /**
-   * Check if device is in landscape mode.
-   * This will apply the landscape mode styles to the component.
-   */
-  landscape?: boolean;
-};
+export type CallParticipantsGridProps = ParticipantViewComponentProps &
+  Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList'> &
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
+    /**
+     * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
+     */
+    showLocalParticipant?: boolean;
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
+  };
 
 /**
  * Component used to display the list of participants in a grid mode.
@@ -41,6 +40,7 @@ export const CallParticipantsGrid = ({
   ParticipantView,
   VideoRenderer,
   showLocalParticipant = false,
+  supportedReactions,
   landscape,
 }: CallParticipantsGridProps) => {
   const {
@@ -89,6 +89,7 @@ export const CallParticipantsGrid = ({
       {CallParticipantsList && (
         <CallParticipantsList
           participants={participants}
+          supportedReactions={supportedReactions}
           landscape={landscape}
           {...participantViewProps}
         />

package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -11,23 +11,20 @@ import { ComponentTestIds } from '../../../constants/TestIds';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
   CallParticipantsListComponentProps,
-  CallParticipantsListProps,
 } from '../CallParticipantsList/CallParticipantsList';
 import {
   ParticipantView as DefaultParticipantView,
   ParticipantViewComponentProps,
 } from '../../Participant';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { CallContentProps } from '../CallContent';
 
 /**
  * Props for the CallParticipantsSpotlight component.
  */
-export type CallParticipantsSpotlightProps =
-  CallParticipantsListComponentProps & {
-    /**
-     * Component to customize the CallParticipantsList.
-     */
-    CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
+export type CallParticipantsSpotlightProps = ParticipantViewComponentProps &
+  Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList'> &
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
      * Check if device is in landscape mode.
      * This will apply the landscape mode styles to the component.
@@ -50,6 +47,7 @@ export const CallParticipantsSpotlight = ({
   ParticipantVideoFallback,
   ParticipantView = DefaultParticipantView,
   VideoRenderer,
+  supportedReactions,
   landscape,
 }: CallParticipantsSpotlightProps) => {
   const {
@@ -115,6 +113,7 @@ export const CallParticipantsSpotlight = ({
           trackType={
             isScreenShareOnSpotlight ? 'screenShareTrack' : 'videoTrack'
           }
+          supportedReactions={supportedReactions}
           {...participantViewProps}
         />
       )}
@@ -130,6 +129,7 @@ export const CallParticipantsSpotlight = ({
               participants={
                 isScreenShareOnSpotlight ? allParticipants : otherParticipants
               }
+              supportedReactions={supportedReactions}
               horizontal={!landscape}
               numberOfColumns={!landscape ? 2 : 1}
               landscape={landscape}

package/src/components/Call/CallParticipantsList/CallParticipantsList.tsx

@@ -21,6 +21,7 @@ import {
   ParticipantViewComponentProps,
   ParticipantViewProps,
 } from '../../Participant/ParticipantView';
+import { CallContentProps } from '../CallContent';
 
 type FlatListProps = React.ComponentProps<
   typeof FlatList<StreamVideoParticipant | StreamVideoLocalParticipant>
@@ -42,26 +43,27 @@ export type CallParticipantsListComponentProps =
 /**
  * Props of the CallParticipantsList component
  */
-export type CallParticipantsListProps = CallParticipantsListComponentProps & {
-  /**
-   * The list of participants to display in the list
-   */
-  participants: (StreamVideoParticipant | StreamVideoLocalParticipant)[];
-  /**
-   * The number of columns to display in the list of participants while in vertical or horizontal scrolling mode. This property is only used when there are more than 2 participants.
-   * @default 2
-   */
-  numberOfColumns?: number;
-  /**
-   * If true, the list will be displayed in horizontal scrolling mode
-   */
-  horizontal?: boolean;
-  /**
-   * Check if phone is in landscape mode.
-   * This will apply the landscape mode styles to the component.
-   */
-  landscape?: boolean;
-};
+export type CallParticipantsListProps = CallParticipantsListComponentProps &
+  Pick<CallContentProps, 'supportedReactions'> & {
+    /**
+     * The list of participants to display in the list
+     */
+    participants: (StreamVideoParticipant | StreamVideoLocalParticipant)[];
+    /**
+     * The number of columns to display in the list of participants while in vertical or horizontal scrolling mode. This property is only used when there are more than 2 participants.
+     * @default 2
+     */
+    numberOfColumns?: number;
+    /**
+     * If true, the list will be displayed in horizontal scrolling mode
+     */
+    horizontal?: boolean;
+    /**
+     * Check if phone is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
+  };
 
 /**
  * This component displays a list of participants in a FlatList.
@@ -79,6 +81,7 @@ export const CallParticipantsList = ({
   ParticipantReaction,
   ParticipantVideoFallback,
   VideoRenderer,
+  supportedReactions,
   landscape,
 }: CallParticipantsListProps) => {
   const [containerLayout, setContainerLayout] = useState({
@@ -195,6 +198,7 @@ export const CallParticipantsList = ({
               style={itemContainerStyle}
               trackType="videoTrack"
               isVisible={isVisible}
+              supportedReactions={supportedReactions}
               {...participantProps}
             />
           )}
@@ -220,6 +224,7 @@ export const CallParticipantsList = ({
                 style={styles.flexed}
                 trackType="videoTrack"
                 key={keyExtractor(participant, index)}
+                supportedReactions={supportedReactions}
                 {...participantProps}
               />
             )

package/src/components/Participant/FloatingParticipantView/index.tsx

@@ -10,7 +10,10 @@ import { FLOATING_VIDEO_VIEW_STYLE, Z_INDEX } from '../../../constants';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { VideoSlash } from '../../../icons';
 import FloatingView from './FloatingView';
-import { CallParticipantsListProps } from '../../Call';
+import {
+  CallContentProps,
+  CallParticipantsListComponentProps,
+} from '../../Call';
 import { FloatingViewAlignment } from './FloatingView/common';
 import {
   ParticipantView as DefaultParticipantView,
@@ -29,7 +32,8 @@ export type FloatingParticipantViewAlignment =
  * Props to be passed for the LocalVideoView component.
  */
 export type FloatingParticipantViewProps = ParticipantViewComponentProps &
-  Pick<CallParticipantsListProps, 'ParticipantView'> & {
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> &
+  Pick<CallContentProps, 'supportedReactions'> & {
     /**
      * Determines where the floating participant video will be placed.
      */
@@ -85,6 +89,7 @@ export const FloatingParticipantView = ({
   ParticipantNetworkQualityIndicator,
   ParticipantReaction,
   VideoRenderer,
+  supportedReactions,
 }: FloatingParticipantViewProps) => {
   const {
     theme: { colors, floatingParticipantsView },
@@ -160,6 +165,7 @@ export const FloatingParticipantView = ({
                 // video z order must be one above the one used in grid view
                 // (which uses the default: 0)
                 videoZOrder={1}
+                supportedReactions={supportedReactions}
                 {...participantViewProps}
               />
             )}