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 "1.0"
+        versionName "0.0.4"
     }
     signingConfigs {
         debug {

android/app/src/main/AndroidManifest.xml

@@ -7,7 +7,7 @@
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
+      android:allowBackup="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"
@@ -20,6 +20,24 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
+        <intent-filter>
+          <action android:name="android.intent.action.SEND" />
+          <category android:name="android.intent.category.DEFAULT" />
+          <data android:mimeType="image/bmp" />
+          <data android:mimeType="image/jpeg" />
+          <data android:mimeType="image/png" />
+          <data android:mimeType="image/webp" />
+          <data android:mimeType="image/gif" />
+        </intent-filter>
+        <intent-filter>
+          <action android:name="android.intent.action.SEND_MULTIPLE" />
+          <category android:name="android.intent.category.DEFAULT" />
+          <data android:mimeType="image/bmp" />
+          <data android:mimeType="image/jpeg" />
+          <data android:mimeType="image/png" />
+          <data android:mimeType="image/webp" />
+          <data android:mimeType="image/gif" />
+        </intent-filter>
       </activity>
     </application>
 </manifest>

package-lock.json

@@ -1,16 +1,15 @@
 {
   "name": "@karaolidis/terminally-online",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@karaolidis/terminally-online",
-      "version": "0.0.2",
+      "version": "0.0.4",
       "hasInstallScript": true,
       "dependencies": {
         "@bankify/redux-persist-realm": "^0.1.3",
-        "@likashefqet/react-native-image-zoom": "^1.3.0",
         "@react-native-clipboard/clipboard": "^1.11.2",
         "@react-native-community/hooks": "^3.0.0",
         "@react-navigation/bottom-tabs": "^6.5.8",
@@ -32,6 +31,7 @@
         "react-native-scoped-storage": "^1.9.3",
         "react-native-screens": "^3.22.1",
         "react-native-share": "^9.2.3",
+        "react-native-share-menu": "^6.0.0",
         "react-native-vector-icons": "^9.2.0",
         "react-native-video": "^6.0.0-alpha.6",
         "react-redux": "^8.1.1",
@@ -49,6 +49,7 @@
         "@types/jest": "^29.5.2",
         "@types/metro-config": "^0.76.3",
         "@types/react": "^18.2.14",
+        "@types/react-native-share-menu": "^5.0.2",
         "@types/react-native-vector-icons": "^6.4.13",
         "@types/react-native-video": "^5.0.15",
         "@types/react-test-renderer": "^18.0.0",
@@ -2989,17 +2990,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
-    "node_modules/@likashefqet/react-native-image-zoom": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@likashefqet/react-native-image-zoom/-/react-native-image-zoom-1.3.0.tgz",
-      "integrity": "sha512-PLRd1hNMHe9LUn8b4rmLt86282geuaqP4Qd2rFWIloxMS2ePNTIaNlEUu3T3LaO8Pg9vhVV97TxfFeU8F+tcYQ==",
-      "peerDependencies": {
-        "react": ">=16.x.x",
-        "react-native": ">=0.62.x",
-        "react-native-gesture-handler": ">=2.x.x",
-        "react-native-reanimated": ">=2.x.x"
-      }
-    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -4615,6 +4605,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-native-share-menu": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-native-share-menu/-/react-native-share-menu-5.0.2.tgz",
+      "integrity": "sha512-Qa9DGfL6Bvng2DXgCK0fFzdi9SJMGfs06MLSkCfSXBCGKlFLzSHCsXztvXlCCChn3dQArFHyz/uRUN3Sbt6LtQ==",
+      "dev": true
+    },
     "node_modules/@types/react-native-vector-icons": {
       "version": "6.4.13",
       "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.13.tgz",
@@ -13542,6 +13538,11 @@
       "resolved": "https://registry.npmjs.org/react-native-share/-/react-native-share-9.2.3.tgz",
       "integrity": "sha512-y6ju4HS6ydJoPVoacZ/Hp3i47AfI9W4e76Jv00r01dVbr6SCCcuqk37kIbn+kYivdTxOW77UGEbhtBHHtXnhzg=="
     },
+    "node_modules/react-native-share-menu": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-share-menu/-/react-native-share-menu-6.0.0.tgz",
+      "integrity": "sha512-KdmRnqjI/B2MigSxGmhbYJ3WMJxKXj+0c47ANcVZ/PTzc2vtz6d1r4KQJgkBImXgNC+vowpuD2UGdPllxadr2A=="
+    },
     "node_modules/react-native-vector-icons": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",
@@ -17927,12 +17928,6 @@
         }
       }
     },
-    "@likashefqet/react-native-image-zoom": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@likashefqet/react-native-image-zoom/-/react-native-image-zoom-1.3.0.tgz",
-      "integrity": "sha512-PLRd1hNMHe9LUn8b4rmLt86282geuaqP4Qd2rFWIloxMS2ePNTIaNlEUu3T3LaO8Pg9vhVV97TxfFeU8F+tcYQ==",
-      "requires": {}
-    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -19197,6 +19192,12 @@
         "@types/react": "*"
       }
     },
+    "@types/react-native-share-menu": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-native-share-menu/-/react-native-share-menu-5.0.2.tgz",
+      "integrity": "sha512-Qa9DGfL6Bvng2DXgCK0fFzdi9SJMGfs06MLSkCfSXBCGKlFLzSHCsXztvXlCCChn3dQArFHyz/uRUN3Sbt6LtQ==",
+      "dev": true
+    },
     "@types/react-native-vector-icons": {
       "version": "6.4.13",
       "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.13.tgz",
@@ -25904,6 +25905,11 @@
       "resolved": "https://registry.npmjs.org/react-native-share/-/react-native-share-9.2.3.tgz",
       "integrity": "sha512-y6ju4HS6ydJoPVoacZ/Hp3i47AfI9W4e76Jv00r01dVbr6SCCcuqk37kIbn+kYivdTxOW77UGEbhtBHHtXnhzg=="
     },
+    "react-native-share-menu": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-share-menu/-/react-native-share-menu-6.0.0.tgz",
+      "integrity": "sha512-KdmRnqjI/B2MigSxGmhbYJ3WMJxKXj+0c47ANcVZ/PTzc2vtz6d1r4KQJgkBImXgNC+vowpuD2UGdPllxadr2A=="
+    },
     "react-native-vector-icons": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karaolidis/terminally-online",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": true,
   "scripts": {
     "postinstall": "patch-package",
@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@bankify/redux-persist-realm": "^0.1.3",
-    "@likashefqet/react-native-image-zoom": "^1.3.0",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-community/hooks": "^3.0.0",
     "@react-navigation/bottom-tabs": "^6.5.8",
@@ -37,6 +36,7 @@
     "react-native-scoped-storage": "^1.9.3",
     "react-native-screens": "^3.22.1",
     "react-native-share": "^9.2.3",
+    "react-native-share-menu": "^6.0.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-video": "^6.0.0-alpha.6",
     "react-redux": "^8.1.1",
@@ -54,6 +54,7 @@
     "@types/jest": "^29.5.2",
     "@types/metro-config": "^0.76.3",
     "@types/react": "^18.2.14",
+    "@types/react-native-share-menu": "^5.0.2",
     "@types/react-native-vector-icons": "^6.4.13",
     "@types/react-native-video": "^5.0.15",
     "@types/react-test-renderer": "^18.0.0",

patches/@react-native-clipboard+clipboard+1.11.2.patch

@@ -1,11 +1,134 @@
 diff --git a/node_modules/@react-native-clipboard/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java b/node_modules/@react-native-clipboard/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java
-index 048ebe5..8afa5b2 100644
+index 048ebe5..01fa3ad 100644
 --- a/node_modules/@react-native-clipboard/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java
 +++ b/node_modules/@react-native-clipboard/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java
-@@ -156,6 +156,17 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+@@ -24,6 +24,7 @@ import com.facebook.react.bridge.ReactApplicationContext;
+ import com.facebook.react.bridge.ReactContextBaseJavaModule;
+ import com.facebook.react.bridge.ReactMethod;
+ import com.facebook.react.bridge.Promise;
++import com.facebook.react.bridge.WritableNativeMap;
+ import com.facebook.react.module.annotations.ReactModule;
+ import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+@@ -70,9 +71,9 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+       ClipData clipData = clipboard.getPrimaryClip();
+       if (clipData != null && clipData.getItemCount() >= 1) {
+         ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
+-        promise.resolve("" + firstItem.getText());
++        promise.resolve(firstItem.getText());
+       } else {
+-        promise.resolve("");
++        promise.resolve(null);
+       }
+     } catch (Exception e) {
+       promise.reject(e);
+@@ -95,34 +96,37 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+     try {
+       ClipboardManager clipboard = getClipboardService();
+       ClipData clipData = clipboard.getPrimaryClip();
+-      promise.resolve(clipData != null && clipData.getItemCount() >= 1);
++      if (clipData != null && clipData.getItemCount() >= 1) {
++        ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
++        promise.resolve(firstItem.getText() != null);
++      } else {
++        promise.resolve(false);
++      }
+     } catch (Exception e) {
+       promise.reject(e);
      }
    }
- 
+
+   @ReactMethod
+-  public void getImage(Promise promise){
++  public void getImage(Promise promise) {
+     ClipboardManager clipboardManager = getClipboardService();
+-    if (!(clipboardManager.hasPrimaryClip())){
+-      promise.resolve("");
+-    }
+-    else if (clipboardManager.getPrimaryClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)){
+-      promise.resolve("");
+-    }
+-    else {
++    if (!(clipboardManager.hasPrimaryClip())) {
++      promise.resolve(null);
++    } else if (clipboardManager.getPrimaryClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {
++      promise.resolve(null);
++    } else {
+       ClipData clipData = clipboardManager.getPrimaryClip();
+-      if(clipData != null){
++      if (clipData != null) {
+         ClipData.Item item = clipData.getItemAt(0);
+         Uri pasteUri = item.getUri();
+-        if (pasteUri != null){
++        if (pasteUri != null) {
+           ContentResolver cr = reactContext.getContentResolver();
+           String mimeType = cr.getType(pasteUri);
+-          if (mimeType != null){
++          if (mimeType != null) {
+             try {
+               Bitmap bitmap = MediaStore.Images.Media.getBitmap(cr, pasteUri);
+               ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
+-              switch(mimeType){
++              switch (mimeType) {
+                 case MIMETYPE_JPEG:
+                 case MIMETYPE_JPG:
+                   bitmap.compress(Bitmap.CompressFormat.JPEG, 100, outputStream);
+@@ -133,7 +137,7 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+                   bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream);
+                   break;
+                 case MIMETYPE_WEBP:
+-                  if (Build.VERSION.SDK_INT > Build.VERSION_CODES.Q){
++                  if (Build.VERSION.SDK_INT > Build.VERSION_CODES.Q) {
+                     bitmap.compress(Bitmap.CompressFormat.WEBP_LOSSLESS, 100, outputStream);
+                     break;
+                   }
+@@ -156,6 +160,77 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+     }
+   }
+
++  @ReactMethod
++  public void hasImage(Promise promise) {
++    try {
++      ClipboardManager clipboard = getClipboardService();
++      ClipData clipData = clipboard.getPrimaryClip();
++      if (clipData != null && clipData.getItemCount() >= 1) {
++        ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
++        Uri pasteUri = firstItem.getUri();
++        if (pasteUri != null) {
++          ContentResolver cr = reactContext.getContentResolver();
++          String mimeType = cr.getType(pasteUri);
++          if (mimeType != null) {
++            promise.resolve(mimeType.startsWith("image/"));
++            return;
++          }
++        }
++      }
++      promise.resolve(false);
++    } catch (Exception e) {
++      promise.reject(e);
++    }
++  }
++
++  @ReactMethod
++  public void getURI(Promise promise) {
++    try {
++      ClipboardManager clipboard = getClipboardService();
++      ClipData clipData = clipboard.getPrimaryClip();
++      if (clipData != null && clipData.getItemCount() >= 1) {
++        ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
++        Uri uri = firstItem.getUri();
++        if (uri != null) {
++          promise.resolve(uri.toString());
++        } else {
++          promise.resolve(null);
++        }
++      }
++      promise.resolve(null);
++    } catch (Exception e) {
++      promise.reject(e);
++    }
++  }
++
 +  @ReactMethod
 +  public void setURI(String uri) {
 +    try {
@@ -16,20 +139,69 @@ index 048ebe5..8afa5b2 100644
 +      e.printStackTrace();
 +    }
 +  }
++
++  @ReactMethod
++  public void hasURI(Promise promise) {
++    try {
++      ClipboardManager clipboard = getClipboardService();
++      ClipData clipData = clipboard.getPrimaryClip();
++      if (clipData != null && clipData.getItemCount() >= 1) {
++        ClipData.Item firstItem = clipboard.getPrimaryClip().getItemAt(0);
++        Uri pasteUri = firstItem.getUri();
++        promise.resolve(pasteUri != null);
++      } else {
++        promise.resolve(false);
++      }
++    } catch (Exception e) {
++      promise.reject(e);
++    }
++  }
 +
    @ReactMethod
    public void setListener() {
      try {
+@@ -164,8 +239,8 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+         @Override
+         public void onPrimaryClipChanged() {
+           reactContext
+-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+-            .emit(CLIPBOARD_TEXT_CHANGED, null);
++              .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
++              .emit(CLIPBOARD_TEXT_CHANGED, null);
+         }
+       };
+       clipboard.addPrimaryClipChangedListener(listener);
+@@ -176,8 +251,8 @@ public class ClipboardModule extends ReactContextBaseJavaModule {
+
+   @ReactMethod
+   public void removeListener() {
+-    if(listener != null){
+-      try{
++    if (listener != null) {
++      try {
+         ClipboardManager clipboard = getClipboardService();
+         clipboard.removePrimaryClipChangedListener(listener);
+       } catch (Exception e) {
 diff --git a/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.d.ts b/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.d.ts
-index a3e4abd..904a199 100644
+index a3e4abd..9fc11e6 100644
 --- a/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.d.ts
 +++ b/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.d.ts
-@@ -81,6 +81,17 @@ export declare const Clipboard: {
+@@ -81,6 +81,38 @@ export declare const Clipboard: {
       * @param the content to be stored in the clipboard.
       */
      setStrings(content: string[]): void;
 +    /**
 +     * (Android Only)
++     * Get content of URI type. You can use following code to get clipboard content
++     * ```javascript
++     * async _getContent() {
++     *   var content = await Clipboard.getURI();
++     * }
++     * ```
++     */
++    getURI(): Promise<string>;
++    /**
++     * (Android Only)
 +     * Set content of URI type. You can use following code to set clipboard content
 +     * ```javascript
 +     * _setContent() {
@@ -39,19 +211,90 @@ index a3e4abd..904a199 100644
 +     * @param the content to be stored in the clipboard.
 +     */
 +    setURI(content: string): void;
++    /**
++     * (Android Only)
++     * Returns whether the clipboard has a URI or is empty.
++     * This method returns a `Promise`, so you can use following code to check clipboard content
++     * ```javascript
++     * async _hasContent() {
++     *  var hasContent = await Clipboard.hasURI();
++     * }
++     * ```
++     */
++    hasURI(): Promise<boolean>;
      /**
       * Returns whether the clipboard has content or is empty.
       * This method returns a `Promise`, so you can use following code to get clipboard content
+@@ -90,7 +122,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasString(): any;
++    hasString(): Promise<boolean>;
+     /**
+      * Returns whether the clipboard has an image or is empty.
+      * This method returns a `Promise`, so you can use following code to check clipboard content
+@@ -100,7 +132,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasImage(): any;
++    hasImage(): Promise<boolean>;
+     /**
+      * (iOS Only)
+      * Returns whether the clipboard has a URL content. Can check
+@@ -112,7 +144,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasURL(): any;
++    hasURL(): Promise<boolean>;
+     /**
+      * (iOS 14+ Only)
+      * Returns whether the clipboard has a Number(UIPasteboardDetectionPatternNumber) content. Can check
+@@ -124,7 +156,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasNumber(): any;
++    hasNumber(): Promise<boolean>;
+     /**
+      * (iOS 14+ Only)
+      * Returns whether the clipboard has a WebURL(UIPasteboardDetectionPatternProbableWebURL) content. Can check
+@@ -136,7 +168,7 @@ export declare const Clipboard: {
+      * }
+      * ```
+      */
+-    hasWebURL(): any;
++    hasWebURL(): Promise<boolean>;
+     /**
+      * (iOS and Android Only)
+      * Adds a listener to get notifications when the clipboard has changed.
 diff --git a/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.js b/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.js
-index 67b7237..0a74329 100644
+index 67b7237..df3bff6 100644
 --- a/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.js
 +++ b/node_modules/@react-native-clipboard/clipboard/dist/Clipboard.js
-@@ -123,6 +123,22 @@ exports.Clipboard = {
+@@ -123,6 +123,53 @@ exports.Clipboard = {
      setStrings: function (content) {
          NativeClipboard_1.default.setStrings(content);
      },
 +    /**
 +     * (Android Only)
++     * Get content of URI type. You can use following code to get clipboard content
++     * ```javascript
++     * async _getContent() {
++     *   var content = await Clipboard.getURI();
++     * }
++     * ```
++     */
++    getURI: function () {
++        if (react_native_1.Platform.OS !== 'android') {
++            return;
++        }
++        return NativeClipboard_1.default.getURI();
++    },
++    /**
++     * (Android Only)
 +     * Set content of URI type. You can use following code to set clipboard content
 +     * ```javascript
 +     * _setContent() {
@@ -65,6 +308,22 @@ index 67b7237..0a74329 100644
 +            return;
 +        }
 +        return NativeClipboard_1.default.setURI(content);
++    },
++    /**
++     * (Android Only)
++     * Returns whether the clipboard has a URI or is empty.
++     * This method returns a `Promise`, so you can use following code to check clipboard content
++     * ```javascript
++     * async _hasContent() {
++     *  var hasContent = await Clipboard.hasURI();
++     * }
++     * ```
++     */
++    hasURI: function () {
++        if (react_native_1.Platform.OS !== 'android') {
++            return;
++        }
++        return NativeClipboard_1.default.hasURI();
 +    },
      /**
       * Returns whether the clipboard has content or is empty.

patches/react-native-share-menu+6.0.0.patch

@@ -0,0 +1,38 @@
+diff --git a/node_modules/react-native-share-menu/android/build.gradle b/node_modules/react-native-share-menu/android/build.gradle
+index 9557fdb..b0503cb 100644
+--- a/node_modules/react-native-share-menu/android/build.gradle
++++ b/node_modules/react-native-share-menu/android/build.gradle
+@@ -1,12 +1,12 @@
+ apply plugin: 'com.android.library'
+ 
+ android {
+-    compileSdkVersion 29
+-    buildToolsVersion "29.0.2"
++    compileSdkVersion 33
++    buildToolsVersion "33.0.0"
+ 
+     defaultConfig {
+-        minSdkVersion 16
+-        targetSdkVersion 29
++        minSdkVersion 21
++        targetSdkVersion 33
+         versionCode 1
+         versionName "1.0"
+         ndk {
+diff --git a/node_modules/react-native-share-menu/android/src/main/java/com/meedan/ShareMenuModule.java b/node_modules/react-native-share-menu/android/src/main/java/com/meedan/ShareMenuModule.java
+index 09abd7b..af552b1 100644
+--- a/node_modules/react-native-share-menu/android/src/main/java/com/meedan/ShareMenuModule.java
++++ b/node_modules/react-native-share-menu/android/src/main/java/com/meedan/ShareMenuModule.java
+@@ -163,4 +163,12 @@ public class ShareMenuModule extends ReactContextBaseJavaModule implements Activ
+     // Update intent in case the user calls `getSharedText` again
+     currentActivity.setIntent(intent);
+   }
++
++  @ReactMethod
++  public void addListener(String eventName) {
++  }
++
++  @ReactMethod
++  public void removeListeners(Integer count) {
++  }
+ }

src/app.tsx

@@ -54,13 +54,13 @@ const App = () => {
   }, []);
 
   return (
-    <PaperProvider theme={theme}>
+    <ReduxProvider store={store}>
-      <ReduxProvider store={store}>
+      <RealmProvider schema={[Meme, Tag]}>
-        <PersistGate
+        <PaperProvider theme={theme}>
-          loading={<LoadingView />}
+          <PersistGate
-          persistor={persistor}
+            loading={<LoadingView />}
-          onBeforeLift={onBeforeLift}>
+            persistor={persistor}
-          <RealmProvider schema={[Meme, Tag]}>
+            onBeforeLift={onBeforeLift}>
             <GestureHandlerRootView style={appStyles.gestureHandler}>
               <SafeAreaProvider>
                 <StatusBar
@@ -74,10 +74,10 @@ const App = () => {
                 )}
               </SafeAreaProvider>
             </GestureHandlerRootView>
-          </RealmProvider>
+          </PersistGate>
-        </PersistGate>
+        </PaperProvider>
-      </ReduxProvider>
+      </RealmProvider>
-    </PaperProvider>
+    </ReduxProvider>
   );
 };
 

src/components/animatedImage.tsx

@@ -0,0 +1,56 @@
+import React, { ComponentProps, useMemo } from 'react';
+import { Image } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+const AnimatedImage = ({ ...props }: ComponentProps<typeof Image>) => {
+  const scale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: translateX.value },
+        { translateY: translateY.value },
+        { scale: scale.value },
+      ],
+    };
+  });
+
+  const gesture = useMemo(
+    () =>
+      Gesture.Simultaneous(
+        Gesture.Pinch()
+          .onUpdate(event => {
+            scale.value = event.scale;
+          })
+          .onFinalize(() => {
+            scale.value = withSpring(1);
+          }),
+        Gesture.Pan()
+          .minPointers(2)
+          .onUpdate(event => {
+            translateX.value = event.translationX;
+            translateY.value = event.translationY;
+          })
+          .onFinalize(() => {
+            translateX.value = withSpring(0);
+            translateY.value = withSpring(0);
+          }),
+      ),
+    [scale, translateX, translateY],
+  );
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.Image {...props} style={[props.style, animatedStyles]} />
+    </GestureDetector>
+  );
+};
+
+export default AnimatedImage;

src/components/floatingActionButton.tsx

@@ -1,12 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
-import { Keyboard, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { FAB } from 'react-native-paper';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { pickSingle } from 'react-native-document-picker';
+import { pick } from 'react-native-document-picker';
-import { ROUTE } from '../types';
+import {
-import { allowedMimeTypes, noOp } from '../utilities';
+  useDeviceOrientation,
-import { useDeviceOrientation } from '@react-native-community/hooks';
+  useKeyboard,
+} from '@react-native-community/hooks';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { documentPickerResponseToAddMemeFile, ROUTE } from '../types';
+import {
+  allowedMimeTypes,
+  getFilenameFromUri,
+  guessMimeType,
+  noOp,
+} from '../utilities';
+import { useDispatch } from 'react-redux';
+import { setSnackbarMessage } from '../state';
 
 const floatingActionButtonStyles = StyleSheet.create({
   fab: {
@@ -23,58 +34,78 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
   const { navigate } =
     useNavigation<NativeStackNavigationProp<ParamListBase>>();
   const orientation = useDeviceOrientation();
+  const keyboardOpen = useKeyboard().keyboardShown;
+  const dispatch = useDispatch();
 
   const [state, setState] = useState(false);
-  const [keyboardOpen, setKeyboardOpen] = useState(false);
 
-  useEffect(() => {
+  const handleAddMeme = useCallback(async () => {
-    const keyboardDidShowListener = Keyboard.addListener(
+    const response = await pick({
-      'keyboardDidShow',
+      type: allowedMimeTypes,
-      () => setKeyboardOpen(true),
+      allowMultiSelection: true,
-    );
+    }).catch(noOp);
-    const keyboardDidHideListener = Keyboard.addListener(
+    if (!response) return;
-      'keyboardDidHide',
+    const files = documentPickerResponseToAddMemeFile(response);
-      () => setKeyboardOpen(false),
+    navigate(ROUTE.ADD_MEME, { files });
-    );
+  }, [navigate]);
 
-    return () => {
+  const handleAddTag = useCallback(() => {
-      keyboardDidShowListener.remove();
+    navigate(ROUTE.ADD_TAG);
-      keyboardDidHideListener.remove();
+  }, [navigate]);
-    };
+
-  }, []);
+  const handlePaste = useCallback(async () => {
+    const uri = await Clipboard.getURI();
+    if (!uri) {
+      dispatch(setSnackbarMessage('Clipboard does not contain a URI.'));
+      return;
+    }
+    const mimeType = guessMimeType(uri);
+    if (!mimeType) {
+      dispatch(setSnackbarMessage('Unsupported MIME type.'));
+      return;
+    }
+    navigate(ROUTE.ADD_MEME, {
+      files: [
+        {
+          uri: uri,
+          filename: getFilenameFromUri(uri),
+          type: mimeType,
+        },
+      ],
+    });
+  }, [dispatch, navigate]);
 
   return (
-    <FAB.Group
+    <>
-      open={state}
+      <FAB.Group
-      visible={visible && !keyboardOpen}
+        open={state}
-      icon={state ? 'image' : 'plus'}
+        visible={visible && !keyboardOpen}
-      actions={[
+        icon={state ? 'close' : 'plus'}
-        {
+        actions={[
-          icon: 'tag',
+          {
-          label: 'Tag',
+            icon: 'content-paste',
-          onPress: () => navigate(ROUTE.ADD_TAG),
+            label: 'Paste',
-        },
+            onPress: handlePaste,
-        {
-          icon: 'note-text',
-          label: 'Text',
-          onPress: () => {
-            throw new Error('Not yet implemented');
           },
-        },
+          {
-      ]}
+            icon: 'tag',
-      onStateChange={({ open }) => setState(open)}
+            label: 'Tag',
-      onPress={async () => {
+            onPress: handleAddTag,
-        if (!state) return;
+          },
-        const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
+          {
-        if (!file) return;
+            icon: 'image',
-        navigate(ROUTE.ADD_MEME, { file });
+            label: 'Meme',
-      }}
+            onPress: handleAddMeme,
-      style={
+          },
-        orientation === 'portrait'
+        ]}
-          ? floatingActionButtonStyles.fab
+        onStateChange={({ open }) => setState(open)}
-          : floatingActionButtonStyles.fabLandscape
+        style={
-      }
+          orientation === 'portrait'
-    />
+            ? floatingActionButtonStyles.fab
+            : floatingActionButtonStyles.fabLandscape
+        }
+      />
+    </>
   );
 };
 

src/components/index.ts

@@ -1,12 +1,15 @@
 export {
   MemesList,
   MemeEditor,
+  MemeFail,
   MemesHeader,
   MemeTagSelector,
   MemeViewItem,
 } from './memes';
 export { TagChip, TagEditor, TagPreview, TagRow, TagsHeader } from './tags';
+export { default as AnimatedImage } from './animatedImage';
 export { default as FloatingActionButton } from './floatingActionButton';
 export { default as HideableBottomNavigationBar } from './hideableBottomNavigationBar';
 export { default as HideableHeader } from './hideableHeader';
 export { default as LoadingView } from './loadingView';
+export { default as storageLocationChangeDialog } from './storageLocationChangeDialog';

src/components/memes/memeEditor.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect } from 'react';
-import { HelperText, TextInput } from 'react-native-paper';
+import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
 import { Image } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks/lib/useImageDimensions';
-import LoadingView from '../loadingView';
+import { MemeFail, MemeTagSelector, LoadingView } from '..';
-import { MemeFail, MemeTagSelector } from '.';
 import { Tag } from '../../database';
 import { StringValidationResult, validateMemeTitle } from '../../utilities';
 
@@ -13,6 +12,10 @@ const memeEditorStyles = {
     marginBottom: 15,
     borderRadius: 5,
   },
+  uri: {
+    marginBottom: 15,
+    marginHorizontal: 5,
+  },
   memeTagSelector: {
     marginBottom: 10,
   },
@@ -23,27 +26,30 @@ const memeEditorStyles = {
 
 const MemeEditor = ({
   memeUri,
-  memeUriError,
+  memeFilename,
-  setMemeUriError,
+  memeError,
+  setMemeError,
   memeTitle,
   setMemeTitle,
   memeTags,
   setMemeTags,
 }: {
   memeUri: string;
-  memeUriError: Error | undefined;
+  memeFilename?: string;
-  setMemeUriError: (error: Error | undefined) => void;
+  memeError: Error | undefined;
+  setMemeError: (error: Error | undefined) => void;
   memeTitle: StringValidationResult;
   setMemeTitle: (name: StringValidationResult) => void;
   memeTags: Map<string, Tag>;
   setMemeTags: (tags: Map<string, Tag>) => void;
 }) => {
   const { width } = useSafeAreaFrame();
+  const { colors } = useTheme();
 
   const { dimensions, loading, error } = useImageDimensions({ uri: memeUri });
-  useEffect(() => setMemeUriError(error), [error, setMemeUriError]);
+  useEffect(() => setMemeError(error), [error, setMemeError]);
 
-  if (!memeUriError && (loading || !dimensions)) return <LoadingView />;
+  if (!memeError && (loading || !dimensions)) return <LoadingView />;
 
   return (
     <>
@@ -58,7 +64,7 @@ const MemeEditor = ({
       <HelperText type="error" visible={!memeTitle.valid}>
         {memeTitle.error}
       </HelperText>
-      {memeUriError || !dimensions ? (
+      {memeError || !dimensions ? (
         <MemeFail
           style={[
             {
@@ -88,6 +94,12 @@ const MemeEditor = ({
           resizeMode="contain"
         />
       )}
+      <Text
+        variant="bodySmall"
+        style={[memeEditorStyles.uri, { color: colors.onSurfaceDisabled }]}
+        numberOfLines={1}>
+        {memeFilename}
+      </Text>
       <MemeTagSelector
         memeTags={memeTags}
         setMemeTags={setMemeTags}

src/components/memes/memeViewItem.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { ImageZoom } from '@likashefqet/react-native-image-zoom';
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
-import LoadingView from '../loadingView';
+import { AndroidScoped } from 'react-native-file-access';
+import { useSelector } from 'react-redux';
 import { Meme } from '../../database';
-import MemeFail from './memeFail';
+import { RootState } from '../../state';
+import { AnimatedImage, LoadingView, MemeFail } from '..';
 
 const memeViewItemStyles = StyleSheet.create({
   view: {
@@ -16,8 +17,14 @@ const memeViewItemStyles = StyleSheet.create({
 
 const MemeViewItem = ({ meme }: { meme: Meme }) => {
   const { height, width } = useSafeAreaFrame();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useImageDimensions({ uri });
 
   if (!error && (loading || !dimensions)) {
     return (
@@ -38,8 +45,8 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
           iconSize={50}
         />
       ) : (
-        <ImageZoom
+        <AnimatedImage
-          source={{ uri: meme.uri }}
+          source={{ uri }}
           style={
             dimensions.aspectRatio > width / (height - 128)
               ? {
@@ -52,7 +59,6 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
                   height: height - 128,
                 }
           }
-          minScale={0.5}
         />
       )}
     </View>

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/memes/memesList/memesGridItem.tsx

@@ -3,6 +3,7 @@ import { Image, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
+import { AndroidScoped } from 'react-native-file-access';
 import { Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { MemeFail } from '..';
@@ -21,8 +22,14 @@ const MemesGridItem = ({
   const gridColumns = useSelector(
     (state: RootState) => state.settings.gridColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useImageDimensions({ uri });
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -38,7 +45,7 @@ const MemesGridItem = ({
         />
       ) : (
         <Image
-          source={{ uri: meme.uri }}
+          source={{ uri }}
           style={[
             {
               width: (width * 0.92 - 5) / gridColumns,

src/components/memes/memesList/memesListItem.tsx

@@ -3,8 +3,11 @@ import { Image, StyleSheet, View } from 'react-native';
 import { Text, TouchableRipple } from 'react-native-paper';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
+import { AndroidScoped } from 'react-native-file-access';
+import { useSelector } from 'react-redux';
 import { Meme } from '../../../database';
 import { MemeFail } from '..';
+import { RootState } from '../../../state';
 
 const memesListItemStyles = StyleSheet.create({
   view: {
@@ -40,8 +43,14 @@ const MemesListItem = ({
   focusMeme: (index: number) => void;
 }) => {
   const { width } = useSafeAreaFrame();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useImageDimensions({ uri });
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -53,7 +62,7 @@ const MemesListItem = ({
         {error ? (
           <MemeFail style={memesListItemStyles.image} />
         ) : (
-          <Image source={{ uri: meme.uri }} style={memesListItemStyles.image} />
+          <Image source={{ uri }} style={memesListItemStyles.image} />
         )}
         <View
           style={[

src/components/memes/memesList/memesMasonryItem.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { Image, StyleSheet, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { AndroidScoped } from 'react-native-file-access';
+import { useImageDimensions } from '@react-native-community/hooks';
 import { Meme } from '../../../database';
 import { RootState } from '../../../state';
-import { useImageDimensions } from '@react-native-community/hooks';
 import { MemeFail } from '..';
 import { getFontAwesome5IconSize } from '../../../utilities';
 
@@ -31,8 +32,14 @@ const MemesMasonryItem = ({
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useImageDimensions({ uri });
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -53,7 +60,7 @@ const MemesMasonryItem = ({
         />
       ) : (
         <Image
-          source={{ uri: meme.uri }}
+          source={{ uri }}
           style={[
             memeMasonryItemStyles.image,
             {

src/components/storageLocationChangeDialog.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { Dialog, ProgressBar, Text } from 'react-native-paper';
+import { openDocumentTree } from 'react-native-scoped-storage';
+import { useDispatch, useSelector } from 'react-redux';
+import { AndroidScoped, FileSystem } from 'react-native-file-access';
+import { RootState, setStorageUri } from '../state';
+import { clearPermissions, isPermissionForPath, noOp } from '../utilities';
+
+const storageLocationChangeDialogStyles = StyleSheet.create({
+  progressBar: {
+    marginVertical: 15,
+  },
+});
+
+const StorageLocationChangeDialog = ({
+  visible,
+  setVisible,
+  setSnackbarMessage,
+}: {
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+  setSnackbarMessage: (message: string) => void;
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
+  const dispatch = useDispatch();
+
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const selectNewStorageUri = async () => {
+      const uri = await openDocumentTree(true).catch(noOp);
+
+      if (!uri) {
+        setVisible(false);
+        return;
+      }
+
+      const newStorageUri = uri.uri;
+
+      if (isPermissionForPath(storageUri, newStorageUri)) {
+        setSnackbarMessage('Folder already selected.');
+        setVisible(false);
+        return;
+      }
+
+      const files = await FileSystem.ls(storageUri);
+      let filesCopied = 0;
+
+      await Promise.all(
+        files.map(async file => {
+          const oldUri = AndroidScoped.appendPath(storageUri, file);
+          const newUri = AndroidScoped.appendPath(newStorageUri, file);
+
+          // You may be wondering, why cp and unlink instead of mv?
+          // That's because Android is a fuck and does not allow moving across different scoped storage paths.
+          await FileSystem.cp(oldUri, newUri).catch(noOp);
+          await FileSystem.unlink(oldUri).catch(noOp);
+
+          filesCopied++;
+          setProgress(filesCopied / files.length);
+        }),
+      );
+
+      await dispatch(setStorageUri(newStorageUri));
+      await clearPermissions([newStorageUri]);
+
+      setVisible(false);
+      setProgress(0);
+    };
+
+    if (visible) void selectNewStorageUri();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+
+  return (
+    <Dialog
+      visible={visible}
+      onDismiss={() => setVisible(false)}
+      dismissable={false}
+      dismissableBackButton={false}>
+      <Dialog.Title>Change Storage Location</Dialog.Title>
+      <Dialog.Content>
+        <Text>Copying files. Do not close the app.</Text>
+        <ProgressBar
+          animatedValue={progress}
+          style={storageLocationChangeDialogStyles.progressBar}
+        />
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+export default StorageLocationChangeDialog;

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/database/meme.ts

@@ -21,7 +21,7 @@ const memeTypePlural = {
 class Meme extends Object<Meme> {
   id!: BSON.UUID;
   type!: MEME_TYPE;
-  uri!: string;
+  filename!: string;
   mimeType!: string;
   size!: number;
   title!: string;
@@ -39,7 +39,7 @@ class Meme extends Object<Meme> {
     properties: {
       id: { type: 'uuid', default: () => new BSON.UUID() },
       type: { type: 'string', indexed: true },
-      uri: 'string',
+      filename: 'string',
       mimeType: 'string',
       size: 'int',
       title: 'string',

src/navigation.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
-import { NavigationContainer as NavigationContainerBase } from '@react-navigation/native';
+import {
+  NavigationContainer as NavigationContainerBase,
+  ParamListBase,
+  createNavigationContainerRef,
+} from '@react-navigation/native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { useTheme } from 'react-native-paper';
+import { Snackbar, useTheme } from 'react-native-paper';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Memes,
   Tags,
@@ -20,13 +24,36 @@ import {
   FloatingActionButton,
   HideableBottomNavigationBar,
 } from './components';
-import { ROUTE, RootStackParamList } from './types';
+import {
+  ROUTE,
+  RootStackParamList,
+  SharedItem,
+  sharedItemToAddMemeFile,
+} from './types';
 import { RootState } from './state';
+import ShareMenu from 'react-native-share-menu';
+import { setSnackbarMessage } from './state/navigation';
+import { StyleSheet } from 'react-native';
+import { useKeyboard } from '@react-native-community/hooks';
+
+const tabNavigatorStyles = StyleSheet.create({
+  snackbar: {
+    marginBottom: 90,
+  },
+  snackbarKeyboard: {
+    marginBottom: 10,
+  },
+});
 
 const TabNavigator = () => {
   const navVisible = useSelector(
     (state: RootState) => state.navigation.navVisible,
   );
+  const snackbarMessage = useSelector(
+    (state: RootState) => state.navigation.snackbarMessage,
+  );
+  const dispatch = useDispatch();
+  const keyboardOpen = useKeyboard().keyboardShown;
 
   const [route, setRoute] = React.useState(ROUTE.MEMES);
   const TabNavigatorBase = createBottomTabNavigator();
@@ -77,6 +104,22 @@ const TabNavigator = () => {
         />
       </TabNavigatorBase.Navigator>
       <FloatingActionButton visible={navVisible && route !== ROUTE.SETTINGS} />
+      <Snackbar
+        visible={!!snackbarMessage}
+        // eslint-disable-next-line unicorn/no-useless-undefined
+        onDismiss={() => dispatch(setSnackbarMessage(undefined))}
+        style={
+          keyboardOpen
+            ? tabNavigatorStyles.snackbarKeyboard
+            : tabNavigatorStyles.snackbar
+        }
+        action={{
+          label: 'Dismiss',
+          // eslint-disable-next-line unicorn/no-useless-undefined
+          onPress: () => dispatch(setSnackbarMessage(undefined)),
+        }}>
+        {snackbarMessage}
+      </Snackbar>
     </>
   );
 };
@@ -84,10 +127,28 @@ const TabNavigator = () => {
 const NavigationContainer = () => {
   const theme = useTheme();
 
+  const navigationRef = createNavigationContainerRef<ParamListBase>();
+
+  const handleShare = useCallback(
+    (item: SharedItem | undefined) => {
+      if (!item) return;
+      const files = sharedItemToAddMemeFile(item);
+      navigationRef.current?.navigate(ROUTE.ADD_MEME, { files });
+    },
+    [navigationRef],
+  );
+
+  useEffect(() => {
+    ShareMenu.getInitialShare(handleShare);
+    const listener = ShareMenu.addNewShareListener(handleShare);
+    return () => listener.remove();
+  }, [handleShare]);
+
   const StackNavigatorBase = createNativeStackNavigator<RootStackParamList>();
 
   return (
     <NavigationContainerBase
+      ref={navigationRef}
       theme={theme.dark ? darkNavigationTheme : lightNavigationTheme}>
       <StackNavigatorBase.Navigator
         screenOptions={{

src/screens/editors/addMeme.tsx

@@ -9,11 +9,12 @@ import { AndroidScoped, FileSystem } from 'react-native-file-access';
 import { useSelector } from 'react-redux';
 import { extension } from 'react-native-mime-types';
 import { useDeviceOrientation } from '@react-native-community/hooks';
+import { pick } from 'react-native-document-picker';
 import {
-  DocumentPickerResponse,
+  documentPickerResponseToAddMemeFile,
-  pickSingle,
+  ROUTE,
-} from 'react-native-document-picker';
+  RootStackParamList,
-import { ROUTE, RootStackParamList } from '../../types';
+} from '../../types';
 import { Meme, Tag } from '../../database';
 import { RootState } from '../../state';
 import {
@@ -36,19 +37,22 @@ const AddMeme = ({
     (state: RootState) => state.settings.storageUri,
   )!;
 
-  const file = useRef(route.params.file);
+  const [index, setIndex] = useState(0);
+  const files = useRef(route.params.files);
+  const file = useRef(files.current[index]);
+  const isLastFile = index === files.current.length - 1;
 
   const [memeUri, setMemeUri] = useState(file.current.uri);
-  const [memeUriError, setMemeUriError] = useState<Error>();
+  const [memeFilename, setMemeFilename] = useState(file.current.filename);
+  const [memeError, setMemeError] = useState<Error>();
   const [memeTitle, setMemeTitle] = useState(validateMemeTitle('New Meme'));
   const [memeIsFavorite, setMemeIsFavorite] = useState(false);
   const [memeTags, setMemeTags] = useState(new Map<string, Tag>());
 
   const [isSaving, setIsSaving] = useState(false);
-  const [isSavingAndAddingAnother, setIsSavingAndAddingAnother] =
+  const [isSavingAndAddingMore, setIsSavingAndAddingMore] = useState(false);
-    useState(false);
 
-  const handleSave = useCallback(async () => {
+  const saveMeme = useCallback(async () => {
     const uuid = new BSON.UUID();
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const mimeType = file.current.type!;
@@ -58,10 +62,10 @@ const AddMeme = ({
     const fileExtension = extension(mimeType) as string;
     if (!fileExtension) goBack();
 
-    const uri = AndroidScoped.appendPath(
+    const filename = `${uuid.toHexString()}-${Math.round(
-      storageUri,
+      Date.now() / 1000,
-      `${uuid.toHexString()}-${Math.round(Date.now() / 1000)}.${fileExtension}`,
+    )}.${fileExtension}`;
-    );
+    const uri = AndroidScoped.appendPath(storageUri, filename);
 
     await FileSystem.cp(file.current.uri, uri);
     const { size } = await FileSystem.stat(uri);
@@ -70,7 +74,7 @@ const AddMeme = ({
       const meme: Meme | undefined = realm.create<Meme>(Meme.schema.name, {
         id: uuid,
         type: memeType,
-        uri,
+        filename,
         mimeType,
         size,
         title: memeTitle.parsed,
@@ -87,6 +91,48 @@ const AddMeme = ({
     });
   }, [goBack, memeIsFavorite, memeTags, memeTitle.parsed, realm, storageUri]);
 
+  const handleSave = useCallback(async () => {
+    setIsSaving(true);
+    await saveMeme();
+    goBack();
+  }, [goBack, saveMeme]);
+
+  const handleSaveAndNext = useCallback(async () => {
+    setIsSaving(true);
+    await saveMeme();
+    setIsSaving(false);
+
+    setIndex(index + 1);
+    file.current = files.current[index + 1];
+
+    setMemeUri(file.current.uri);
+    setMemeFilename(file.current.filename);
+    setMemeTitle(validateMemeTitle('New Meme'));
+    setMemeIsFavorite(false);
+    setMemeTags(new Map<string, Tag>());
+  }, [index, saveMeme]);
+
+  const handleSaveAndAddMore = useCallback(async () => {
+    setIsSavingAndAddingMore(true);
+    await saveMeme();
+    setIsSavingAndAddingMore(false);
+
+    setIndex(0);
+    const response = await pick({
+      type: allowedMimeTypes,
+      allowMultiSelection: true,
+    }).catch(goBack);
+    if (!response) return;
+    files.current = documentPickerResponseToAddMemeFile(response);
+    file.current = files.current[0];
+
+    setMemeUri(file.current.uri);
+    setMemeFilename(file.current.filename);
+    setMemeTitle(validateMemeTitle('New Meme'));
+    setMemeIsFavorite(false);
+    setMemeTags(new Map<string, Tag>());
+  }, [goBack, saveMeme]);
+
   return (
     <>
       <Appbar.Header>
@@ -98,7 +144,7 @@ const AddMeme = ({
         />
       </Appbar.Header>
       <Banner
-        visible={!!memeUriError}
+        visible={!!memeError}
         actions={[
           {
             label: 'Cancel',
@@ -119,8 +165,9 @@ const AddMeme = ({
         <View style={editorStyles.editorView}>
           <MemeEditor
             memeUri={memeUri}
-            memeUriError={memeUriError}
+            memeFilename={memeFilename}
-            setMemeUriError={setMemeUriError}
+            memeError={memeError}
+            setMemeError={setMemeError}
             memeTitle={memeTitle}
             setMemeTitle={setMemeTitle}
             memeTags={memeTags}
@@ -131,46 +178,31 @@ const AddMeme = ({
           <Button
             mode="contained-tonal"
             icon="plus"
-            onPress={async () => {
+            onPress={handleSaveAndAddMore}
-              setIsSavingAndAddingAnother(true);
-              await handleSave();
-              setIsSavingAndAddingAnother(false);
-              file.current = (await pickSingle({
-                type: allowedMimeTypes,
-              }).catch(goBack)) as DocumentPickerResponse;
-              setMemeUri(file.current.uri);
-              setMemeTitle(validateMemeTitle('New Meme'));
-              setMemeIsFavorite(false);
-              setMemeTags(new Map<string, Tag>());
-            }}
             disabled={
               !memeTitle.valid ||
               isSaving ||
-              isSavingAndAddingAnother ||
+              isSavingAndAddingMore ||
-              !!memeUriError
+              !!memeError ||
+              !isLastFile
             }
-            loading={isSavingAndAddingAnother}
+            loading={isSavingAndAddingMore}
             style={editorStyles.saveAndAddButton}>
-            Save & Add
+            Save & Add More
           </Button>
           <Button
             mode="contained"
             icon="floppy"
-            onPress={async () => {
+            onPress={isLastFile ? handleSave : handleSaveAndNext}
-              setIsSaving(true);
-              await handleSave();
-              setIsSaving(false);
-              goBack();
-            }}
             disabled={
               !memeTitle.valid ||
               isSaving ||
-              isSavingAndAddingAnother ||
+              isSavingAndAddingMore ||
-              !!memeUriError
+              !!memeError
             }
             loading={isSaving}
             style={editorStyles.saveButton}>
-            Save
+            {isLastFile ? 'Save' : 'Save & Next'}
           </Button>
         </View>
       </ScrollView>

src/screens/editors/addTag.tsx

@@ -26,10 +26,9 @@ const AddTag = () => {
 
   // Although saving tags is instantaneous, we still want to show a loading
   // indicator to prevent the user from spamming the save button.
-  const [isSavingAndAddingAnother, setIsSavingAndAddingAnother] =
+  const [isSavingAndAddingMore, setIsSavingAndAddingMore] = useState(false);
-    useState(false);
 
-  const handleSave = useCallback(() => {
+  const saveTag = useCallback(() => {
     realm.write(() => {
       realm.create(Tag.schema.name, {
         name: tagName.parsed,
@@ -38,6 +37,19 @@ const AddTag = () => {
     });
   }, [realm, tagColor.parsed, tagName.parsed]);
 
+  const handleSave = useCallback(() => {
+    saveTag();
+    goBack();
+  }, [goBack, saveTag]);
+
+  const handleSaveAndAddMore = useCallback(() => {
+    setIsSavingAndAddingMore(true);
+    saveTag();
+    setTimeout(() => setIsSavingAndAddingMore(false), 250);
+    setTagName(validateTagName('newTag'));
+    setTagColor(validateColor(generateRandomColor()));
+  }, [saveTag]);
+
   return (
     <>
       <Appbar.Header>
@@ -64,26 +76,17 @@ const AddTag = () => {
           <Button
             mode="contained-tonal"
             icon="plus"
-            onPress={() => {
+            onPress={handleSaveAndAddMore}
-              setIsSavingAndAddingAnother(true);
+            disabled={!tagName.valid || isSavingAndAddingMore}
-              handleSave();
+            loading={isSavingAndAddingMore}
-              setTimeout(() => setIsSavingAndAddingAnother(false), 250);
-              setTagName(validateTagName('newTag'));
-              setTagColor(validateColor(generateRandomColor()));
-            }}
-            disabled={!tagName.valid || isSavingAndAddingAnother}
-            loading={isSavingAndAddingAnother}
             style={editorStyles.saveAndAddButton}>
             Save & Add
           </Button>
           <Button
             mode="contained"
             icon="floppy"
-            onPress={() => {
+            onPress={handleSave}
-              handleSave();
+            disabled={!tagName.valid || isSavingAndAddingMore}
-              goBack();
-            }}
-            disabled={!tagName.valid || isSavingAndAddingAnother}
             style={editorStyles.saveButton}>
             Save
           </Button>

src/screens/editors/editMeme.tsx

@@ -9,6 +9,8 @@ import { BSON } from 'realm';
 import { RootStackParamList, ROUTE } from '../../types';
 import { pickSingle } from 'react-native-document-picker';
 import { AndroidScoped, FileSystem } from 'react-native-file-access';
+import { extension } from 'react-native-mime-types';
+import { useSelector } from 'react-redux';
 import { Tag, Meme } from '../../database';
 import {
   StringValidationResult,
@@ -21,8 +23,6 @@ import {
 } from '../../utilities';
 import { MemeEditor } from '../../components';
 import editorStyles from './editorStyles';
-import { extension } from 'react-native-mime-types';
-import { useSelector } from 'react-redux';
 import { RootState } from '../../state';
 
 const EditMeme = ({
@@ -42,10 +42,11 @@ const EditMeme = ({
     Meme.schema.name,
     BSON.UUID.createFromHexString(route.params.id),
   )!;
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
 
   const [hasChanges, setHasChanges] = useState(false);
 
-  const [memeUriError, setMemeUriError] = useState<Error>();
+  const [memeError, setMemeError] = useState<Error>();
   const [memeTitle, setMemeTitle] = useState(validateMemeTitle(meme.title));
   const [memeTags, setMemeTags] = useState(
     new Map<string, Tag>(meme.tags.map(tag => [tag.id.toHexString(), tag])),
@@ -64,6 +65,8 @@ const EditMeme = ({
   const [isSaving, setIsSaving] = useState(false);
 
   const handleSave = useCallback(() => {
+    setIsSaving(true);
+
     realm.write(() => {
       meme.tags.forEach(tag => {
         if (!memeTags.has(tag.id.toHexString())) {
@@ -87,7 +90,15 @@ const EditMeme = ({
       meme.tagsLength = memeTags.size;
       meme.dateModified = new Date();
     });
-  }, [meme, memeTags, memeTitle.parsed, realm]);
+
+    goBack();
+  }, [goBack, meme, memeTags, memeTitle.parsed, realm]);
+
+  const handleDelete = useCallback(async () => {
+    setIsSaving(true);
+    await deleteMeme(realm, storageUri, meme);
+    goBack();
+  }, [goBack, meme, realm, storageUri]);
 
   const handleFixUri = useCallback(async () => {
     const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
@@ -101,16 +112,16 @@ const EditMeme = ({
     const fileExtension = extension(mimeType) as string;
     if (!fileExtension) return;
 
-    const uri = AndroidScoped.appendPath(
+    const filename = `${meme.id.toHexString()}-${
-      storageUri,
+      Date.now() / 1000
-      `${meme.id.toHexString()}-${Date.now() / 1000}.${fileExtension}`,
+    }.${fileExtension}`;
-    );
+    const newUri = AndroidScoped.appendPath(storageUri, filename);
 
-    await FileSystem.cp(file.uri, uri);
+    await FileSystem.cp(file.uri, newUri);
-    const { size } = await FileSystem.stat(uri);
+    const { size } = await FileSystem.stat(newUri);
 
     realm.write(() => {
-      meme.uri = uri;
+      meme.filename = filename;
       meme.type = memeType;
       meme.mimeType = mimeType;
       meme.size = size;
@@ -126,18 +137,10 @@ const EditMeme = ({
           icon={meme.isFavorite ? 'heart' : 'heart-outline'}
           onPress={() => favoriteMeme(realm, meme)}
         />
-        <Appbar.Action
+        <Appbar.Action icon="delete" onPress={handleDelete} />
-          icon="delete"
-          onPress={async () => {
-            setIsSaving(true);
-            await deleteMeme(realm, meme);
-            setIsSaving(false);
-            goBack();
-          }}
-        />
       </Appbar.Header>
       <Banner
-        visible={!!memeUriError}
+        visible={!!memeError}
         actions={[
           {
             label: 'Fix URI',
@@ -145,12 +148,7 @@ const EditMeme = ({
           },
           {
             label: 'Delete Meme',
-            onPress: async () => {
+            onPress: handleDelete,
-              setIsSaving(true);
-              await deleteMeme(realm, meme);
-              setIsSaving(false);
-              goBack();
-            },
           },
         ]}>
         The URI for this meme appears to be broken. This may have been caused by
@@ -166,9 +164,10 @@ const EditMeme = ({
         ]}>
         <View style={editorStyles.editorView}>
           <MemeEditor
-            memeUri={meme.uri}
+            memeUri={uri}
-            memeUriError={memeUriError}
+            memeFilename={meme.filename}
-            setMemeUriError={setMemeUriError}
+            memeError={memeError}
+            setMemeError={setMemeError}
             memeTitle={memeTitle}
             setMemeTitle={handleMemeTitleChange}
             memeTags={memeTags}
@@ -179,14 +178,9 @@ const EditMeme = ({
           <Button
             mode="contained"
             icon="floppy"
-            onPress={() => {
+            onPress={handleSave}
-              setIsSaving(true);
-              handleSave();
-              setIsSaving(false);
-              goBack();
-            }}
             disabled={
-              !memeTitle.valid || !hasChanges || isSaving || !!memeUriError
+              !memeTitle.valid || !hasChanges || isSaving || !!memeError
             }
             loading={isSaving}
             style={editorStyles.soloSaveButton}>

src/screens/editors/editTag.tsx

@@ -51,7 +51,9 @@ const EditTag = ({
       tag.color = tagColor.parsed;
       tag.dateModified = new Date();
     });
-  }, [realm, tag, tagColor.parsed, tagName.parsed]);
+
+    goBack();
+  }, [goBack, realm, tag, tagColor.parsed, tagName.parsed]);
 
   return (
     <>
@@ -87,10 +89,7 @@ const EditTag = ({
           <Button
             mode="contained"
             icon="floppy"
-            onPress={() => {
+            onPress={handleSave}
-              handleSave();
-              goBack();
-            }}
             disabled={!tagName.valid || !tagColor.valid || !hasChanges}
             style={editorStyles.soloSaveButton}>
             Save

src/screens/memeView.tsx

@@ -17,6 +17,8 @@ import {
   multipleIdQuery,
   shareMeme,
 } from '../utilities';
+import { useSelector } from 'react-redux';
+import { RootState } from '../state';
 
 const memeViewStyles = StyleSheet.create({
   // eslint-disable-next-line react-native/no-color-literals
@@ -48,13 +50,16 @@ const MemeView = ({
 }: NativeStackScreenProps<RootStackParamList, ROUTE.MEME_VIEW>) => {
   const { height, width } = useSafeAreaFrame();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
   const realm = useRealm();
 
   const { ids } = route.params;
   const [index, setIndex] = useState(route.params.index);
 
-  const [snackbarVisible, setSnackbarVisible] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState<string>();
-  const [snackbarMessage, setSnackbarMessage] = useState('');
 
   const flashListRef = useRef<FlashList<Meme>>(null);
 
@@ -62,8 +67,6 @@ const MemeView = ({
     return collectionIn.filtered(multipleIdQuery(ids));
   });
 
-  if (memes.length === 0) return <></>;
-
   return (
     <>
       <Appbar.Header style={memeViewStyles.header}>
@@ -97,24 +100,17 @@ const MemeView = ({
         <Appbar.Action
           icon="share"
           onPress={() => {
-            shareMeme(memes[index]).catch(() => {
+            shareMeme(realm, storageUri, memes[index]).catch(() =>
-              setSnackbarMessage('Failed to share meme!');
+              setSnackbarMessage('Failed to share meme!'),
-              setSnackbarVisible(true);
+            );
-            });
           }}
         />
         <Appbar.Action
           icon="content-copy"
           onPress={async () => {
-            await copyMeme(memes[index])
+            await copyMeme(realm, storageUri, memes[index])
-              .then(() => {
+              .then(() => setSnackbarMessage('Meme copied!'))
-                setSnackbarMessage('Meme copied!');
+              .catch(() => setSnackbarMessage('Failed to copy meme!'));
-                setSnackbarVisible(true);
-              })
-              .catch(() => {
-                setSnackbarMessage('Failed to copy meme!');
-                setSnackbarVisible(true);
-              });
           }}
         />
         <Appbar.Action
@@ -126,25 +122,27 @@ const MemeView = ({
         <Appbar.Action
           icon="delete"
           onPress={() => {
+            void deleteMeme(realm, storageUri, memes[index]);
             if (index === memes.length - 1) {
               setIndex(index - 1);
               flashListRef.current?.scrollToIndex({
                 index: index - 1,
               });
             }
-            void deleteMeme(realm, memes[index]);
             if (memes.length === 1) navigation.goBack();
           }}
         />
       </Appbar>
       <Portal>
         <Snackbar
-          visible={snackbarVisible}
+          visible={!!snackbarMessage}
-          onDismiss={() => setSnackbarVisible(false)}
+          // eslint-disable-next-line unicorn/no-useless-undefined
+          onDismiss={() => setSnackbarMessage(undefined)}
           style={memeViewStyles.snackbar}
           action={{
             label: 'Dismiss',
-            onPress: () => setSnackbarVisible(false),
+            // eslint-disable-next-line unicorn/no-useless-undefined
+            onPress: () => setSnackbarMessage(undefined),
           }}>
           {snackbarMessage}
         </Snackbar>

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

@@ -5,29 +5,30 @@ import {
   List,
   Portal,
   SegmentedButtons,
-  Snackbar,
   Switch,
   Text,
   useTheme,
 } from 'react-native-paper';
-import { openDocumentTree } from 'react-native-scoped-storage';
 import { useDispatch, useSelector } from 'react-redux';
 import type {} from 'redux-thunk/extend-redux';
 import {
   RootState,
+  setAutofocusMemesSearch,
+  setAutofocusTagsSearch,
   setGridColumns,
   setMasonryColumns,
   setNoMedia,
-  setStorageUri,
+  setSnackbarMessage,
 } from '../state';
+import StorageLocationChangeDialog from '../components/storageLocationChangeDialog';
+import { useRealm } from '@realm/react';
+import { FileSystem, FileStat } from 'react-native-file-access';
+import { Meme } from '../database';
 
 const settingsStyles = StyleSheet.create({
   scrollView: {
     paddingHorizontal: '4%',
   },
-  snackbar: {
-    marginBottom: 90,
-  },
   marginBottom: {
     marginBottom: 15,
   },
@@ -35,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',
@@ -45,24 +52,46 @@ 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,
   );
   const gridColumns = useSelector(
     (state: RootState) => state.settings.gridColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
   const dispatch = useDispatch();
+  const realm = useRealm();
 
-  const [isOptimizingDatabase, setIsOptimizingDatabase] = useState(false);
+  const [
-  const [snackbarVisible, setSnackbarVisible] = useState(false);
+    storageLocationChangeDialogVisible,
-  const [snackbarMessage, setSnackbarMessage] = useState('');
+    setStorageLocationChangeDialogVisible,
+  ] = useState(false);
 
-  const optimizeDatabase = () => {
+  const refreshMemeMetadata = async () => {
-    setIsOptimizingDatabase(true);
+    const stat = await FileSystem.statDir(storageUri);
-    // TODO: clean up missing / extra files
+
-    setSnackbarMessage('Database optimized!');
+    const statMap = new Map<string, FileStat>();
-    setSnackbarVisible(true);
+    stat.forEach(s => statMap.set(s.filename, s));
-    setIsOptimizingDatabase(false);
+
+    const memes = realm.objects<Meme>(Meme.schema.name);
+
+    realm.write(() => {
+      memes.forEach(meme => {
+        const fileStat = statMap.get(meme.filename);
+        meme.size = fileStat?.size ?? 0;
+      });
+    });
+
+    dispatch(setSnackbarMessage('Meme metadata refreshed.'));
   };
 
   return (
@@ -74,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>
@@ -111,15 +158,18 @@ const Settings = () => {
           />
         </List.Section>
         <List.Section>
-          <List.Subheader>Media Storage</List.Subheader>
+          <List.Subheader>Storage</List.Subheader>
           <Button
             mode="elevated"
             style={settingsStyles.marginBottom}
-            onPress={async () => {
+            onPress={() => setStorageLocationChangeDialogVisible(true)}>
-              const { uri } = await openDocumentTree(true);
+            Change Storage Location
-              void dispatch(setStorageUri(uri));
+          </Button>
-            }}>
+          <Button
-            Change External Storage Path
+            mode="elevated"
+            style={settingsStyles.marginBottom}
+            onPress={refreshMemeMetadata}>
+            Refresh Meme Metadata
           </Button>
           <View style={settingsStyles.hideMediaSwitch}>
             <Text>Hide media from gallery</Text>
@@ -131,27 +181,15 @@ const Settings = () => {
             />
           </View>
         </List.Section>
-        <List.Section>
-          <List.Subheader>Database</List.Subheader>
-          <Button
-            mode="elevated"
-            loading={isOptimizingDatabase}
-            onPress={optimizeDatabase}>
-            Optimize Database Now
-          </Button>
-        </List.Section>
       </ScrollView>
       <Portal>
-        <Snackbar
+        <StorageLocationChangeDialog
-          visible={snackbarVisible}
+          visible={storageLocationChangeDialogVisible}
-          onDismiss={() => setSnackbarVisible(false)}
+          setVisible={setStorageLocationChangeDialogVisible}
-          style={settingsStyles.snackbar}
+          setSnackbarMessage={message => {
-          action={{
+            dispatch(setSnackbarMessage(message));
-            label: 'Dismiss',
+          }}
-            onPress: () => setSnackbarVisible(false),
+        />
-          }}>
-          {snackbarMessage}
-        </Snackbar>
       </Portal>
     </>
   );

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,
@@ -79,4 +81,5 @@ export {
   type NavigationState,
   setNavVisible,
   toggleNavVisible,
+  setSnackbarMessage,
 } from './navigation';

src/state/navigation.ts

@@ -2,10 +2,12 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 interface NavigationState {
   navVisible: boolean;
+  snackbarMessage: string | undefined;
 }
 
 const initialState: NavigationState = {
   navVisible: true,
+  snackbarMessage: undefined,
 };
 
 const navigationSlice = createSlice({
@@ -18,14 +20,19 @@ const navigationSlice = createSlice({
     toggleNavVisible: state => {
       state.navVisible = !state.navVisible;
     },
+    setSnackbarMessage: (state, action: PayloadAction<string | undefined>) => {
+      state.snackbarMessage = action.payload;
+    },
   },
 });
 
-const { setNavVisible, toggleNavVisible } = navigationSlice.actions;
+const { setNavVisible, toggleNavVisible, setSnackbarMessage } =
+  navigationSlice.actions;
 
 export {
   type NavigationState,
   setNavVisible,
   toggleNavVisible,
+  setSnackbarMessage,
 };
 export default navigationSlice.reducer;

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 } =
+const {
-  settingsSlice.actions;
+  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,

src/types/index.ts

@@ -1,5 +1,11 @@
 export { type Dimensions } from './dimensions';
-export { ROUTE, type RootStackParamList } from './route';
+export {
+  ROUTE,
+  type RootStackParamList,
+  documentPickerResponseToAddMemeFile,
+  sharedItemToAddMemeFile,
+} from './route';
+export { type SharedItem } from './share';
 export {
   MEME_SORT,
   memesSortQuery,

src/types/route.ts

@@ -1,4 +1,6 @@
 import { DocumentPickerResponse } from 'react-native-document-picker';
+import { getFilenameFromUri, guessMimeType } from '../utilities';
+import { SharedItem } from './share';
 
 enum ROUTE {
   MAIN = 'Main',
@@ -17,8 +19,48 @@ interface MemeViewRouteParams {
   index: number;
 }
 
+interface AddMemeFile {
+  uri: string;
+  filename: string;
+  type?: string;
+}
+
+const documentPickerResponseToAddMemeFile = (
+  response: DocumentPickerResponse[],
+): AddMemeFile[] => {
+  return response.map(item => {
+    const { uri, name, type } = item;
+
+    return {
+      uri,
+      filename: name ?? getFilenameFromUri(uri),
+      type: type ?? guessMimeType(uri),
+    };
+  });
+};
+
+const sharedItemToAddMemeFile = (item: SharedItem): AddMemeFile[] => {
+  const { data, mimeType } = item;
+
+  if (typeof data === 'string') {
+    return [
+      {
+        uri: data,
+        filename: getFilenameFromUri(data),
+        type: mimeType,
+      },
+    ];
+  }
+
+  return data.map(uri => ({
+    uri,
+    filename: getFilenameFromUri(uri),
+    type: guessMimeType(uri),
+  }));
+};
+
 interface AddMemeRouteParams {
-  file: DocumentPickerResponse;
+  files: AddMemeFile[];
 }
 
 interface EditMemeRouteParams {
@@ -44,4 +86,9 @@ interface RootStackParamList {
   [ROUTE.EDIT_TAG]: EditTagRouteParams;
 }
 
-export { ROUTE, type RootStackParamList };
+export {
+  ROUTE,
+  type RootStackParamList,
+  documentPickerResponseToAddMemeFile,
+  sharedItemToAddMemeFile,
+};

src/types/share.ts

@@ -0,0 +1,7 @@
+interface SharedItem {
+  data: string | string[];
+  mimeType: string;
+  extraData?: object;
+}
+
+export { type SharedItem };

src/utilities/clipboard.ts

@@ -0,0 +1,11 @@
+import Clipboard from '@react-native-clipboard/clipboard';
+
+const clipboardHasContent = () => {
+  return Promise.all([Clipboard.hasString(), Clipboard.hasURI()]).then(
+    ([hasString, hasURI]) => {
+      return hasString || hasURI;
+    },
+  );
+};
+
+export { clipboardHasContent };

src/utilities/filesystem.ts

@@ -2,6 +2,7 @@ import { MEME_TYPE } from '../database';
 
 const allowedImageMimeTypes = [
   'image/bmp',
+  'image/jpg',
   'image/jpeg',
   'image/png',
   'image/webp',
@@ -14,6 +15,7 @@ const allowedMimeTypes = [...allowedImageMimeTypes, ...allowedGifMimeTypes];
 const getMemeType = (mimeType: string): MEME_TYPE | undefined => {
   switch (mimeType) {
     case 'image/bmp':
+    case 'image/jpg':
     case 'image/jpeg':
     case 'image/png':
     case 'image/webp': {
@@ -25,9 +27,32 @@ const getMemeType = (mimeType: string): MEME_TYPE | undefined => {
   }
 };
 
+const guessMimeType = (filename: string): string | undefined => {
+  const extension = filename.split('.').pop()?.toLowerCase();
+  switch (extension) {
+    case 'bmp': {
+      return 'image/bmp';
+    }
+    case 'jpg':
+    case 'jpeg': {
+      return 'image/jpeg';
+    }
+    case 'png': {
+      return 'image/png';
+    }
+    case 'webp': {
+      return 'image/webp';
+    }
+    case 'gif': {
+      return 'image/gif';
+    }
+  }
+};
+
 export {
   allowedImageMimeTypes,
   allowedGifMimeTypes,
   allowedMimeTypes,
   getMemeType,
+  guessMimeType,
 };

src/utilities/index.ts

@@ -1,3 +1,4 @@
+export { clipboardHasContent } from './clipboard';
 export {
   getContrastColor,
   isHexColor,
@@ -14,6 +15,7 @@ export {
   allowedGifMimeTypes,
   allowedMimeTypes,
   getMemeType,
+  guessMimeType,
 } from './filesystem';
 export { getSortIcon, getViewIcon } from './icon';
 export {
@@ -23,7 +25,11 @@ export {
   editMeme,
   deleteMeme,
 } from './meme';
-export { isPermissionForPath, clearPermissions } from './permissions';
+export {
+  isPermissionForPath,
+  clearPermissions,
+  getFilenameFromUri,
+} from './permissions';
 export { deleteTag } from './tag';
 export {
   type StringValidationResult,

src/utilities/meme.ts

@@ -1,6 +1,5 @@
 import { NavigationProp } from '@react-navigation/native';
-import { Dirs, FileSystem } from 'react-native-file-access';
+import { AndroidScoped, Dirs, FileSystem } from 'react-native-file-access';
-import { extension } from 'react-native-mime-types';
 import Share from 'react-native-share';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Meme } from '../database';
@@ -13,10 +12,20 @@ const favoriteMeme = (realm: Realm, meme: Meme) => {
   });
 };
 
-const shareMeme = async (meme: Meme) => {
+const shareMeme = async (realm: Realm, storageUri: string, meme: Meme) => {
-  const fileExtension = extension(meme.mimeType) as string;
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
-  const cacheUri = `${Dirs.CacheDir}/${meme.id.toHexString()}.${fileExtension}`;
+  const cacheUri = `${Dirs.CacheDir}/${meme.filename}`;
-  await FileSystem.cp(meme.uri, cacheUri);
+
+  realm.write(() => {
+    meme.dateUsed = new Date();
+    meme.timesUsed += 1;
+    meme.tags.forEach(tag => {
+      tag.dateUsed = new Date();
+      tag.timesUsed += 1;
+    });
+  });
+
+  await FileSystem.cp(uri, cacheUri);
   await Share.open({
     url: `file://${cacheUri}`,
     type: meme.mimeType,
@@ -24,10 +33,22 @@ const shareMeme = async (meme: Meme) => {
   });
 };
 
-const copyMeme = async (meme: Meme) => {
+const copyMeme = async (realm: Realm, storageUri: string, meme: Meme) => {
-  const exists = await FileSystem.exists(meme.uri);
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const exists = await FileSystem.exists(uri);
   if (!exists) throw new Error('File does not exist');
-  Clipboard.setURI(meme.uri);
+
+  realm.write(() => {
+    meme.dateUsed = new Date();
+    meme.timesUsed += 1;
+    meme.tags.forEach(tag => {
+      tag.dateUsed = new Date();
+      tag.timesUsed += 1;
+    });
+  });
+
+  Clipboard.setURI(uri);
 };
 
 const editMeme = (
@@ -37,8 +58,10 @@ const editMeme = (
   navigation.navigate(ROUTE.EDIT_MEME, { id: meme.id.toHexString() });
 };
 
-const deleteMeme = async (realm: Realm, meme: Meme) => {
+const deleteMeme = async (realm: Realm, storageUri: string, meme: Meme) => {
-  await FileSystem.unlink(meme.uri).catch(noOp);
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  await FileSystem.unlink(uri).catch(noOp);
 
   realm.write(() => {
     for (const tag of meme.tags) {

src/utilities/permissions.ts

@@ -1,10 +1,11 @@
+import { Util } from 'react-native-file-access';
 import {
   getPersistedUriPermissions,
   releasePersistableUriPermission,
 } from 'react-native-scoped-storage';
 
 const isPermissionForPath = (permission: string, path: string) => {
-  return path.startsWith(permission + '/');
+  return path.startsWith(permission + '/') || path === permission;
 };
 
 const clearPermissions = async (excepts: string[] = []) => {
@@ -16,4 +17,8 @@ const clearPermissions = async (excepts: string[] = []) => {
   });
 };
 
-export { isPermissionForPath, clearPermissions };
+const getFilenameFromUri = (uri: string) => {
+  return Util.basename(uri.replaceAll('%2F', '/'));
+};
+
+export { isPermissionForPath, clearPermissions, getFilenameFromUri };