agora-appbuilder-core 2.2.0 → 2.3.0-beta.2

package/template/src/subComponents/SelectOAuth.tsx

@@ -12,16 +12,32 @@
 import React, {useContext} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet, Image} from 'react-native';
 import ColorContext from '../components/ColorContext';
+// @ts-ignore
 import google from '../assets/google.png';
+// @ts-ignore
 import apple from '../assets/apple.png';
+// @ts-ignore
 import slack from '../assets/slack.png';
+// @ts-ignore
 import microsoft from '../assets/microsoft.png';
 import Logo from './Logo';
-import hasBrandLogo from '../utils/hasBrandLogo';
+import {hasBrandLogo} from '../utils/common';
+import {useString} from '../utils/useString';
 
 const SelectOAuth = ({onSelectOAuth}) => {
   // Linking.openURL(url);
   const {primaryColor} = useContext(ColorContext);
+  //commented for v1 release
+  // const oauthLoginLabel = useString('oauthLoginLabel')();
+  // const googleAuthButton = useString('googleAuthButton')();
+  // const microsoftAuthButton = useString('microsoftAuthButton')();
+  // const slackAuthButton = useString('slackAuthButton')();
+  // const appleAuthButton = useString('appleAuthButton')();
+  const oauthLoginLabel = 'Login using OAuth';
+  const googleAuthButton = 'Google';
+  const microsoftAuthButton = 'Microsoft';
+  const slackAuthButton = 'Slack';
+  const appleAuthButton = 'Apple';
   return (
     <View style={style.main}>
       <View style={style.nav}>{hasBrandLogo && <Logo />}</View>
@@ -38,14 +54,16 @@ const SelectOAuth = ({onSelectOAuth}) => {
                   marginBottom: 20,
                   color: $config.PRIMARY_FONT_COLOR,
                 }}>
-                Login using OAuth
+                {oauthLoginLabel}
               </Text>
               {$config.ENABLE_GOOGLE_OAUTH ? (
                 <TouchableOpacity
                   style={[style.secondaryBtn, {borderColor: primaryColor}]}
                   onPress={() => onSelectOAuth({oAuthSystem: 'google'})}>
                   <Image source={google} style={style.logo} />
-                  <Text style={[style.secondaryBtnText]}>Google</Text>
+                  <Text style={[style.secondaryBtnText]}>
+                    {googleAuthButton}
+                  </Text>
                 </TouchableOpacity>
               ) : (
                 <></>
@@ -55,7 +73,9 @@ const SelectOAuth = ({onSelectOAuth}) => {
                   style={[style.secondaryBtn, {borderColor: primaryColor}]}
                   onPress={() => onSelectOAuth({oAuthSystem: 'microsoft'})}>
                   <Image source={microsoft} style={style.logo} />
-                  <Text style={[style.secondaryBtnText]}>Microsoft</Text>
+                  <Text style={[style.secondaryBtnText]}>
+                    {microsoftAuthButton}
+                  </Text>
                 </TouchableOpacity>
               ) : (
                 <></>
@@ -65,7 +85,9 @@ const SelectOAuth = ({onSelectOAuth}) => {
                   style={[style.secondaryBtn, {borderColor: primaryColor}]}
                   onPress={() => onSelectOAuth({oAuthSystem: 'slack'})}>
                   <Image source={slack} style={style.logo} />
-                  <Text style={[style.secondaryBtnText]}>Slack</Text>
+                  <Text style={[style.secondaryBtnText]}>
+                    {slackAuthButton}
+                  </Text>
                 </TouchableOpacity>
               ) : (
                 <></>
@@ -75,7 +97,9 @@ const SelectOAuth = ({onSelectOAuth}) => {
                   style={[style.secondaryBtn, {borderColor: primaryColor}]}
                   onPress={() => onSelectOAuth({oAuthSystem: 'apple'})}>
                   <Image source={apple} style={style.logo} />
-                  <Text style={[style.secondaryBtnText]}>Apple</Text>
+                  <Text style={[style.secondaryBtnText]}>
+                    {appleAuthButton}
+                  </Text>
                 </TouchableOpacity>
               ) : (
                 <></>

package/template/src/subComponents/SidePanelButtons.ts

@@ -0,0 +1,39 @@
+import {ChatSendButton, ChatSendButtonProps} from './ChatInput';
+import {
+  RemoteLiveStreamApprovedRequestRecall,
+  RemoteLiveStreamRequestApprove,
+  RemoteLiveStreamRequestReject,
+  RemoteLiveStreamApprovedRequestRecallProps,
+  RemoteLiveStreamControlInterface,
+} from './livestream';
+import RemoteAudioMute, {RemoteAudioMuteProps} from './RemoteAudioMute';
+import RemoteVideoMute, {RemoteVideoMuteProps} from './RemoteVideoMute';
+import RemoteEndCall, {RemoteEndCallProps} from './RemoteEndCall';
+import {
+  MuteAllAudioButton,
+  MuteAllAudioButtonProps,
+  MuteAllVideoButton,
+  MuteAllVideoButtonProps,
+} from '../components/HostControlView';
+
+export const SidePanelButtonsArray: [
+  (props: RemoteAudioMuteProps) => JSX.Element,
+  (props: RemoteVideoMuteProps) => JSX.Element,
+  (props: RemoteEndCallProps) => JSX.Element,
+  (props: RemoteLiveStreamApprovedRequestRecallProps) => JSX.Element,
+  (props: RemoteLiveStreamControlInterface) => JSX.Element,
+  (props: RemoteLiveStreamControlInterface) => JSX.Element,
+  (props: ChatSendButtonProps) => JSX.Element,
+  (props: MuteAllAudioButtonProps) => JSX.Element,
+  (props: MuteAllVideoButtonProps) => JSX.Element,
+] = [
+  RemoteAudioMute,
+  RemoteVideoMute,
+  RemoteEndCall,
+  RemoteLiveStreamApprovedRequestRecall,
+  RemoteLiveStreamRequestApprove,
+  RemoteLiveStreamRequestReject,
+  ChatSendButton,
+  MuteAllAudioButton,
+  MuteAllVideoButton,
+];

package/template/src/subComponents/TextWithTooltip.native.tsx

@@ -9,12 +9,13 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+// @ts-nocheck
 import React, {useState, useRef} from 'react';
 import {View, Text, Modal, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, useWindowDimensions} from 'react-native';
 /**
  * Component showing text with tooltip on mobile native
  */
-const TextWithToolTip = (props: any) => {
+const TextWithToolTip = (props: {value: string, style: object, touchable?: boolean}) => {
     const {width:globalWidth, height:globalHeight} = useWindowDimensions();
     const [toolTipVisible, setToolTipVisible] = useState(false);
     const [position, setPosition] = useState({})

package/template/src/subComponents/TextWithTooltip.tsx

@@ -11,34 +11,29 @@
 */
 import React from 'react';
 import {Text} from 'react-native';
-import mobileAndTabletCheck from '../utils/mobileWebTest';
+import isMobileOrTablet from '../utils/isMobileOrTablet';
 import TextWithToolTipNative from './TextWithTooltip.native';
 /**
  * Text with tooltip
  * web - used title attribute to show the tooltip
  */
-const TextWithToolTip = (props: any) => {
-    return(
-        <div 
-            style={style.containerStyle} 
-            title={props.value}
-            >
-            <Text
-                numberOfLines={1}
-                textBreakStrategy='simple'
-                style={[props.style]}  
-            >{props.value}</Text>
-        </div>
-    )
+const TextWithToolTip = (props: {touchable?: boolean;value: string; style: object}) => {
+  return (
+    <div style={style.containerStyle} title={props.value}>
+      <Text numberOfLines={1} textBreakStrategy="simple" style={[props.style]}>
+        {props.value}
+      </Text>
+    </div>
+  );
 };
 
 const style = {
-    containerStyle:{
-        display: 'flex'
-    },
-}
+  containerStyle: {
+    display: 'flex',
+  },
+};
 /**
- * Web and Desktop : using the TextWithToolTip - which have the browser tooltip 
+ * Web and Desktop : using the TextWithToolTip - which have the browser tooltip
  * Mobile and Mobile Web : using the TextWithToolTipNative - which have the custom tooltip using modal
  */
-export default mobileAndTabletCheck() ? TextWithToolTipNative : TextWithToolTip;
+export default isMobileOrTablet() ? TextWithToolTipNative : TextWithToolTip;

package/template/src/subComponents/chat/ChatParticipants.tsx

@@ -6,55 +6,50 @@ import {
   ScrollView,
   useWindowDimensions,
   StyleSheet,
-  Platform,
 } from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
-import {UserType} from '../../components/RTMConfigure';
 import TextWithTooltip from '../TextWithTooltip';
-import chatContext from '../../components/ChatContext';
+import {useString} from '../../utils/useString';
+import {isIOS, isWeb} from '../../utils/common';
+import {useChatNotification} from '../../components/chat-notification/useChatNotification';
+import useUserList from '../../utils/useUserList';
+import {UidType, useLocalUid} from '../../../agora-rn-uikit';
 
 const ChatParticipants = (props: any) => {
-  const {
-    selectUser,
-    setPrivateMessageLastSeen,
-    privateMessageCountMap,
-    lastCheckedPrivateState,
-  } = props;
+  //commented for v1 release
+  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
+  const remoteUserDefaultLabel = 'User';
+  const {selectUser} = props;
   const {height, width} = useWindowDimensions();
-  const {userList, localUid} = useContext(chatContext);
-
-  const isChatUser = (userId: string, userInfo: any) => {
+  const {renderList} = useUserList();
+  const localUid = useLocalUid();
+  const {unreadIndividualMessageCount} = useChatNotification();
+  const isChatUser = (userId: UidType, userInfo: any) => {
     return (
-      userId !== localUid &&
-      parseInt(userId) !== 1 &&
-      userInfo?.type !== UserType.ScreenShare &&
+      userId !== localUid && //user can't chat with own user
+      // @ts-ignore
+      userId !== '1' && //user can't chat with pstn user
+      userInfo?.type === 'rtc' &&
       !userInfo?.offline
     );
   };
 
   return (
     <ScrollView>
-      {Object.entries(userList).map(([uid, value]) => {
-        if (isChatUser(uid, value)) {
+      {Object.entries(renderList).map(([uid, value]) => {
+        const uidAsNumber = parseInt(uid);
+        if (isChatUser(uidAsNumber, value)) {
           return (
             <TouchableOpacity
               style={style.participantContainer}
               key={uid}
               onPress={() => {
-                selectUser(uid);
-                setPrivateMessageLastSeen({
-                  userId: uid,
-                  lastSeenCount: privateMessageCountMap[uid],
-                });
+                selectUser(uidAsNumber);
               }}>
-              {(privateMessageCountMap[uid] || 0) -
-                (lastCheckedPrivateState[uid] || 0) !==
-              0 ? (
+              {unreadIndividualMessageCount &&
+              unreadIndividualMessageCount[uidAsNumber] ? (
                 <View style={style.chatNotificationPrivate}>
-                  <Text>
-                    {(privateMessageCountMap[uid] || 0) -
-                      (lastCheckedPrivateState[uid] || 0)}
-                  </Text>
+                  <Text>{unreadIndividualMessageCount[uidAsNumber]}</Text>
                 </View>
               ) : null}
               <View style={{flex: 1}}>
@@ -66,7 +61,11 @@ const ChatParticipants = (props: any) => {
                       fontSize: RFValue(16, height > width ? height : width),
                     },
                   ]}
-                  value={userList[uid] ? userList[uid].name + ' ' : 'User '}
+                  value={
+                    renderList[uidAsNumber]
+                      ? renderList[uidAsNumber].name + ''
+                      : remoteUserDefaultLabel
+                  }
                 />
               </View>
               <View>
@@ -96,7 +95,7 @@ const style = StyleSheet.create({
   },
   participantText: {
     flex: 1,
-    fontWeight: Platform.OS === 'web' ? '500' : '700',
+    fontWeight: isWeb ? '500' : '700',
     flexDirection: 'row',
     color: $config.PRIMARY_FONT_COLOR,
     textAlign: 'left',
@@ -111,7 +110,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: Platform.OS === 'ios' ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     right: 20,

package/template/src/subComponents/livestream/ApprovedLiveStreamControlsView.tsx

@@ -1,16 +1,20 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
 import RemoteLiveStreamApprovedRequestRecall from './controls/RemoteLiveStreamApprovedRequestRecall';
-import LiveStreamContext, {requestStatus} from '../../components/livestream';
+import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
+import {ClientRole} from '../../../agora-rn-uikit';
 
 const ApprovedLiveStreamControlsView = (props: {
   uid: number;
   p_styles: any;
 }) => {
   const {uid, p_styles} = props;
-  const {currLiveStreamRequest} = useContext(LiveStreamContext);
+  const {raiseHandList} = useContext(LiveStreamContext);
 
-  if (currLiveStreamRequest[uid]?.status === requestStatus.Approved) {
+  if (
+    raiseHandList[uid]?.raised === RaiseHandValue.TRUE &&
+    raiseHandList[uid]?.role == ClientRole.Broadcaster
+  ) {
     return (
       <View style={[p_styles.actionBtnIcon, {marginRight: 10}]}>
         <RemoteLiveStreamApprovedRequestRecall uid={uid} />

package/template/src/subComponents/livestream/CurrentLiveStreamRequestsView.tsx

@@ -3,13 +3,28 @@ import {View, Text} from 'react-native';
 import RemoteLiveStreamRequestApprove from './controls/RemoteLiveStreamRequestApprove';
 import RemoteLiveStreamRequestReject from './controls/RemoteLiveStreamRequestReject';
 import ParticipantName from '../../components/participants/ParticipantName';
-import LiveStreamContext, {requestStatus} from '../../components/livestream';
+import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
 import {filterObject} from '../../utils/index';
 import ParticipantSectionTitle from '../../components/participants/ParticipantSectionTitle';
+import {useString} from '../../utils/useString';
+import useUserList from '../../utils/useUserList';
+import {ClientRole} from '../../../agora-rn-uikit';
 
 const CurrentLiveStreamRequestsView = (props: any) => {
-  const {userList, p_style} = props;
-  const {currLiveStreamRequest, setLastCheckedRequestTimestamp} =
+  //commented for v1 release
+  // const noLiveStreamingRequestsLabel = useString(
+  //   'raisedHandsListPlaceholder',
+  // )();
+  // const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
+  // const noUserFoundLabel = useString('noUserFoundLabel')();
+  // const raisedHandsListTitleLabel = useString('raisedHandsListTitleLabel')();
+  const noLiveStreamingRequestsLabel = 'No streaming request(s)';
+  const remoteUserDefaultLabel = 'User';
+  const noUserFoundLabel = 'User not found';
+  const raisedHandsListTitleLabel = 'Streaming Request';
+  const {p_style} = props;
+  const {renderList} = useUserList();
+  const {raiseHandList, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
   const [activeLiveStreamRequests, setActiveLiveStreamRequests] =
     React.useState({});
@@ -17,11 +32,12 @@ const CurrentLiveStreamRequestsView = (props: any) => {
   useEffect(() => {
     setActiveLiveStreamRequests(
       filterObject(
-        currLiveStreamRequest,
-        ([k, v]) => v?.status === requestStatus.AwaitingAction,
+        raiseHandList,
+        ([k, v]) =>
+          v?.raised === RaiseHandValue.TRUE && v?.role == ClientRole.Audience,
       ),
     );
-  }, [currLiveStreamRequest]);
+  }, [raiseHandList]);
 
   React.useEffect(() => {
     // On unmount update the timestamp, if the user was already active in this view
@@ -33,31 +49,29 @@ const CurrentLiveStreamRequestsView = (props: any) => {
   return (
     <>
       <ParticipantSectionTitle
-        title="Streaming Request "
+        title={raisedHandsListTitleLabel + ' '}
         count={Object.keys(activeLiveStreamRequests).length}
       />
       <View style={p_style.participantContainer}>
-        {Object.keys(currLiveStreamRequest).length == 0 ||
+        {Object.keys(raiseHandList).length == 0 ||
         Object.keys(activeLiveStreamRequests).length == 0 ? (
-          <Text style={p_style.infoText}>No streaming request(s)</Text>
+          <Text style={p_style.infoText}>{noLiveStreamingRequestsLabel}</Text>
         ) : (
           Object.keys(activeLiveStreamRequests).map(
             (userUID: any, index: number) =>
-              userList[userUID] ? (
+              renderList[userUID] ? (
                 <View style={p_style.participantRow} key={index}>
-                  <ParticipantName value={userList[userUID]?.name || 'User'} />
+                  <ParticipantName
+                    value={renderList[userUID]?.name || remoteUserDefaultLabel}
+                  />
                   <View style={p_style.participantActionContainer}>
-                    <RemoteLiveStreamRequestApprove
-                      user={{...userList[userUID], uid: userUID}}
-                    />
-                    <RemoteLiveStreamRequestReject
-                      user={{...userList[userUID], uid: userUID}}
-                    />
+                    <RemoteLiveStreamRequestApprove uid={userUID} />
+                    <RemoteLiveStreamRequestReject uid={userUID} />
                   </View>
                 </View>
               ) : (
                 <View style={p_style.participantRow} key={index}>
-                  <ParticipantName value={'User not found'} />
+                  <ParticipantName value={noUserFoundLabel} />
                 </View>
               ),
           )

package/template/src/subComponents/livestream/controls/LocalRaiseHand.tsx

@@ -11,34 +11,48 @@
 */
 import React, {useContext} from 'react';
 import {StyleSheet} from 'react-native';
-import LiveStreamContext from '../../../components/livestream';
+import LiveStreamContext, {
+  RaiseHandValue,
+} from '../../../components/livestream';
 import {PropsContext} from '../../../../agora-rn-uikit';
 import {BtnTemplate} from '../../../../agora-rn-uikit';
 import icons from '../../../assets/icons';
+import {useString} from '../../../utils/useString';
+import ChatContext from '../../../components/ChatContext';
 
 const LocalRaiseHand = () => {
   const {styleProps} = useContext(PropsContext);
-  const {audienceSendsRequest, audienceRecallsRequest, raiseHandRequestActive} =
+  const {audienceSendsRequest, audienceRecallsRequest, raiseHandList} =
     useContext(LiveStreamContext);
+  const {localUid} = useContext(ChatContext);
   const {localBtnStyles} = styleProps || {};
   const {theme} = styleProps || {};
   const {muteLocalAudio} = localBtnStyles || {};
-
+  //commented for v1 release
+  //const handStatusText = useString<boolean>('raiseHandButton');
+  const handStatusText = (toggle: boolean) =>
+    toggle ? 'Lower hand' : 'Raise Hand';
   return (
     <BtnTemplate
       icon={icons['raiseHandIcon']}
-      btnText={raiseHandRequestActive ? 'Lower hand' : 'Raise Hand'}
-      color={raiseHandRequestActive ? '#FD0845' : theme}
+      btnText={handStatusText(
+        raiseHandList[localUid]?.raised === RaiseHandValue.TRUE,
+      )}
+      color={
+        raiseHandList[localUid]?.raised === RaiseHandValue.TRUE
+          ? '#FD0845'
+          : theme
+      }
       style={{
         ...style.localBtn,
         ...(localBtnStyles as object),
         ...(muteLocalAudio as object),
       }}
       onPress={() => {
-        if (!raiseHandRequestActive) {
-          audienceSendsRequest();
-        } else {
+        if (raiseHandList[localUid]?.raised === RaiseHandValue.TRUE) {
           audienceRecallsRequest();
+        } else {
+          audienceSendsRequest();
         }
       }}
     />

package/template/src/subComponents/livestream/controls/RemoteLiveStreamApprovedRequestRecall.tsx

@@ -1,17 +1,22 @@
-import React, {useContext} from 'react';
-import ChatContext from '../../../components/ChatContext';
-import {BtnTemplate} from '../../../../agora-rn-uikit';
+import React from 'react';
+import {BtnTemplate, UidType} from '../../../../agora-rn-uikit';
 import {LiveStreamControlMessageEnum} from '../../../components/livestream';
 import icons from '../../../assets/icons';
+import CustomEvents from '../../../custom-events';
 
-const RemoteLiveStreamApprovedRequestRecall = (props: {uid: number}) => {
-  const {sendControlMessageToUid} = useContext(ChatContext);
+export interface RemoteLiveStreamApprovedRequestRecallProps {
+  uid: UidType;
+}
+const RemoteLiveStreamApprovedRequestRecall = (
+  props: RemoteLiveStreamApprovedRequestRecallProps,
+) => {
   return (
     <BtnTemplate
       style={{width: 24, height: 22}}
       onPress={() => {
-        sendControlMessageToUid(
-          LiveStreamControlMessageEnum.raiseHandApprovedRequestRecall,
+        CustomEvents.send(
+          LiveStreamControlMessageEnum.raiseHandRequestRejected,
+          {},
           props.uid,
         );
       }}

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestApprove.tsx

@@ -1,38 +1,35 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {
-  BtnTemplate,
-  PropsContext,
-  UidInterface,
-} from '../../../../agora-rn-uikit';
+import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
 import icons from '../../../assets/icons';
 
-interface RemoteLiveStreamControlInterface {
-  user: UidInterface;
+export interface RemoteLiveStreamControlInterface {
+  uid: UidType;
 }
 
-const RemoteLiveStreamRequestApprove: React.FC<RemoteLiveStreamControlInterface> =
-  (props) => {
-    const {user} = props;
-    const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);
-    const {styleProps} = useContext(PropsContext);
-    const {remoteBtnStyles} = styleProps || {};
+const RemoteLiveStreamRequestApprove = (
+  props: RemoteLiveStreamControlInterface,
+) => {
+  const {uid} = props;
+  const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);
+  const {styleProps} = useContext(PropsContext);
+  const {remoteBtnStyles} = styleProps || {};
 
-    const {liveStreamHostControlBtns} = remoteBtnStyles || {};
+  const {liveStreamHostControlBtns} = remoteBtnStyles || {};
 
-    return (
-      <View style={{...(liveStreamHostControlBtns as object), marginRight: 15}}>
-        <BtnTemplate
-          disabled={!user?.uid}
-          icon={icons['checkCircleIcon']}
-          style={{...(liveStreamHostControlBtns as object)}}
-          onPress={() => {
-            hostApprovesRequestOfUID(user?.uid);
-          }}
-        />
-      </View>
-    );
-  };
+  return (
+    <View style={{...(liveStreamHostControlBtns as object), marginRight: 15}}>
+      <BtnTemplate
+        disabled={!uid}
+        icon={icons['checkCircleIcon']}
+        style={{...(liveStreamHostControlBtns as object)}}
+        onPress={() => {
+          hostApprovesRequestOfUID(uid);
+        }}
+      />
+    </View>
+  );
+};
 
 export default RemoteLiveStreamRequestApprove;

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestReject.tsx

@@ -1,37 +1,34 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {
-  BtnTemplate,
-  PropsContext,
-  UidInterface,
-} from '../../../../agora-rn-uikit';
+import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
 import icons from '../../../assets/icons';
 
 interface RemoteLiveStreamControlInterface {
-  user: UidInterface;
+  uid: UidType;
 }
 
-const RemoteLiveStreamRequestReject: React.FC<RemoteLiveStreamControlInterface> =
-  (props) => {
-    const {user} = props;
-    const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
-    const {styleProps} = useContext(PropsContext);
-    const {remoteBtnStyles} = styleProps || {};
-    const {liveStreamHostControlBtns} = remoteBtnStyles || {};
+const RemoteLiveStreamRequestReject = (
+  props: RemoteLiveStreamControlInterface,
+) => {
+  const {uid} = props;
+  const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
+  const {styleProps} = useContext(PropsContext);
+  const {remoteBtnStyles} = styleProps || {};
+  const {liveStreamHostControlBtns} = remoteBtnStyles || {};
 
-    return (
-      <View style={{...(liveStreamHostControlBtns as object)}}>
-        <BtnTemplate
-          disabled={!user?.uid}
-          icon={icons['crossCircleIcon']}
-          style={{...(liveStreamHostControlBtns as object)}}
-          onPress={() => {
-            hostRejectsRequestOfUID(user.uid);
-          }}
-        />
-      </View>
-    );
-  };
+  return (
+    <View style={{...(liveStreamHostControlBtns as object)}}>
+      <BtnTemplate
+        disabled={!uid}
+        icon={icons['crossCircleIcon']}
+        style={{...(liveStreamHostControlBtns as object)}}
+        onPress={() => {
+          hostRejectsRequestOfUID(uid);
+        }}
+      />
+    </View>
+  );
+};
 
 export default RemoteLiveStreamRequestReject;

package/template/src/subComponents/livestream/index.ts

@@ -1,6 +1,10 @@
 // Remote controls
-import RemoteLiveStreamApprovedRequestRecall from './controls/RemoteLiveStreamApprovedRequestRecall';
-import RemoteLiveStreamRequestApprove from './controls/RemoteLiveStreamRequestApprove';
+import RemoteLiveStreamApprovedRequestRecall, {
+  RemoteLiveStreamApprovedRequestRecallProps,
+} from './controls/RemoteLiveStreamApprovedRequestRecall';
+import RemoteLiveStreamRequestApprove, {
+  RemoteLiveStreamControlInterface,
+} from './controls/RemoteLiveStreamRequestApprove';
 import RemoteLiveStreamRequestReject from './controls/RemoteLiveStreamRequestReject';
 // Local controls
 import LocalRaiseHand from './controls/LocalRaiseHand';
@@ -8,6 +12,10 @@ import LocalRaiseHand from './controls/LocalRaiseHand';
 import CurrentLiveStreamRequestsView from './CurrentLiveStreamRequestsView';
 import ApprovedLiveStreamControlsView from './ApprovedLiveStreamControlsView';
 
+export type {
+  RemoteLiveStreamApprovedRequestRecallProps,
+  RemoteLiveStreamControlInterface,
+};
 export {
   RemoteLiveStreamApprovedRequestRecall,
   RemoteLiveStreamRequestApprove,