Add searchbar autofocus

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

android/app/build.gradle

@@ -79,7 +79,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "0.0.3"
+        versionName "0.0.4"
     }
     signingConfigs {
         debug {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@karaolidis/terminally-online",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@karaolidis/terminally-online",
-      "version": "0.0.3",
+      "version": "0.0.4",
       "hasInstallScript": true,
       "dependencies": {
         "@bankify/redux-persist-realm": "^0.1.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karaolidis/terminally-online",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": true,
   "scripts": {
     "postinstall": "patch-package",

src/components/memes/memesHeader.tsx

@@ -41,10 +41,12 @@ const memesHeaderStyles = StyleSheet.create({
 const MemesHeader = ({
   search,
   setSearch,
+  autoFocus,
   ...props
 }: {
   search: string;
   setSearch: (search: string) => void;
+  autoFocus: boolean;
 } & ComponentProps<typeof View>) => {
   const { colors } = useTheme();
   const sort = useSelector((state: RootState) => state.memes.sort);
@@ -86,6 +88,7 @@ const MemesHeader = ({
         placeholder="Search Memes"
         value={search}
         onChangeText={setSearch}
+        autoFocus={autoFocus}
       />
       <View style={memesHeaderStyles.buttonView}>
         <View style={memesHeaderStyles.buttonSection}>

src/components/tags/tagsHeader.tsx

@@ -25,10 +25,12 @@ const tagsHeaderStyles = StyleSheet.create({
 const TagsHeader = ({
   search,
   setSearch,
+  autoFocus,
   ...props
 }: {
   search: string;
   setSearch: (search: string) => void;
+  autoFocus: boolean;
 } & ComponentProps<typeof View>) => {
   const sort = useSelector((state: RootState) => state.tags.sort);
   const sortDirection = useSelector(
@@ -60,6 +62,7 @@ const TagsHeader = ({
         onChangeText={(value: string) => {
           setSearch(value);
         }}
+        autoFocus={autoFocus}
       />
       <View style={tagsHeaderStyles.buttonView}>
         <Menu

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);
           }}

src/state/index.ts

@@ -54,6 +54,8 @@ export {
   type SettingsState,
   setStorageUri,
   setNoMedia,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
   setMasonryColumns,
   setGridColumns,
   validateSettings,

src/state/settings.ts

@@ -11,6 +11,8 @@ import { RootState } from '.';
 interface SettingsState {
   storageUri: string | undefined;
   noMedia: boolean;
+  autoFocusMemesSearch: boolean;
+  autoFocusTagsSearch: boolean;
   masonryColumns: 1 | 2 | 3 | 4;
   gridColumns: 1 | 2 | 3 | 4;
 }
@@ -18,6 +20,8 @@ interface SettingsState {
 const initialState: SettingsState = {
   storageUri: undefined,
   noMedia: false,
+  autoFocusMemesSearch: false,
+  autoFocusTagsSearch: false,
   masonryColumns: 2,
   gridColumns: 3,
 };
@@ -32,6 +36,12 @@ const settingsSlice = createSlice({
     setNoMedia: (state, action: PayloadAction<boolean>) => {
       state.noMedia = action.payload;
     },
+    setAutofocusMemesSearch: (state, action: PayloadAction<boolean>) => {
+      state.autoFocusMemesSearch = action.payload;
+    },
+    setAutofocusTagsSearch: (state, action: PayloadAction<boolean>) => {
+      state.autoFocusTagsSearch = action.payload;
+    },
     setMasonryColumns: (state, action: PayloadAction<1 | 2 | 3 | 4>) => {
       state.masonryColumns = action.payload;
     },
@@ -41,8 +51,14 @@ const settingsSlice = createSlice({
   },
 });
 
-const { setStorageUri, setNoMedia, setMasonryColumns, setGridColumns } =
-  settingsSlice.actions;
+const {
+  setStorageUri,
+  setNoMedia,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
+  setMasonryColumns,
+  setGridColumns,
+} = settingsSlice.actions;
 
 const updateStorageUri = createAsyncThunk(
   'settings/updateStorageUri',
@@ -122,6 +138,8 @@ export {
   type SettingsState,
   updateStorageUri as setStorageUri,
   updateNoMedia as setNoMedia,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
   setMasonryColumns,
   setGridColumns,
   validateSettings,