@100mslive/react-native-room-kit 1.0.2-beta.0 → 1.0.2

package/lib/typescript/utils/constants.d.ts

@@ -0,0 +1,101 @@
+export declare const TestIds: {
+    readonly back_button: "back-button";
+    readonly company_logo: "company-logo";
+    readonly manage_audio_output: "change-audio-output-button";
+    readonly switch_camera: "switch-camera-button";
+    readonly switch_camera_disabled: "switch-camera-disabled-button";
+    readonly mic_muted_btn: "mic-muted-button";
+    readonly mic_unmuted_btn: "mic-unmuted-button";
+    readonly mic_muted_icon: "mic-muted-icon";
+    readonly mic_unmuted_icon: "mic-unmuted-icon";
+    readonly camera_muted_btn: "camera-muted-button";
+    readonly camera_unmuted_btn: "camera-unmuted-button";
+    readonly enter_name: "enter-name-input";
+    readonly go_live_btn: "go-live-button";
+    readonly join_now_btn: "join-now-button";
+    readonly title: "preview-title-text";
+    readonly subtitle: "preview-subtitle-text";
+    readonly live_text: "live-text";
+    readonly peer_count_icon: "peer-count-icon";
+    readonly peer_count: "peer-count-text";
+    readonly notification_sharing_screen: "notification-sharing-screen-text";
+    readonly notification_stop_screen_share_btn: "notification-stop-screen-share-button";
+    readonly brb_icon: "brb-icon";
+    readonly hand_icon: "hand-icon";
+    readonly hand_off_icon: "hand-off-icon";
+    readonly tile_options: "tile-three-dots-button";
+    readonly tile_user_name: "tile-user-name";
+    readonly tile_network_icon: "tile-network-icon";
+    readonly tile_modal_heading: "tile-modal-heading";
+    readonly tile_modal_subheading: "tile-modal-subheading";
+    readonly tile_modal_close_btn: "tile-modal-close-button";
+    readonly tile_modal_change_name_btn: "tile-modal-change-name-button";
+    readonly change_name_modal_heading: "change-name-modal-heading";
+    readonly change_name_input: "change-name-input";
+    readonly change_name_modal_close_btn: "change-name-modal-close-button";
+    readonly change_name_modal_cta: "change-name-modal-cta";
+    readonly footer_leave_btn: "footer-leave-button";
+    readonly leave_icon: "leave-icon";
+    readonly leave_description: "leave-description";
+    readonly leave_cta: "leave-cta";
+    readonly stop_icon: "stop-icon";
+    readonly end_session_description: "end-session-description";
+    readonly end_session_cta: "end-session-cta";
+    readonly end_stream_description: "end-stream-description";
+    readonly end_stream_cta: "end-stream-cta";
+    readonly end_confirmation_close_btn: "end-confirmation-close-btn";
+    readonly end_confirmation_cta: "end-confirmation-cta";
+    readonly end_confirmation_heading: "end-confirmation-heading";
+    readonly end_confirmation_description: "end-confirmation-description";
+    readonly hand_raise_btn: "hand-raise-button";
+    readonly hand_raised_btn: "hand-raised-button";
+    readonly open_chat_btn: "open-chat-button";
+    readonly close_chat_btn: "close-chat-button";
+    readonly enter_message_input: "enter-message-input";
+    readonly send_message_cta: "send-message-cta";
+    readonly room_options_btn: "room-options-button";
+    readonly room_modal_heading: "room-modal-heading";
+    readonly room_modal_close_btn: "room-modal-close-button";
+    readonly room_modal_participants_btn: "room-modal-participants-button";
+    readonly room_modal_share_screen_btn: "room-modal-share-screen-button";
+    readonly room_modal_stop_screen_share_btn: "room-modal-stop-screen-share-button";
+    readonly room_modal_brb_btn: "room-modal-brb-button";
+    readonly room_modal_stop_brb_btn: "room-modal-stop-brb-button";
+    readonly room_modal_hand_raise_btn: "room-modal-hand-raise-button";
+    readonly room_modal_hand_raised_btn: "room-modal-hand-raised-button";
+    readonly room_modal_start_recording_btn: "room-modal-start-recording-button";
+    readonly room_modal_stop_recording_btn: "room-modal-stop-recording-button";
+    readonly room_modal_change_name_btn: "room-modal-change-name-button";
+    readonly participants_heading: "participants-heading";
+    readonly participants_heading_active: "participants-heading--active";
+    readonly participants_heading_btn: "participants-heading-button";
+    readonly chat_heading: "chat-heading";
+    readonly chat_heading_active: "chat-heading--active";
+    readonly chat_heading_btn: "chat-heading-button";
+    readonly participants_close_btn: "participants-close-button";
+    readonly search_participant_input: "search-participant-input";
+    readonly participants_group_name: "participants-group-name";
+    readonly participants_group_back_btn: "participants-group-back-button";
+    readonly participants_group_expand_btn: "participants-group-expand-button";
+    readonly participants_group_collapse_btn: "participants-group-collapse-button";
+    readonly participant_name: "participant-name";
+    readonly audio_modal_heading: "audio-modal-heading";
+    readonly audio_modal_close_btn: "audio-modal-close-button";
+    readonly audio_modal_empty_text: "audio-modal-empty-text";
+    readonly automatic_audio_device_btn: "automatic-audio-device-button";
+    readonly automatic_audio_device_text: "automatic-audio-device-text";
+    readonly automatic_audio_device_active: "automatic-audio-device--active";
+    readonly phone_speaker_audio_device_btn: "phone-speaker-audio-device-button";
+    readonly phone_speaker_audio_device_text: "phone-speaker-audio-device-text";
+    readonly phone_speaker_audio_device_active: "phone-speaker-audio-device--active";
+    readonly wired_headset_audio_device_btn: "wired-headset-audio-device-button";
+    readonly wired_headset_audio_device_text: "wired-headset-audio-device-text";
+    readonly wired_headset_audio_device_active: "wired-headset-audio-device--active";
+    readonly earpiece_audio_device_btn: "earpiece-audio-device-button";
+    readonly earpiece_audio_device_text: "earpiece-audio-device-text";
+    readonly earpiece_audio_device_active: "earpiece-audio-device--active";
+    readonly bluetooth_audio_device_btn: "bluetooth-audio-device-button";
+    readonly bluetooth_audio_device_text: "bluetooth-audio-device-text";
+    readonly bluetooth_audio_device_active: "bluetooth-audio-device--active";
+};
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/utils/constants.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.0.2-beta.0",
+  "version": "1.0.2",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -79,7 +79,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "1.9.1-beta.0",
+    "@100mslive/react-native-hms": "1.9.1",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",

package/src/HMSRoomSetup.tsx

@@ -133,6 +133,7 @@ export const HMSRoomSetup = () => {
       console.log('Start HLS Streaming Error: ', e);
       if (!ignoreHLSStreamPromise.current) {
         console.log('Unable to go live at the moment: ', e);
+        dispatch(changeStartingHLSStream(false));
         // prebuiltCleanUp();
       }
     }

package/src/Icons/BRB/index.tsx

@@ -3,6 +3,7 @@ import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
+import { TestIds } from '../../utils/constants';
 
 interface BRBIconProps extends Omit<ImageProps, 'source'> {}
 
@@ -13,6 +14,7 @@ export const BRBIcon: React.FC<BRBIconProps> = ({ style, ...restProps }) => {
 
   return (
     <Image
+      testID={TestIds.brb_icon}
       source={require('./assets/BRB.png')}
       style={[styles.icon, iconStyles, style]}
       {...restProps}

package/src/Icons/Hand/index.tsx

@@ -3,6 +3,7 @@ import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
+import { TestIds } from '../../utils/constants';
 
 interface HandIconProps extends Omit<ImageProps, 'source'> {
   type?: 'off' | 'on';
@@ -19,6 +20,11 @@ export const HandIcon: React.FC<HandIconProps> = ({
 
   return (
     <Image
+      testID={
+        type === 'on'
+          ? TestIds.hand_icon
+          : TestIds.hand_off_icon
+      }
       source={
         type === 'on'
           ? require('./assets/hand.png')

package/src/Icons/Leave/index.tsx

@@ -3,6 +3,7 @@ import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
+import { TestIds } from '../../utils/constants';
 
 interface LeaveIconProps extends Omit<ImageProps, 'source'> {}
 
@@ -16,6 +17,7 @@ export const LeaveIcon: React.FC<LeaveIconProps> = ({
 
   return (
     <Image
+      testID={TestIds.leave_icon}
       source={require('./assets/leave.png')}
       style={[styles.icon, iconStyles, style]}
       {...restProps}

package/src/Icons/Mic/index.tsx

@@ -3,6 +3,7 @@ import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
+import { TestIds } from '../../utils/constants';
 
 interface MicIconProps extends Omit<ImageProps, 'source'> {
   muted: boolean;
@@ -19,6 +20,11 @@ export const MicIcon: React.FC<MicIconProps> = ({
 
   return (
     <Image
+      testID={
+        muted
+          ? TestIds.mic_muted_icon
+          : TestIds.mic_unmuted_icon
+      }
       source={
         muted
           ? require('./assets/mic-muted.png')

package/src/Icons/Stop/index.tsx

@@ -3,6 +3,7 @@ import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
+import { TestIds } from '../../utils/constants';
 
 interface StopIconProps extends Omit<ImageProps, 'source'> {}
 
@@ -13,6 +14,7 @@ export const StopIcon: React.FC<StopIconProps> = ({ style, ...restProps }) => {
 
   return (
     <Image
+      testID={TestIds.stop_icon}
       source={require('./assets/stop.png')}
       style={[styles.icon, iconStyles, style]}
       {...restProps}

package/src/components/BackButton.tsx

@@ -5,6 +5,7 @@ import { NavigationContext } from '@react-navigation/native';
 import { PressableIcon } from './PressableIcon';
 import { ChevronIcon } from '../Icons';
 import { useHMSRoomStyle } from '../hooks-util';
+import { TestIds } from '../utils/constants';
 
 export interface BackButtonProps {}
 
@@ -27,6 +28,7 @@ export const BackButton: React.FC<BackButtonProps> = () => {
 
   return (
     <PressableIcon
+      testID={TestIds.back_button}
       style={[styles.button, buttonStyles]}
       rounded={true}
       border={false}

package/src/components/BottomSheet.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Modal from 'react-native-modal';
 import type { ReactNativeModal } from 'react-native-modal';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextProps, TouchableOpacityProps, ViewStyle } from 'react-native';
 
 import { CloseIcon } from '../Icons';
 import {
@@ -66,12 +66,18 @@ interface HeaderProps {
   dismissModal(): void;
   heading: string;
   subheading?: string;
+  headingTestID?: TextProps['testID'];
+  subheadingTestID?: TextProps['testID'];
+  closeIconTestID?: TouchableOpacityProps['testID'];
 }
 
 const BottomSheetHeader: React.FC<HeaderProps> = ({
   dismissModal,
   heading,
   subheading,
+  headingTestID,
+  subheadingTestID,
+  closeIconTestID,
 }) => {
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {
@@ -87,18 +93,19 @@ const BottomSheetHeader: React.FC<HeaderProps> = ({
   return (
     <View style={styles.header}>
       <View>
-        <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+        <Text testID={headingTestID} style={[styles.headerText, hmsRoomStyles.headerText]}>
           {heading}
         </Text>
 
         {subheading ? (
-          <Text style={[styles.subheadingText, hmsRoomStyles.subheadingText]}>
+          <Text testID={subheadingTestID} style={[styles.subheadingText, hmsRoomStyles.subheadingText]}>
             {subheading}
           </Text>
         ) : null}
       </View>
 
       <TouchableOpacity
+        testID={closeIconTestID}
         onPress={dismissModal}
         hitSlop={styles.closeIconHitSlop}
       >

package/src/components/ChangeNameModalContent.tsx

@@ -16,6 +16,7 @@ import { HMSTextInput } from './HMSTextInput';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
 import { useHMSActions } from '../hooks-sdk';
 import { ModalTypes } from '../utils/types';
+import { TestIds } from '../utils/constants';
 
 export interface ChangeNameModalContentProps {
   dismissModal(): void;
@@ -95,12 +96,16 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
             </TouchableOpacity>
           )}
 
-          <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+          <Text
+            testID={TestIds.change_name_modal_heading}
+            style={[styles.headerText, hmsRoomStyles.headerText]}
+          >
             Change Name
           </Text>
         </View>
 
         <TouchableOpacity
+          testID={TestIds.change_name_modal_close_btn}
           onPress={handleClosePress}
           hitSlop={styles.closeIconHitSlop}
         >
@@ -114,6 +119,7 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
       {/* Content */}
       <View style={styles.contentContainer}>
         <HMSTextInput
+          testID={TestIds.change_name_input}
           style={styles.textInput}
           value={name}
           autoFocus={true}
@@ -121,6 +127,7 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
         />
 
         <HMSPrimaryButton
+          testId={TestIds.change_name_modal_cta}
           loading={nameChangeLoading}
           onPress={changeName}
           title="Change"

package/src/components/ChatAndParticipants/ChatAndParticipantsHeader.tsx

@@ -10,6 +10,7 @@ import {
 import type { RootState } from '../../redux';
 import { ChatBottomSheetTabs } from '../../utils/types';
 import { setActiveChatBottomSheetTab } from '../../redux/actions';
+import { TestIds } from '../../utils/constants';
 
 interface WebrtcChatHeaderProps {
   onClosePress?: () => void;
@@ -61,7 +62,16 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
       }
     >
       {visibleChatBottomSheetTabs.length === 1 ? (
-        <Text style={[styles.headerTitle, hmsRoomStyles.activeHeaderTitle]}>
+        <Text
+          testID={
+            visibleChatBottomSheetTabs[0] === 'Participants'
+              ? TestIds.participants_heading
+              : visibleChatBottomSheetTabs[0] === 'Chat'
+              ? TestIds.chat_heading
+              : undefined
+          }
+          style={[styles.headerTitle, hmsRoomStyles.activeHeaderTitle]}
+        >
           {visibleChatBottomSheetTabs[0]}
           {visibleChatBottomSheetTabs[0] === 'Participants' &&
           typeof peersCount === 'number'
@@ -78,10 +88,24 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
             return (
               <TouchableOpacity
                 key={tab}
+                testID={
+                  tab === 'Participants'
+                      ? TestIds.participants_heading_btn
+                      : tab === 'Chat'
+                      ? TestIds.chat_heading_btn
+                      : undefined
+                }
                 style={[styles.tab, isActive ? hmsRoomStyles.tab : null]}
                 onPress={() => dispatch(setActiveChatBottomSheetTab(tab))}
               >
                 <Text
+                  testID={
+                    tab === 'Participants'
+                      ? (isActive ? TestIds.participants_heading_active : TestIds.participants_heading)
+                      : tab === 'Chat'
+                      ? (isActive ? TestIds.chat_heading_active : TestIds.chat_heading)
+                      : undefined
+                  }
                   style={[
                     styles.headerTitle,
                     hmsRoomStyles.headerTitle,
@@ -99,7 +123,7 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
         </View>
       )}
 
-      <TouchableOpacity onPress={onClosePress}>
+      <TouchableOpacity testID={TestIds.participants_close_btn} onPress={onClosePress}>
         <CloseIcon />
       </TouchableOpacity>
     </View>

package/src/components/CompanyLogo.tsx

@@ -3,6 +3,7 @@ import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
 import { useHMSLayoutConfig } from '../hooks-util';
+import { TestIds } from '../utils/constants';
 
 interface CompanyLogoProps extends Omit<ImageProps, 'source'> {}
 
@@ -20,6 +21,7 @@ export const CompanyLogo: React.FC<CompanyLogoProps> = ({
 
   return (
     <Image
+      testID={TestIds.company_logo}
       source={{ uri: logoSource }}
       style={[styles.icon, style]}
       {...restProps}

package/src/components/EndRoomModalContent.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 
 import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
 import { AlertTriangleIcon, CloseIcon } from '../Icons';
 import { HMSDangerButton } from './HMSDangerButton';
-import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
 import { OnLeaveReason } from '../utils/types';
+import { TestIds } from '../utils/constants';
 
 export interface EndRoomModalContentProps {
   dismissModal(): void;
@@ -48,7 +49,10 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
         <View style={styles.headerControls}>
           <AlertTriangleIcon />
 
-          <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+          <Text
+            testID={TestIds.end_confirmation_heading}
+            style={[styles.headerText, hmsRoomStyles.headerText]}
+          >
             {canStream && isStreaming
               ? 'End Stream'
               : canEndRoom
@@ -58,13 +62,18 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
         </View>
 
         <TouchableOpacity
+          testID={TestIds.end_confirmation_close_btn}
           onPress={dismissModal}
           hitSlop={styles.closeIconHitSlop}
         >
           <CloseIcon />
         </TouchableOpacity>
       </View>
-      <Text style={[styles.text, hmsRoomStyles.text]}>
+
+      <Text
+        testID={TestIds.end_confirmation_description}
+        style={[styles.text, hmsRoomStyles.text]}
+      >
         {canStream && isStreaming
           ? 'The stream will end for everyone after they’ve watched it.'
           : canEndRoom
@@ -72,6 +81,7 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
           : 'Others will continue after you leave. You can join the session again.'}
       </Text>
       <HMSDangerButton
+        testID={TestIds.end_confirmation_cta}
         loading={false}
         onPress={() => {
           if (canStream && isStreaming) {

package/src/components/HMSBaseButton.tsx

@@ -6,12 +6,13 @@ import {
   TouchableHighlight,
   View,
 } from 'react-native';
-import type { StyleProp, ViewStyle, TextStyle, ColorValue } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle, ColorValue, TouchableHighlightProps } from 'react-native';
 
 export interface HMSBaseButtonProps {
   title: string;
   loading: boolean;
   onPress(): void;
+  testID?: TouchableHighlightProps['testID'];
   underlayColor?: ColorValue | undefined;
   loaderColor?: ColorValue | undefined;
   style?: StyleProp<ViewStyle>;
@@ -21,6 +22,7 @@ export interface HMSBaseButtonProps {
 }
 
 export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
+  testID,
   underlayColor,
   loaderColor,
   title,
@@ -33,6 +35,7 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
 }) => {
   return (
     <TouchableHighlight
+      testID={testID}
       underlayColor={underlayColor}
       style={[styles.button, style]}
       onPress={onPress}

package/src/components/HMSChat.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ChatIcon } from '../Icons';
 import { PressableIcon } from './PressableIcon';
 import { useShowChatAndParticipants } from '../hooks-util';
+import { TestIds } from '../utils/constants';
 
 export const HMSChat = () => {
   const { overlayChatVisible, show, hide } = useShowChatAndParticipants();
@@ -16,7 +17,11 @@ export const HMSChat = () => {
   };
 
   return (
-    <PressableIcon onPress={toggleChatWindow} active={overlayChatVisible}>
+    <PressableIcon
+      testID={overlayChatVisible ? TestIds.close_chat_btn : TestIds.open_chat_btn}
+      onPress={toggleChatWindow}
+      active={overlayChatVisible}
+    >
       <ChatIcon />
     </PressableIcon>
   );

package/src/components/HMSDangerButton.tsx

@@ -3,12 +3,14 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSBaseButton } from './HMSBaseButton';
+import type { HMSBaseButtonProps } from './HMSBaseButton';
 import { COLORS } from '../utils/theme';
 
 export interface HMSDangerButtonProps {
   title: string;
   loading: boolean;
   onPress(): void;
+  testID?: HMSBaseButtonProps['testID'];
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
@@ -18,6 +20,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
   title,
   loading,
   onPress,
+  testID,
   style,
   disabled,
   leftComponent,
@@ -45,6 +48,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
 
   return (
     <HMSBaseButton
+      testID={testID}
       loaderColor={alertErrorBrighterColor}
       loading={loading}
       onPress={onPress}

package/src/components/HMSLiveIndicator.tsx

@@ -16,6 +16,7 @@ import {
 import { EyeIcon } from '../Icons';
 import { COLORS, hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
+import { TestIds } from '../utils/constants';
 
 const _HMSLiveIndicator = () => {
   const isHLSViewer = useIsHLSViewer();
@@ -62,7 +63,7 @@ const _HMSLiveIndicator = () => {
     <View style={styles.container}>
       {/* Live */}
       <View style={[styles.live, hmsRoomStyles.live]}>
-        <Text style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
+        <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
       </View>
 
       {/* Viewer Count */}
@@ -72,9 +73,9 @@ const _HMSLiveIndicator = () => {
           onPress={showParticipantsSheet}
           disabled={!canShowParticipants}
         >
-          <EyeIcon />
+          <EyeIcon testID={TestIds.peer_count_icon} />
 
-          <Text style={[styles.count, hmsRoomStyles.count]}>
+          <Text testID={TestIds.peer_count} style={[styles.count, hmsRoomStyles.count]}>
             {previewPeerCount}
           </Text>
         </TouchableOpacity>

package/src/components/HMSLocalScreenshareNotification.tsx

@@ -6,6 +6,7 @@ import { HMSDangerButton } from './HMSDangerButton';
 import { HMSNotification } from './HMSNotification';
 import { useHMSRoomStyle } from '../hooks-util';
 import { NotificationTypes } from '../types';
+import { TestIds } from '../utils/constants';
 
 export interface HMSLocalScreenshareNotificationProps {}
 
@@ -28,9 +29,11 @@ export const HMSLocalScreenshareNotification: React.FC<
       autoDismiss={false}
       style={notificationStyle}
       text={'You are sharing your screen'}
+      textTestID={TestIds.notification_sharing_screen}
       icon={<ScreenShareIcon />}
       cta={
         <HMSDangerButton
+          testID={TestIds.notification_stop_screen_share_btn}
           loading={false}
           onPress={stopScreenshare}
           title="Stop"