implement a hook to delay auto focus on text inputs

src/CONST.ts

@@ -43,6 +43,7 @@ const CONST = {
         OUT: 'out',
     },
     ARROW_HIDE_DELAY: 3000,
+    INPUT_FOCUS_DELAY: 600,
 
     API_ATTACHMENT_VALIDATIONS: {
         // 24 megabytes in bytes, this is limit set on servers, do not update without wider internal discussion

src/hooks/useDelayedInputFocus.js

@@ -0,0 +1,25 @@
+import {useCallback, useRef} from 'react';
+import {useFocusEffect} from '@react-navigation/native';
+import CONST from '../CONST';
+
+/**
+ * Focus a text input when a screen is navigated to, after the specified time delay has elapsed.
+ *
+ * @param {Object} inputRef
+ * @param {Number} [delay]
+ */
+export default function useDelayedInputFocus(inputRef, delay = CONST.INPUT_FOCUS_DELAY) {
+    const timeoutRef = useRef(null);
+
+    useFocusEffect(
+        useCallback(() => {
+            timeoutRef.current = setTimeout(() => inputRef.current && inputRef.current.focus(), delay);
+            return () => {
+                if (!timeoutRef.current) {
+                    return;
+                }
+                clearTimeout(timeoutRef.current);
+            };
+        }, [delay, inputRef]),
+    );
+}

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -1,4 +1,4 @@
-import React, {useState, useCallback, useMemo} from 'react';
+import React, {useState, useCallback, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -25,6 +25,7 @@ import policyMemberPropType from '../policyMemberPropType';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import compose from '../../libs/compose';
 import variables from '../../styles/variables';
+import useDelayedInputFocus from '../../hooks/useDelayedInputFocus';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -144,6 +145,9 @@ function WorkspaceNewRoomPage(props) {
         [translate],
     );
 
+    const roomNameInputRef = useRef(null);
+    useDelayedInputFocus(roomNameInputRef);
+
     return (
         <FullPageNotFoundView
             shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}
@@ -177,6 +181,7 @@ function WorkspaceNewRoomPage(props) {
                         >
                             <View style={styles.mb5}>
                                 <RoomNameInput
+                                    ref={(el) => (roomNameInputRef.current = el)}
                                     inputID="roomName"
                                     isFocused={props.isFocused}
                                     shouldDelayFocus