@stream-io/video-react-native-sdk 1.3.7 → 1.4.0

package/dist/typescript/theme/theme.d.ts

@@ -1,30 +1,30 @@
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native/types';
-import { ColorScheme, FontStyle, FontTypes } from './types';
+import { ColorScheme, DimensionType, FontStyle, FontTypes, Insets } from './types';
+import { ColorValue } from 'react-native';
 export type Theme = {
     variants: {
-        buttonSizes: {
-            xs: number;
-            sm: number;
-            md: number;
-            lg: number;
-            xl: number;
-        };
-        iconSizes: {
-            xs: number;
-            sm: number;
-            md: number;
-            lg: number;
-            xl: number;
-        };
-        avatarSizes: {
-            xs: number;
-            sm: number;
-            md: number;
-            lg: number;
-            xl: number;
-        };
+        buttonSizes: DimensionType;
+        roundButtonSizes: DimensionType;
+        iconSizes: DimensionType;
+        avatarSizes: DimensionType;
+        fontSizes: DimensionType;
+        spacingSizes: DimensionType;
+        borderRadiusSizes: DimensionType;
+        insets: Insets;
     };
     typefaces: Record<FontTypes, FontStyle>;
+    defaults: {
+        color: ColorValue;
+        backgroundColor: ColorValue;
+        margin: number;
+        padding: number;
+        fontSize: number;
+        iconSize: number;
+        fontWeight: TextStyle['fontWeight'];
+        borderRadius: ViewStyle['borderRadius'];
+        borderColor: ColorValue;
+        borderWidth: ViewStyle['borderWidth'];
+    };
     colors: ColorScheme;
     avatar: {
         container: ViewStyle;
@@ -169,15 +169,6 @@ export type Theme = {
         buttonGroup: ViewStyle;
         deviceControlButtons: ViewStyle;
     };
-    callTopView: {
-        container: ViewStyle;
-        content: ViewStyle;
-        backIconContainer: ViewStyle;
-        leftElement: ViewStyle;
-        centerElement: ViewStyle;
-        rightElement: ViewStyle;
-        title: TextStyle;
-    };
     userInfo: {
         container: ViewStyle;
         avatarGroup: ViewStyle;
@@ -277,6 +268,7 @@ export type Theme = {
         buttonIcon: ViewStyle;
         buttonText: TextStyle;
     };
+    [component: string]: any;
 };
 export declare const defaultTheme: Theme;
 //# sourceMappingURL=theme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"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"}

package/dist/typescript/theme/types.d.ts

@@ -1,30 +1,77 @@
 import { ColorValue, TextStyle } from 'react-native';
+/**
+ * ColorScheme defines the complete color palette for the application's theme.
+ * It provides a centralized type definition for maintaining consistent colors
+ * across different UI components and contexts.
+ */
 export type ColorScheme = {
     primary: ColorValue;
-    error: ColorValue;
-    info: ColorValue;
-    static_black: ColorValue;
-    static_white: ColorValue;
-    static_overlay: ColorValue;
-    static_grey: ColorValue;
-    disabled: ColorValue;
-    text_low_emphasis: ColorValue;
-    text_high_emphasis: ColorValue;
-    controls_bg: ColorValue;
-    borders: ColorValue;
-    overlay: ColorValue;
-    overlay_dark: ColorValue;
-    bars: ColorValue;
-    content_bg: ColorValue;
-    dark_gray: ColorValue;
+    secondary: ColorValue;
+    success: ColorValue;
+    warning: ColorValue;
+    buttonPrimary: ColorValue;
+    buttonSecondary: ColorValue;
+    buttonSuccess: ColorValue;
+    buttonWarning: ColorValue;
+    buttonDisabled: ColorValue;
+    iconPrimary: ColorValue;
+    iconSecondary: ColorValue;
+    iconSuccess: ColorValue;
+    iconWarning: ColorValue;
+    sheetPrimary: ColorValue;
+    sheetSecondary: ColorValue;
+    sheetTertiary: ColorValue;
+    sheetOverlay: ColorValue;
+    textPrimary: ColorValue;
+    textSecondary: ColorValue;
     [key: string]: ColorValue;
 };
-export type ColorType = Record<'light' | 'dark', ColorScheme>;
 export type FontTypes = 'heading4' | 'heading5' | 'heading6' | 'subtitle' | 'subtitleBold' | 'caption' | 'bodyBold';
 export type FontStyle = {
     fontSize: TextStyle['fontSize'];
     fontWeight: TextStyle['fontWeight'];
 };
+/**
+ * DimensionType defines a set of standardized size values for component scaling.
+ * Each property represents a size tier from extra small (xs) to extra large (xl).
+ *
+ * @property xs - Extra small size (typically used for minimal spacing or compact elements)
+ * @property sm - Small size (used for tight but readable spacing)
+ * @property md - Medium size (default size for most components)
+ * @property lg - Large size (used for emphasized or prominent elements)
+ * @property xl - Extra large size (used for maximum emphasis or touch targets)
+ *
+ * Common use cases:
+ * - Padding and margin values
+ * - Icon sizes
+ * - Button dimensions
+ * - Component spacing
+ */
+export type DimensionType = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+/**
+ * Insets represent spacing measurements for the four edges of a component or screen.
+ *
+ * @property top - Distance from the upper edge (e.g., status bar, notch)
+ * @property right - Distance from the right edge (e.g., curved screen edges)
+ * @property bottom - Distance from the bottom edge (e.g., home indicator, navigation bar)
+ * @property left - Distance from the left edge (e.g., curved screen edges)
+ *
+ * Common use cases:
+ * - Safe area padding to avoid device UI elements
+ * - Component internal padding
+ * - Layout margin spacing
+ */
+export type Insets = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
 export type FontsScheme = Record<FontTypes, FontStyle>;
-export type Theme = ColorType;
 //# sourceMappingURL=types.d.ts.map

package/dist/typescript/theme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrD,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,CAAC;IACzB,YAAY,EAAE,UAAU,CAAC;IACzB,cAAc,EAAE,UAAU,CAAC;IAC3B,WAAW,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,UAAU,CAAC;IACrB,iBAAiB,EAAE,UAAU,CAAC;IAC9B,kBAAkB,EAAE,UAAU,CAAC;IAC/B,WAAW,EAAE,UAAU,CAAC;IACxB,OAAO,EAAE,UAAU,CAAC;IACpB,OAAO,EAAE,UAAU,CAAC;IACpB,YAAY,EAAE,UAAU,CAAC;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,UAAU,CAAC;IAEtB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,WAAW,CAAC,CAAC;AAE9D,MAAM,MAAM,SAAS,GACjB,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,cAAc,GACd,SAAS,GACT,UAAU,CAAC;AACf,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,UAAU,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAEvD,MAAM,MAAM,KAAK,GAAG,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,UAAU,CAAC;IACpB,SAAS,EAAE,UAAU,CAAC;IACtB,OAAO,EAAE,UAAU,CAAC;IACpB,OAAO,EAAE,UAAU,CAAC;IAEpB,aAAa,EAAE,UAAU,CAAC;IAC1B,eAAe,EAAE,UAAU,CAAC;IAC5B,aAAa,EAAE,UAAU,CAAC;IAC1B,aAAa,EAAE,UAAU,CAAC;IAC1B,cAAc,EAAE,UAAU,CAAC;IAE3B,WAAW,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,UAAU,CAAC;IAC1B,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE,UAAU,CAAC;IAExB,YAAY,EAAE,UAAU,CAAC;IACzB,cAAc,EAAE,UAAU,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC;IAC1B,YAAY,EAAE,UAAU,CAAC;IAEzB,WAAW,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,UAAU,CAAC;IAG1B,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,SAAS,GACjB,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,cAAc,GACd,SAAS,GACT,UAAU,CAAC;AACf,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,UAAU,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC"}

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

@@ -12,7 +12,7 @@ export declare const translations: {
         "End Stream": string;
         "Leave Stream": string;
         Live: string;
-        "Before Joining": string;
+        "Before joining": string;
         "Setup your audio and video": string;
         "Setup your audio": string;
         "You are first to Join the call.": string;
@@ -25,6 +25,10 @@ export declare const translations: {
         "You are about to join a call with id {{ callId }}.": string;
         "Preparing call": string;
         "You have left the call": string;
+        "You are about to join a call.": string;
+        "Currently there are no other participants in the call.": string;
+        "There is {{numberOfParticipants}} more person in the call.": string;
+        "There are {{numberOfParticipants}} more people in the call.": string;
     };
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/translations/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/translations/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAS,CAAC"}

package/dist/typescript/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
@@ -46,8 +46,8 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "1.11.5",
-    "@stream-io/video-react-bindings": "1.1.22",
+    "@stream-io/video-client": "1.11.6",
+    "@stream-io/video-react-bindings": "1.2.0",
     "intl-pluralrules": "2.0.1",
     "lodash.merge": "^4.6.2",
     "react-native-url-polyfill": "1.3.0",

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

@@ -1,11 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
-
-import {
-  CallTopView as DefaultCallTopView,
-  CallTopViewProps,
-} from '../CallTopView';
 import {
   CallParticipantsGrid,
   CallParticipantsGridProps,
@@ -45,10 +40,6 @@ export type StreamReactionType = StreamReaction & {
 
 type CallContentComponentProps = ParticipantViewComponentProps &
   Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
-    /**
-     * Component to customize the CallTopView component.
-     */
-    CallTopView?: React.ComponentType<CallTopViewProps> | null;
     /**
      * Component to customize the CallControls component.
      */
@@ -71,10 +62,6 @@ export type CallContentProps = Pick<
   HangUpCallButtonProps,
   'onHangupCallHandler'
 > &
-  Pick<
-    CallTopViewProps,
-    'onBackPressed' | 'onParticipantInfoPress' | 'ParticipantsInfoBadge'
-  > &
   CallContentComponentProps & {
     /**
      * This switches the participant's layout between the grid and the spotlight mode.
@@ -100,11 +87,8 @@ export type CallContentProps = Pick<
   };
 
 export const CallContent = ({
-  onBackPressed,
-  onParticipantInfoPress,
   onHangupCallHandler,
   CallParticipantsList,
-  CallTopView = DefaultCallTopView,
   CallControls = DefaultCallControls,
   FloatingParticipantView = DefaultFloatingParticipantView,
   ScreenShareOverlay = DefaultScreenShareOverlay,
@@ -113,7 +97,6 @@ export const CallContent = ({
   ParticipantReaction,
   ParticipantVideoFallback,
   ParticipantView,
-  ParticipantsInfoBadge,
   VideoRenderer,
   layout = 'grid',
   landscape = false,
@@ -125,6 +108,7 @@ export const CallContent = ({
     showRemoteParticipantInFloatingView,
     setShowRemoteParticipantInFloatingView,
   ] = useState<boolean>(false);
+  const styles = useStyles();
   const {
     theme: { callContent },
   } = useTheme();
@@ -213,20 +197,13 @@ export const CallContent = ({
         />
       )}
       <View style={[styles.container, landscapeStyles, callContent.container]}>
-        <View style={[styles.container, callContent.callParticipantsContainer]}>
+        <View style={[styles.content, callContent.callParticipantsContainer]}>
           <View
             style={[styles.view, callContent.topContainer]}
             // "box-none" disallows the container view to be not take up touches
             // and allows only the top and floating view (its child views) to take up the touches
             pointerEvents="box-none"
           >
-            {!isInPiPMode && CallTopView && (
-              <CallTopView
-                onBackPressed={onBackPressed}
-                onParticipantInfoPress={onParticipantInfoPress}
-                ParticipantsInfoBadge={ParticipantsInfoBadge}
-              />
-            )}
             {showFloatingView && FloatingParticipantView && (
               <FloatingParticipantView
                 participant={
@@ -258,10 +235,25 @@ export const CallContent = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  view: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          paddingBottom: theme.variants.insets.bottom,
+          paddingLeft: theme.variants.insets.left,
+          paddingRight: theme.variants.insets.right,
+          paddingTop: theme.variants.insets.top,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+        content: { flex: 1 },
+        view: {
+          ...StyleSheet.absoluteFillObject,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+      }),
+    [theme]
+  );
+};

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

@@ -2,7 +2,7 @@ import { useCall } from '@stream-io/video-react-bindings';
 import { getLogger } from '@stream-io/video-client';
 import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
-import { Phone } from '../../../icons';
+import { IconWrapper, Phone } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 /**
@@ -34,7 +34,7 @@ export const AcceptCallButton = ({
   const {
     theme: {
       colors,
-      variants: { buttonSizes },
+      variants: { buttonSizes, iconSizes },
       acceptCallButton,
     },
   } = useTheme();
@@ -57,11 +57,13 @@ export const AcceptCallButton = ({
   return (
     <CallControlsButton
       onPress={acceptCallHandler}
-      color={colors.info}
-      size={buttonSizes.lg}
+      color={colors.buttonSuccess}
+      size={buttonSizes.md}
       style={acceptCallButton}
     >
-      <Phone color={colors.static_white} />
+      <IconWrapper>
+        <Phone color={colors.iconPrimary} size={iconSizes.lg} />
+      </IconWrapper>
     </CallControlsButton>
   );
 };

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

@@ -40,7 +40,7 @@ export const CallControls = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.static_grey },
+        { backgroundColor: colors.sheetPrimary },
         callControls.container,
         landscapeStyles,
         style,
@@ -49,7 +49,7 @@ export const CallControls = ({
       <ToggleVideoPublishingButton />
       <ToggleAudioPublishingButton />
       <ToggleCameraFaceButton />
-      <HangUpCallButton onHangupCallHandler={onHangupCallHandler} />
+      <HangUpCallButton onPressHandler={onHangupCallHandler} />
     </View>
   );
 };

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

@@ -18,6 +18,10 @@ interface CallControlsButtonProps {
    * The background color of the button rendered.
    */
   color?: ColorValue;
+  /**
+   * The background color of the disabled button.
+   */
+  disabledColor?: ColorValue;
   /**
    * Boolean to enable/disable the button
    */
@@ -49,6 +53,7 @@ export const CallControlsButton = (
     children,
     disabled,
     color: colorProp,
+    disabledColor: disabledColorProp,
     style: styleProp,
     size,
     testID,
@@ -57,8 +62,9 @@ export const CallControlsButton = (
 
   const {
     theme: {
-      variants: { buttonSizes },
       colors,
+      defaults,
+      variants: { roundButtonSizes },
       callControlsButton: { container },
     },
   } = useTheme();
@@ -67,18 +73,18 @@ export const CallControlsButton = (
     styles.container,
     {
       backgroundColor: disabled
-        ? colors.disabled
-        : colorProp || colors.static_white,
+        ? disabledColorProp || colors.buttonDisabled
+        : colorProp || colors.buttonSecondary,
       opacity: pressed ? 0.2 : 1,
-      height: size || buttonSizes.sm,
-      width: size || buttonSizes.sm,
-      borderRadius: (size || buttonSizes.sm) / 2,
-      borderColor: colors.content_bg,
+      height: size || roundButtonSizes.lg,
+      width: size || roundButtonSizes.lg,
+      borderRadius: defaults.borderRadius,
     },
     styleProp?.container ?? null,
     container,
   ];
 
+  const childrenSize = (size || roundButtonSizes.lg) / 2 - 5;
   return (
     <Pressable
       disabled={disabled}
@@ -89,10 +95,7 @@ export const CallControlsButton = (
     >
       <View
         style={[
-          {
-            height: (size || buttonSizes.sm) / 2 - 5,
-            width: (size || buttonSizes.sm) / 2 - 5,
-          },
+          { height: childrenSize, width: childrenSize },
           styleProp?.svgContainer ?? null,
         ]}
       >
@@ -105,16 +108,7 @@ export const CallControlsButton = (
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
-    borderWidth: 1,
     alignItems: 'center',
-    // For iOS
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 8,
 
     // For android
     elevation: 6,

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

@@ -6,6 +6,7 @@ import { ButtonTestIds } from '../../../constants/TestIds';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { CallingState } from '@stream-io/video-client';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { IconWrapper } from '../../../icons/IconWrapper';
 
 /**
  * The props for the Hang up call button in the Call Controls.
@@ -42,7 +43,7 @@ export const HangUpCallButton = ({
   const { useCallCallingState } = useCallStateHooks();
   const callingState = useCallCallingState();
   const {
-    theme: { colors, hangupCallButton },
+    theme: { colors, hangupCallButton, variants },
   } = useTheme();
 
   const onPress = async () => {
@@ -67,20 +68,14 @@ export const HangUpCallButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={colors.error}
+      color={colors.buttonWarning}
       style={hangupCallButton}
       size={size}
       testID={ButtonTestIds.HANG_UP_CALL}
     >
-      <PhoneDown color={colors.static_white} />
+      <IconWrapper>
+        <PhoneDown color={colors.iconPrimary} size={variants.iconSizes.md} />
+      </IconWrapper>
     </CallControlsButton>
   );
 };
-
-// TODO: Check if this style is needed
-// This was passed to CallControlsButton as style prop
-// const styles = StyleSheet.create({
-//   button: {
-//     shadowColor: theme.light.error,
-//   },
-// });

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

@@ -24,12 +24,16 @@ export const IncomingCallControls = ({
   onRejectCallHandler,
 }: IncomingCallControlsProps) => {
   const {
-    theme: { incomingCall },
+    theme: {
+      incomingCall,
+      variants: { buttonSizes },
+    },
   } = useTheme();
   return (
     <View style={[styles.buttonGroup, incomingCall.buttonGroup]}>
       <RejectCallButton
         onPressHandler={onRejectCallHandler}
+        size={buttonSizes.md}
         rejectReason="decline"
       />
       <ToggleVideoPreviewButton />

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ToggleAudioPreviewButton } from './ToggleAudioPreviewButton';
 import { ToggleVideoPreviewButton } from './ToggleVideoPreviewButton';
@@ -11,6 +11,7 @@ export const LobbyControls = () => {
   const {
     theme: { lobbyControls },
   } = useTheme();
+  const styles = useStyles();
   return (
     <View style={[styles.container, lobbyControls.container]}>
       <ToggleAudioPreviewButton />
@@ -19,10 +20,17 @@ export const LobbyControls = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 12,
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingTop: theme.variants.spacingSizes.xs,
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+        },
+      }),
+    [theme]
+  );
+};

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

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { OwnCapability } from '@stream-io/video-client';
 import { ButtonTestIds } from '../../../constants/TestIds';
-import { Reaction } from '../../../icons';
+import { IconWrapper, Reaction } from '../../../icons';
 import { ReactionsPicker } from './internal/ReactionsPicker';
 import { LayoutChangeEvent, LayoutRectangle } from 'react-native';
 import { useTheme } from '../../../contexts/ThemeContext';
@@ -71,7 +71,9 @@ export const ReactionsButton = ({
           onPress={reactionsButtonHandler}
           onLayout={onReactionsButtonLayout}
         >
-          <Reaction color={colors.static_black} />
+          <IconWrapper>
+            <Reaction color={colors.iconPrimary} />
+          </IconWrapper>
         </CallControlsButton>
       </Restricted>
       {showReactionsPicker && (