From c6dbe3e583dd8aacbaec013a4e935878d8d9dfef Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Mon, 23 Aug 2021 09:35:30 +0900
Subject: [PATCH] focus search bar on focus screen

---
 app/components/TextInput.tsx | 22 +++++++++++++---------
 app/screens/Search.tsx       | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
index 5572524..301762d 100644
--- a/app/components/TextInput.tsx
+++ b/app/components/TextInput.tsx
@@ -1,18 +1,22 @@
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import React from 'react'
-import { TextInput as ReactTextInput, StyleSheet, StyleProp, TextStyle, KeyboardTypeOptions } from 'react-native'
+import { TextInput as ReactTextInput, StyleSheet, KeyboardTypeOptions, StyleProp, TextStyle } from 'react-native'
 
-const TextInput = React.memo<{
-  style?: StyleProp<TextStyle>
-  value?: string
-  placeholder?: string
-  onChangeText?: (text: string) => void
-  onSubmitEditing?: () => void
-  keyboardType?: KeyboardTypeOptions
-}>(({ style, value, placeholder, onChangeText, onSubmitEditing, keyboardType }) => {
+const TextInput = React.forwardRef<
+  ReactTextInput,
+  {
+    style?: StyleProp<TextStyle>
+    value?: string
+    placeholder?: string
+    onChangeText?: (text: string) => void
+    onSubmitEditing?: () => void
+    keyboardType?: KeyboardTypeOptions
+  }
+>(({ style, value, placeholder, onChangeText, onSubmitEditing, keyboardType }, ref) => {
   return (
     <ReactTextInput
+      ref={ref}
       style={[style, styles.textInput]}
       placeholder={placeholder}
       placeholderTextColor="grey"
diff --git a/app/screens/Search.tsx b/app/screens/Search.tsx
index abde43d..d0605e3 100644
--- a/app/screens/Search.tsx
+++ b/app/screens/Search.tsx
@@ -11,10 +11,17 @@ import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import { useNavigation } from '@react-navigation/native'
+import { useFocusEffect, useNavigation } from '@react-navigation/native'
 import debounce from 'lodash.debounce'
-import React, { useCallback, useMemo, useState } from 'react'
-import { ActivityIndicator, StatusBar, StyleSheet, View } from 'react-native'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  InteractionManager,
+  StatusBar,
+  StyleSheet,
+  TextInput as ReactTextInput,
+  View,
+} from 'react-native'
 
 const SongItem = React.memo<{ item: Song }>(({ item }) => {
   const setQueue = useStore(selectTrackPlayer.setQueue)
@@ -82,6 +89,19 @@ const Search = () => {
   const [results, setResults] = useState<SearchResults>({ artists: [], albums: [], songs: [] })
   const [refreshing, setRefreshing] = useState(false)
   const [text, setText] = useState('')
+  const searchBarRef = useRef<ReactTextInput>(null)
+
+  useFocusEffect(
+    useCallback(() => {
+      const task = InteractionManager.runAfterInteractions(() => {
+        setTimeout(() => {
+          setText('')
+          searchBarRef.current?.focus()
+        }, 50)
+      })
+      return () => task.cancel()
+    }, [searchBarRef]),
+  )
 
   useActiveServerRefresh(
     useCallback(() => {
@@ -114,7 +134,13 @@ const Search = () => {
     <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
       <View style={styles.content}>
         <View style={styles.inputBar}>
-          <TextInput style={styles.textInput} placeholder="Search" value={text} onChangeText={onChangeText} />
+          <TextInput
+            ref={searchBarRef}
+            style={styles.textInput}
+            placeholder="Search"
+            value={text}
+            onChangeText={onChangeText}
+          />
           <ActivityIndicator
             animating={refreshing}
             size="small"