Add searchbar autofocus

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/screens/memes.tsx

@@ -48,6 +48,9 @@ const Memes = () => {
   const navVisisble = useSelector(
     (state: RootState) => state.navigation.navVisible,
   );
+  const autoFocus = useSelector(
+    (state: RootState) => state.settings.autoFocusMemesSearch,
+  );
   const dispatch = useDispatch();
 
   const [flashListPadding, setFlashListPadding] = useState(0);
@@ -141,6 +144,7 @@ const Memes = () => {
         <MemesHeader
           search={search}
           setSearch={setSearch}
+          autoFocus={autoFocus}
           onLayout={event => {
             setFlashListPadding(
               event.nativeEvent.layout.height +

src/screens/settings.tsx

@@ -13,6 +13,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import type {} from 'redux-thunk/extend-redux';
 import {
   RootState,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
   setGridColumns,
   setMasonryColumns,
   setNoMedia,
@@ -34,6 +36,12 @@ const settingsStyles = StyleSheet.create({
     marginBottom: 15,
     paddingHorizontal: '2%',
   },
+  autoFocusSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: '2%',
+    marginBottom: 15,
+  },
   hideMediaSwitch: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -44,6 +52,12 @@ const settingsStyles = StyleSheet.create({
 const Settings = () => {
   const { colors } = useTheme();
   const noMedia = useSelector((state: RootState) => state.settings.noMedia);
+  const autoFocusMemesSearch = useSelector(
+    (state: RootState) => state.settings.autoFocusMemesSearch,
+  );
+  const autoFocusTagsSearch = useSelector(
+    (state: RootState) => state.settings.autoFocusTagsSearch,
+  );
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
   );
@@ -89,6 +103,24 @@ const Settings = () => {
         ]}>
         <List.Section>
           <List.Subheader>Views</List.Subheader>
+          <View style={settingsStyles.autoFocusSwitch}>
+            <Text>Autofocus Memes Searchbar</Text>
+            <Switch
+              value={autoFocusMemesSearch}
+              onValueChange={value => {
+                void dispatch(setAutofocusMemesSearch(value));
+              }}
+            />
+          </View>
+          <View style={settingsStyles.autoFocusSwitch}>
+            <Text>Autofocus Tags Searchbar</Text>
+            <Switch
+              value={autoFocusTagsSearch}
+              onValueChange={value => {
+                void dispatch(setAutofocusTagsSearch(value));
+              }}
+            />
+          </View>
           <Text style={settingsStyles.columnSegmentedButtons}>
             Masonry Columns
           </Text>

src/screens/tags.tsx

@@ -44,6 +44,9 @@ const Tags = () => {
   const navVisisble = useSelector(
     (state: RootState) => state.navigation.navVisible,
   );
+  const autoFocus = useSelector(
+    (state: RootState) => state.settings.autoFocusTagsSearch,
+  );
   const dispatch = useDispatch();
 
   const [flashListPadding, setFlashListPadding] = useState(0);
@@ -114,6 +117,7 @@ const Tags = () => {
         <TagsHeader
           search={search}
           setSearch={setSearch}
+          autoFocus={autoFocus}
           onLayout={event => {
             setFlashListPadding(event.nativeEvent.layout.height);
           }}