@100mslive/react-native-room-kit 0.2.0 → 1.0.1

package/src/components/PeerSettingsModalContent.tsx

@@ -7,20 +7,22 @@ import {
   LayoutAnimation,
   InteractionManager,
 } from 'react-native';
-import { batch, useDispatch, useSelector } from 'react-redux';
-import { HMSTrack, HMSTrackSource } from '@100mslive/react-native-hms';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import type { StyleProp, TextStyle } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { HMSTrack } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
-import { isTileOnSpotlight } from '../utils/functions';
-import { setInsetViewMinimized, setPeerToUpdate } from '../redux/actions';
+import { setInsetViewMinimized } from '../redux/actions';
 import { useHMSRoomStyle, useModalType } from '../hooks-util';
-import { MinimizeIcon, PinIcon, StarIcon } from '../Icons';
-import { useCanPublishVideo } from '../hooks-sdk';
+import {
+  CameraIcon,
+  MicIcon,
+  MinimizeIcon,
+  PencilIcon,
+  PersonIcon,
+} from '../Icons';
 import { BottomSheet } from './BottomSheet';
 
 interface PeerSettingsModalContentProps {
@@ -34,28 +36,22 @@ interface PeerSettingsModalContentProps {
 
 export const PeerSettingsModalContent: React.FC<
   PeerSettingsModalContentProps
-> = ({
-  peerTrackNode,
-  peerTrackNodesListEmpty,
-  cancelModal,
-  onCaptureScreenShotPress,
-  onCaptureImageAtMaxSupportedResolutionPress,
-  onStreamingQualityPress,
-}) => {
+> = ({ peerTrackNode, peerTrackNodesListEmpty, cancelModal }) => {
   const dispatch = useDispatch();
   const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
   const localPeer = useSelector(
     (state: RootState) => state.hmsStates.localPeer
   );
-  const hmsSessionStore = useSelector(
-    (state: RootState) => state.user.hmsSessionStore
-  );
-  const spotlightTrackId = useSelector(
-    (state: RootState) => state.user.spotlightTrackId
-  );
-  const debugMode = useSelector((state: RootState) => state.user.debugMode);
+  const settingsForMiniview = useSelector((state: RootState) => {
+    const mininode = state.app.miniviewPeerTrackNode;
+    return mininode && mininode.id === peerTrackNode.id;
+  });
+
+  const removeTextStyle = useHMSRoomStyle((theme) => ({
+    color: theme.palette.alert_error_default,
+  }));
+
   const { handleModalVisibleType: setModalVisible } = useModalType();
-  const localPeerCanPublishVideo = useCanPublishVideo();
 
   const removePeer = () => {
     hmsInstance
@@ -92,12 +88,9 @@ export const PeerSettingsModalContent: React.FC<
     );
   };
 
-  // const changeName = () => {
-  //   batch(() => {
-  //     dispatch(setPeerToUpdate(peerTrackNode.peer));
-  //     setModalVisible(ModalTypes.CHANGE_NAME, true);
-  //   });
-  // };
+  const changeName = () => {
+    setModalVisible(ModalTypes.CHANGE_NAME, true);
+  };
 
   const handleMinimizeVideoPress = () => {
     cancelModal();
@@ -107,44 +100,6 @@ export const PeerSettingsModalContent: React.FC<
     });
   };
 
-  const changeRole = () => {
-    batch(() => {
-      dispatch(setPeerToUpdate(peerTrackNode.peer));
-      setModalVisible(ModalTypes.CHANGE_ROLE, true);
-    });
-  };
-
-  // Check if selected tile is "On Spotlight"
-  const { onSpotlight, tileVideoTrackId, tileAudioTrackId } = isTileOnSpotlight(
-    spotlightTrackId,
-    {
-      tileVideoTrack: peerTrackNode.track,
-      peerRegularAudioTrack: peerTrackNode.peer.audioTrack,
-      peerAuxTracks: peerTrackNode.peer.auxiliaryTracks,
-    }
-  );
-
-  const handleSpotlightPress = async () => {
-    try {
-      // Close Modal
-      cancelModal();
-
-      if (!hmsSessionStore) {
-        return null;
-      }
-
-      if (tileAudioTrackId || tileVideoTrackId) {
-        // Toggle `spotlight` key value on Session Store
-        await hmsSessionStore.set(
-          onSpotlight ? null : tileAudioTrackId || tileVideoTrackId,
-          'spotlight'
-        );
-      }
-    } catch (error) {
-      console.log('Add to spotlight error -> ', error);
-    }
-  };
-
   const { peer } = peerTrackNode;
 
   const localPeerPermissions = localPeer?.role?.permissions;
@@ -164,31 +119,16 @@ export const PeerSettingsModalContent: React.FC<
 
       {/* Content */}
       <View style={styles.contentContainer}>
-        {peer.isLocal ? ( // TODO: Remove this condition later
+        {peer.isLocal ? (
           <SettingItem
-            customIcon={true}
-            text={true ? 'Pin Tile for Myself' : 'Unpin Tile for Myself'}
-            icon={<PinIcon style={styles.customIcon} />}
-            disabled={true}
-            onPress={() => {}}
+            text={'Change Name'}
+            icon={<PencilIcon style={styles.customIcon} />}
+            onPress={changeName}
           />
         ) : null}
 
-        <SettingItem
-          customIcon={true}
-          text={
-            onSpotlight
-              ? 'Remove Spotlight for Everyone'
-              : 'Spotlight Tile for Everyone'
-          }
-          icon={<StarIcon style={styles.customIcon} />}
-          onPress={handleSpotlightPress}
-          disabled={!peerTrackNode.track?.trackId}
-        />
-
-        {peer.isLocal && localPeerCanPublishVideo ? (
+        {settingsForMiniview ? (
           <SettingItem
-            customIcon={true}
             text={'Minimize Your Video'}
             icon={<MinimizeIcon style={styles.customIcon} />}
             onPress={handleMinimizeVideoPress}
@@ -203,8 +143,7 @@ export const PeerSettingsModalContent: React.FC<
             {isPeerAudioMute && localPeerPermissions?.unmute ? (
               <SettingItem
                 text={'Request Audio Unmute'}
-                IconType={Ionicons}
-                iconName={'mic-off-outline'}
+                icon={<MicIcon muted={false} style={styles.customIcon} />}
                 onPress={toggleMuteAudio}
               />
             ) : null}
@@ -213,8 +152,7 @@ export const PeerSettingsModalContent: React.FC<
             {!isPeerAudioMute && localPeerPermissions?.mute ? (
               <SettingItem
                 text={'Mute Audio'}
-                IconType={Ionicons}
-                iconName={'mic-outline'}
+                icon={<MicIcon muted={true} style={styles.customIcon} />}
                 onPress={toggleMuteAudio}
               />
             ) : null}
@@ -228,8 +166,7 @@ export const PeerSettingsModalContent: React.FC<
             {isPeerVideoMute && localPeerPermissions?.unmute ? (
               <SettingItem
                 text={'Request Video Unmute'}
-                IconType={MaterialCommunityIcons}
-                iconName={'video-off-outline'}
+                icon={<CameraIcon muted={false} style={styles.customIcon} />}
                 onPress={toggleMuteVideo}
               />
             ) : null}
@@ -238,8 +175,7 @@ export const PeerSettingsModalContent: React.FC<
             {!isPeerVideoMute && localPeerPermissions?.mute ? (
               <SettingItem
                 text={'Mute Video'}
-                IconType={MaterialCommunityIcons}
-                iconName={'video-outline'}
+                icon={<CameraIcon muted={true} style={styles.customIcon} />}
                 onPress={toggleMuteVideo}
               />
             ) : null}
@@ -248,102 +184,31 @@ export const PeerSettingsModalContent: React.FC<
 
         {!peer.isLocal && localPeerPermissions?.removeOthers ? (
           <SettingItem
-            text="Remove Peer"
-            IconType={Ionicons}
-            iconName={'person-remove-outline'}
+            text="Remove Participant"
+            textStyle={removeTextStyle}
+            icon={<PersonIcon type="left" style={styles.customIcon} />}
             onPress={removePeer}
           />
         ) : null}
-
-        {/* {peer.isLocal ? (
-          <SettingItem
-            text="Change Name"
-            IconType={MaterialCommunityIcons}
-            iconName={'account-edit-outline'}
-            onPress={() => changeName()}
-          />
-        ) : null} */}
-
-        {!peer.isLocal && localPeerPermissions?.changeRole ? (
-          <SettingItem
-            text="Change Role"
-            IconType={Ionicons}
-            iconName={'people-outline'}
-            onPress={() => changeRole()}
-          />
-        ) : null}
-
-        {/* Don't show Capture Screenshot option, if track is screenshare of local peer */}
-        {!debugMode ||
-        (peerTrackNode.peer.isLocal &&
-          peerTrackNode.track &&
-          peerTrackNode.track.source === HMSTrackSource.SCREEN) ? null : (
-          <SettingItem
-            text="Capture Screenshot"
-            IconType={MaterialCommunityIcons}
-            iconName={'cellphone-screenshot'}
-            onPress={() => onCaptureScreenShotPress(peerTrackNode)}
-            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Capture Screenshot option should be disable, if track is muted or not available
-          />
-        )}
-
-        {/* Local Image Capture is only available for local peer */}
-        {debugMode && peerTrackNode.peer.isLocal ? (
-          <SettingItem
-            text="Local Image Capture"
-            IconType={MaterialCommunityIcons}
-            iconName={'cellphone-screenshot'}
-            onPress={() =>
-              onCaptureImageAtMaxSupportedResolutionPress(peerTrackNode)
-            }
-            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Local Image Capture option should be disable, if track is muted or not available
-          />
-        ) : null}
-
-        {/* Don't show Streaming Quality option for local peer */}
-        {debugMode && !peer.isLocal ? (
-          <SettingItem
-            text="Streaming Quality"
-            IconType={Ionicons}
-            iconName={'layers-outline'}
-            onPress={() =>
-              peerTrackNode.track
-                ? onStreamingQualityPress(peerTrackNode.track)
-                : null
-            }
-            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Streaming Quality option should be disable, if track is muted or not available
-          />
-        ) : null}
       </View>
     </View>
   );
 };
 
-type SettingItemBaseProps = {
+type SettingItemProps = {
   onPress(): void;
   text: string;
-  disabled?: boolean;
-};
-
-type SettingItemWithCustomIconProps = {
-  customIcon: true;
   icon: React.ReactElement;
+  disabled?: boolean;
+  textStyle?: StyleProp<TextStyle>;
 };
 
-type SettingItemWithIconProps = {
-  customIcon?: false;
-  iconName: string;
-  IconType: any;
-};
-
-type SettingItemProps = SettingItemBaseProps &
-  (SettingItemWithCustomIconProps | SettingItemWithIconProps);
-
 const SettingItem: React.FC<SettingItemProps> = ({
   onPress,
   text,
+  icon,
+  textStyle,
   disabled = false,
-  ...resetProps
 }) => {
   const textStyles = useHMSRoomStyle((theme, typography) => ({
     color: theme.palette.on_surface_high,
@@ -356,17 +221,9 @@ const SettingItem: React.FC<SettingItemProps> = ({
       style={[styles.button, disabled ? { opacity: 0.6 } : null]}
       onPress={onPress}
     >
-      {resetProps.customIcon ? (
-        resetProps.icon
-      ) : (
-        <resetProps.IconType
-          name={resetProps.iconName}
-          size={24}
-          style={styles.icon}
-        />
-      )}
-
-      <Text style={[styles.text, textStyles]}>{text}</Text>
+      {icon}
+
+      <Text style={[styles.text, textStyles, textStyle]}>{text}</Text>
     </TouchableOpacity>
   );
 };
@@ -392,8 +249,4 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     letterSpacing: 0.1,
   },
-  icon: {
-    color: COLORS.WHITE,
-    marginRight: 12,
-  },
 });

package/src/components/PeerVideoTile/AvatarView.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { PersonIcon } from '../../Icons';
 import { getInitials } from '../../utils/functions';
@@ -10,20 +11,29 @@ import { useHMSRoomStyleSheet } from '../../hooks-util';
 export interface AvatarViewProps {
   name: string;
   videoView: React.ReactElement<typeof VideoView> | null;
+  avatarStyles?: StyleProp<ViewStyle>;
+  avatarContainerStyles?: StyleProp<ViewStyle>;
+  isInset?: boolean;
 }
 
-export const _AvatarView: React.FC<AvatarViewProps> = ({ name, videoView }) => {
+export const _AvatarView: React.FC<AvatarViewProps> = ({
+  name,
+  videoView,
+  avatarStyles,
+  avatarContainerStyles,
+  isInset = false,
+}) => {
   const showInitials = !!name && name.length > 0;
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     avatarContainer: {
-      backgroundColor: theme.palette.surface_default,
+      backgroundColor: theme.palette.background_default,
     },
     avatar: {
       backgroundColor: COLORS.EXTENDED.PURPLE,
     },
     avatarText: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));
@@ -31,10 +41,27 @@ export const _AvatarView: React.FC<AvatarViewProps> = ({ name, videoView }) => {
   return (
     <View style={styles.container}>
       {videoView || (
-        <View style={[styles.avatarContainer, hmsRoomStyles.avatarContainer]}>
-          <View style={[styles.avatar, hmsRoomStyles.avatar]}>
+        <View
+          style={[
+            styles.avatarContainer,
+            hmsRoomStyles.avatarContainer,
+            avatarContainerStyles,
+          ]}
+        >
+          <View
+            style={[
+              isInset ? styles.insetAvatar : styles.avatar,
+              hmsRoomStyles.avatar,
+              avatarStyles,
+            ]}
+          >
             {showInitials ? (
-              <Text style={[styles.avatarText, hmsRoomStyles.avatarText]}>
+              <Text
+                style={[
+                  isInset ? styles.insetText : styles.avatarText,
+                  hmsRoomStyles.avatarText,
+                ]}
+              >
                 {getInitials(name)}
               </Text>
             ) : (
@@ -65,6 +92,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  insetAvatar: {
+    width: 64,
+    aspectRatio: 1,
+    borderRadius: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   avatarIcon: {
     width: 40,
     height: 40,
@@ -74,6 +108,10 @@ const styles = StyleSheet.create({
     lineHeight: 40,
     letterSpacing: 0.25,
   },
+  insetText: {
+    fontSize: 24,
+    lineHeight: 32,
+  },
 });
 
 export const AvatarView = React.memo(_AvatarView);

package/src/components/PeerVideoTile/HMSFullScreenButton.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { PressableIcon } from '../PressableIcon';
+import { MaximizeIcon, MinimizeIcon } from '../../Icons';
+import { useHMSRoomStyle } from '../../hooks-util';
+import { hexToRgbA } from '../../utils/theme';
+import type { PeerTrackNode } from '../../utils/types';
+import type { RootState } from '../../redux';
+import { setFullScreenPeerTrackNode } from '../../redux/actions';
+
+export interface HMSFullScreenButtonProps {
+  peerTrackNode: PeerTrackNode;
+}
+
+export const HMSFullScreenButton: React.FC<HMSFullScreenButtonProps> = ({
+  peerTrackNode,
+}) => {
+  const dispatch = useDispatch();
+  const fullScreenPeerTrackNode = useSelector(
+    (state: RootState) => state.app.fullScreenPeerTrackNode
+  );
+
+  const buttonStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor:
+      theme.palette.background_dim &&
+      hexToRgbA(theme.palette.background_dim, 0.64),
+  }));
+
+  const maximizeAction =
+    !fullScreenPeerTrackNode || fullScreenPeerTrackNode.id !== peerTrackNode.id;
+
+  const handleFullScreenPress = () => {
+    dispatch(setFullScreenPeerTrackNode(maximizeAction ? peerTrackNode : null));
+  };
+
+  return (
+    <PressableIcon
+      border={false}
+      onPress={handleFullScreenPress}
+      style={[styles.container, buttonStyles]}
+    >
+      {maximizeAction ? <MaximizeIcon /> : <MinimizeIcon />}
+    </PressableIcon>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 8,
+  },
+});

package/src/components/PeerVideoTile/HMSPinchGesture.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+export interface HMSPinchGestureProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
+  children,
+  style,
+}) => {
+  /**
+   * - Dimensions of Animated View
+   * This will be used to apply transformations as per width and height of Animated Views
+   */
+  const dimensions = useSharedValue({ width: 0, height: 0 });
+
+  /**
+   * - Tracking number of active pointers in pinch gesture
+   * "Focal point" is used as an origin point for scaling the view
+   * when active number of pointers change, focal point is also changed causing a flicker effect
+   *
+   * To remove flicker effect, when `numberOfPointers` change, we calculate the amount of change in focal point
+   * and use the `(new focal point) + (amount of change in focal point)` to apply transformations
+   */
+  const numberOfPointers = useSharedValue(0);
+
+  /**
+   * - Current focal point to apply scaling
+   * "Focal point" is used as an origin point for scaling the view
+   * > We transform the "center of View" to the "focal point", "apply scaling" and then "undo the transformation"
+   */
+  const focalPoint = useSharedValue({ x: 0, y: 0 });
+
+  const adjustedFocalPoint = useSharedValue({ x: 0, y: 0 });
+
+  /**
+   * - focal point captured at the start of the pinch gesture
+   * We use this point to calculate the amount of translation of focal point
+   * `
+   * translation = (current focal point) - (focal point at the start of the gesture)
+   * `
+   * then translation value is amount of swipe(pan) gesture user has applied while scaling
+   * we can use this calculated value as a translation value, similar to what we get in `pan gesture`
+   */
+  const focalPointAtStart = useSharedValue({ x: 0, y: 0 });
+
+  /**
+   * - x,y coords representing the amount by which focal point shifted due to change in `numberOfPointers`
+   * e.g. focal point when `numberOfPointers = 2`            - (20, 100)
+   *      focal point when `numberOfPointers` reduced to `1` - (40, 300)
+   *
+   *      focal point got shifted by `20` points on x-axis and `200` points on y-axis. Thus, `focalShift = (20, 200)`
+   *
+   * Usage: TODO
+   */
+  const focalShift = useSharedValue({ x: 0, y: 0 });
+
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const translation = useSharedValue({ x: 0, y: 0 });
+  const savedTranslation = useSharedValue({ x: 0, y: 0 });
+
+  const handleLayoutChange = React.useCallback(
+    ({ nativeEvent }: LayoutChangeEvent) => {
+      dimensions.value = {
+        width: nativeEvent.layout.width,
+        height: nativeEvent.layout.height,
+      };
+    },
+    []
+  );
+
+  const panGesture = Gesture.Pan()
+    .maxPointers(1)
+    .onUpdate((e) => {
+      translation.value = {
+        x: e.translationX + savedTranslation.value.x,
+        y: e.translationY + savedTranslation.value.y,
+      };
+    })
+    .onEnd(() => {
+      savedTranslation.value = translation.value;
+    });
+
+  const pinchGesture = Gesture.Pinch()
+    .onStart((e) => {
+      numberOfPointers.value = e.numberOfPointers;
+      focalPointAtStart.value = { x: e.focalX, y: e.focalY };
+
+      adjustedFocalPoint.value = {
+        x: e.focalX - focalShift.value.x, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
+        y: e.focalY - focalShift.value.y, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
+      };
+    })
+    .onUpdate((e) => {
+      // Calculating `focal point` shift values when `numberOfPointers` changes
+      if (numberOfPointers.value !== e.numberOfPointers) {
+        numberOfPointers.value = e.numberOfPointers;
+
+        focalShift.value = {
+          x: e.focalX - (focalPoint.value.x - focalShift.value.x),
+          y: e.focalY - (focalPoint.value.y - focalShift.value.y),
+        };
+      }
+
+      adjustedFocalPoint.value = {
+        x: e.focalX - focalShift.value.x, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
+        y: e.focalY - focalShift.value.y, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
+      };
+
+      // Applying translations
+      translation.value = {
+        x:
+          adjustedFocalPoint.value.x -
+          focalPointAtStart.value.x + // subtracting "focal point position capturred at start of gesture" from "adjusted focal point position" we will get the translation value
+          savedTranslation.value.x, // Adding current translation to previous Translation to make it a continuous gesture
+        y:
+          adjustedFocalPoint.value.y -
+          focalPointAtStart.value.y + // subtracting "focal point position capturred at start of gesture" from "adjusted focal point position" we will get the translation value
+          savedTranslation.value.y, // Adding current translation to previous Translation to make it a continuous gesture
+      };
+
+      // saving focal point to apply scaling on correct position
+      focalPoint.value = { x: e.focalX, y: e.focalY };
+      scale.value = Math.min(Math.max(savedScale.value * e.scale, 0.94), 5.2);
+    })
+    .onEnd(() => {
+      if (scale.value < 1) {
+        scale.value = withSpring(1, { damping: 100, stiffness: 200 });
+        savedScale.value = 1;
+        translation.value = { x: 0, y: 0 };
+      } else if (scale.value > 5) {
+        scale.value = withSpring(5, { damping: 100, stiffness: 200 });
+        savedScale.value = 5;
+      } else {
+        savedScale.value = scale.value;
+      }
+
+      focalShift.value = { x: 0, y: 0 };
+      savedTranslation.value = translation.value;
+    });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translation.value.x },
+      { translateY: translation.value.y },
+      { translateX: focalPointAtStart.value.x - dimensions.value.width / 2 },
+      { translateY: focalPointAtStart.value.y - dimensions.value.height / 2 },
+      { scale: scale.value },
+      { translateX: -(focalPointAtStart.value.x - dimensions.value.width / 2) },
+      {
+        translateY: -(focalPointAtStart.value.y - dimensions.value.height / 2),
+      },
+    ],
+  }));
+
+  return (
+    <GestureDetector gesture={Gesture.Exclusive(panGesture, pinchGesture)}>
+      <Animated.View style={{ flex: 1 }}>
+        <Animated.View
+          onLayout={handleLayoutChange}
+          style={[style, animatedStyle]}
+        >
+          {children}
+        </Animated.View>
+      </Animated.View>
+    </GestureDetector>
+  );
+};