@100mslive/react-native-room-kit 1.0.7 → 1.0.8

package/src/components/HMSLiveViewerCount.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import {
-  StyleSheet,
-  Text,
-  Platform,
-  TouchableOpacity,
-} from 'react-native';
+import { StyleSheet, Text, Platform, TouchableOpacity } from 'react-native';
 import { useSelector } from 'react-redux';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import {
   useHMSRoomStyleSheet,
@@ -17,15 +12,14 @@ import { EyeIcon } from '../Icons';
 import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
+import { useIsAnyStreamingOn } from '../hooks-sdk';
 
 const _HMSLiveViewerCount = () => {
   const isHLSViewer = useIsHLSViewer();
   const previewPeerCount = useSelector(
     (state: RootState) => state.hmsStates.room?.peerCount
   );
-  const live = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
-  );
+  const live = useIsAnyStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
     viewers: {
@@ -44,6 +38,8 @@ const _HMSLiveViewerCount = () => {
 
   const { canShowParticipants, show } = useShowChatAndParticipants();
 
+  const tapGesture = React.useMemo(() => Gesture.Tap(), []);
+
   const showParticipantsSheet = () => {
     show('participants');
   };
@@ -53,17 +49,22 @@ const _HMSLiveViewerCount = () => {
   }
 
   return (
-    <TouchableOpacity
-      style={[styles.viewers, hmsRoomStyles.viewers]}
-      onPress={showParticipantsSheet}
-      disabled={!canShowParticipants}
-    >
-      <EyeIcon testID={TestIds.peer_count_icon} />
+    <GestureDetector gesture={tapGesture}>
+      <TouchableOpacity
+        style={[styles.viewers, hmsRoomStyles.viewers]}
+        onPress={showParticipantsSheet}
+        disabled={!canShowParticipants}
+      >
+        <EyeIcon testID={TestIds.peer_count_icon} />
 
-      <Text testID={TestIds.peer_count} style={[styles.count, hmsRoomStyles.count]}>
-        {previewPeerCount}
-      </Text>
-    </TouchableOpacity>
+        <Text
+          testID={TestIds.peer_count}
+          style={[styles.count, hmsRoomStyles.count]}
+        >
+          {previewPeerCount}
+        </Text>
+      </TouchableOpacity>
+    </GestureDetector>
   );
 };
 

package/src/components/HMSLocalScreenshareNotification.tsx

@@ -37,6 +37,7 @@ export const HMSLocalScreenshareNotification: React.FC<
           loading={false}
           onPress={stopScreenshare}
           title="Stop"
+          wrapWithGestureDetector={true}
         />
       }
     />

package/src/components/HMSNotification.tsx

@@ -2,19 +2,21 @@ import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { StyleProp, ViewStyle, TextStyle, TextProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
-import { CloseIcon } from '../Icons';
+import { ChatIcon, CloseIcon } from '../Icons';
 import { UnmountAfterDelay } from './UnmountAfterDelay';
 import { removeNotification } from '../redux/actions';
 
 export interface HMSNotificationProps {
   id: string;
   text: string | React.ReactElement;
+  description?: string | React.ReactElement;
   textTestID?: TextProps['testID'];
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
-  icon?: React.ReactElement;
+  icon?: string | React.ReactElement;
   onDismiss?: () => void;
   autoDismiss?: boolean;
   dismissDelay?: number;
@@ -25,6 +27,7 @@ export interface HMSNotificationProps {
 export const HMSNotification: React.FC<HMSNotificationProps> = ({
   id,
   text,
+  description = null,
   icon,
   style,
   textStyle,
@@ -45,6 +48,10 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
+    description: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
   }));
 
   const dismissNotification =
@@ -55,27 +62,47 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
         }
       : null);
 
+  const tapGesture = Gesture.Tap();
+
   const notification = (
     <View style={[styles.container, hmsRoomStyles.container, style]}>
       <View style={styles.leftWrapper}>
-        {icon ? <View style={styles.icon}>{icon}</View> : null}
+        {icon ? (
+          <View style={styles.icon}>
+            {typeof icon === 'string' ? getIcon(icon) : icon}
+          </View>
+        ) : null}
 
-        {typeof text === 'string' ? (
-          <Text testID={textTestID} style={[styles.text, hmsRoomStyles.text, textStyle]}>
-            {text}
-          </Text>
-        ) : (
-          text
-        )}
+        <View>
+          {typeof text === 'string' ? (
+            <Text
+              testID={textTestID}
+              style={[styles.text, hmsRoomStyles.text, textStyle]}
+            >
+              {text}
+            </Text>
+          ) : (
+            text
+          )}
+          {typeof description === 'string' ? (
+            <Text style={[styles.description, hmsRoomStyles.description]}>
+              {description}
+            </Text>
+          ) : (
+            description
+          )}
+        </View>
       </View>
 
       <View style={styles.rightWrapper}>
         {cta}
 
         {dismissNotification ? (
-          <TouchableOpacity onPress={dismissNotification}>
-            <CloseIcon />
-          </TouchableOpacity>
+          <GestureDetector gesture={tapGesture}>
+            <TouchableOpacity onPress={dismissNotification}>
+              <CloseIcon />
+            </TouchableOpacity>
+          </GestureDetector>
         ) : null}
       </View>
     </View>
@@ -127,4 +154,20 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     letterSpacing: 0.1,
   },
+  description: {
+    flexShrink: 1,
+    fontSize: 12,
+    lineHeight: 16,
+  },
 });
+
+function getIcon(icon: string) {
+  switch (icon) {
+    case 'chat-off':
+    case 'chat-on':
+      return <ChatIcon type={icon === 'chat-on' ? 'on' : 'off'} />;
+
+    default:
+      return null;
+  }
+}

package/src/components/HMSNotifications.tsx

@@ -131,14 +131,24 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
                 autoDismiss={false}
               />
             ) : notification.type === NotificationTypes.ERROR &&
-              'message' in notification ? (
+              ('message' in notification || 'title' in notification) ? (
               <HMSNotification
                 icon={<AlertTriangleIcon type="line" />}
                 id={notification.id}
-                text={notification.message}
+                text={notification.title}
                 autoDismiss={false}
                 dismissable={true}
               />
+            ) : notification.type === NotificationTypes.INFO &&
+              ('message' in notification || 'title' in notification) ? (
+              <HMSNotification
+                id={notification.id}
+                icon={notification.icon}
+                description={notification.message}
+                text={notification.title}
+                autoDismiss={true}
+                dismissable={true}
+              />
             ) : null}
           </View>
         );

package/src/components/HMSOverlayChatView.tsx

@@ -1,15 +1,29 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import { StyleSheet, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { useDerivedValue, interpolate } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import type { RootState } from '../redux';
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
 import { HMSSendMessageInput } from './HMSSendMessageInput';
 import { HMSHLSMessageList } from './HMSHLSMessageList';
 import { useFooterHeight } from './Footer';
 import { useHMSNotificationsHeight } from './HMSNotifications';
+import { ChatFilterBottomSheetOpener } from './Chat/ChatFilterBottomSheetOpener';
+import { ChatMoreActionsModal } from './Chat/ChatMoreActionsModal';
+import { ChatFilterBottomSheet } from './Chat/ChatFilterBottomSheet';
+import { ChatPaused } from './Chat/ChatPaused';
+import {
+  useHMSChatState,
+  useIsAllowedToSendMessage,
+  useIsLocalPeerBlockedFromChat,
+} from '../hooks-util';
+import { PinnedMessages } from './Chat';
+import { MessageOptionsBottomSheet } from './Chat/MessageOptionsBottomSheet';
+import { PeerBlockedFromChat } from './Chat/PeerBlockedFromChat';
 
 const colors = [
   'rgba(0, 0, 0, 0)',
@@ -25,6 +39,12 @@ export interface HLSChatViewProps {
 export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
   const footerHeight = useFooterHeight();
   const hmsNotificationsHeight = useHMSNotificationsHeight();
+  const { chatState } = useHMSChatState();
+  const isAllowedToSendMessage = useIsAllowedToSendMessage();
+  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
+  const isSelectedChatRecipient = useSelector(
+    (state: RootState) => state.chatWindow.sendTo !== null
+  );
 
   const chatBottomOffset = useDerivedValue(() => {
     if (offset) {
@@ -37,21 +57,58 @@ export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
   }, [offset, footerHeight, hmsNotificationsHeight]);
 
   return (
-    <HMSKeyboardAvoidingView bottomOffset={chatBottomOffset}>
-      <MaskedView
-        maskElement={
-          <LinearGradient
-            pointerEvents="box-none"
-            style={StyleSheet.absoluteFill}
-            colors={colors}
-            locations={colorLocations}
-          />
-        }
-      >
-        <HMSHLSMessageList />
-      </MaskedView>
-
-      <HMSSendMessageInput />
-    </HMSKeyboardAvoidingView>
+    <>
+      <HMSKeyboardAvoidingView bottomOffset={chatBottomOffset}>
+        <MaskedView
+          maskElement={
+            <LinearGradient
+              pointerEvents="box-none"
+              style={StyleSheet.absoluteFill}
+              colors={colors}
+              locations={colorLocations}
+            />
+          }
+        >
+          <HMSHLSMessageList />
+        </MaskedView>
+
+        <PinnedMessages insetMode={true} />
+
+        {chatState.enabled ? (
+          <>
+            <View style={styles.filterSheetWrapper}>
+              <ChatFilterBottomSheetOpener insetMode={true} />
+            </View>
+
+            {isLocalPeerBlockedFromChat ? (
+              <PeerBlockedFromChat style={styles.peerBlocked} />
+            ) : isAllowedToSendMessage && isSelectedChatRecipient ? (
+              <HMSSendMessageInput />
+            ) : null}
+          </>
+        ) : (
+          <ChatPaused insetMode={true} style={styles.chatPaused} />
+        )}
+      </HMSKeyboardAvoidingView>
+
+      <MessageOptionsBottomSheet />
+      <ChatFilterBottomSheet />
+      <ChatMoreActionsModal offset={offset} />
+    </>
   );
 };
+
+const styles = StyleSheet.create({
+  filterSheetWrapper: {
+    marginHorizontal: 8,
+    marginTop: 8,
+  },
+  chatPaused: {
+    marginHorizontal: 8,
+    marginBottom: 38,
+  },
+  peerBlocked: {
+    marginHorizontal: 8,
+    marginBottom: 8,
+  },
+});

package/src/components/HMSPreviewEditName.tsx

@@ -13,7 +13,9 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
   const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
-  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { useSelector } from 'react-redux';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
 
-import type { RootState } from '../redux';
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { COLORS } from '../utils/theme';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 export const HMSPreviewHLSLiveIndicator = () => {
-  const isHLSStreaming = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     container: {

package/src/components/HMSPrimaryButton.tsx

@@ -13,6 +13,7 @@ export interface HMSPrimaryButtonProps {
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
+  wrapWithGestureDetector?: boolean;
 }
 
 export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
@@ -23,6 +24,7 @@ export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
   style,
   disabled,
   leftComponent,
+  wrapWithGestureDetector,
 }) => {
   const { primary_dim: primaryDarkColor, on_primary_high: onPrimaryHighColor } =
     useHMSRoomColorPalette();
@@ -62,6 +64,7 @@ export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
         hmsRoomStyles.buttonText,
         disabled ? hmsRoomStyles.disabledText : null,
       ]}
+      wrapWithGestureDetector={wrapWithGestureDetector}
     />
   );
 };

package/src/components/HMSRecordingIndicator.tsx

@@ -1,30 +1,16 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { ActivityIndicator, StyleSheet } from 'react-native';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
 import { RecordingIcon } from '../Icons';
 import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
-import { HMSRecordingState } from '@100mslive/react-native-hms';
+import { useIsAnyRecordingOn, useIsAnyRecordingPaused } from '../hooks-sdk';
 
 export const HMSRecordingIndicator = () => {
-  const isRecordingOn = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.STARTED ||
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
-
-      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.STARTED ||
-      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.RESUMED ||
-
-      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.STARTED ||
-      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.RESUMED
-  );
-  const isRecordingPaused = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.PAUSED ||
-      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.PAUSED ||
-      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.PAUSED
-  );
+  const isRecordingOn = useIsAnyRecordingOn();
+  const isRecordingPaused = useIsAnyRecordingPaused();
   const startingOrStoppingRecording = useSelector(
     (state: RootState) =>
       state.app.startingOrStoppingRecording ||
@@ -52,15 +38,15 @@ export const HMSRecordingIndicator = () => {
     );
   }
 
-  if (isRecordingOn) {
+  if (isRecordingPaused) {
     return (
-      <RecordingIcon style={[styles.icon, styles.rightSpace, iconStyles]} />
+      <RecordingIcon type="pause" style={[styles.icon, styles.rightSpace]} />
     );
   }
 
-  if (isRecordingPaused) {
+  if (isRecordingOn) {
     return (
-      <RecordingIcon type='pause' style={[styles.icon, styles.rightSpace]} />
+      <RecordingIcon style={[styles.icon, styles.rightSpace, iconStyles]} />
     );
   }
 

package/src/components/HMSRoomOptions.tsx

@@ -47,7 +47,10 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
 
   return (
     <View>
-      <PressableIcon testID={TestIds.room_options_btn} onPress={onSettingsPress}>
+      <PressableIcon
+        testID={TestIds.room_options_btn}
+        onPress={onSettingsPress}
+      >
         <HamburgerIcon />
       </PressableIcon>
 

package/src/components/HMSTerminalErrorNotification.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { HMSException } from '@100mslive/react-native-hms';
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import { HMSNotification } from './HMSNotification';
 import { AlertTriangleIcon } from '../Icons';
@@ -34,6 +35,8 @@ export const HMSTerminalErrorNotification: React.FC<
     leave(OnLeaveReason.NETWORK_ISSUES);
   };
 
+  const tapGesture = Gesture.Tap();
+
   return (
     <HMSNotification
       id={id}
@@ -41,16 +44,18 @@ export const HMSTerminalErrorNotification: React.FC<
       text={exception.description || 'Something went wrong!'}
       dismissDelay={dismissDelay}
       autoDismiss={autoDismiss}
-      cta={(
-        <TouchableOpacity
-          style={[styles.button, hmsRoomStyles.button]}
-          onPress={handleLeaveRoomPress}
-        >
-          <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
-            Leave
-          </Text>
-        </TouchableOpacity>
-      )}
+      cta={
+        <GestureDetector gesture={tapGesture}>
+          <TouchableOpacity
+            style={[styles.button, hmsRoomStyles.button]}
+            onPress={handleLeaveRoomPress}
+          >
+            <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+              Leave
+            </Text>
+          </TouchableOpacity>
+        </GestureDetector>
+      }
     />
   );
 };

package/src/components/Header.tsx

@@ -37,7 +37,10 @@ export const _Header: React.FC<HeaderProps> = ({
   }));
 
   return (
-    <SafeAreaView style={transparent ? null : containerStyles} edges={['top','left','right']}>
+    <SafeAreaView
+      style={transparent ? null : containerStyles}
+      edges={['top', 'left', 'right']}
+    >
       <View style={[styles.container, transparent ? null : containerStyles]}>
         <View style={styles.logoContainer}>
           <CompanyLogo style={styles.logo} />

package/src/components/LeaveRoomBottomSheet.tsx

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
 
 import { LeaveIcon } from '../Icons';
-import { useHMSRoomStyleSheet, useLeaveMethods, useModalType } from '../hooks-util';
+import {
+  useHMSRoomStyleSheet,
+  useLeaveMethods,
+  useModalType,
+} from '../hooks-util';
 import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
 import { StopIcon } from '../Icons';
 import { ModalTypes, OnLeaveReason } from '../utils/types';
 import { TestIds } from '../utils/constants';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 // const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
 // const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
@@ -25,10 +29,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
       state.hmsStates.localPeer?.role?.permissions?.hlsStreaming
   );
 
-  const isStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     text: {
@@ -119,17 +120,18 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
           <LeaveIcon style={styles.icon} />
 
           <View style={styles.textContainer}>
-            <Text style={[styles.text, hmsRoomStyles.text]}>
-              Leave
-            </Text>
-            <Text testID={TestIds.leave_description} style={[styles.subtext, hmsRoomStyles.subtext]}>
+            <Text style={[styles.text, hmsRoomStyles.text]}>Leave</Text>
+            <Text
+              testID={TestIds.leave_description}
+              style={[styles.subtext, hmsRoomStyles.subtext]}
+            >
               Others will continue after you leave. You can join the session
               again.
             </Text>
           </View>
         </TouchableOpacity>
 
-        {canStream && isStreaming ? (
+        {canStream && isHLSStreaming ? (
           <TouchableOpacity
             testID={TestIds.end_stream_cta}
             style={[styles.button, hmsRoomStyles.endButton]}

package/src/components/Meeting.tsx

@@ -16,6 +16,7 @@ import {
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
   usePIPListener,
+  useSetDefaultChatRecipient,
 } from '../hooks-util';
 import { MeetingScreenContent } from './MeetingScreenContent';
 import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
@@ -34,6 +35,9 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
 
   useFetchHMSRoles();
 
+  // Handle selected (default) Chat Recipient as per dashboard config
+  useSetDefaultChatRecipient();
+
   useHMSMessages();
 
   useHMSReconnection();

package/src/components/MeetingScreenContent.tsx

@@ -51,28 +51,31 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
     }
   }, []);
 
-  const toggleControls = useCallback((fromTimeout: boolean = false) => {
-    'worklet';
-    if (
-      fromTimeout !== true &&
-      (keyboardState.value === KeyboardState.OPEN ||
-        keyboardState.value === KeyboardState.OPENING)
-    ) {
-      runOnJS(dismissKeyboard)();
-    } else {
-      runOnJS(clearTimer)();
-      cancelAnimation(offset);
-      offset.value = withTiming(
-        offset.value === 1 ? 0 : 1,
-        { duration: 200, easing: Easing.ease },
-        (finished) => {
-          if (finished) {
-            runOnJS(setControlsHidden)(offset.value === 0);
+  const toggleControls = useCallback(
+    (fromTimeout: boolean = false) => {
+      'worklet';
+      if (
+        fromTimeout !== true &&
+        (keyboardState.value === KeyboardState.OPEN ||
+          keyboardState.value === KeyboardState.OPENING)
+      ) {
+        runOnJS(dismissKeyboard)();
+      } else {
+        runOnJS(clearTimer)();
+        cancelAnimation(offset);
+        offset.value = withTiming(
+          offset.value === 1 ? 0 : 1,
+          { duration: 200, easing: Easing.ease },
+          (finished) => {
+            if (finished) {
+              runOnJS(setControlsHidden)(offset.value === 0);
+            }
           }
-        }
-      );
-    }
-  }, [dismissKeyboard, clearTimer]);
+        );
+      }
+    },
+    [dismissKeyboard, clearTimer]
+  );
 
   // Handles Auto hiding the controls for the first time
   // to make this feature discoverable