@100mslive/react-native-room-kit 0.0.3 → 0.0.4

package/src/components/{HMSSpeakerSettings.tsx → HMSManageAudioOutput.tsx}

@@ -18,6 +18,7 @@ import {
 import {
   AnswerPhoneIcon,
   BluetoothIcon,
+  CheckIcon,
   HeadphonesIcon,
   SpeakerIcon,
   WaveIcon,
@@ -28,7 +29,7 @@ import { CloseIcon } from '../Icons';
 import { useHMSInstance } from '../hooks-util';
 import type { RootState } from '../redux';
 
-export const HMSSpeakerSettings: React.FC = () => {
+export const HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
   const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
 
@@ -147,7 +148,7 @@ export const HMSSpeakerSettings: React.FC = () => {
       >
         <View style={styles.container}>
           <View style={styles.header}>
-            <Text style={styles.headerText}>Speaker Settings</Text>
+            <Text style={styles.headerText}>Audio Output</Text>
 
             <TouchableOpacity
               onPress={dismissModal}
@@ -163,19 +164,37 @@ export const HMSSpeakerSettings: React.FC = () => {
             </View>
           ) : (
             <ScrollView showsVerticalScrollIndicator={true}>
-              {availableAudioOutputDevices.sort().map((device) => (
-                <React.Fragment key={device}>
-                  {true ? <View style={styles.divider} /> : null}
+              {availableAudioOutputDevices
+                .sort(
+                  (a, b) => audioDeviceSortOrder[a] - audioDeviceSortOrder[b]
+                )
+                .map((device) => (
+                  <React.Fragment key={device}>
+                    <View style={styles.divider} />
 
-                  <TouchableOpacity
-                    style={styles.audioDeviceItem}
-                    onPress={() => handleSelectAudioDevice(device)}
-                  >
-                    {getIcon(device)}
-                    <Text style={styles.itemText}>{device}</Text>
-                  </TouchableOpacity>
-                </React.Fragment>
-              ))}
+                    <TouchableOpacity
+                      style={styles.audioDeviceItem}
+                      onPress={() => handleSelectAudioDevice(device)}
+                    >
+                      <View style={styles.itemTextWrapper}>
+                        {getIcon(
+                          device === HMSAudioDevice.AUTOMATIC &&
+                            currentAudioOutputDevice
+                            ? currentAudioOutputDevice
+                            : device
+                        )}
+
+                        <Text style={styles.itemText}>
+                          {getDescription(device, currentAudioOutputDevice)}
+                        </Text>
+                      </View>
+
+                      {device === currentAudioOutputDevice ? (
+                        <CheckIcon />
+                      ) : null}
+                    </TouchableOpacity>
+                  </React.Fragment>
+                ))}
             </ScrollView>
           )}
         </View>
@@ -190,7 +209,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   container: {
-    backgroundColor: COLORS.SURFACE.DIM,
+    backgroundColor: COLORS.BACKGROUND.DEFAULT,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     paddingTop: 24,
@@ -217,8 +236,12 @@ const styles = StyleSheet.create({
     right: 16,
     top: 16,
   },
+  itemTextWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   itemText: {
-    flex: 1,
     marginHorizontal: 16,
     color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
@@ -235,7 +258,8 @@ const styles = StyleSheet.create({
   audioDeviceItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 24,
+    justifyContent: 'space-between',
+    paddingVertical: 20,
   },
   divider: {
     height: 1,
@@ -257,3 +281,31 @@ const getIcon = (ofDevice: HMSAudioDevice) => {
       return <HeadphonesIcon />;
   }
 };
+
+const getDescription = (
+  ofDevice: HMSAudioDevice,
+  currentDevice: HMSAudioDevice | null
+): string => {
+  switch (ofDevice) {
+    case HMSAudioDevice.AUTOMATIC:
+      return currentDevice && currentDevice !== HMSAudioDevice.AUTOMATIC
+        ? `Default (${getDescription(currentDevice, currentDevice)})`
+        : 'Automatic';
+    case HMSAudioDevice.BLUETOOTH:
+      return 'Bluetooth Device';
+    case HMSAudioDevice.EARPIECE:
+      return 'Phone';
+    case HMSAudioDevice.SPEAKER_PHONE:
+      return 'Speaker';
+    case HMSAudioDevice.WIRED_HEADSET:
+      return 'Earphone';
+  }
+};
+
+const audioDeviceSortOrder = {
+  [HMSAudioDevice.AUTOMATIC]: 0,
+  [HMSAudioDevice.SPEAKER_PHONE]: 1,
+  [HMSAudioDevice.WIRED_HEADSET]: 2,
+  [HMSAudioDevice.EARPIECE]: 3,
+  [HMSAudioDevice.BLUETOOTH]: 4,
+} as const;

package/src/components/HMSManageLeave.tsx

@@ -1,15 +1,12 @@
-import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Modal from 'react-native-modal';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Toast from 'react-native-simple-toast';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { AlertIcon, LeaveIcon } from '../Icons';
-import { useHMSInstance } from '../hooks-util';
+import { useLeaveMethods } from '../hooks-util';
 import type { RootState } from '../redux';
-import { clearStore } from '../redux/actions';
 import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
 import { DefaultModal } from './DefaultModal';
@@ -36,10 +33,6 @@ type LeaveButtonProps =
     };
 
 const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
-  // TODO: What if useNavigation context is undefined?
-  const navigation = useNavigation();
-  const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
   const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
 
   const [leavePopVisible, setLeavePopVisible] = React.useState(false);
@@ -97,71 +90,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 
   const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
 
-  const destroy = () => {
-    hmsInstance
-      .destroy()
-      .then((s) => {
-        console.log('Destroy Success: ', s);
-        // TODOS:
-        // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
-        //    - Reset Redux States
-        //    - HMSInstance will not be available now
-        //    - When your presses "Re Join" Action button, restart process from root component
-        //    - When your presses "Done" Action button
-        //        - If we have callback fn, call it
-        //        - Otherwise try our best to navigate away from current screen
-        //
-        // - No screen to show
-        //    - No need to reset redux state?
-        //    - HMSInstance will be available till this point
-        //    - If we have callback fn, call it
-        //    - Otherwise try our best to navigate away from current screen
-        //    - When we are navigated away from screen, HMSInstance will be not available
-
-        // dispatch(clearMessageData());
-        // dispatch(clearPeerData());
-        // dispatch(clearHmsReference());
-
-        // if (navigation.canGoBack()) {
-        //   navigation.goBack();
-        // } else {
-        // TODO: remove this later
-        navigation.navigate('QRCodeScreen' as never);
-        dispatch(clearStore());
-        // }
-      })
-      .catch((e) => {
-        console.log(`Destroy HMS instance Error: ${e}`);
-        Toast.showWithGravity(
-          `Destroy HMS instance Error: ${e}`,
-          Toast.LONG,
-          Toast.TOP
-        );
-      });
-  };
-
-  const onLeavePress = () => {
-    hmsInstance
-      .leave()
-      .then((d) => {
-        console.log('Leave Success: ', d);
-        destroy();
-      })
-      .catch((e) => {
-        console.log(`Leave Room Error: ${e}`);
-        Toast.showWithGravity(`Leave Room Error: ${e}`, Toast.LONG, Toast.TOP);
-      });
-  };
-
-  const onEndRoomPress = () => {
-    hmsInstance
-      .endRoom('Host ended the room')
-      .then((d) => {
-        console.log('EndRoom Success: ', d);
-        destroy();
-      })
-      .catch((e) => console.log('EndRoom Error: ', e));
-  };
+  const { leave, endRoom } = useLeaveMethods();
 
   const leaveIconDelegate =
     'leaveIconDelegate' in props && props.leaveIconDelegate ? (
@@ -197,7 +126,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         modalVisible={leaveModalType === ModalTypes.LEAVE_ROOM}
         setModalVisible={dismissModal}
       >
-        <LeaveRoomModal onSuccess={onLeavePress} cancelModal={dismissModal} />
+        <LeaveRoomModal onSuccess={leave} cancelModal={dismissModal} />
       </DefaultModal>
 
       <DefaultModal
@@ -205,7 +134,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         modalVisible={leaveModalType === ModalTypes.END_ROOM}
         setModalVisible={dismissModal}
       >
-        <EndRoomModal onSuccess={onEndRoomPress} cancelModal={dismissModal} />
+        <EndRoomModal onSuccess={endRoom} cancelModal={dismissModal} />
       </DefaultModal>
     </View>
   );
@@ -272,7 +201,7 @@ const LeavePopup: React.FC<LeavePopupProps> = ({
           onPress={onLeavePress}
         >
           <LeaveIcon style={leavePopupStyles.leaveButtonIcon} />
-          <Text style={leavePopupStyles.leaveButtonText}>Leave</Text>
+          <Text style={leavePopupStyles.leaveButtonText}>Leave Studio</Text>
         </TouchableOpacity>
 
         {canEndRoom ? (

package/src/components/HMSMeetingEnded.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { COLORS } from '../utils/theme';
+
+export const HMSMeetingEnded = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Meeting Ended</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 24,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 32,
+  },
+});

package/src/components/HMSPreviewEditName.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, TextInput } from 'react-native';
+import { Platform, StyleSheet, TextInput } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { COLORS } from '../utils/theme';
@@ -11,13 +11,13 @@ export interface HMSPreviewEditNameProps {}
 
 export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
-  const { clearConfig } = useHMSConfig();
+  const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
   const [inputFocused, setInputFocused] = React.useState(false);
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));
-    clearConfig();
+    updateConfig({ username: name });
   };
 
   const handleInputFocus = () => setInputFocused(true);
@@ -43,13 +43,14 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
 const styles = StyleSheet.create({
   input: {
     flex: 1,
+    height: 50,
     textAlignVertical: 'center',
     backgroundColor: COLORS.SURFACE.DEFAULT,
     paddingHorizontal: 16,
-    paddingVertical: 12,
     borderRadius: 8,
     color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 16,
+    lineHeight: Platform.OS === 'android' ? 24 : undefined,
     fontFamily: 'Inter',
     fontWeight: '400',
     letterSpacing: 0.5,

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+
+export const HMSPreviewHLSLiveIndicator = () => {
+  const isHLSStreaming = useSelector(
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.running
+  );
+
+  if (!isHLSStreaming) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.circleContainer}>
+        <View style={styles.circle} />
+      </View>
+      <Text style={styles.text}>LIVE</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 20,
+    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
+    paddingLeft: 8,
+    paddingRight: 12,
+    marginRight: 8,
+  },
+  circleContainer: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circle: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: COLORS.WHITE,
+  },
+  text: {
+    marginLeft: 4,
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});

package/src/components/HMSPreviewJoinButton.tsx

@@ -9,6 +9,8 @@ import { useSelector } from 'react-redux';
 
 import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
+import { RadioIcon } from '../Icons';
+import { useShouldGoLive } from '../hooks-util';
 
 export interface HMSPreviewJoinButtonProps {
   onJoin(): void;
@@ -23,15 +25,14 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
     (state: RootState) => state.user.userName.length <= 0
   );
 
+  const shouldGoLive = useShouldGoLive();
+
   const disabledJoin = userNameInvalid || loading;
 
   return (
     <TouchableHighlight
       underlayColor={COLORS.PRIMARY.DARK}
-      style={[
-        styles.button,
-        disabledJoin ? { backgroundColor: COLORS.PRIMARY.DISABLED } : null,
-      ]}
+      style={[styles.button, disabledJoin ? styles.disabledButton : null]}
       onPress={onJoin}
       disabled={disabledJoin}
     >
@@ -44,14 +45,23 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
           />
         ) : null}
 
+        {shouldGoLive ? (
+          <RadioIcon
+            style={[
+              loading ? styles.hiddenView : null,
+              disabledJoin ? styles.disabledIcon : null,
+            ]}
+          />
+        ) : null}
+
         <Text
           style={[
             styles.text,
-            { opacity: loading ? 0 : undefined },
-            disabledJoin ? { color: COLORS.PRIMARY.ON_PRIMARY.LOW } : null,
+            loading ? styles.hiddenView : null,
+            disabledJoin ? styles.disabledText : null,
           ]}
         >
-          Join Now
+          {shouldGoLive ? 'Go Live' : 'Join Now'}
         </Text>
       </>
     </TouchableHighlight>
@@ -60,6 +70,7 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
 
 const styles = StyleSheet.create({
   button: {
+    flexDirection: 'row',
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 8,
@@ -78,4 +89,16 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
   },
   loader: { position: 'absolute' },
+  disabledButton: {
+    backgroundColor: COLORS.PRIMARY.DISABLED,
+  },
+  disabledIcon: {
+    tintColor: COLORS.PRIMARY.ON_PRIMARY.LOW,
+  },
+  disabledText: {
+    color: COLORS.PRIMARY.ON_PRIMARY.LOW,
+  },
+  hiddenView: {
+    opacity: 0,
+  },
 });

package/src/components/HMSPreviewNetworkQuality.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { NetworkQualityIcon } from '../Icons';
+import { COLORS } from '..//utils/theme';
+import type { RootState } from '../redux';
+import { useHMSInstance } from '../hooks-util';
+
+export const HMSPreviewNetworkQuality = () => {
+  const hmsInstance = useHMSInstance();
+  const localPeerNetworkQuality = useSelector(
+    (state: RootState) =>
+      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
+  );
+
+  React.useEffect(() => {
+    hmsInstance.enableNetworkQualityUpdates();
+
+    return () => hmsInstance.disableNetworkQualityUpdates();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <NetworkQualityIcon quality={localPeerNetworkQuality} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: 8,
+    marginBottom: 8,
+    borderRadius: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    backgroundColor: COLORS.BACKGROUND.DIM_80,
+    alignSelf: 'flex-start',
+  },
+});

package/src/components/HMSPreviewPeersList.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import type { HMSPeer } from '@100mslive/react-native-hms';
 
 import { COLORS } from '../utils/theme';
-import { ParticipantsIcon } from '../Icons';
 import type { RootState } from '../redux';
 
 export interface HMSPreviewPeersListProps {}
@@ -16,49 +14,21 @@ export const HMSPreviewPeersList: React.FC<HMSPreviewPeersListProps> = () => {
 
   return (
     <View style={styles.container}>
-      {previewPeersList.length > 0 ? <ParticipantsIcon /> : null}
-
-      {previewPeersList.length === 0 ? (
-        <Text style={[styles.text, styles.textSpacer]}>
-          You are the first to join
-        </Text>
-      ) : previewPeersList.length === 1 ? (
-        <Text style={[styles.text, styles.textSpacer]}>
-          {previewPeersList[0]!.name} has joined
-        </Text>
-      ) : (
-        <View style={styles.multiTextContainer}>
-          <Text
-            style={[styles.text, styles.flexView]}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-          >
-            {previewPeersList
-              .slice(0, 2)
-              .map((peer: HMSPeer) => peer.name)
-              .join(', ')}
-          </Text>
-
-          {previewPeersList.length - 2 > 0 ? (
-            <Text style={styles.text}>
-              {' '}
-              +{previewPeersList.length - 2}{' '}
-              {previewPeersList.length - 2 > 1 ? 'others' : 'other'}
-            </Text>
-          ) : null}
-        </View>
-      )}
+      <Text style={[styles.text, styles.textSpacer]}>
+        {previewPeersList.length === 0
+          ? 'You are the first to join'
+          : `${previewPeersList.length} ${
+              previewPeersList.length > 1 ? 'others' : 'other'
+            } in session`}
+      </Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: COLORS.SURFACE.DEFAULT,
-    marginTop: 16,
-    alignSelf: 'center',
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 20,
@@ -75,13 +45,4 @@ const styles = StyleSheet.create({
   textSpacer: {
     marginHorizontal: 8,
   },
-  flexView: {
-    flex: 1,
-    flexShrink: 1,
-  },
-  multiTextContainer: {
-    flexDirection: 'row',
-    marginHorizontal: 8,
-    maxWidth: '70%',
-  },
 });

package/src/components/HMSPreviewSubtitle.tsx

@@ -2,15 +2,39 @@ import * as React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import { COLORS } from '../utils/theme';
+import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
 
 export interface HMSPreviewSubtitleProps {
   subtitle?: string;
 }
 
 export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
-  subtitle = 'Setup your audio and video before joining',
+  subtitle,
 }) => {
-  return <Text style={styles.title}>{subtitle}</Text>;
+  const canPublishAudio = useCanPublishAudio();
+  const canPublishVideo = useCanPublishVideo();
+
+  if (subtitle) {
+    return <Text style={styles.title}>{subtitle}</Text>;
+  }
+
+  if (canPublishAudio && canPublishVideo) {
+    return (
+      <Text style={styles.title}>
+        Setup your audio and video before joining
+      </Text>
+    );
+  }
+
+  if (canPublishAudio) {
+    return <Text style={styles.title}>Setup your audio before joining</Text>;
+  }
+
+  if (canPublishVideo) {
+    return <Text style={styles.title}>Setup your video before joining</Text>;
+  }
+
+  return <Text style={styles.title}>Enter your name before joining</Text>;
 };
 
 const styles = StyleSheet.create({

package/src/components/HMSPreviewTile.tsx

@@ -1,23 +1,14 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { HMSVideoViewMode } from '@100mslive/react-native-hms';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { PersonIcon } from '../Icons';
-import { useHMSInstance } from '../hooks-util';
 import type { RootState } from '../redux';
 import { getInitials } from '../utils/functions';
 import { COLORS } from '../utils/theme';
+import { HMSLocalVideoView } from './HMSLocalVideoView';
 
 export const HMSPreviewTile: React.FC = () => {
-  const hmsInstance = useHMSInstance();
-  const HmsView = hmsInstance.HmsView;
-  const mirrorCamera = useSelector(
-    (state: RootState) => state.app.joinConfig.mirrorCamera
-  );
-  const autoSimulcast = useSelector(
-    (state: RootState) => state.app.joinConfig.autoSimulcast
-  );
   const isLocalVideoMuted = useSelector(
     (state: RootState) => state.hmsStates.isLocalVideoMuted
   );
@@ -26,12 +17,6 @@ export const HMSPreviewTile: React.FC = () => {
   );
   const userName = useSelector((state: RootState) => state.user.userName);
 
-  React.useEffect(() => {
-    hmsInstance.enableNetworkQualityUpdates();
-
-    return () => hmsInstance.disableNetworkQualityUpdates();
-  }, []);
-
   return (
     <View style={styles.modalContainer}>
       {isLocalVideoMuted || !localVideoTrackId ? (
@@ -45,14 +30,7 @@ export const HMSPreviewTile: React.FC = () => {
           </View>
         </View>
       ) : (
-        <HmsView
-          trackId={localVideoTrackId}
-          key={localVideoTrackId}
-          mirror={mirrorCamera}
-          autoSimulcast={autoSimulcast}
-          scaleType={HMSVideoViewMode.ASPECT_FILL}
-          style={styles.hmsView}
-        />
+        <HMSLocalVideoView />
       )}
     </View>
   );