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

package/src/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.tsx

@@ -27,11 +27,11 @@ const useConnectionQualitySignalColors = (
 
   switch (connectionQuality) {
     case SfuModels.ConnectionQuality.EXCELLENT:
-      return [colors.primary, colors.primary, colors.primary];
+      return [colors.iconSuccess, colors.iconSuccess, colors.iconSuccess];
     case SfuModels.ConnectionQuality.GOOD:
-      return [colors.primary, colors.primary, colors.static_white];
+      return [colors.iconSuccess, colors.iconSuccess, colors.iconPrimary];
     case SfuModels.ConnectionQuality.POOR:
-      return [colors.error, colors.static_white, colors.static_white];
+      return [colors.iconWarning, colors.iconPrimary, colors.iconPrimary];
     default:
       return null;
   }
@@ -57,7 +57,7 @@ export const ParticipantNetworkQualityIndicator = ({
       style={[
         styles.container,
         {
-          backgroundColor: colors.static_overlay,
+          backgroundColor: colors.sheetOverlay,
           height: iconSizes.lg,
           width: iconSizes.lg,
         },
@@ -98,6 +98,6 @@ const styles = StyleSheet.create({
   container: {
     zIndex: Z_INDEX.IN_FRONT,
     alignSelf: 'flex-end',
-    borderRadius: 5,
+    borderTopLeftRadius: 5,
   },
 });

package/src/components/Participant/ParticipantView/ParticipantReaction.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useCall } from '@stream-io/video-react-bindings';
 import { Z_INDEX, defaultEmojiReactions } from '../../../constants';
@@ -32,12 +32,9 @@ export const ParticipantReaction = ({
 }: ParticipantReactionProps) => {
   const { reaction, sessionId } = participant;
   const call = useCall();
+  const styles = useStyles();
   const {
-    theme: {
-      typefaces,
-      variants: { iconSizes },
-      participantReaction,
-    },
+    theme: { typefaces, participantReaction },
   } = useTheme();
 
   useEffect(() => {
@@ -60,26 +57,39 @@ export const ParticipantReaction = ({
     );
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          height: iconSizes.md,
-          width: iconSizes.md,
-        },
-        participantReaction.container,
-      ]}
-    >
-      <Text style={[participantReaction.reaction, typefaces.heading6]}>
-        {currentReaction?.icon}
-      </Text>
-    </View>
+    currentReaction?.icon != null && (
+      <View style={[styles.container, participantReaction.container]}>
+        <View style={styles.reaction}>
+          <Text style={[participantReaction.reaction, typefaces.heading6]}>
+            {currentReaction?.icon}
+          </Text>
+        </View>
+      </View>
+    )
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'flex-start',
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+        reaction: {
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          backgroundColor: theme.colors.sheetOverlay,
+          alignSelf: 'flex-end',
+          marginRight: theme.variants.spacingSizes.md,
+          marginTop: theme.variants.spacingSizes.md,
+          height: theme.variants.roundButtonSizes.md,
+          width: theme.variants.roundButtonSizes.md,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }),
+    [theme]
+  );
+};

package/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx

@@ -29,18 +29,14 @@ export const ParticipantVideoFallback = ({
     <View
       style={[
         styles.container,
-        {
-          backgroundColor: colors.static_grey,
-        },
+        { backgroundColor: colors.sheetTertiary },
         participantVideoFallback.container,
       ]}
     >
       {!image ? (
         <Text
           style={[
-            {
-              color: colors.static_white,
-            },
+            { color: colors.textPrimary },
             typefaces.bodyBold,
             participantVideoFallback.label,
           ]}

package/src/components/Participant/ParticipantView/ParticipantView.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType } from 'react';
+import React, { ComponentType, useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import {
   StreamVideoParticipant,
@@ -113,13 +113,12 @@ export const ParticipantView = ({
     theme: { colors, participantView },
   } = useTheme();
   const { isSpeaking, userId } = participant;
+  const styles = useStyles();
   const isScreenSharing = trackType === 'screenShareTrack';
   const applySpeakerStyle = isSpeaking && !isScreenSharing;
   const speakerStyle = applySpeakerStyle && [
     styles.highligtedContainer,
-    {
-      borderColor: colors.primary,
-    },
+    { borderColor: colors.buttonPrimary },
     participantView.highligtedContainer,
   ];
 
@@ -148,7 +147,13 @@ export const ParticipantView = ({
           videoZOrder={videoZOrder}
         />
       )}
-      <View style={[styles.footerContainer, participantView.footerContainer]}>
+      <View
+        style={[
+          styles.footerContainer,
+          participantView.footerContainer,
+          !ParticipantLabel && styles.networkIndicatorOnly,
+        ]}
+      >
         {ParticipantLabel && (
           <ParticipantLabel participant={participant} trackType={trackType} />
         )}
@@ -160,20 +165,26 @@ export const ParticipantView = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'space-between',
-    padding: 4,
-    overflow: 'hidden',
-    borderWidth: 2,
-    borderColor: 'transparent',
-  },
-  footerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  highligtedContainer: {
-    borderWidth: 2,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          overflow: 'hidden',
+          justifyContent: 'flex-end',
+          borderRadius: theme.variants.borderRadiusSizes.md,
+        },
+        footerContainer: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        },
+        highligtedContainer: {
+          borderWidth: 2,
+        },
+        networkIndicatorOnly: { justifyContent: 'flex-end' },
+      }),
+    [theme]
+  );
+};

package/src/components/Participant/ParticipantView/SpeechIndicator.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+import { useTheme } from '../../..';
+
+/**
+ * Props for the SpeechIndicator component.
+ */
+export type SpeechIndicatorProps = {
+  /**
+   * Indicates whether the participant is speaking.
+   * If true, the animation will run, otherwise the bars will remain static.
+   */
+  isSpeaking: boolean;
+};
+
+/**
+ * The SpeechIndicator component displays animated bars to indicate speech activity.
+ * The bars animate when `isSpeaking` is true, mimicking a sound meter.
+ */
+export const SpeechIndicator = ({ isSpeaking }: SpeechIndicatorProps) => {
+  const styles = useStyles();
+
+  const [animationValues] = useState(() => [
+    new Animated.Value(0.6),
+    new Animated.Value(0.6),
+    new Animated.Value(0.6),
+  ]);
+
+  useEffect(() => {
+    if (isSpeaking) {
+      animationValues.forEach((animatedValue, index) => {
+        Animated.loop(
+          Animated.sequence([
+            Animated.timing(animatedValue, {
+              toValue: index % 2 === 0 ? 0.3 : 1.1,
+              duration: (index + 1) * 300,
+              useNativeDriver: true,
+            }),
+            Animated.timing(animatedValue, {
+              toValue: 0.6,
+              duration: (index + 1) * 300,
+              useNativeDriver: true,
+            }),
+          ])
+        ).start();
+      });
+    } else {
+      animationValues.forEach((animatedValue) => {
+        animatedValue.setValue(0.3); // Set a smaller value for a reduced default height
+      });
+    }
+  }, [isSpeaking, animationValues]);
+
+  const barStyle = (animatedValue: Animated.Value) => ({
+    transform: [{ scaleY: animatedValue }],
+  });
+
+  return (
+    <View style={[styles.container]}>
+      {animationValues.map((animatedValue, index) => (
+        <Animated.View
+          key={index}
+          style={[
+            styles.bar,
+            isSpeaking ? barStyle(animatedValue) : styles.smallBar, // Apply smaller bar style when not speaking
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          height: theme.variants.roundButtonSizes.sm,
+          width: theme.variants.roundButtonSizes.sm,
+          borderRadius: 5,
+          gap: 1,
+          backgroundColor: theme.colors.sheetOverlay,
+          padding: 5,
+        },
+        smallBar: {
+          height: '30%', // Smaller default height when animation is not running
+        },
+        bar: {
+          width: 3,
+          height: '100%',
+          backgroundColor: theme.colors.iconSecondary,
+          borderRadius: 2,
+        },
+      }),
+    [theme]
+  );
+};
+
+export default SpeechIndicator;

package/src/components/utility/Avatar.tsx

@@ -69,9 +69,7 @@ export const Avatar = (props: AvatarProps) => {
           height: size,
           width: size,
         },
-        {
-          backgroundColor: colors.primary,
-        },
+        { backgroundColor: colors.primary },
         avatar.container,
         styleProp?.container,
       ]}
@@ -88,7 +86,7 @@ export const Avatar = (props: AvatarProps) => {
         <Text
           style={[
             styles.text,
-            { fontSize: size / 2, color: colors.bars },
+            { fontSize: size / 2, color: colors.textPrimary },
             typefaces.heading6,
             avatar.text,
             styleProp?.text,

package/src/components/utility/ScreenShareOverlay.tsx

@@ -33,7 +33,7 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => {
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.static_grey },
+        { backgroundColor: colors.sheetTertiary },
         screenshareOverlay.container,
       ]}
     >
@@ -41,7 +41,7 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => {
         style={[
           styles.text,
           typefaces.subtitleBold,
-          { color: colors.static_white },
+          { color: colors.textPrimary },
           screenshareOverlay.text,
         ]}
       >
@@ -53,7 +53,7 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => {
           return [
             styles.button,
             {
-              backgroundColor: colors.dark_gray,
+              backgroundColor: colors.sheetSecondary,
               opacity: pressed ? 0.2 : 1,
             },
             screenshareOverlay.button,
@@ -67,12 +67,12 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => {
             screenshareOverlay.buttonIcon,
           ]}
         >
-          <StopScreenShare color={colors.static_white} />
+          <StopScreenShare size={iconSizes.xs} color={colors.iconPrimary} />
         </View>
         <Text
           style={[
             styles.buttonText,
-            { color: colors.static_white },
+            { color: colors.textPrimary },
             screenshareOverlay.buttonText,
           ]}
         >

package/src/constants/TestIds.ts

@@ -1,6 +1,7 @@
 export enum IconTestIds {
   MUTED_VIDEO = 'muted-video-icon',
   HANG_UP_CALL = 'hang-up-call-icon',
+  PHONE = 'phone-icon',
   SCREEN_SHARE_INDICATOR = 'screen-share-indicator-icon',
   SCREEN_SHARE = 'screen-share-icon',
 }
@@ -15,7 +16,6 @@ export enum ComponentTestIds {
   PARTICIPANTS_INFO = 'participants-info',
   PARTICIPANT_SCREEN_SHARING = 'participant-screen-sharing',
   REACTIONS_PICKER = 'reactions-picker',
-  CHAT_UNREAD_BADGE_COUNT_INDICATOR = 'chat-unread-badge-count-indicator',
 }
 
 export enum ButtonTestIds {

package/src/constants/index.ts

@@ -6,9 +6,13 @@ export const FLOATING_VIDEO_VIEW_STYLE = {
   borderRadius: 10,
 };
 
-export const LOBBY_VIDEO_VIEW_HEIGHT = 240;
-
 export const defaultEmojiReactions: StreamReactionType[] = [
+  {
+    type: 'reaction',
+    emoji_code: ':rolling_on_the_floor_laughing:',
+    custom: {},
+    icon: '🤣',
+  },
   {
     type: 'reaction',
     emoji_code: ':like:',
@@ -16,10 +20,16 @@ export const defaultEmojiReactions: StreamReactionType[] = [
     icon: '👍',
   },
   {
-    type: 'raised-hand',
-    emoji_code: ':raise-hand:',
+    type: 'reaction',
+    emoji_code: ':rocket:',
     custom: {},
-    icon: '✋',
+    icon: '🚀',
+  },
+  {
+    type: 'reaction',
+    emoji_code: ':dislike:',
+    custom: {},
+    icon: '👎',
   },
   {
     type: 'reaction',
@@ -27,6 +37,18 @@ export const defaultEmojiReactions: StreamReactionType[] = [
     custom: {},
     icon: '🎉',
   },
+  {
+    type: 'reaction',
+    emoji_code: ':raised-hands:',
+    custom: {},
+    icon: '🙌',
+  },
+  {
+    type: 'raised-hand',
+    emoji_code: ':raised-hand:',
+    custom: {},
+    icon: '✋',
+  },
 ];
 
 export const Z_INDEX = {

package/src/icons/CameraSwitch.tsx

@@ -4,12 +4,13 @@ import { ColorValue } from 'react-native/types';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const CameraSwitch = ({ color }: Props) => (
-  <Svg viewBox="0 0 28 23">
+export const CameraSwitch = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 24 24'} width={size} height={size}>
     <Path
-      d="M3.86621 22.0075H24.1117C26.5225 22.0075 27.7948 20.7575 27.7948 18.3691V6.65036C27.7948 4.26196 26.5225 3.01196 24.1117 3.01196H21.143C20.2725 3.01196 19.9934 2.86687 19.4466 2.29768L18.5649 1.34902C17.9845 0.735177 17.393 0.433838 16.2546 0.433838H11.6675C10.5292 0.433838 9.93764 0.735177 9.35728 1.34902L8.47558 2.29768C7.93987 2.85571 7.64969 3.01196 6.77916 3.01196H3.86621C1.4555 3.01196 0.194336 4.26196 0.194336 6.65036V18.3691C0.194336 20.7575 1.4555 22.0075 3.86621 22.0075ZM10.0492 8.34678C9.66978 7.90036 9.80371 7.29768 10.3729 6.86241C11.3104 6.11464 12.6274 5.65705 13.989 5.65705C17.1363 5.65705 19.614 7.75527 20.1609 10.7798H21.21C21.768 10.7798 21.9131 11.3155 21.5894 11.762L19.7925 14.2508C19.4689 14.7084 18.9109 14.6861 18.5872 14.2508L16.7792 11.762C16.4443 11.3267 16.6006 10.7798 17.1586 10.7798H18.2747C17.7725 8.9383 16.0649 7.57669 13.989 7.57669C13.0068 7.57669 12.2479 7.87803 11.489 8.46955C10.9756 8.82669 10.4399 8.80437 10.0492 8.34678ZM6.36621 11.9517L8.15192 9.47402C8.48675 9.01643 9.03362 9.03875 9.35728 9.47402L11.1765 11.9517C11.5001 12.387 11.3439 12.9338 10.7859 12.9338H9.72558C10.2278 14.7754 11.9354 16.137 14.0113 16.137C14.9934 16.137 15.7524 15.8356 16.5113 15.2553C17.0247 14.887 17.5716 14.9204 17.951 15.3669C18.3305 15.8133 18.2077 16.4383 17.6274 16.8624C16.6899 17.6102 15.3841 18.0566 14.0113 18.0566C10.8751 18.0566 8.3863 15.9584 7.83942 12.9338H6.74567C6.18764 12.9338 6.04255 12.3981 6.36621 11.9517Z"
+      d="M20 5.5H16.83L15.59 4.15C15.22 3.74 14.68 3.5 14.12 3.5H9.88C9.32 3.5 8.78 3.74 8.4 4.15L7.17 5.5H4C2.9 5.5 2 6.4 2 7.5V19.5C2 20.6 2.9 21.5 4 21.5H20C21.1 21.5 22 20.6 22 19.5V7.5C22 6.4 21.1 5.5 20 5.5ZM13.67 18.2C13.15 18.39 12.59 18.5 12 18.5C9.24 18.5 7 16.26 7 13.5H5L7.5 11L10 13.5H8C8 15.71 9.79 17.5 12 17.5C12.46 17.5 12.91 17.42 13.32 17.27C13.51 17.2 13.71 17.24 13.85 17.38C14.11 17.64 14.01 18.07 13.67 18.2ZM16.5 16L14 13.5H16C16 11.29 14.21 9.5 12 9.5C11.54 9.5 11.09 9.58 10.68 9.73C10.49 9.8 10.29 9.76 10.15 9.62C9.89 9.36 9.99 8.93 10.33 8.8C10.85 8.61 11.41 8.5 12 8.5C14.76 8.5 17 10.74 17 13.5H19L16.5 16Z"
       fill={color}
     />
   </Svg>

package/src/icons/IconWrapper.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+export const IconWrapper = ({ children }: { children: ReactNode }) => {
+  return <View style={styles.container}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+});

package/src/icons/Lock.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+export const Lock = ({ color, size }: Props) => {
+  return (
+    <Svg viewBox={'0 0 23 25'} width={size} height={size}>
+      <Path
+        fill={color}
+        d="M15.1992 23.5273C15.2852 23.3164 15.3281 23.1055 15.3281 22.8945C15.3281 22.3633 15.1836 21.8438 14.8945 21.3359L9.82031 12.2539C9.53125 11.7305 9.13672 11.332 8.63672 11.0586C8.14453 10.7773 7.625 10.6367 7.07812 10.6367C6.96094 10.6367 6.86719 10.6406 6.79688 10.6484C6.96875 10.4531 7.17188 10.293 7.40625 10.168C7.64844 10.043 7.92578 9.96484 8.23828 9.93359V7.08594C8.23828 5.98438 8.39844 5.02344 8.71875 4.20312C9.04688 3.38281 9.49219 2.70312 10.0547 2.16406C10.6172 1.61719 11.2539 1.21094 11.9648 0.945312C12.6758 0.671875 13.4141 0.535156 14.1797 0.535156C14.9453 0.535156 15.6836 0.671875 16.3945 0.945312C17.1055 1.21094 17.7422 1.61719 18.3047 2.16406C18.8672 2.70312 19.3125 3.38281 19.6406 4.20312C19.9688 5.02344 20.1328 5.98438 20.1328 7.08594V9.93359C20.7969 10.0273 21.3008 10.3047 21.6445 10.7656C21.9961 11.2188 22.1719 11.8516 22.1719 12.6641V20.7383C22.1719 21.6602 21.9492 22.3555 21.5039 22.8242C21.0586 23.293 20.4062 23.5273 19.5469 23.5273H15.1992ZM10.0898 9.88672H18.2695V6.82812C18.2695 5.84375 18.0781 5.01562 17.6953 4.34375C17.3203 3.67188 16.8203 3.16406 16.1953 2.82031C15.5781 2.47656 14.9062 2.30469 14.1797 2.30469C13.4453 2.30469 12.7695 2.47656 12.1523 2.82031C11.5352 3.16406 11.0352 3.67188 10.6523 4.34375C10.2773 5.01562 10.0898 5.84375 10.0898 6.82812V9.88672ZM1.98047 24.4648C1.49609 24.4648 1.11328 24.3125 0.832031 24.0078C0.542969 23.7031 0.398438 23.332 0.398438 22.8945C0.398438 22.6211 0.46875 22.3633 0.609375 22.1211L5.68359 13.0391C5.83203 12.7734 6.03125 12.5742 6.28125 12.4414C6.53125 12.3008 6.78906 12.2305 7.05469 12.2305C7.32031 12.2305 7.57422 12.3008 7.81641 12.4414C8.05859 12.5742 8.25781 12.7734 8.41406 13.0391L13.5 22.1094C13.6406 22.3594 13.7109 22.6211 13.7109 22.8945C13.7109 23.332 13.5664 23.7031 13.2773 24.0078C12.9961 24.3125 12.6133 24.4648 12.1289 24.4648H1.98047ZM7.05469 22.6836C7.32812 22.6836 7.55859 22.5859 7.74609 22.3906C7.94141 22.1953 8.04297 21.9609 8.05078 21.6875C8.05078 21.4219 7.95312 21.1914 7.75781 20.9961C7.5625 20.8008 7.32812 20.7031 7.05469 20.7031C6.78906 20.7031 6.55859 20.8008 6.36328 20.9961C6.16797 21.1914 6.07031 21.4219 6.07031 21.6875C6.07031 21.9609 6.16797 22.1953 6.36328 22.3906C6.55859 22.5859 6.78906 22.6836 7.05469 22.6836ZM7.05469 19.8828C7.26562 19.8828 7.43359 19.8203 7.55859 19.6953C7.69141 19.5703 7.76172 19.4062 7.76953 19.2031L7.86328 15.8516C7.87109 15.6172 7.80078 15.4258 7.65234 15.2773C7.50391 15.1211 7.30469 15.043 7.05469 15.043C6.8125 15.043 6.61719 15.1211 6.46875 15.2773C6.32031 15.4258 6.25 15.6172 6.25781 15.8516L6.35156 19.2031C6.35156 19.4062 6.41797 19.5703 6.55078 19.6953C6.68359 19.8203 6.85156 19.8828 7.05469 19.8828Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/Mic.tsx

@@ -4,16 +4,13 @@ import { ColorValue } from 'react-native/types';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const Mic = ({ color }: Props) => (
-  <Svg viewBox="0 0 22 28">
+export const Mic = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 27 27'} width={size} height={size}>
     <Path
-      d="M11 17.6c2.459 0 4.444-1.923 4.444-4.305V4.683C15.444 2.301 13.46.378 11 .378 8.54.378 6.555 2.3 6.555 4.683v8.612c0 2.382 1.986 4.305 4.445 4.305Z"
-      fill={color}
-    />
-    <Path
-      d="M18.407 13.295c0 3.96-3.318 7.176-7.407 7.176-4.09 0-7.408-3.215-7.408-7.176H.63c0 5.066 3.867 9.228 8.89 9.931v4.42h2.962v-4.42c5.022-.703 8.89-4.865 8.89-9.931h-2.964Z"
+      d="M13.9992 16.9166C15.9358 16.9166 17.4992 15.3533 17.4992 13.4166V6.41663C17.4992 4.47996 15.9358 2.91663 13.9992 2.91663C12.0625 2.91663 10.4992 4.47996 10.4992 6.41663V13.4166C10.4992 15.3533 12.0625 16.9166 13.9992 16.9166ZM20.8942 13.4166C20.3225 13.4166 19.8442 13.8366 19.7508 14.4083C19.2725 17.15 16.8808 19.25 13.9992 19.25C11.1175 19.25 8.72584 17.15 8.2475 14.4083C8.15417 13.8366 7.67584 13.4166 7.10417 13.4166C6.3925 13.4166 5.8325 14.0466 5.9375 14.7466C6.50917 18.2466 9.30917 20.9883 12.8325 21.49V23.9166C12.8325 24.5583 13.3575 25.0833 13.9992 25.0833C14.6408 25.0833 15.1658 24.5583 15.1658 23.9166V21.49C18.6892 20.9883 21.4892 18.2466 22.0608 14.7466C22.1775 14.0466 21.6058 13.4166 20.8942 13.4166Z"
       fill={color}
     />
   </Svg>

package/src/icons/MicOff.tsx

@@ -4,12 +4,13 @@ import { ColorValue } from 'react-native/types';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const MicOff = ({ color }: Props) => (
-  <Svg viewBox="0 0 21 25">
+export const MicOff = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 27 27'} width={size} height={size}>
     <Path
-      d="M9.99986 0.241211C7.89048 0.241211 6.37263 1.70794 6.16057 3.87469V4.23026L13.9061 11.9417C13.9284 11.8639 13.9284 11.775 13.9284 11.6861V4.39693C13.9284 1.93017 12.2655 0.241211 9.99986 0.241211ZM18.6159 21.0976C18.9731 21.442 19.5423 21.442 19.8771 21.0976C20.2119 20.742 20.2231 20.1864 19.8771 19.842L1.98647 2.05239C1.64049 1.70794 1.07129 1.69682 0.725307 2.05239C0.379325 2.38574 0.379325 2.96354 0.725307 3.29689L18.6159 21.0976ZM1.46191 12.0861C1.46191 16.6863 4.54227 19.8309 8.96191 20.2531V22.5088H4.86593C4.27441 22.5088 3.78334 22.9754 3.78334 23.5644C3.78334 24.1422 4.27441 24.6199 4.86593 24.6199H15.1338C15.7253 24.6199 16.2164 24.1422 16.2164 23.5644C16.2164 22.9754 15.7253 22.5088 15.1338 22.5088H11.0378V20.2531C12.3883 20.1198 13.6048 19.742 14.6427 19.1308L13.1137 17.5975C12.2208 18.0419 11.1717 18.2864 9.99986 18.2864C6.19406 18.2864 3.61593 15.7974 3.61593 12.0083V9.89715C3.61593 9.30823 3.12486 8.85266 2.53334 8.85266C1.94182 8.85266 1.46191 9.30823 1.46191 9.89715V12.0861ZM16.049 14.0751L17.7566 15.764C18.2588 14.6973 18.5266 13.4528 18.5266 12.0861V9.89715C18.5266 9.30823 18.0467 8.85266 17.4552 8.85266C16.8637 8.85266 16.3838 9.30823 16.3838 9.89715V12.0083C16.3838 12.7639 16.2722 13.4528 16.049 14.0751ZM9.99986 15.9863C10.4463 15.9863 10.8816 15.9085 11.2722 15.764L6.04897 10.575V11.8306C6.04897 14.2973 7.73423 15.9863 9.99986 15.9863Z"
+      d="M17.9067 12.95V6.41663C17.9067 4.47996 16.3434 2.91663 14.4067 2.91663C12.61 2.91663 11.1517 4.26996 10.9534 6.00829L17.9067 12.95ZM21.5 13.4166C21.0217 13.4166 20.6017 13.7666 20.5317 14.245C20.4734 14.6183 20.3917 14.9916 20.2751 15.33L21.7567 16.8116C22.1067 16.1116 22.3634 15.3533 22.4917 14.5483C22.5734 13.9533 22.1067 13.4166 21.5 13.4166ZM4.73505 4.73663C4.28005 5.19163 4.28005 5.92663 4.73505 6.38163L10.9067 12.565V13.0666C10.9067 14.455 11.6067 15.7733 12.8084 16.4616C13.6834 16.9633 14.4534 16.975 15.165 16.8233L17.1017 18.76C16.2734 19.145 15.3517 19.3666 14.4067 19.3666C11.4434 19.3666 8.71338 17.3016 8.28172 14.245C8.21172 13.7666 7.79172 13.4166 7.31338 13.4166C6.70672 13.4166 6.24005 13.9533 6.32172 14.5483C6.85838 18.0016 9.77505 20.7316 13.24 21.2566V23.9166C13.24 24.5583 13.765 25.0833 14.4067 25.0833C15.0484 25.0833 15.5734 24.5583 15.5734 23.9166V21.2566C16.635 21.105 17.6384 20.7316 18.5484 20.2066L22.6201 24.2783C23.0751 24.7333 23.8101 24.7333 24.2651 24.2783C24.7201 23.8233 24.7201 23.0883 24.2651 22.6333L6.38005 4.73663C5.92505 4.28163 5.19005 4.28163 4.73505 4.73663Z"
       fill={color}
     />
   </Svg>

package/src/icons/Phone.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
 import { Svg, Path } from 'react-native-svg';
 import { ColorValue } from 'react-native/types';
+import { IconTestIds } from '../constants/TestIds';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const Phone = ({ color }: Props) => (
-  <Svg viewBox="0 0 34 33">
+export const Phone = ({ color, size }: Props) => (
+  <Svg
+    viewBox="0 0 24 9"
+    width={size}
+    height={size}
+    style={{ transform: [{ rotate: '-130deg' }] }}
+    testID={IconTestIds.PHONE}
+  >
     <Path
-      d="M9.779 24.114c5 5.017 11.085 8.881 16.052 8.881 2.22 0 4.17-.78 5.73-2.508.914-1.017 1.474-2.187 1.474-3.356 0-.899-.356-1.78-1.22-2.39l-5.204-3.695c-.83-.577-1.509-.848-2.12-.848-.796 0-1.508.44-2.287 1.22l-1.22 1.22a.982.982 0 0 1-.662.272c-.271 0-.525-.102-.695-.203-1.068-.577-2.898-2.136-4.593-3.831-1.695-1.695-3.272-3.509-3.831-4.594a1.454 1.454 0 0 1-.187-.695.95.95 0 0 1 .255-.644l1.22-1.237c.763-.797 1.22-1.492 1.22-2.288 0-.628-.27-1.306-.847-2.12L9.186 2.147C8.559 1.265 7.677.892 6.71.892c-1.153 0-2.305.508-3.305 1.474C1.71 3.96.965 5.943.965 8.13c0 4.967 3.814 10.984 8.814 15.985Z"
+      d="M12 0.0546875C16.4531 0.0449219 20.5156 0.962891 22.5566 3.00391C23.4648 3.91211 23.9727 5.02539 23.9336 6.38281C23.9043 7.19336 23.6406 7.87695 23.1621 8.33594C22.7617 8.73633 22.2246 8.9707 21.5898 8.86328L17.9863 8.25781C17.4004 8.16016 17.0098 7.98438 16.7559 7.73047C16.4238 7.39844 16.3262 6.91992 16.3164 6.28516L16.3066 5.26953C16.3066 5.11328 16.248 4.98633 16.1504 4.89844C16.043 4.79102 15.8965 4.73242 15.7891 4.69336C15.0957 4.49805 13.709 4.39062 12 4.39062C10.291 4.39062 8.89453 4.54688 8.21094 4.69336C8.09375 4.72266 7.9375 4.78125 7.83008 4.89844C7.74219 4.99609 7.67383 5.11328 7.67383 5.26953V6.28516C7.66406 6.91992 7.56641 7.4082 7.23438 7.73047C6.98047 7.98438 6.58984 8.16016 6.01367 8.25781L2.37109 8.87305C1.74609 8.9707 1.22852 8.75586 0.837891 8.36523C0.369141 7.89648 0.105469 7.19336 0.0761719 6.39258C0.0078125 5.03516 0.486328 3.92188 1.4043 3.00391C3.44531 0.962891 7.53711 0.0546875 12 0.0546875Z"
       fill={color}
     />
   </Svg>

package/src/icons/PhoneDown.tsx

@@ -5,12 +5,18 @@ import { IconTestIds } from '../constants/TestIds';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const PhoneDown = ({ color }: Props) => (
-  <Svg viewBox="0 0 42 17" testID={IconTestIds.HANG_UP_CALL}>
+export const PhoneDown = ({ color, size }: Props) => (
+  <Svg
+    viewBox={'0 0 24 9'}
+    width={size}
+    height={size}
+    testID={IconTestIds.HANG_UP_CALL}
+  >
     <Path
-      d="M20.983.96C13.406.977 6.372 2.536 2.863 6.045 1.287 7.621.473 9.537.575 11.876c.068 1.373.508 2.576 1.322 3.407.644.627 1.526 1 2.56.83l6.305-1.067c.983-.153 1.661-.458 2.102-.899.56-.559.729-1.373.729-2.474l.017-1.746c0-.272.118-.475.27-.644.187-.204.442-.306.645-.34 1.17-.27 3.56-.542 6.475-.542 2.899 0 5.289.204 6.458.543.187.05.44.152.627.339.153.17.255.372.271.627l.017 1.763c.017 1.101.187 1.915.746 2.474.441.441 1.119.746 2.102.899l6.238 1.05c1.068.187 1.966-.203 2.644-.88.814-.78 1.271-1.984 1.305-3.374.068-2.322-.813-4.238-2.373-5.797C35.527 2.536 28.577.96 20.983.96Z"
+      d="M12 0.0546875C16.4531 0.0449219 20.5156 0.962891 22.5566 3.00391C23.4648 3.91211 23.9727 5.02539 23.9336 6.38281C23.9043 7.19336 23.6406 7.87695 23.1621 8.33594C22.7617 8.73633 22.2246 8.9707 21.5898 8.86328L17.9863 8.25781C17.4004 8.16016 17.0098 7.98438 16.7559 7.73047C16.4238 7.39844 16.3262 6.91992 16.3164 6.28516L16.3066 5.26953C16.3066 5.11328 16.248 4.98633 16.1504 4.89844C16.043 4.79102 15.8965 4.73242 15.7891 4.69336C15.0957 4.49805 13.709 4.39062 12 4.39062C10.291 4.39062 8.89453 4.54688 8.21094 4.69336C8.09375 4.72266 7.9375 4.78125 7.83008 4.89844C7.74219 4.99609 7.67383 5.11328 7.67383 5.26953V6.28516C7.66406 6.91992 7.56641 7.4082 7.23438 7.73047C6.98047 7.98438 6.58984 8.16016 6.01367 8.25781L2.37109 8.87305C1.74609 8.9707 1.22852 8.75586 0.837891 8.36523C0.369141 7.89648 0.105469 7.19336 0.0761719 6.39258C0.0078125 5.03516 0.486328 3.92188 1.4043 3.00391C3.44531 0.962891 7.53711 0.0546875 12 0.0546875Z"
       fill={color}
     />
   </Svg>

package/src/icons/PinVertical.tsx

@@ -4,10 +4,11 @@ import { ColorValue } from 'react-native/types';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const PinVertical = ({ color }: Props) => (
-  <Svg viewBox="0 0 21 20">
+export const PinVertical = ({ color, size }: Props) => (
+  <Svg viewBox="0 0 21 20" width={size} height={size}>
     <Path
       fill={color}
       d="M12.0682 3.45222V7.46363C12.0682 8.36218 12.365 9.19656 12.8705 9.87047H8.05678C8.57827 9.18051 8.85906 8.34614 8.85906 7.46363V3.45222H12.0682ZM14.475 1.84766H6.45222C6.01096 1.84766 5.64994 2.20868 5.64994 2.64994C5.64994 3.09119 6.01096 3.45222 6.45222 3.45222H7.2545V7.46363C7.2545 8.79541 6.17944 9.87047 4.84766 9.87047V11.475H9.63728V17.091L10.4396 17.8933L11.2418 17.091V11.475H16.0796V9.87047C14.7478 9.87047 13.6728 8.79541 13.6728 7.46363V3.45222H14.475C14.9163 3.45222 15.2773 3.09119 15.2773 2.64994C15.2773 2.20868 14.9163 1.84766 14.475 1.84766Z"