Release v1.1.18

* Move changes to master branch

* Fixed errors stemming from improper move

* Add EPub to library

* Extract everything in root folder, don't create subfolders

* made changes to epubparser.py

* changed json metadata file and added some safeguards for different epub formats

* Correctly read metadata and convert relative paths

* Corrected path for EPUB3

* fixed cover not showing up

* Get missing chapters names

* fixed conflict with export to epub

---------

Co-authored-by: Danisty <danisty.nori@gmail.com>

.editorconfig

@@ -1,3 +0,0 @@
-# Windows files
-[*.bat]
-end_of_line = crlf

.gitattributes

@@ -1,3 +0,0 @@
-# Windows files should use crlf line endings
-# https://help.github.com/articles/dealing-with-line-endings/
-*.bat text eol=crlf

.github/ISSUE_TEMPLATE/report_issue.yml

@@ -45,7 +45,7 @@ body:
       label: LNReader version
       description: You can find your LNReader version in **More → About**.
       placeholder: |
-        Example: "1.1.14"
+        Example: "1.1.18"
     validations:
       required: true
 
@@ -88,7 +88,7 @@ body:
           required: true
         - label: If this is an issue with a source, I should be opening an issue in the [sources repository](https://github.com/lnreader/lnreader-sources/issues/new/choose).
           required: true
-        - label: I have updated the app to version **[1.1.14](https://github.com/lnreader/lnreader/releases/latest)**.
+        - label: I have updated the app to version **[1.1.18](https://github.com/lnreader/lnreader/releases/latest)**.
           required: true
         - label: I will fill out all of the requested information in this form.
           required: true

.github/ISSUE_TEMPLATE/request_feature.yml

@@ -34,7 +34,7 @@ body:
           required: true
         - label: If this is an issue with a source, I should be opening an issue in the [sources repository](https://github.com/LNReader/lnreader-sources/issues/new/choose).
           required: true
-        - label: I have updated the app to version **[1.1.14](https://github.com/LNReader/lnreader/releases/latest)**.
+        - label: I have updated the app to version **[1.1.18](https://github.com/LNReader/lnreader/releases/latest)**.
           required: true
         - label: I will fill out all of the requested information in this form.
           required: true

.github/workflows/build.yml

@@ -8,13 +8,16 @@ jobs:
     name: Build App
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: Clone Repository (Latest)
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
       - name: Install Dependencies
         run: |
-          npm install --legacy-peer-deps
+          npm install
 
       - name: Cache Gradle Wrapper
         uses: actions/cache@v3

.github/workflows/issue_moderator.yml

@@ -13,9 +13,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Moderate issues
-        uses: tachiyomiorg/issue-moderator-action@v1
+        uses: tachiyomiorg/issue-moderator-action@v2
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
+          duplicate-label: Duplicate
+
           auto-close-rules: |
             [
               {
@@ -29,3 +31,4 @@ jobs:
                 "message": "Requested information in the template was not filled out."
               }
             ]
+          auto-close-ignore-label: do-not-autoclose

.github/workflows/lint.yml

@@ -14,6 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Install modules
-        run: npm i --legacy-peer-deps
+        run: npm i
       - name: Run ESLint
         run: npm run lint

.github/workflows/lock.yml

@@ -0,0 +1,19 @@
+name: Lock threads
+
+on:
+  # Daily
+  schedule:
+    - cron: '0 0 * * *'
+  # Manual trigger
+  workflow_dispatch:
+    inputs:
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/lock-threads@v4
+        with:
+          github-token: ${{ github.token }}
+          issue-inactive-days: '2'
+          pr-inactive-days: '2'

.gitignore

@@ -8,6 +8,7 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+.env
 
 # macOS
 .DS_Store
@@ -73,4 +74,7 @@ web-build/
 # @end expo-cli
 
 .vscode/
-src/sources/en/generators/
+src/sources/en/generators/
+
+# jenv
+.java-version

App.js

@@ -12,13 +12,20 @@ import { Provider as PaperProvider } from 'react-native-paper';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/lib/integration/react';
 import * as Notifications from 'expo-notifications';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 import { createDatabase } from '@database/db';
 import { persistor, store } from '@redux/store';
 import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
+import NewUpdateDialog from '@components/NewUpdateDialog';
 
 import Main from './src/navigators/Main';
 
+// Initialize trackers
+import './src/services/Trackers/index';
+import './src/services/Trackers/aniList';
+import './src/services/Trackers/myAnimeList';
+
 Notifications.setNotificationHandler({
   handleNotification: async () => {
     return {
@@ -42,8 +49,11 @@ const App = () => {
           <PersistGate loading={null} persistor={persistor}>
             <SafeAreaProvider>
               <PaperProvider>
-                <StatusBar translucent={true} backgroundColor="transparent" />
-                <Main />
+                <BottomSheetModalProvider>
+                  <NewUpdateDialog />
+                  <StatusBar translucent={true} backgroundColor="transparent" />
+                  <Main />
+                </BottomSheetModalProvider>
               </PaperProvider>
             </SafeAreaProvider>
           </PersistGate>

CONTRIBUTING.md

@@ -19,7 +19,7 @@ git clone https://github.com/<your-account-name>/lnreader.git
 cd lnreader
 
 # install dependencies
-npm install --legacy-peer-deps
+npm install
 
 # build the apk (the built apk will be found in ~/lnreader/android/app/build/outputs/apk/release/)
 npm run buildRelease

android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply plugin: "com.chaquo.python"
 
 import com.android.build.OutputFile
 
@@ -78,12 +79,12 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    enableHermes: true
+    entryFile: "index.js",
+    enableHermes: true,  // clean and rebuild if changing
+    hermesCommand: '../../node_modules/react-native/sdks/hermesc/%OS-BIN%/hermesc',
 ]
 
-apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
 apply from: "../../node_modules/react-native/react.gradle"
-apply from: "../../node_modules/expo-constants/scripts/get-app-config-android.gradle"
 
 /**
  * Set this to true to create two separate APKs instead of one:
@@ -122,34 +123,54 @@ def jscFlavor = 'org.webkit:android-jsc:+'
  */
 def enableHermes = project.ext.react.get("enableHermes", false);
 
+/**
+ * Architectures to build native code for.
+ */
+def reactNativeArchitectures() {
+    def value = project.getProperties().get("reactNativeArchitectures")
+    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
 ext {
     versionMajor = 1
     versionMinor = 1
-    versionPatch = 14
+    versionPatch = 18
 }
 
 android {
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    ndkVersion rootProject.ext.ndkVersion
 
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
+    compileSdkVersion rootProject.ext.compileSdkVersion
 
     defaultConfig {
         applicationId 'com.rajarsheechatterjee.LNReader'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         // Generated version code. Supports versions up to 1024.1024.2048
-        versionCode ((((versionMajor << 10) | versionMinor) << 11) | versionPatch)
+        versionCode((((versionMajor << 10) | versionMinor) << 11) | versionPatch)
         versionName "$versionMajor.$versionMinor.$versionPatch"
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+        ndk {
+            abiFilters "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
+        }
+        python {
+            //buildPython "C:/Users/kijij/AppData/Local/Programs/Python/Python39/python.exe" //don't believe you need this
+            pip {
+                install "-r", "./requirements.txt"
+            }
+        }
+        sourceSets {
+            main {
+                python.srcDirs = ["./src/main/python"]
+            }
+        }
     }
     splits {
         abi {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            include (*reactNativeArchitectures())
         }
     }
     signingConfigs {
@@ -193,11 +214,38 @@ dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
+
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+
     implementation project(':react-native-lottie-splash-screen')
+    implementation project(':react-native-fs')
     implementation 'com.github.bumptech.glide:glide:4.12.0'
-    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
     
+    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled || isWebpEnabled) {
+        implementation 'com.facebook.fresco:fresco:2.0.0'
+        implementation 'com.facebook.fresco:imagepipeline-okhttp3:2.0.0'
+    }
+
+    if(isGifEnabled){
+        // For animated gif support
+        implementation 'com.facebook.fresco:animated-gif:2.0.0'
+    }
+
+    if(isWebpEnabled){
+        // For webp support
+        implementation 'com.facebook.fresco:webpsupport:2.0.0'
+        if(isWebpAnimatedEnabled){
+            // Animated webp support
+           implementation 'com.facebook.fresco:animated-webp:2.0.0'
+        }
+    }
+
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
     }
@@ -208,12 +256,12 @@ dependencies {
     debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.flipper'
     }
-    addUnimodulesDependencies()
 
     if (enableHermes) {
-        def hermesPath = "../../node_modules/hermes-engine/android/";
-        debugImplementation files(hermesPath + "hermes-debug.aar")
-        releaseImplementation files(hermesPath + "hermes-release.aar")
+        //noinspection GradleDynamicVersion
+        implementation("com.facebook.react:hermes-engine:+") { // From node_modules
+            exclude group:'com.facebook.fbjni'
+        }
     } else {
         implementation jscFlavor
     }
@@ -222,8 +270,17 @@ dependencies {
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-    from configurations.compile
+    from configurations.implementation
     into 'libs'
 }
 
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+applyNativeModulesAppBuildGradle(project)
+
+def isNewArchitectureEnabled() {
+    // To opt-in for the New Architecture, you can either:
+    // - Set `newArchEnabled` to true inside the `gradle.properties` file
+    // - Invoke gradle with `-newArchEnabled=true`
+    // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true`
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}

android/app/requirements.txt

@@ -0,0 +1 @@
+lxml==4.6.3

android/app/src/debug/AndroidManifest.xml

@@ -3,5 +3,10 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
-</manifest>
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
+    </application>
+</manifest>

android/app/src/debug/java/com/lnreader/ReactNativeFlipper.java

@@ -19,6 +19,7 @@ import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
 import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
 import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
 import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
+import com.facebook.react.ReactInstanceEventListener;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.modules.network.NetworkingModule;
@@ -48,7 +49,7 @@ public class ReactNativeFlipper {
       ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
       if (reactContext == null) {
         reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceManager.ReactInstanceEventListener() {
+            new ReactInstanceEventListener() {
               @Override
               public void onReactContextInitialized(ReactContext reactContext) {
                 reactInstanceManager.removeReactInstanceEventListener(this);

android/app/src/main/AndroidManifest.xml

@@ -48,9 +48,10 @@
 		<activity
 			android:name=".MainActivity"
 			android:label="@string/app_name"
-			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
 			android:launchMode="singleTask"
 			android:windowSoftInputMode="adjustResize"
+			android:exported="true"
 			android:theme="@style/Theme.App.SplashScreen"
 			android:screenOrientation="unspecified">
 

android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainActivity.java

@@ -1,7 +1,5 @@
 package com.rajarsheechatterjee.LNReader;
 
-import android.content.Intent;
-import android.content.res.Configuration;
 import android.graphics.Color;
 import android.os.Build;
 import android.os.Bundle;
@@ -10,6 +8,7 @@ import android.view.View;
 import android.view.Window;
 import android.view.WindowManager;
 
+import expo.modules.ReactActivityDelegateWrapper;
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
@@ -19,21 +18,9 @@ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 import org.devio.rn.splashscreen.SplashScreen;
 
 public class MainActivity extends ReactActivity {
-
-    // Added automatically by Expo Config
-    @Override
-    public void onConfigurationChanged(Configuration newConfig) {
-        super.onConfigurationChanged(newConfig);
-        Intent intent = new Intent("onConfigurationChanged");
-        intent.putExtra("newConfig", newConfig);
-        sendBroadcast(intent);
-    }
-
+    
     @Override
     protected void onCreate(Bundle savedInstanceState) {
-        // SplashScreen.show(...) has to be called after super.onCreate(...)
-        // Below line is handled by '@expo/configure-splash-screen' command and it's
-        // discouraged to modify it manually
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
             WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
             layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
@@ -43,11 +30,10 @@ public class MainActivity extends ReactActivity {
         Window w = getWindow();
         w.setStatusBarColor(Color.TRANSPARENT);
         w.setNavigationBarColor(Color.TRANSPARENT);
-        w.getDecorView()
-                .setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
+        w.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
+        super.onCreate(null);
         SplashScreen.show(this,R.style.SplashScreenTheme, R.id.lottie);
         SplashScreen.setAnimationFinished(true);
-        super.onCreate(null);
     }
 
     @Override
@@ -60,7 +46,7 @@ public class MainActivity extends ReactActivity {
                 case KeyEvent.KEYCODE_VOLUME_UP:
                     if (action == KeyEvent.ACTION_DOWN) {
                         // volup
-                        VolumeButtonListener.up();
+                        VolumeButtonListener.up(VolumeButtonListener.getScrollAmount());
                         if (!VolumeButtonListener.prevent)
                             return super.dispatchKeyEvent(event);
                     }
@@ -68,7 +54,7 @@ public class MainActivity extends ReactActivity {
                 case KeyEvent.KEYCODE_VOLUME_DOWN:
                     if (action == KeyEvent.ACTION_DOWN) {
                         // voldown
-                        VolumeButtonListener.down();
+                        VolumeButtonListener.down(VolumeButtonListener.getScrollAmount());
                         if (!VolumeButtonListener.prevent)
                             return super.dispatchKeyEvent(event);
                     }
@@ -91,12 +77,29 @@ public class MainActivity extends ReactActivity {
 
     @Override
     protected ReactActivityDelegate createReactActivityDelegate() {
-        return new ReactActivityDelegate(this, getMainComponentName()) {
-            @Override
-            protected ReactRootView createRootView() {
-                return new RNGestureHandlerEnabledRootView(MainActivity.this);
-            }
-        };
+        return new ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,  
+            new MainActivityDelegate(this, getMainComponentName()
+        ));
     }
 
-}
+    public static class MainActivityDelegate extends ReactActivityDelegate {
+        public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
+            super(activity, mainComponentName);
+        }
+
+        @Override
+        protected ReactRootView createRootView() {
+            ReactRootView reactRootView = new ReactRootView(getContext());
+            // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+            reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
+            return reactRootView;
+        }
+
+        @Override
+        protected boolean isConcurrentRootEnabled() {
+            // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
+            // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
+            return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+        }
+    }
+}

android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainApplication.java

@@ -2,6 +2,8 @@ package com.rajarsheechatterjee.LNReader;
 
 import android.app.Application;
 import android.content.Context;
+import android.content.res.Configuration;
+import androidx.annotation.NonNull;
 
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
@@ -9,11 +11,10 @@ import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;
-import com.rajarsheechatterjee.LNReader.generated.BasePackageList;
 import com.rajarsheechatterjee.VolumeButtonListener.VolumeButtonListenerPackage;
-
-import org.unimodules.adapters.react.ModuleRegistryAdapter;
-import org.unimodules.adapters.react.ReactModuleRegistryProvider;
+import com.rajarsheechatterjee.EpubParser.EpubParserPackage;
+import expo.modules.ApplicationLifecycleDispatcher;
+import expo.modules.ReactNativeHostWrapper;
 
 import com.facebook.react.bridge.JSIModulePackage;
 import com.swmansion.reanimated.ReanimatedJSIModulePackage;
@@ -22,40 +23,42 @@ import java.lang.reflect.InvocationTargetException;
 import java.util.List;
 
 import org.devio.rn.splashscreen.SplashScreenReactPackage;
+import com.rnfs.RNFSPackage;
 
 public class MainApplication extends Application implements ReactApplication {
-  private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(
-      new BasePackageList().getPackageList());
 
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-    @Override
-    public boolean getUseDeveloperSupport() {
-      return BuildConfig.DEBUG;
-    }
+  private final ReactNativeHost mReactNativeHost = 
+    new ReactNativeHostWrapper(this, new ReactNativeHost(this) {
+        @Override
+        public boolean getUseDeveloperSupport() {
+          return BuildConfig.DEBUG;
+        }
 
-    @Override
-    protected List<ReactPackage> getPackages() {
-      List<ReactPackage> packages = new PackageList(this).getPackages();
-      packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
-      packages.add(new com.rajarsheechatterjee.LNReader.NavigationBarColorPackage());
-      packages.add(new VolumeButtonListenerPackage());
-      return packages;
-    }
+        @Override
+        protected List<ReactPackage> getPackages() {
+          @SuppressWarnings("UnnecessaryLocalVariable")
+          List<ReactPackage> packages = new PackageList(this).getPackages();
+          packages.add(new com.rajarsheechatterjee.LNReader.NavigationBarColorPackage());
+          packages.add(new VolumeButtonListenerPackage());
+          packages.add(new EpubParserPackage());
+          return packages;
+        }
 
-    @Override
-    protected String getJSMainModuleName() {
-      return "index";
-    }
+        @Override
+        protected String getJSMainModuleName() {
+          return "index";
+        }
 
-    @Override
-    protected JSIModulePackage getJSIModulePackage() {
-      return new ReanimatedJSIModulePackage();
-    }
-  };
+        @Override
+        protected JSIModulePackage getJSIModulePackage() {
+          return new ReanimatedJSIModulePackage();
+        }
+      }
+    );
 
   @Override
   public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
+      return mReactNativeHost;
   }
 
   @Override
@@ -64,6 +67,7 @@ public class MainApplication extends Application implements ReactApplication {
     SoLoader.init(this, /* native exopackage */ false);
 
     initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+    ApplicationLifecycleDispatcher.onApplicationCreate(this);
   }
 
   /**
@@ -75,7 +79,7 @@ public class MainApplication extends Application implements ReactApplication {
    * @param reactInstanceManager
    */
   private static void initializeFlipper(
-      Context context, ReactInstanceManager reactInstanceManager) {
+    Context context, ReactInstanceManager reactInstanceManager) {
     if (BuildConfig.DEBUG) {
       try {
         /*
@@ -97,4 +101,10 @@ public class MainApplication extends Application implements ReactApplication {
       }
     }
   }
-}
+
+  @Override
+  public void onConfigurationChanged(@NonNull Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
+  }
+}

android/app/src/main/java/com/rajarsheechatterjee/LNReader/generated/BasePackageList.java

@@ -1,27 +0,0 @@
-package com.rajarsheechatterjee.LNReader.generated;
-
-import java.util.Arrays;
-import java.util.List;
-import org.unimodules.core.interfaces.Package;
-
-public class BasePackageList {
-  public List<Package> getPackageList() {
-    return Arrays.<Package>asList(
-        new expo.modules.application.ApplicationPackage(),
-        new expo.modules.constants.ConstantsPackage(),
-        new expo.modules.documentpicker.DocumentPickerPackage(),
-        new expo.modules.errorrecovery.ErrorRecoveryPackage(),
-        new expo.modules.filesystem.FileSystemPackage(),
-        new expo.modules.font.FontLoaderPackage(),
-        new expo.modules.haptics.HapticsPackage(),
-        new expo.modules.imageloader.ImageLoaderPackage(),
-        new expo.modules.keepawake.KeepAwakePackage(),
-        new expo.modules.lineargradient.LinearGradientPackage(),
-        new expo.modules.localization.LocalizationPackage(),
-        new expo.modules.notifications.NotificationsPackage(),
-        new expo.modules.permissions.PermissionsPackage(),
-        new expo.modules.sqlite.SQLitePackage(),
-        new expo.modules.webbrowser.WebBrowserPackage()
-    );
-  }
-}

android/app/src/main/java/com/rajarsheechatterjee/VolumeButtonListener/VolumeButtonListener.java

@@ -1,11 +1,11 @@
 package com.rajarsheechatterjee.VolumeButtonListener;
-
 import androidx.annotation.NonNull;
 
 import com.facebook.react.bridge.Arguments;
 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.WritableMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 
@@ -27,9 +27,10 @@ public class VolumeButtonListener extends ReactContextBaseJavaModule {
 
     public static boolean prevent = false;
 
-    public static void sendEvent(boolean up) {
+    public static void sendEvent(boolean up, int amount) {
         if (active) {
             WritableMap args = Arguments.createMap();
+            args.putInt("scrollAmount", amount); // add scroll amount to event data
             if (up)
                 appContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("VolumeUp", args);
             else
@@ -37,12 +38,22 @@ public class VolumeButtonListener extends ReactContextBaseJavaModule {
         }
     }
 
-    public static void down() {
-        sendEvent(false);
+    public static void down(int amount) {
+        sendEvent(false, amount);
     }
 
-    public static void up() {
-        sendEvent(true);
+    public static void up(int amount) {
+        sendEvent(true, amount);
+    }
+
+    private static int scrollAmount = 100;
+
+    public static void setScrollAmount(int amount) {
+        scrollAmount = amount;
+    }
+
+    public static int getScrollAmount() {
+        return scrollAmount;
     }
 
     @ReactMethod
@@ -90,4 +101,14 @@ public class VolumeButtonListener extends ReactContextBaseJavaModule {
     public void removeListeners(Integer count) {
         // Keep: Required for RN built in Event Emitter Calls.
     }
-}
+
+    @ReactMethod
+    public void setVolumeButtonScrollAmount(int amount) {
+        setScrollAmount(amount);
+    }
+
+    @ReactMethod
+    public void getVolumeButtonScrollAmount(Promise promise) {
+        promise.resolve(getScrollAmount());
+    }
+}

android/app/src/main/java/com/rajarsheechatterjee/epubParser/EpubParser.java

@@ -0,0 +1,123 @@
+package com.rajarsheechatterjee.EpubParser;
+
+import com.chaquo.python.PyObject;
+import com.chaquo.python.Python;
+import com.chaquo.python.android.AndroidPlatform;
+
+import android.app.Activity;
+import android.content.Intent;
+import android.content.Context;
+import android.content.ContentResolver;
+
+import android.database.Cursor;
+import android.net.Uri;
+import android.os.Bundle;
+import android.provider.OpenableColumns;
+import android.view.View;
+import android.widget.Button;
+import android.widget.TextView;
+import android.widget.Toast;
+
+import com.facebook.react.bridge.ActivityEventListener;
+import com.facebook.react.bridge.BaseActivityEventListener;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+import java.io.File;
+
+import java.io.FileOutputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
+
+import android.util.Log;
+
+public class EpubParser extends ReactContextBaseJavaModule implements ActivityEventListener{
+    private static final int REQUEST_DIRECTORY=100;  //constant request code dunno if will use it
+    private static String epubPath;
+    private static Promise promise;
+    private final EpubParserActivityEventListener activityEventListener;
+    private static ReactApplicationContext appContext = null;
+
+    public EpubParser(ReactApplicationContext context){
+        super(context);
+        appContext = context;
+        activityEventListener = new EpubParserActivityEventListener(context, this);
+        context.addActivityEventListener(activityEventListener);
+        if (!Python.isStarted()) {
+            // Initialize Python with the Chaquopy SDK
+            Python.start(new AndroidPlatform(context));
+        }
+    }
+    @Override
+    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
+        if (activity != null && requestCode == REQUEST_DIRECTORY && resultCode == Activity.RESULT_OK) {
+            Uri uri = data.getData();
+            String epubPath = getFilePathFromUri(uri);
+
+            Python py = Python.getInstance();
+            PyObject epubParser = py.getModule("epubParser");
+
+            if (epubPath != null && epubPath.toLowerCase().endsWith(".epub")) {
+                PyObject savePath = epubParser.callAttr("parseEpub", epubPath, "/data/data/com.rajarsheechatterjee.LNReader/files/");
+                promise.resolve(savePath.toString());
+            }
+        }
+    }
+
+    @Override
+    public String getName(){
+        return "EpubParser";
+    }
+
+    @ReactMethod
+    public void openDirectory(Promise promise){
+        this.promise = promise;
+        try{
+            Intent intent=new Intent(Intent.ACTION_OPEN_DOCUMENT);
+            intent.addCategory(Intent.CATEGORY_OPENABLE);
+            intent.setType("*/*"); //there's an extra backslash in there
+            final Activity activity = getCurrentActivity();
+            activity.startActivityForResult(intent,REQUEST_DIRECTORY);
+        } catch (Exception e){
+            promise.reject(e);
+        }
+    }
+
+    private String getFilePathFromUri(Uri uri){
+        String filePath=null;
+        if(uri!=null){
+            ContentResolver resolver = getCurrentActivity().getContentResolver();
+            Cursor cursor=resolver.query(uri,null,null,null,null);
+            if(cursor!=null&&cursor.moveToFirst()){
+                int index=cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME);
+                String fileName=cursor.getString(index);
+                cursor.close();
+
+                File file=new File(getReactApplicationContext().getCacheDir(),fileName);
+                filePath=file.getAbsolutePath();
+
+                try{
+                    InputStream inputStream=resolver.openInputStream(uri);
+                    OutputStream outputStream=new FileOutputStream(file);
+                    byte[]buffer=new byte[4096];
+                    int bytesRead;
+                    while((bytesRead=inputStream.read(buffer))!=-1){
+                        outputStream.write(buffer,0,bytesRead);
+                    }
+                    outputStream.close();
+                    inputStream.close();
+                }catch(IOException e){
+                    e.printStackTrace();
+                }
+            }
+        }
+        return filePath;
+    }
+    @Override
+    public void onNewIntent(Intent intent) {
+        // Handle new intents if needed
+    }
+}

android/app/src/main/java/com/rajarsheechatterjee/epubParser/EpubParserActivityEventListener.java

@@ -0,0 +1,25 @@
+package com.rajarsheechatterjee.EpubParser;
+
+
+import android.app.Activity;
+import android.content.Intent;
+import com.facebook.react.bridge.ActivityEventListener;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.BaseActivityEventListener;
+import com.facebook.react.bridge.ReactMethod;
+
+public class EpubParserActivityEventListener extends BaseActivityEventListener {
+    private final ReactApplicationContext reactContext;
+    private final EpubParser epubParser;
+
+    public EpubParserActivityEventListener(ReactApplicationContext reactContext, EpubParser epubParser) {
+        this.reactContext = reactContext;
+        this.epubParser = epubParser;
+    }
+
+    @Override
+    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
+        epubParser.onActivityResult(activity, requestCode, resultCode, data);
+    }
+}

android/app/src/main/java/com/rajarsheechatterjee/epubParser/EpubParserPackage.java

@@ -0,0 +1,26 @@
+package com.rajarsheechatterjee.EpubParser;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class EpubParserPackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<NativeModule>();
+
+        modules.add(new EpubParser(reactContext));
+
+        return modules;
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

android/app/src/main/python/epubParser.py

@@ -0,0 +1,268 @@
+import json
+import os.path
+import os
+import re
+import zipfile
+from lxml import etree
+
+# import shutil
+# from PIL import Image #not necessary only for debugging
+
+'''export interface SourceNovel {
+  url: string; //must be absoulute
+  name: string;
+  cover?: string;
+  genres?: string;
+  summary?: string;
+  author?: string;
+  artist?: string;
+  status?: string;
+  chapters?: ChapterItem[];
+}
+export interface ChapterItem {
+  name: string;
+  url: string; //must be absoulute
+  releaseTime?: string;
+}'''
+
+
+class ChapterItem:
+    def __init__(self, name, url, releaseTime):
+        self.name = name
+        self.url = url
+        self.releaseTime = releaseTime  # perhaps epub creation date?
+
+
+namespaces = {
+    'calibre': 'http://calibre.kovidgoyal.net/2009/metadata',
+    'dc': 'http://purl.org/dc/elements/1.1/',
+    'dcterms': 'http://purl.org/dc/terms/',
+    'opf': 'http://www.idpf.org/2007/opf',
+    'ncx': 'http://www.daisy.org/z3986/2005/ncx/',
+    'u': 'urn:oasis:names:tc:opendocument:xmlns:container',
+    'xsi': 'http://www.w3.org/2001/XMLSchema-instance',
+    'xhtml': 'http://www.w3.org/1999/xhtml'
+}
+
+
+def getContentOPF(epub_path):
+    with zipfile.ZipFile(epub_path) as z:
+        text = z.read('META-INF/container.xml')  # get container xml to get content
+        tree = etree.fromstring(text)
+        rootfile_path = tree.xpath('/u:container/u:rootfiles/u:rootfile',
+                                   namespaces=namespaces)[0].get('full-path')
+        tree = etree.fromstring(z.read(rootfile_path))
+    return tree
+
+
+def cleanTitle(dir_name):
+    # cleans a string so that it is valid for directories
+    pattern = r'[<>:"/\\|?*\x00-\x1F]'
+    # Remove any disallowed characters from the directory name string
+    clean_dir_name = re.sub(pattern, '', dir_name)
+    return clean_dir_name
+
+
+def getContent(epub_path, dest_dir):
+    extensions = ['.html', '.htm', '.xhtml', '.css', '.png', '.jpeg', '.jpg', '.gif', '.ncx',
+                  '.opf']  # still need the content.opf file
+    with zipfile.ZipFile(epub_path) as z:
+        for filename in z.namelist():
+            if (filename.endswith('opf')):
+                contentOPF = filename  # search for opf file
+                break
+
+        tree = etree.XML(z.read(contentOPF))
+        title = tree.find('.//dc:title', namespaces=namespaces).text
+        cleanedTitle = cleanTitle(title)
+        dir = dest_dir + 'convertedEpubs/' + cleanedTitle  # temporary directory for saving
+
+        for fileInfo in z.infolist():
+            if any(fileInfo.filename.endswith(ext) for ext in extensions):
+                z.extract(fileInfo, path=dir)
+
+        return dir
+
+
+def treeFindsAll(queryString, XMLtree):
+    list = XMLtree.findall(queryString, namespaces=namespaces)
+    query = ''
+    if len(list) == 0:
+        query = 'N/A'
+        return query
+    for item in list:
+        query += (item.text + ' ')
+    return query
+
+
+class SourceNovel:
+    def __init__(self, url, name, cover, genres, summary, author, artist, chapters):
+        self.url = url  # file location?
+        self.name = name
+        self.cover = cover
+        self.genres = genres
+        self.summary = summary
+        self.author = author
+        self.artist = artist
+        self.status = 'local'
+        self.chapters = chapters
+
+
+def getChapters(z: zipfile.ZipFile, opf_tree, dir_path):
+    isEPUB2 = False
+    chapters = []
+
+    for filename in z.namelist():
+        if filename.endswith('toc.ncx'):
+            isEPUB2 = True
+            chpts_data_filename = filename
+            break
+
+    if isEPUB2:
+        name_by_path = {}
+        tree = etree.XML(z.read(chpts_data_filename))
+
+        for nav_point in tree.xpath('.//ncx:navPoint', namespaces=namespaces):
+            name = nav_point.find('.//ncx:text', namespaces=namespaces).text
+            path = nav_point.find('.//ncx:content', namespaces=namespaces).attrib['src']
+
+            chapter_path = path[:path.index('#')] if '#' in path else path
+            if chapter_path not in name_by_path:
+                name_by_path[chapter_path] = name
+
+        chapters_elements = opf_tree.xpath('//opf:spine//opf:itemref', namespaces=namespaces)
+        for i, chapter_el in enumerate(chapters_elements):
+            id = chapter_el.get('idref')
+            item = opf_tree.find(f".//opf:manifest/opf:item[@id='{id}']", namespaces=namespaces)
+            path = item.attrib['href']
+            chapter_has_name = path in name_by_path
+            print(chapter_has_name)
+            if chapter_has_name:
+                chapter_name = name_by_path[path]
+                if chapter_name.isnumeric():
+                    chapterName = f'Chapter {chapter_name}'
+                else:
+                    chapterName = chapter_name
+            else:
+                chapterName = id.split('_')[0]
+
+            chapters.append({
+                'name': chapterName,
+                'path': dir_path + '/' + path if len(dir_path) > 0 else path,
+            })
+    else:
+        # EPUB3 uses nav.xhtml instead but I don't have an example rn
+        # For now it will list all files without their corresponding chapter names
+        chapters_elements = opf_tree.xpath('//opf:spine//opf:itemref', namespaces=namespaces)
+        for i, chapter_el in enumerate(chapters_elements):
+            id = chapter_el.get('idref')
+            item = opf_tree.find(f".//opf:manifest/opf:item[@id='{id}']", namespaces=namespaces)
+            path = item.attrib['href']
+
+            chapters.append({
+                'name': f'EPUB3 - Chapter {i + 1}',
+                'path': dir_path + '/' + path if len(dir_path) > 0 else path,
+            })
+
+    return chapters
+
+
+def getMetadata(epub_path, save_path):
+    with zipfile.ZipFile(epub_path) as z:
+        for filename in z.namelist():
+            if (filename.endswith('opf')):
+                contentOPF = filename  # search for opf file
+                break
+        print('content.opf', contentOPF)
+        tree = etree.XML(z.read(contentOPF))
+
+        title = tree.find('.//dc:title', namespaces=namespaces).text
+        # print('title', title)
+
+        cover = getCover(epub_path)
+        # print('cover', cover)
+
+        authors = ''
+        for author in tree.findall('.//dc:creator', namespaces=namespaces):
+            authors += (author.text + ' ')
+        # print('authors', authors)
+
+        genre = treeFindsAll('.//dc:subject', tree)
+        # print('genre', genre)
+
+        summary = treeFindsAll('.//dc:description', tree)
+        # print('summary', summary)
+
+        artist = ''  # this will be included with author as epub files do not need to have an artist role and distinction is probably not necessary
+        chapters = getChapters(z, tree, os.path.dirname(contentOPF))
+        print('chapters', chapters)
+
+        return {
+            'url': save_path,
+            'title': title,
+            'cover': cover,
+            'genre': genre,
+            'summary': summary,
+            'authors': authors.strip(),
+            'artist': artist,
+            'chapters': chapters,
+        }
+
+
+def getCover(epub_path):
+    with zipfile.ZipFile(epub_path) as z:
+        for filename in z.namelist():
+            if (filename.endswith('opf')):
+                contentOPF = filename  # search for opf file
+
+        tree = etree.XML(z.read(contentOPF))
+        coverHREF = None
+
+        try:
+            coverID = tree.xpath("//opf:metadata/opf:meta[@name='cover']", namespaces=namespaces)[0].get('content')
+            # print('coverID 2', coverID)  # now we know where the cover image is located
+            coverHREF = tree.xpath("//opf:manifest/opf:item[@id='" + coverID + "']", namespaces=namespaces)[0].get(
+                'href')
+
+        except IndexError:  # not an EPUB 2.0
+            # print('EPUB 2 failure')
+            pass
+
+        if not coverHREF:  # try EPUB 3.0
+            try:
+                coverHREF = tree.xpath("//opf:manifest/opf:item[@properties='cover-image']", namespaces=namespaces)[
+                    0].get('href')
+            except IndexError:
+                # print('EPUB 3 failure')
+                pass
+        elif not coverHREF:  # some EPUBs don't explicitly declare cover images
+            try:
+                coverID = tree.xpath("//opf:spine/open:itemref[@idref='cover']", namespaces=namespaces)[0].get('idref')
+                temp = tree.xpath("//opf:manifest/opf:item[@id='" + coverID + "']", namespaces=namespaces)[0].get(
+                    'href')
+
+                tree = etree.fromstring(z.read(temp))
+                coverHREF = tree.xpath('//xhtml:img', namespaces=namespaces)[0].get('src')
+            except IndexError:
+                print('Edge case failure')
+        elif not coverHREF:
+            # print('No cover found')
+            return None
+
+        coverPath = coverHREF.replace('\\', '/')
+        # print('coverPath', coverPath)
+
+        return coverPath if os.path.dirname(contentOPF) == 0 else os.path.dirname(contentOPF) + '/' + coverPath
+
+
+def dumpMetaData(metaData, dest_dir):
+    dir = dest_dir + 'convertedEpubs/' + cleanTitle(metaData.get('title')) + '/'
+    with open(dir + 'metadata.json', 'w') as fileout:
+        json.dump(metaData, fileout)
+
+
+def parseEpub(epub_path, dest_dir):
+    save_path = getContent(epub_path, dest_dir)  # simultaneously writes and saves content to a variable
+    metaData = getMetadata(epub_path, save_path)
+    dumpMetaData(metaData, dest_dir)
+    return save_path

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+          http://www.apache.org/licenses/LICENSE-2.0
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
+    <selector>
+        <!-- 
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+</inset>

android/app/src/main/res/values/styles.xml

@@ -5,7 +5,8 @@
 ?>
 <resources>
   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-    <item name="android:textColor">#000000</item>
+    <!-- Customize your theme here. -->
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
@@ -24,4 +25,4 @@
     <!-- <item name="icon">@drawable/no_icon</item> -->
     <item name="android:windowBackground">@drawable/splashscreen</item>
   </style>
-</resources>
+</resources>

android/build.gradle

@@ -1,20 +1,32 @@
+import org.apache.tools.ant.taskdefs.condition.Os
+
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
     ext {
-        buildToolsVersion = "29.0.3"
+        buildToolsVersion = "31.0.0"
         minSdkVersion = 21
-        compileSdkVersion = 30
-        targetSdkVersion = 30
-        ndkVersion = "21.1.6352462"
+        compileSdkVersion = 31
+        targetSdkVersion = 31
+
+        if (System.properties['os.arch'] == "aarch64") {
+            // For M1 Users we need to use the NDK 24 which added support for aarch64
+            ndkVersion = "24.0.8215888"
+        } else {
+            // Otherwise we default to the side-by-side NDK version from AGP.
+            ndkVersion = "21.4.7075529"
+        }
     }
     repositories {
         google()
-        jcenter()
+        mavenCentral()
+        maven { url "https://chaquo.com/maven" }
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:4.1.0")
-
+        classpath("com.android.tools.build:gradle:7.1.2")
+        classpath("com.facebook.react:react-native-gradle-plugin")
+        classpath("de.undercouch:gradle-download-task:5.0.1")
+        classpath ("com.chaquo.python:gradle:14.0.2")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }
@@ -36,18 +48,23 @@ allprojects {
                 }
             }
         }
-        mavenLocal()
+
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url("$rootDir/../node_modules/react-native/android")
+            url(new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), "../android"))
         }
         maven {
             // Android JSC is installed from npm
-            url("$rootDir/../node_modules/jsc-android/dist")
+             url(new File(["node", "--print", "require.resolve('jsc-android/package.json')"].execute(null, rootDir).text.trim(), "../dist"))
+        }
+        mavenCentral {
+            // We don't want to fetch react-native from Maven Central as there are
+            // older versions over there.
+            content {
+                excludeGroup "com.facebook.react"
+            }
         }
-
         google()
-        jcenter()
         maven { url 'https://www.jitpack.io' }
     }
-}
+}

android/gradle.properties

@@ -9,8 +9,10 @@
 
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx10248m -XX:MaxPermSize=256m
-org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
@@ -26,4 +28,22 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.54.0
+FLIPPER_VERSION=0.125.0
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=false
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=false
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=false
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.8-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/gradlew

@@ -1,7 +1,7 @@
-#!/usr/bin/env sh
+#!/bin/sh
 
 #
-# Copyright 2015 the original author or authors.
+# Copyright © 2015-2021 the original authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,78 +17,113 @@
 #
 
 ##############################################################################
-##
-##  Gradle start up script for UN*X
-##
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
 ##############################################################################
 
 # Attempt to set APP_HOME
+
 # Resolve links: $0 may be a link
-PRG="$0"
-# Need this for relative symlinks.
-while [ -h "$PRG" ] ; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-        PRG="$link"
-    else
-        PRG=`dirname "$PRG"`"/$link"
-    fi
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
 done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
-APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
+
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
 APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
+APP_BASE_NAME=${0##*/}
 
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
+MAX_FD=maximum
 
 warn () {
     echo "$*"
-}
+} >&2
 
 die () {
     echo
     echo "$*"
     echo
     exit 1
-}
+} >&2
 
 # OS specific support (must be 'true' or 'false').
 cygwin=false
 msys=false
 darwin=false
 nonstop=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-  NONSTOP* )
-    nonstop=true
-    ;;
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
 esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
+
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
         # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD="$JAVA_HOME/jre/sh/java"
+        JAVACMD=$JAVA_HOME/jre/sh/java
     else
-        JAVACMD="$JAVA_HOME/bin/java"
+        JAVACMD=$JAVA_HOME/bin/java
     fi
     if [ ! -x "$JAVACMD" ] ; then
         die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
@@ -97,7 +132,7 @@ Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
     fi
 else
-    JAVACMD="java"
+    JAVACMD=java
     which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
@@ -105,79 +140,95 @@ location of your Java installation."
 fi
 
 # Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
-    MAX_FD_LIMIT=`ulimit -H -n`
-    if [ $? -eq 0 ] ; then
-        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-            MAX_FD="$MAX_FD_LIMIT"
-        fi
-        ulimit -n $MAX_FD
-        if [ $? -ne 0 ] ; then
-            warn "Could not set maximum file descriptor limit: $MAX_FD"
-        fi
-    else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-    fi
-fi
-
-# For Darwin, add options to specify how the application appears in the dock
-if $darwin; then
-    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-fi
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
-    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-    JAVACMD=`cygpath --unix "$JAVACMD"`
-
-    # We build the pattern for arguments to be converted via cygpath
-    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-    SEP=""
-    for dir in $ROOTDIRSRAW ; do
-        ROOTDIRS="$ROOTDIRS$SEP$dir"
-        SEP="|"
-    done
-    OURCYGPATTERN="(^($ROOTDIRS))"
-    # Add a user-defined pattern to the cygpath arguments
-    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
-        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
-    fi
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    i=0
-    for arg in "$@" ; do
-        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
-        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
-
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
-            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
-        else
-            eval `echo args$i`="\"$arg\""
-        fi
-        i=`expr $i + 1`
-    done
-    case $i in
-        0) set -- ;;
-        1) set -- "$args0" ;;
-        2) set -- "$args0" "$args1" ;;
-        3) set -- "$args0" "$args1" "$args2" ;;
-        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
 fi
 
-# Escape application args
-save () {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
-    echo " "
-}
-APP_ARGS=`save "$@"`
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
 
-# Collect all arguments for the java command, following the shell quoting and substitution rules
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
 
-exec "$JAVACMD" "$@"
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -1,103 +1,89 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      https://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
-
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto init
-
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:init
-@rem Get command-line arguments, handling Windows variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
-
-:end
-@rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -1,12 +1,16 @@
 rootProject.name = 'LNReader'
 
-apply from: '../node_modules/react-native-unimodules/gradle.groovy'
-includeUnimodulesProjects()
-
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
+apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
 applyNativeModulesSettingsGradle(settings)
 
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
+useExpoModules()
+
+include ':app'
+includeBuild('../node_modules/react-native-gradle-plugin')
+
 include ':react-native-lottie-splash-screen'
 project(':react-native-lottie-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-lottie-splash-screen/android')
 
-include ':app'
+include ':react-native-fs'
+project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')

babel.config.js

@@ -21,6 +21,14 @@ module.exports = function (api) {
         },
       ],
       'react-native-reanimated/plugin',
+      [
+        'module:react-native-dotenv',
+        {
+          envName: 'APP_ENV',
+          moduleName: '@env',
+          path: '.env',
+        },
+      ],
     ],
   };
 };

env.d.ts

@@ -0,0 +1,4 @@
+declare module '@env' {
+  export const MYANIMELIST_CLIENT_ID: string;
+  export const ANILIST_CLIENT_ID: string;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lnreader",
-  "version": "1.1.14",
+  "version": "1.1.18",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -16,86 +16,87 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@cd-z/react-native-epub-creator": "^2.0.4",
     "@gorhom/bottom-sheet": "^4.4.5",
-    "@react-native-async-storage/async-storage": "^1.15.11",
+    "@react-native-async-storage/async-storage": "^1.18.1",
     "@react-native-community/clipboard": "^1.5.1",
-    "@react-native-community/masked-view": "^0.1.11",
-    "@react-native-community/slider": "^4.1.12",
+    "@react-native-community/slider": "4.2.3",
     "@react-native-cookies/cookies": "^6.2.1",
-    "@react-native-picker/picker": "^2.4.1",
+    "@react-native-picker/picker": "2.4.9",
     "@react-navigation/drawer": "^6.0.1",
     "@react-navigation/material-bottom-tabs": "^6.0.9",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/stack": "^6.0.11",
-    "@reduxjs/toolkit": "^1.7.2",
-    "@shopify/flash-list": "^1.2.1",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@shopify/flash-list": "1.1.0",
     "cheerio": "^1.0.0-rc.10",
     "color": "^4.2.3",
     "dayjs": "^1.11.4",
-    "expo": "^41.0.1",
-    "expo-document-picker": "^9.2.4",
-    "expo-file-system": "~11.0.2",
-    "expo-haptics": "~10.0.0",
-    "expo-keep-awake": "~9.1.2",
-    "expo-linear-gradient": "~9.1.0",
-    "expo-linking": "~2.2.3",
-    "expo-localization": "~10.1.0",
-    "expo-notifications": "~0.11.6",
-    "expo-sqlite": "~9.1.0",
-    "expo-web-browser": "~9.1.0",
+    "expo": "^46.0.21",
+    "expo-document-picker": "~10.3.0",
+    "expo-file-system": "~14.1.0",
+    "expo-haptics": "~11.3.0",
+    "expo-keep-awake": "~10.2.0",
+    "expo-linear-gradient": "~11.4.0",
+    "expo-linking": "~3.2.4",
+    "expo-localization": "~13.1.0",
+    "expo-notifications": "~0.16.1",
+    "expo-sqlite": "~10.3.0",
+    "expo-web-browser": "~11.0.0",
     "i18n-js": "^3.8.0",
     "lodash-es": "^4.17.21",
-    "lottie-react-native": "^5.1.4",
-    "prop-types": "^15.7.2",
     "qs": "^6.10.3",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "^0.64.3",
+    "react": "18.0.0",
+    "react-fast-compare": "^3.2.1",
+    "react-native": "^0.69.9",
     "react-native-background-actions": "^2.6.5",
     "react-native-device-info": "^8.4.7",
+    "react-native-dotenv": "^3.4.9",
     "react-native-easing-gradient": "^1.0.0",
     "react-native-error-boundary": "^1.1.16",
     "react-native-fast-image": "^8.5.11",
-    "react-native-gesture-handler": "~2.1.3",
+    "react-native-fs": "^2.20.0",
+    "react-native-gesture-handler": "~2.5.0",
     "react-native-lottie-splash-screen": "^1.0.1",
-    "react-native-markdown-display": "^7.0.0-alpha.2",
-    "react-native-mmkv": "^2.4.3",
-    "react-native-pager-view": "^5.4.9",
-    "react-native-paper": "^5.2.0",
-    "react-native-reanimated": "^2.13.0",
-    "react-native-safe-area-context": "^3.2.0",
-    "react-native-screens": "^3.9.0",
+    "react-native-mmkv": "2.5.1",
+    "react-native-pager-view": "^6.2.0",
+    "react-native-paper": "^5.7.2",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-saf-x": "^2.2.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
     "react-native-shimmer-placeholder": "^2.0.9",
     "react-native-tab-view": "^3.1.1",
     "react-native-tts": "^4.1.0",
-    "react-native-unimodules": "^0.13.3",
     "react-native-vector-icons": "^9.0.0",
-    "react-native-webview": "^11.14.3",
+    "react-native-webview": "11.23.0",
+    "react-native-zip-archive": "^6.0.9",
     "react-redux": "^7.2.6",
-    "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
     "rn-fetch-blob": "^0.12.0",
-    "sanitize-html": "^2.7.0"
+    "sanitize-html": "^2.7.0",
+    "text-vide": "^1.7.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
+    "@babel/core": "^7.21.4",
     "@react-native-community/eslint-config": "^3.0.1",
     "@types/color": "^3.0.3",
     "@types/i18n-js": "^3.8.2",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/react-native": "^0.66.15",
+    "@types/react-native": "~0.69.1",
     "@types/react-native-vector-icons": "^6.4.10",
     "@types/react-test-renderer": "^17.0.1",
     "@types/sanitize-html": "^2.6.2",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
     "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react-native": "^3.11.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-react-native": "^4.0.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.3.7",
-    "typescript": "^4.5.5"
+    "prettier": "^2.8.8",
+    "typescript": "^4.6.3"
   },
   "resolutions": {
     "@types/react": "^17"

src/components/BottomSheet/BottomSheet.tsx

@@ -1,49 +1,45 @@
-import React, { ReactElement, Ref, useCallback } from 'react';
-import { overlay } from 'react-native-paper';
-import { default as BS, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import React, { Ref, useCallback } from 'react';
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetModalProps,
+} from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ThemeColors } from '@theme/types';
-import { StyleSheet } from 'react-native';
+import { useTheme } from '@hooks/useTheme';
+import { overlay } from 'react-native-paper';
 
-interface BottomSheetProps {
-  bottomSheetRef: Ref<BS>;
-  snapPoints: Array<number>;
-  height: number;
-  theme: ThemeColors;
-  children: ReactElement;
+interface BottomSheetProps extends Omit<BottomSheetModalProps, 'ref'> {
+  bottomSheetRef: Ref<BottomSheetModal> | null;
 }
 
-const BottomSheet: React.FC<BottomSheetProps> = ({
-  bottomSheetRef,
-  snapPoints,
-  height,
-  theme,
-  children,
-}) => {
+const BottomSheet: React.FC<BottomSheetProps> = props => {
   const { bottom } = useSafeAreaInsets();
+  const theme = useTheme();
+
   const renderBackdrop = useCallback(
-    props => <BottomSheetBackdrop {...props} disappearsOnIndex={0} />,
+    (backdropProps: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...backdropProps}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
     [],
   );
+
   return (
-    <BS
-      index={-1}
+    <BottomSheetModal
+      ref={props.bottomSheetRef}
       backdropComponent={renderBackdrop}
-      snapPoints={[0.1].concat(snapPoints)}
-      enablePanDownToClose={true}
-      ref={bottomSheetRef}
-      handleStyle={styles.handle}
-      containerHeight={height + bottom}
+      handleComponent={null}
       containerStyle={{ paddingBottom: bottom }}
       backgroundStyle={{ backgroundColor: overlay(2, theme.surface) }}
+      {...props}
     >
-      {children}
-    </BS>
+      {props.children}
+    </BottomSheetModal>
   );
 };
-const styles = StyleSheet.create({
-  handle: {
-    display: 'none',
-  },
-});
+
 export default BottomSheet;

src/components/Counter/Counter.tsx

@@ -0,0 +1,114 @@
+import { StyleSheet, Text, TextStyle, View, TextInput } from 'react-native';
+import React, { useEffect } from 'react';
+
+import { useTheme } from '@hooks/useTheme';
+import { IconButtonV2 } from '@components/index';
+interface CounterProps {
+  labelStyle?: TextStyle | TextStyle[];
+  label: string;
+  value: number;
+  displayValue?: number | string;
+  minimumValue: number;
+  maximumValue: number;
+  step?: number;
+  onChange: (value: number) => void;
+}
+
+const Counter: React.FC<CounterProps> = ({
+  labelStyle,
+  label,
+  value,
+  displayValue,
+  minimumValue,
+  maximumValue,
+  step = 1,
+  onChange,
+}) => {
+  const theme = useTheme();
+  const minusDisabled = value <= minimumValue;
+  const plusDisabled = value >= maximumValue;
+  const [text, onChangeText] = React.useState(value.toString());
+
+  useEffect(() => {
+    onChangeText(value.toString());
+  }, [value]);
+
+  const endEditing = () => {
+    let res = isNaN(Number(text)) ? 0 : Number(text);
+    if (minimumValue && res < minimumValue) {
+      res = minimumValue;
+    } else if (maximumValue && res > maximumValue) {
+      res = maximumValue;
+    }
+    onChange(res);
+    onChangeText(res.toString());
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text
+        style={[{ color: theme.onSurfaceVariant }, labelStyle, styles.text]}
+      >
+        {label}
+      </Text>
+      <View style={styles.buttonContainer}>
+        <View style={styles.buttons}>
+          <IconButtonV2
+            name="minus"
+            color={theme.primary}
+            size={26}
+            disabled={minusDisabled}
+            onPress={() => onChange(value - step)}
+            theme={theme}
+          />
+        </View>
+        <TextInput
+          editable={displayValue ? false : true}
+          style={[styles.value, { color: theme.onSurface }]}
+          onEndEditing={endEditing}
+          value={displayValue ? displayValue.toString() : text}
+          onChangeText={onChangeText}
+          keyboardType="numeric"
+        />
+        <View style={styles.buttons}>
+          <IconButtonV2
+            name="plus"
+            color={theme.primary}
+            size={26}
+            disabled={plusDisabled}
+            onPress={() => onChange(value + step)}
+            theme={theme}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default Counter;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    marginVertical: 6,
+  },
+  text: {
+    flex: 6,
+  },
+  value: {
+    textAlign: 'center',
+    flex: 2,
+  },
+  buttons: {
+    flex: 1,
+  },
+  buttonContainer: {
+    position: 'relative',
+    flex: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

src/components/List/List.tsx

@@ -9,6 +9,7 @@ interface ListItemProps {
   title: string;
   description?: string | null;
   icon?: string;
+  right?: string;
   onPress?: () => void;
   theme: ThemeColors;
 }
@@ -35,6 +36,7 @@ const Item: React.FC<ListItemProps> = ({
   icon,
   onPress,
   theme,
+  right,
 }) => (
   <PaperList.Item
     title={title}
@@ -52,6 +54,17 @@ const Item: React.FC<ListItemProps> = ({
           )
         : undefined
     }
+    right={
+      right
+        ? () => (
+            <PaperList.Icon
+              color={theme.primary}
+              icon={right}
+              style={styles.iconCtn}
+            />
+          )
+        : undefined
+    }
     onPress={onPress}
     rippleColor={theme.rippleColor}
     style={styles.listItemCtn}
@@ -68,7 +81,7 @@ const InfoItem = ({
   theme,
 }: {
   title: string;
-  icon: string;
+  icon?: string;
   theme: ThemeColors;
 }) => (
   <View style={styles.infoCtn}>

src/components/ListView.js

@@ -4,6 +4,9 @@ import { StyleSheet, View, Text, Pressable } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import { coverPlaceholderColor } from '../theme/colors';
 
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
+
 import color from 'color';
 
 const ListView = ({
@@ -16,6 +19,7 @@ const ListView = ({
   isSelected,
   onLongPress,
 }) => {
+  const { cookies = '' } = getSourceStorage(item.sourceId);
   return (
     <Pressable
       android_ripple={{ color: theme.rippleColor }}
@@ -31,6 +35,7 @@ const ListView = ({
       <FastImage
         source={{
           uri: item.novelCover,
+          headers: { Cookie: cookies, 'User-Agent': defaultUserAgentString },
         }}
         style={[styles.extensionIcon, inLibraryBadge && { opacity: 0.5 }]}
       />

src/components/NewUpdateDialog.tsx

@@ -1,70 +1,57 @@
-import React, { useState } from 'react';
-import { StyleSheet, View, Text, Dimensions } from 'react-native';
+import React, { useEffect } from 'react';
+import { ScrollView, StyleSheet, View, Text, Dimensions } from 'react-native';
 import { Portal, Modal } from 'react-native-paper';
 import * as Linking from 'expo-linking';
-import { ScrollView } from 'react-native-gesture-handler';
-import Button from './Button/Button';
+
+import { Button } from '@components';
+
+import { useBoolean, useReleaseChecker, useTheme } from '@hooks';
 import { getString } from '@strings/translations';
-import Markdown from 'react-native-markdown-display';
-
-import { useTheme } from '@hooks/useTheme';
-
-interface NewUpdateDialogProps {
-  newVersion: {
-    tag_name: string;
-    body: string;
-    downloadUrl: string;
-  };
-}
-
-const NewUpdateDialog: React.FC<NewUpdateDialogProps> = ({ newVersion }) => {
-  const [newUpdateDialog, showNewUpdateDialog] = useState(true);
 
+const NewUpdateDialog: React.FC = () => {
   const theme = useTheme();
 
+  const newRelease = useReleaseChecker();
+
+  const {
+    value: isVisible,
+    setFalse: hideModal,
+    setValue: setModalVisible,
+  } = useBoolean();
+
+  useEffect(() => {
+    setModalVisible(Boolean(newRelease));
+  }, [newRelease]);
+
   const modalHeight = Dimensions.get('window').height / 2;
 
+  if (!newRelease) {
+    return null;
+  }
+
   return (
     <Portal>
       <Modal
-        visible={newUpdateDialog}
-        onDismiss={() => showNewUpdateDialog(false)}
+        visible={isVisible}
+        onDismiss={hideModal}
         contentContainerStyle={[
           styles.containerStyle,
           { backgroundColor: theme.overlay3 },
         ]}
       >
         <Text style={[styles.modalHeader, { color: theme.onSurface }]}>
-          {`${getString('common.newUpdateAvailable')} ${newVersion.tag_name}`}
+          {`${getString('common.newUpdateAvailable')} ${newRelease?.tagName}`}
         </Text>
         <ScrollView style={{ height: modalHeight }}>
-          <Markdown
-            style={{
-              body: {
-                color: theme.onSurfaceVariant,
-                lineHeight: 20,
-                paddingVertical: 8,
-              },
-              hr: {
-                backgroundColor: theme.outline,
-                marginVertical: 16,
-              },
-              code_inline: {
-                backgroundColor: theme.overlay3,
-              },
-            }}
-          >
-            {newVersion.body}
-          </Markdown>
+          <Text style={{ color: theme.onSurface }}>
+            {newRelease?.changelog}
+          </Text>
         </ScrollView>
         <View style={styles.buttonCtn}>
-          <Button
-            title={getString('common.cancel')}
-            onPress={() => showNewUpdateDialog(false)}
-          />
+          <Button title={getString('common.cancel')} onPress={hideModal} />
           <Button
             title={getString('common.install')}
-            onPress={() => Linking.openURL(newVersion.downloadUrl)}
+            onPress={() => Linking.openURL(newRelease?.downloadUrl)}
           />
         </View>
       </Modal>
@@ -85,7 +72,6 @@ const styles = StyleSheet.create({
     fontSize: 20,
     marginBottom: 16,
   },
-  body: {},
   buttonCtn: {
     flexDirection: 'row',
     marginTop: 16,

src/components/NovelCover.tsx

@@ -6,7 +6,6 @@ import {
   useWindowDimensions,
   Pressable,
 } from 'react-native';
-import color from 'color';
 
 import { LinearGradient } from 'expo-linear-gradient';
 import FastImage from 'react-native-fast-image';
@@ -16,8 +15,25 @@ import { useDeviceOrientation } from '@hooks/useDeviceOrientation';
 import { coverPlaceholderColor } from '../theme/colors';
 import { useLibrarySettings } from '@hooks/useSettings';
 import { DisplayModes } from '@screens/library/constants/constants';
+import { LibraryNovelInfo } from '@database/types';
+import { SourceNovelItem } from 'src/sources/types';
+import { ThemeColors } from '@theme/types';
+import SourceScreenSkeletonLoading from '@screens/browse/loadingAnimation/SourceScreenSkeletonLoading';
 
-const NovelCover = ({
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
+
+interface NovelCoverProps {
+  item: LibraryNovelInfo;
+  onPress: () => void;
+  libraryStatus?: boolean;
+  theme: ThemeColors;
+  isSelected?: boolean;
+  onLongPress: (novelId: number) => void;
+  selectedNovels?: Array<SourceNovelItem>;
+}
+
+const NovelCover: React.FC<NovelCoverProps> = ({
   item,
   onPress,
   libraryStatus,
@@ -44,6 +60,7 @@ const NovelCover = ({
 
   const coverHeight = useMemo(
     () => (window.width / numColumns) * (4 / 3),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [numColumns],
   );
 
@@ -51,15 +68,17 @@ const NovelCover = ({
 
   const uri = item.novelCover;
 
-  return displayMode !== DisplayModes.List ? (
+  const { cookies = '' } = getSourceStorage(item.sourceId);
+
+  return item.sourceId < 0 ? (
+    <SourceScreenSkeletonLoading theme={theme} completeRow={item.sourceId} />
+  ) : displayMode !== DisplayModes.List ? (
     <View
       style={[
         {
           flex: 1 / numColumns,
-          borderRadius: 6,
-          overflow: 'hidden',
-          margin: 2,
         },
+        styles.standardNovelCover,
         isSelected && {
           backgroundColor: theme.primary,
           opacity: 0.8,
@@ -94,14 +113,17 @@ const NovelCover = ({
           )}
         </View>
         <FastImage
-          source={{ uri }}
+          source={{
+            uri,
+            headers: { Cookie: cookies, 'User-Agent': defaultUserAgentString },
+          }}
           style={[
             {
               height: coverHeight,
-              borderRadius: 4,
               backgroundColor: coverPlaceholderColor,
             },
-            libraryStatus && { opacity: 0.5 },
+            styles.standardBorderRadius,
+            libraryStatus && styles.opacityPoint5,
           ]}
         />
         <View style={styles.compactTitleContainer}>
@@ -152,14 +174,17 @@ const NovelCover = ({
 
 export default memo(NovelCover);
 
-const ComfortableTitle = ({ theme, novelName }) => (
+const ComfortableTitle: React.FC<{ theme: ThemeColors; novelName: string }> = ({
+  theme,
+  novelName,
+}) => (
   <Text
     numberOfLines={2}
     style={[
       styles.title,
+      styles.padding4,
       {
         color: theme.onSurface,
-        padding: 4,
       },
     ]}
   >
@@ -167,46 +192,47 @@ const ComfortableTitle = ({ theme, novelName }) => (
   </Text>
 );
 
-const CompactTitle = ({ novelName }) => (
+const CompactTitle: React.FC<{ novelName: string }> = ({ novelName }) => (
   <View style={styles.titleContainer}>
     <LinearGradient
       colors={['transparent', 'rgba(0,0,0,0.7)']}
       style={styles.linearGradient}
     >
-      <Text
-        numberOfLines={2}
-        style={[
-          styles.title,
-          {
-            color: 'rgba(255,255,255,1)',
-            textShadowColor: 'rgba(0, 0, 0, 0.75)',
-            textShadowOffset: { width: -1, height: 1 },
-            textShadowRadius: 10,
-          },
-        ]}
-      >
+      <Text numberOfLines={2} style={[styles.title, styles.compactTitle]}>
         {novelName}
       </Text>
     </LinearGradient>
   </View>
 );
 
-const InLibraryBadge = ({ theme }) => (
+const InLibraryBadge: React.FC<{ theme: ThemeColors }> = ({ theme }) => (
   <Text
     style={[
       styles.inLibraryBadge,
       {
         backgroundColor: theme.primary,
         color: theme.onPrimary,
-        borderRadius: 4,
       },
+      styles.standardBorderRadius,
     ]}
   >
     In library
   </Text>
 );
 
-const UnreadBadge = ({
+interface BadgeProps {
+  chaptersDownloaded: number;
+  chaptersUnread: number;
+  theme: ThemeColors;
+}
+interface UnreadBadgeProps extends BadgeProps {
+  showDownloadBadges: boolean;
+}
+interface DownloadBadgeProps extends BadgeProps {
+  showUnreadBadges: boolean;
+}
+
+const UnreadBadge: React.FC<UnreadBadgeProps> = ({
   chaptersDownloaded,
   chaptersUnread,
   showDownloadBadges,
@@ -215,13 +241,8 @@ const UnreadBadge = ({
   <Text
     style={[
       styles.unreadBadge,
-      !chaptersDownloaded && {
-        borderTopLeftRadius: 4,
-        borderBottomLeftRadius: 4,
-      },
-      !showDownloadBadges && {
-        borderRadius: 4,
-      },
+      !chaptersDownloaded && styles.LeftBorderRadius,
+      !showDownloadBadges && styles.standardBorderRadius,
       {
         backgroundColor: theme.primary,
         color: theme.onPrimary,
@@ -232,7 +253,7 @@ const UnreadBadge = ({
   </Text>
 );
 
-const DownloadBadge = ({
+const DownloadBadge: React.FC<DownloadBadgeProps> = ({
   chaptersDownloaded,
   showUnreadBadges,
   chaptersUnread,
@@ -241,13 +262,8 @@ const DownloadBadge = ({
   <Text
     style={[
       styles.downloadBadge,
-      !chaptersUnread && {
-        borderTopRightRadius: 4,
-        borderBottomRightRadius: 4,
-      },
-      !showUnreadBadges && {
-        borderRadius: 4,
-      },
+      !chaptersUnread && styles.RightBorderRadius,
+      !showUnreadBadges && styles.standardBorderRadius,
       {
         backgroundColor: theme.tertiary,
         color: theme.onTertiary,
@@ -259,6 +275,19 @@ const DownloadBadge = ({
 );
 
 const styles = StyleSheet.create({
+  LeftBorderRadius: {
+    borderTopLeftRadius: 4,
+    borderBottomLeftRadius: 4,
+  },
+  RightBorderRadius: {
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
+  },
+  standardBorderRadius: {
+    borderRadius: 4,
+  },
+  opacityPoint5: { opacity: 0.5 },
+  padding4: { padding: 4 },
   titleContainer: {
     flex: 1,
     borderRadius: 4,
@@ -322,4 +351,15 @@ const styles = StyleSheet.create({
     left: 10,
     flexDirection: 'row',
   },
+  standardNovelCover: {
+    borderRadius: 6,
+    overflow: 'hidden',
+    margin: 2,
+  },
+  compactTitle: {
+    color: 'rgba(255,255,255,1)',
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: { width: -1, height: 1 },
+    textShadowRadius: 10,
+  },
 });

src/components/NovelList.tsx

@@ -15,9 +15,13 @@ export type NovelListRenderItem = ListRenderItem<
   LibraryNovelInfo | NovelInfo | SourceNovelItem
 >;
 
-const NovelList: React.FC<
-  FlatListProps<LibraryNovelInfo | NovelInfo | SourceNovelItem>
-> = props => {
+interface NovelListProps
+  extends FlatListProps<LibraryNovelInfo | NovelInfo | SourceNovelItem> {
+  isFetchingNextPage?: boolean;
+  inSource?: boolean;
+}
+
+const NovelList: React.FC<NovelListProps> = props => {
   const { displayMode = DisplayModes.Comfortable, novelsPerRow = 3 } =
     useLibrarySettings();
 
@@ -37,7 +41,20 @@ const NovelList: React.FC<
     }
   }, [isListView, orientation, novelsPerRow]);
 
-  const keyExtractor = useCallback(item => item.sourceId + item.novelUrl, []);
+  const keyExtractor = useCallback(
+    (item: SourceNovelItem) => item.sourceId + item.novelUrl,
+    [],
+  );
+  var extendedNovelList: Array<SourceNovelItem | LibraryNovelInfo> =
+    props?.data as Array<LibraryNovelInfo>;
+  if (props.data?.length && props.inSource && props.isFetchingNextPage) {
+    let remainder = numColumns - (props.data?.length % numColumns);
+    let extension = [];
+    if (remainder !== 0 && remainder !== numColumns) {
+      extension.push({ sourceId: -remainder, novelName: '', novelUrl: '' });
+    }
+    extendedNovelList = [...props.data, ...extension];
+  }
 
   return (
     <FlatList
@@ -49,6 +66,7 @@ const NovelList: React.FC<
       key={numColumns}
       keyExtractor={keyExtractor}
       {...props}
+      data={extendedNovelList}
     />
   );
 };

src/components/Switch/Switch.tsx

@@ -20,31 +20,6 @@ const SwitchSetting: React.FC<SwitchProps> = ({
   icon,
   value,
 }) => {
-  const styles = StyleSheet.create({
-    container: {
-      paddingHorizontal: 16,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingVertical: description ? 16 : 12,
-    },
-    row: {
-      flexDirection: 'row',
-      flex: 1,
-    },
-    icon: {
-      margin: 0,
-    },
-    textContainer: {
-      marginLeft: icon && 16,
-    },
-    text: {
-      fontSize: 16,
-      flex: 1,
-      textAlignVertical: 'center',
-    },
-    switch: { marginLeft: 8 },
-  });
-
   return (
     <Pressable
       android_ripple={{
@@ -57,7 +32,7 @@ const SwitchSetting: React.FC<SwitchProps> = ({
         {icon && (
           <List.Icon color={theme.primary} icon={icon} style={styles.icon} />
         )}
-        <View style={styles.textContainer}>
+        <View>
           <Text style={[styles.text, { color: theme.onSurface }]}>{label}</Text>
           {description && (
             <Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
@@ -75,3 +50,27 @@ const SwitchSetting: React.FC<SwitchProps> = ({
 };
 
 export default SwitchSetting;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    flex: 1,
+  },
+  icon: {
+    margin: 0,
+    marginRight: 16,
+  },
+  text: {
+    fontSize: 16,
+    textAlignVertical: 'center',
+  },
+  switch: {
+    marginLeft: 8,
+  },
+});

src/components/index.ts

@@ -13,3 +13,4 @@ export { default as ColorPreferenceItem } from './ColorPreferenceItem/ColorPrefe
 export { default as LoadingMoreIndicator } from './LoadingMoreIndicator/LoadingMoreIndicator';
 export { Checkbox } from './Checkbox/Checkbox';
 export { RadioButton } from './RadioButton/RadioButton';
+export { default as ConfirmationDialog } from './ConfirmationDialog/ConfirmationDialog';

src/database/queries/NovelQueries.js

@@ -53,19 +53,6 @@ export const followNovel = async (followed, novelId) => {
   });
 };
 
-export const unfollowNovel = async novelId => {
-  db.transaction(tx => {
-    tx.executeSql(
-      'UPDATE novels SET followed = 0 WHERE novelId = ?',
-      [novelId],
-      (txo, res) => {},
-      (txObj, error) => {
-        // console.log('Error ', error)
-      },
-    );
-  });
-};
-
 const checkNovelInCacheQuery = 'SELECT * FROM novels WHERE novelUrl=? LIMIT 1';
 
 export const checkNovelInCache = novelUrl => {
@@ -145,9 +132,9 @@ export const restoreLibrary = async novel => {
 
           if (chapters.length) {
             await insertChapters(insertId, chapters);
-
-            resolve();
           }
+
+          resolve();
         },
         (txObj, error) => {
           resolve();

src/hooks/githubUpdateChecker.js

@@ -1,51 +0,0 @@
-import { useState, useEffect } from 'react';
-import { appVersion } from '../utils/versionUtils';
-
-export const useGithubUpdateChecker = () => {
-  const latestReleaseUrl =
-    'https://api.github.com/repos/rajarsheechatterjee/lnreader/releases/latest';
-
-  const [checking, setChecking] = useState(true);
-  const [latestRelease, setLatestRelease] = useState();
-
-  const checkForRelease = async () => {
-    let res = await fetch(latestReleaseUrl);
-    res = await res.json();
-
-    const release = {
-      tag_name: res.tag_name,
-      body: res.body,
-      downloadUrl: res.assets[0].browser_download_url,
-    };
-
-    setLatestRelease(release);
-    setChecking(false);
-  };
-
-  const isNewVersion = versionTag => {
-    let currentVersion = `${appVersion}`;
-    const regex = /[^\\d.]/;
-
-    let newVersion = versionTag.replace(regex, '');
-    currentVersion = currentVersion;
-
-    return newVersion !== currentVersion;
-  };
-
-  useEffect(() => {
-    checkForRelease();
-    // .catch(e => {
-    //   showToast(`Could not connect to github:\n${`${e}`.split(':')[1].trim()}`);
-    //   // console.error(e);
-    // });
-  }, []);
-
-  if (!checking) {
-    const data = {
-      latestRelease,
-      isNewVersion: isNewVersion(latestRelease.tag_name),
-    };
-
-    return data;
-  }
-};

src/hooks/index.ts

@@ -10,3 +10,4 @@ export { useTheme } from './useTheme';
 export { default as useCategories } from './useCategories';
 export { useCategorySettings, useLibrarySettings } from './useSettings';
 export { usePreviousRouteName } from './usePreviousRouteName';
+export { useReleaseChecker } from './useReleaseChecker';

src/hooks/reduxHooks.js

@@ -12,12 +12,6 @@ const useNovel = () => {
   return novel;
 };
 
-const useChapter = () => {
-  const chapter = useSelector(state => state.chapterReducer);
-
-  return chapter;
-};
-
 const useFindNovel = novelId => {
   let novel = useSelector(state => state.preferenceReducer.novelSettings);
   novel = novel[novelId];
@@ -85,19 +79,11 @@ const usePosition = (novelId, chapterId) => {
   return position;
 };
 
-const useTrackingStatus = () => {
-  const tracker = useSelector(state => state.trackerReducer);
-
-  return tracker;
-};
-
 export {
   useSettings,
   usePreferences,
   useContinueReading,
-  useTrackingStatus,
   useNovel,
-  useChapter,
   useSavedSettings,
   usePosition,
 };

src/hooks/useBoolean.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useState } from 'react';
 
-interface ReturnType {
+export interface BooleanHookType {
   value: boolean;
   setValue: Dispatch<SetStateAction<boolean>>;
   setTrue: () => void;
@@ -8,7 +8,7 @@ interface ReturnType {
   toggle: () => void;
 }
 
-const useBoolean = (defaultValue?: boolean): ReturnType => {
+const useBoolean = (defaultValue?: boolean): BooleanHookType => {
   const [value, setValue] = useState(!!defaultValue);
 
   const setTrue = useCallback(() => setValue(true), []);

src/hooks/useReleaseChecker.ts

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import { useMMKVNumber } from 'react-native-mmkv';
+
+import { appVersion } from '../utils/versionUtils';
+import { showToast } from './showToast';
+
+const LATEST_RELEASE_URL =
+  'https://api.github.com/repos/LNReader/lnreader/releases/latest';
+
+export interface NewRelease {
+  tagName: string;
+  changelog: string;
+  downloadUrl: string;
+}
+
+const isNewVersion = (versionTag: string) => {
+  const regex = /[^\\d.]/;
+
+  const currentVersion = appVersion;
+  const newVersion = versionTag.replace(regex, '');
+
+  const newSemVer = newVersion.split('.');
+  const oldSemVer = currentVersion.split('.');
+
+  return oldSemVer?.some((version, index) => {
+    if (newSemVer[index] > version) {
+      return true;
+    }
+  });
+};
+
+export const useReleaseChecker = () => {
+  const [lastChecked, setLastChecked] = useMMKVNumber('last_app_update_check');
+  const [newRelease, setNewRelease] = useState<NewRelease>();
+
+  const getNewRelease = async () => {
+    try {
+      if (lastChecked && dayjs(lastChecked).diff(undefined, 'hours') < 24) {
+        return;
+      }
+
+      const newReleaseRes = await fetch(LATEST_RELEASE_URL);
+      const newReleaseJSON = await newReleaseRes.json();
+
+      if (isNewVersion(newReleaseJSON.tag_name)) {
+        setNewRelease({
+          changelog: newReleaseJSON.body,
+          downloadUrl: newReleaseJSON.assets[0].browser_download_url,
+          tagName: newReleaseJSON.tag_name,
+        });
+      }
+
+      setLastChecked(+Date.now());
+    } catch (error: any) {
+      showToast(error.message);
+    }
+  };
+
+  useEffect(() => {
+    getNewRelease();
+  }, []);
+
+  return newRelease;
+};

src/hooks/useSearch.ts

@@ -1,15 +1,20 @@
 import { useIsFocused } from '@react-navigation/native';
 import { useCallback, useEffect, useState } from 'react';
 
-const useSearch = (defaultSearchText?: string) => {
+interface UseSearchOptions {
+  clearSearchTextOnUnfocus: boolean;
+}
+
+const useSearch = (defaultSearchText?: string, options?: UseSearchOptions) => {
   const isFocused = useIsFocused();
+  const clearSearchTextOnUnfocus = options?.clearSearchTextOnUnfocus ?? true;
 
   const [searchText, setSearchText] = useState<string>(defaultSearchText || '');
 
   const clearSearchbar = useCallback(() => setSearchText(''), []);
 
   useEffect(() => {
-    if (!isFocused) {
+    if (!isFocused && clearSearchTextOnUnfocus) {
       clearSearchbar();
     }
   }, [isFocused, clearSearchbar]);

src/hooks/useSourceStorage.ts

@@ -1,3 +1,4 @@
+import CookieManager from '@react-native-cookies/cookies';
 import { useMMKVObject } from 'react-native-mmkv';
 import { MMKVStorage } from '@utils/mmkv/mmkv';
 import { showToast } from './showToast';
@@ -38,7 +39,8 @@ const useSourceStorage = ({ sourceId = -1 }: { sourceId?: number }) => {
     //     }),
     //   );
     // }
-
+    CookieManager.clearAll();
+    CookieManager.clearAll(true); //clears cookies in webkit
     setValues({});
     showToast('Cookies cleared');
   };

src/native/epubParser.ts

@@ -0,0 +1,21 @@
+import { getNovel } from '@database/queries/NovelQueries';
+import { insertNovelInLibrary } from '@database/queries/NovelQueriesV2';
+import { NativeModules } from 'react-native';
+
+const { EpubParser } = NativeModules;
+const epubSourceId = 0;
+
+interface EpubParserInterface {
+  openDirectory(): Promise<string>;
+}
+
+export async function openDirectory() {
+  const ParserInterface = EpubParser as EpubParserInterface;
+  const epubPath = await ParserInterface.openDirectory();
+
+  let dbNovel = await getNovel(epubSourceId, epubPath);
+  if (dbNovel === undefined || dbNovel.followed === 0) {
+    // Insert novel if it doesn't exist in the database
+    await insertNovelInLibrary(epubSourceId, epubPath, false, 1);
+  }
+}

src/navigators/BottomNavigator.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Color from 'color';
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
 
 import Library from '../screens/library/LibraryScreen';

src/navigators/Main.js

@@ -5,7 +5,6 @@ import { createStackNavigator } from '@react-navigation/stack';
 
 import { setBarColor } from '../theme/utils/setBarColor';
 import { useTheme } from '../hooks/useTheme';
-import { useGithubUpdateChecker } from '../hooks/githubUpdateChecker';
 
 /**
  * Navigators
@@ -25,7 +24,7 @@ import SourceNovels from '../screens/browse/SourceNovels';
 import MigrateNovel from '../screens/browse/migration/MigrationNovels';
 
 import MalTopNovels from '../screens/browse/discover/MalTopNovels';
-import NewUpdateDialog from '../components/NewUpdateDialog';
+import AniListTopNovels from '../screens/browse/discover/AniListTopNovels';
 import BrowseSettings from '../screens/browse/BrowseSettings';
 import { useAppDispatch } from '@redux/hooks';
 import { updateLibraryAction } from '@redux/updates/updates.actions';
@@ -55,11 +54,8 @@ const MainNavigator = () => {
     }
   }, []);
 
-  const { isNewVersion, latestRelease } = useGithubUpdateChecker() || {};
-
   return (
     <NavigationContainer theme={{ colors: theme }}>
-      {isNewVersion && <NewUpdateDialog newVersion={latestRelease} />}
       <Stack.Navigator screenOptions={{ headerShown: false }}>
         <Stack.Screen name="BottomNavigator" component={BottomNavigator} />
         <Stack.Screen name="Novel" component={Novel} />
@@ -67,6 +63,7 @@ const MainNavigator = () => {
         <Stack.Screen name="MoreStack" component={MoreStack} />
         <Stack.Screen name="SourceScreen" component={BrowseSourceScreen} />
         <Stack.Screen name="BrowseMal" component={MalTopNovels} />
+        <Stack.Screen name="BrowseAL" component={AniListTopNovels} />
         <Stack.Screen name="BrowseSettings" component={BrowseSettings} />
         <Stack.Screen
           name="GlobalSearchScreen"

src/redux/hooks/index.ts

@@ -25,3 +25,6 @@ export const useDownloadQueue = () =>
 
 export const useSourcesReducer = () =>
   useAppSelector((state: RootState) => state.sourceReducerV2);
+
+export const useTrackerReducer = () =>
+  useAppSelector(state => state.trackerReducer);

src/redux/migrate.ts

@@ -0,0 +1,41 @@
+import { createMigrate } from 'redux-persist';
+import { malToNormalized } from '../services/Trackers/myAnimeList';
+
+export default createMigrate({
+  // Migrates old tracker data to new format
+  0: migrateTrackerDataToNormalized,
+});
+
+function migrateTrackerDataToNormalized(state: any): any {
+  // Migrate `tracker`
+  let tracker = state.tracker;
+  if (tracker) {
+    tracker = {
+      name: tracker.name,
+      auth: {
+        accessToken: tracker.access_token,
+        refreshToken: tracker.refresh_token,
+        expiresAt: tracker.expires_in,
+        meta: undefined,
+      },
+    };
+  }
+  state.tracker = tracker;
+
+  // Migrate `trackedNovels`
+  const trackedNovels = state.trackedNovels.map((oldNovel: any) => {
+    return {
+      novelId: oldNovel.novelId,
+      id: oldNovel.id,
+      totalChapters: oldNovel.num_chapters,
+      userData: {
+        progress: oldNovel.my_list_status.num_chapters_read,
+        score: oldNovel.my_list_status.score,
+        status: malToNormalized[oldNovel.my_list_status.status],
+      },
+    };
+  });
+  state.trackedNovels = trackedNovels;
+
+  return state;
+}

src/redux/novel/novel.reducer.js

@@ -2,6 +2,7 @@ import {
   CHAPTER_DOWNLOADING,
   CHAPTER_DOWNLOADED,
   CHAPTER_DELETED,
+  ALL_CHAPTER_DELETED,
   GET_CHAPTERS,
   LOADING_NOVEL,
   GET_NOVEL,
@@ -117,7 +118,7 @@ const novelReducer = (state = initialState, action) => {
             : chapter,
         ),
       };
-    case CHAPTER_DELETED:
+    case ALL_CHAPTER_DELETED:
       return {
         ...state,
         chapters: state.chapters.map(chapter => ({

src/redux/settings/settings.actions.js

@@ -1,4 +1,8 @@
-import { SET_READER_SETTINGS, SET_APP_SETTINGS } from './settings.types';
+import {
+  SET_READER_SETTINGS,
+  SET_APP_SETTINGS,
+  SET_MULTIPLE_APP_SETTINGS,
+} from './settings.types';
 
 export const setAppSettings = (key, val) => dispatch => {
   dispatch({
@@ -13,3 +17,10 @@ export const setReaderSettings = (key, val) => dispatch => {
     payload: { key, val },
   });
 };
+
+export const setMultipleAppSettings = newSettings => dispatch => {
+  dispatch({
+    type: SET_MULTIPLE_APP_SETTINGS,
+    payload: newSettings,
+  });
+};

src/redux/settings/settings.reducer.js

@@ -1,4 +1,9 @@
-import { SET_READER_SETTINGS, SET_APP_SETTINGS } from './settings.types';
+import { Dimensions } from 'react-native';
+import {
+  SET_READER_SETTINGS,
+  SET_APP_SETTINGS,
+  SET_MULTIPLE_APP_SETTINGS,
+} from './settings.types';
 
 /**
  * Display Mode
@@ -64,12 +69,15 @@ export const initialState = {
   swipeGestures: false,
   showScrollPercentage: true,
   useVolumeButtons: false,
+  scrollAmount: Math.round(Dimensions.get('window').height),
   showBatteryAndTime: false,
   autoScroll: false,
   autoScrollInterval: 10,
   autoScrollOffset: null,
   verticalSeekbar: true,
   removeExtraParagraphSpacing: false,
+  addChapterNameInReader: false,
+  bionicReading: false,
 
   reader: {
     theme: '#292832',
@@ -101,6 +109,11 @@ const settingsReducer = (state = initialState, action) => {
           [payload.key]: payload.val,
         },
       };
+    case SET_MULTIPLE_APP_SETTINGS:
+      return {
+        ...state,
+        ...payload,
+      };
     default:
       return state;
   }

src/redux/settings/settings.types.js

@@ -1,2 +1,3 @@
 export const SET_APP_SETTINGS = 'SET_APP_SETTINGS';
 export const SET_READER_SETTINGS = 'SET_READER_SETTINGS';
+export const SET_MULTIPLE_APP_SETTINGS = 'SET_MULTIPLE_APP_SETTINGS';

src/redux/settings/settingsSlice.ts

@@ -22,6 +22,7 @@ interface SettingsState {
   browse: {
     onlyShowPinnedSources: boolean;
     showMyAnimeList: boolean;
+    showAniList: boolean;
     searchAllSources: boolean;
   };
 }
@@ -37,6 +38,7 @@ const initialState: SettingsState = {
   browse: {
     onlyShowPinnedSources: false,
     showMyAnimeList: true,
+    showAniList: true,
     searchAllSources: false,
   },
 };

src/redux/settings/types/index.ts

@@ -2,4 +2,5 @@ export interface BrowseSettingsMap {
   onlyShowPinnedSources: 'string';
   searchAllSources: 'string';
   showMyAnimeList: 'string';
+  showAniList: 'string';
 }

src/redux/store.ts

@@ -2,6 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { persistStore, persistReducer } from 'redux-persist';
 
+import migrate from './migrate';
 import settingsReducer from './settings/settings.reducer';
 import settingsReducerV2 from './settings/settingsSlice';
 import sourceReducerV2 from './source/sourcesSlice';
@@ -14,7 +15,9 @@ import downloadsReducer from './downloads/downloads.reducer';
 const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
+  version: 0,
   blacklist: ['novelReducer'],
+  migrate,
 };
 
 const reducers = combineReducers({

src/redux/tracker/tracker.actions.js

@@ -1,4 +1,3 @@
-import { findListItem, updateItem } from '../../services/Trackers/myAnimeList';
 import {
   REMOVE_TRACKER,
   SET_TRACKER,
@@ -8,12 +7,12 @@ import {
   UPDATE_CHAPTERS_READ,
 } from './tracker.types';
 
-import { updateMalChaptersRead } from '../../services/Trackers/myAnimeList';
+import { getTracker } from '../../services/Trackers';
 
-export const setTracker = res => async dispatch => {
+export const setTracker = (tracker, res) => async dispatch => {
   dispatch({
     type: SET_TRACKER,
-    payload: res,
+    payload: { name: tracker, ...res },
   });
 };
 
@@ -21,36 +20,47 @@ export const removeTracker = () => async dispatch => {
   dispatch({ type: REMOVE_TRACKER });
 };
 
-export const trackNovel = (trackObj, accessToken) => async dispatch => {
-  let res = await findListItem(trackObj.id, accessToken);
-  trackObj.num_chapters = res.num_chapters;
-  trackObj.my_list_status = {
-    num_chapters_read: res.my_list_status.num_chapters_read,
-    score: res.my_list_status.score,
-    status: res.my_list_status.status,
+/**
+ * @param {string} trackerName
+ * @param {number} internalId
+ * @param {Omit<import('../../services/Trackers').SearchResult, "coverImage" | "title">} novel
+ * @param {import('../../services/Trackers').AuthenticationResult} authentication
+ */
+export const trackNovel =
+  (trackerName, internalId, novel, auth) => async dispatch => {
+    const tracker = getTracker(trackerName);
+    const userData = await tracker.getUserListEntry(novel.id, auth);
+    dispatch({
+      type: TRACK_NOVEL,
+      payload: { novelId: internalId, ...novel, userData },
+    });
   };
 
-  dispatch({ type: TRACK_NOVEL, payload: trackObj });
-};
-
-export const updateTracker = (malId, accessToken, body) => async dispatch => {
-  let res = await updateItem(malId, accessToken, body);
-
-  dispatch({ type: UPDATE_TRACKER, payload: { malId, ...res } });
-};
+export const updateTracker =
+  (trackerName, trackerId, auth, body) => async dispatch => {
+    const tracker = getTracker(trackerName);
+    const res = await tracker.updateUserListEntry(trackerId, body, auth);
+    dispatch({
+      type: UPDATE_TRACKER,
+      payload: { trackerId, ...res },
+    });
+  };
 
 export const untrackNovel = id => async dispatch => {
   dispatch({ type: UNTRACK_NOVEL, payload: id });
 };
 
 export const updateChaptersRead =
-  (malId, accessToken, chaptersRead) => async dispatch => {
-    let res = await updateMalChaptersRead(malId, accessToken, {
-      num_chapters_read: chaptersRead,
-    });
+  (trackerName, trackerId, auth, chaptersRead) => async dispatch => {
+    const tracker = getTracker(trackerName);
+    const res = await tracker.updateUserListEntry(
+      trackerId,
+      { progress: chaptersRead },
+      auth,
+    );
 
     dispatch({
       type: UPDATE_CHAPTERS_READ,
-      payload: { malId, chaptersRead: res },
+      payload: { trackerId, progress: res.progress },
     });
   };

src/redux/tracker/tracker.reducer.js

@@ -19,7 +19,7 @@ const trackerReducer = (state = initialState, action) => {
     case SET_TRACKER:
       return {
         ...state,
-        tracker: { ...payload, name: 'MyAnimeList' },
+        tracker: payload,
       };
     case REMOVE_TRACKER:
       return {
@@ -39,11 +39,12 @@ const trackerReducer = (state = initialState, action) => {
       return {
         ...state,
         trackedNovels: state.trackedNovels.map(novel =>
-          novel.id === payload.malId
+          novel.id === payload.trackerId
             ? {
                 ...novel,
-                my_list_status: {
-                  num_chapters_read: payload.num_chapters_read,
+                userData: {
+                  ...novel.userData,
+                  progress: payload.progress,
                   status: payload.status,
                   score: payload.score,
                 },
@@ -60,12 +61,12 @@ const trackerReducer = (state = initialState, action) => {
       return {
         ...state,
         trackedNovels: state.trackedNovels.map(novel =>
-          novel.id === payload.malId
+          novel.id === payload.trackerId
             ? {
                 ...novel,
-                my_list_status: {
-                  ...novel.my_list_status,
-                  num_chapters_read: payload.chaptersRead,
+                userData: {
+                  ...novel.userData,
+                  progress: payload.progress,
                 },
               }
             : novel,

src/screens/BrowseSourceScreen/BrowseSourceScreen.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { useNavigation } from '@react-navigation/native';
 
-import { FAB, Portal } from 'react-native-paper';
+import { FAB } from 'react-native-paper';
 import { Container, ErrorScreenV2, SearchbarV2 } from '@components/index';
 import NovelList from '@components/NovelList';
 import NovelCover from '@components/NovelCover';
-import Bottomsheet from '@gorhom/bottom-sheet';
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import FilterBottomSheet from './components/FilterBottomSheet';
 
-import { useCategorySettings, usePreviousRouteName, useSearch } from '@hooks';
+import { useCategorySettings, useSearch } from '@hooks';
 import { useTheme } from '@hooks/useTheme';
 import { useBrowseSource, useSearchSource } from './useBrowseSource';
 
@@ -35,7 +35,6 @@ interface BrowseSourceScreenProps {
 const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
   const theme = useTheme();
   const { navigate, goBack } = useNavigation();
-  const previousScreen = usePreviousRouteName();
 
   const {
     sourceId,
@@ -53,7 +52,6 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
     filterValues,
     setFilters,
     clearFilters,
-    refetchNovels,
   } = useBrowseSource(sourceId, showLatestNovels);
 
   const { defaultCategoryId = 1 } = useCategorySettings();
@@ -68,7 +66,9 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
   const novelList = searchResults.length > 0 ? searchResults : novels;
   const errorMessage = error || searchError;
 
-  const { searchText, setSearchText, clearSearchbar } = useSearch();
+  const { searchText, setSearchText, clearSearchbar } = useSearch(undefined, {
+    clearSearchTextOnUnfocus: false,
+  });
   const onChangeText = (text: string) => setSearchText(text);
   const onSubmitEditing = () => searchSource(searchText);
   const handleClearSearchbar = () => {
@@ -76,18 +76,15 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
     clearSearchResults();
   };
 
-  useEffect(() => {
-    if (previousScreen === 'WebviewScreen') {
-      refetchNovels();
-    }
-  }, [previousScreen]);
-
   const handleOpenWebView = async () => {
-    navigate('WebviewScreen', {
-      sourceId,
-      name: sourceName,
-      url: sourceUrl,
-    });
+    navigate(
+      'WebviewScreen' as never,
+      {
+        sourceId,
+        name: sourceName,
+        url: sourceUrl,
+      } as never,
+    );
   };
 
   const { library, setLibrary } = useLibraryNovels();
@@ -110,7 +107,7 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
   );
 
   const { bottom } = useSafeAreaInsets();
-  const filterSheetRef = useRef<Bottomsheet | null>(null);
+  const filterSheetRef = useRef<BottomSheetModal | null>(null);
   return (
     <Container>
       <SearchbarV2
@@ -133,12 +130,14 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
       ) : (
         <NovelList
           data={novelList}
+          isFetchingNextPage={hasNextPage && !searchText}
+          inSource
           renderItem={({ item }) => {
             const inLibrary = novelInLibrary(item.novelUrl);
 
             return (
               <NovelCover
-                item={item}
+                item={item as LibraryNovelInfo}
                 theme={theme}
                 libraryStatus={inLibrary}
                 onPress={() => navigateToNovel(item)}
@@ -175,6 +174,7 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
               fetchNextPage();
             }
           }}
+          onEndReachedThreshold={1.5}
           ListFooterComponent={
             hasNextPage && !searchText ? (
               <SourceScreenSkeletonLoading theme={theme} />
@@ -194,16 +194,14 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
             label={'Filter'}
             uppercase={false}
             color={theme.onPrimary}
-            onPress={() => filterSheetRef?.current?.expand()}
+            onPress={() => filterSheetRef?.current?.present()}
+          />
+          <FilterBottomSheet
+            filterSheetRef={filterSheetRef}
+            filtersValues={filterValues}
+            setFilters={setFilters}
+            clearFilters={clearFilters}
           />
-          <Portal>
-            <FilterBottomSheet
-              filterSheetRef={filterSheetRef}
-              filtersValues={filterValues}
-              setFilters={setFilters}
-              clearFilters={clearFilters}
-            />
-          </Portal>
         </>
       ) : null}
     </Container>

src/screens/BrowseSourceScreen/components/FilterBottomSheet.tsx

@@ -2,7 +2,7 @@ import React, { Ref, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import BottomSheet from '../../../components/BottomSheet/BottomSheet';
-import BottomSheetType, { BottomSheetView } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '@hooks/useTheme';
 import {
@@ -113,7 +113,7 @@ const FilterItem: React.FC<FilterItemProps> = ({
 };
 
 interface BottomSheetProps {
-  filterSheetRef: Ref<BottomSheetType> | null;
+  filterSheetRef: Ref<BottomSheetModal> | null;
   filtersValues: SourceFilter[] | undefined;
   setFilters: (filters?: SelectedFilter) => void;
   clearFilters: () => void;
@@ -131,19 +131,14 @@ const FilterBottomSheet: React.FC<BottomSheetProps> = ({
   >();
 
   return (
-    <BottomSheet
-      bottomSheetRef={filterSheetRef}
-      snapPoints={[400, 600]}
-      height={600}
-      theme={theme}
-    >
+    <BottomSheet bottomSheetRef={filterSheetRef} snapPoints={[400, 600]}>
       <BottomSheetView
         style={[
           styles.container,
           { backgroundColor: overlay(2, theme.surface) },
         ]}
       >
-        <BottomSheetView
+        <View
           style={[styles.buttonContainer, { borderBottomColor: theme.outline }]}
         >
           <Button
@@ -162,7 +157,7 @@ const FilterBottomSheet: React.FC<BottomSheetProps> = ({
             }}
             mode="contained"
           />
-        </BottomSheetView>
+        </View>
         <FlatList
           contentContainerStyle={styles.filterContainer}
           data={filtersValues}

src/screens/BrowseSourceScreen/useBrowseSource.ts

@@ -70,7 +70,7 @@ export const useBrowseSource = (
 
   const clearFilters = useCallback(() => setSelectedFilters(undefined), []);
 
-  const setFilters = (filters: SelectedFilter) => {
+  const setFilters = (filters?: SelectedFilter) => {
     setIsLoading(true);
     setCurrentPage(1);
     fetchNovels(1, filters);

src/screens/GlobalSearchScreen/components/GlobalSearchNovelItem.tsx

@@ -8,6 +8,9 @@ import { SourceNovelItem } from '../../../sources/types';
 import { ThemeColors } from '../../../theme/types';
 import { getString } from '@strings/translations';
 
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
+
 interface Props {
   novel: SourceNovelItem;
   navigateToNovel: (novel: SourceNovelItem) => void;
@@ -32,6 +35,8 @@ const GlobalSearchNovelItem: React.FC<Props> = ({
     [inLibrary],
   );
 
+  const { cookies = '' } = getSourceStorage(novel.sourceId);
+
   return (
     <View style={styles.novelItem}>
       <Pressable
@@ -41,7 +46,10 @@ const GlobalSearchNovelItem: React.FC<Props> = ({
         onLongPress={onLongPress}
       >
         <FastImage
-          source={{ uri: novel.novelCover }}
+          source={{
+            uri: novel.novelCover,
+            headers: { Cookie: cookies, 'User-Agent': defaultUserAgentString },
+          }}
           style={[styles.novelCover, { ...novelItemDimensions }]}
         />
         {inLibrary ? (

src/screens/StatsScreen/StatsScreen.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-
-import { useTheme } from '@hooks/useTheme';
-import { getString } from '@strings/translations';
+import { overlay } from 'react-native-paper';
 
 import { Appbar, ErrorScreenV2, LoadingScreenV2 } from '@components';
 
+import { useTheme } from '@hooks/useTheme';
+import { getString } from '@strings/translations';
 import { LibraryStats } from '@database/types';
 import {
   getChaptersDownloadedCountFromDb,
@@ -17,8 +17,6 @@ import {
   getNovelGenresFromDb,
   getNovelStatusFromDb,
 } from '@database/queries/StatsQueries';
-import { Row } from '@components/Common';
-import { overlay } from 'react-native-paper';
 
 const StatsScreen = () => {
   const theme = useTheme();
@@ -87,7 +85,7 @@ const StatsScreen = () => {
         <Text style={[styles.header, { color: theme.onSurfaceVariant }]}>
           {getString('moreScreen.settingsScreen.generalSettings')}
         </Text>
-        <Row style={styles.statsRow}>
+        <View style={styles.statsGroupCtn}>
           <StatsCard
             label={getString('statsScreen.titlesInLibrary')}
             value={stats.novelsCount}
@@ -100,8 +98,6 @@ const StatsScreen = () => {
             label={getString('statsScreen.totalChapters')}
             value={stats.chaptersCount}
           />
-        </Row>
-        <Row style={styles.statsRow}>
           <StatsCard
             label={getString('statsScreen.unreadChapters')}
             value={stats.chaptersUnread}
@@ -110,26 +106,25 @@ const StatsScreen = () => {
             label={getString('statsScreen.downloadedChapters')}
             value={stats.chaptersDownloaded}
           />
-        </Row>
-        <Row style={styles.statsRow}>
           <StatsCard label="Sources" value={stats.sourcesCount} />
-        </Row>
+        </View>
         <Text style={[styles.header, { color: theme.onSurfaceVariant }]}>
           {getString('statsScreen.genreDistribution')}
         </Text>
-        <Row style={[styles.statsRow, styles.genreRow]}>
+
+        <View style={styles.statsGroupCtn}>
           {Object.entries(stats.genres || {}).map(item => (
             <StatsCard key={item[0]} label={item[0]} value={item[1]} />
           ))}
-        </Row>
+        </View>
         <Text style={[styles.header, { color: theme.onSurfaceVariant }]}>
           {getString('statsScreen.statusDistribution')}
         </Text>
-        <Row style={[styles.statsRow, styles.genreRow]}>
+        <View style={styles.statsGroupCtn}>
           {Object.entries(stats.status || {}).map(item => (
             <StatsCard key={item[0]} label={item[0]} value={item[1]} />
           ))}
-        </Row>
+        </View>
       </ScrollView>
     </>
   );
@@ -165,9 +160,17 @@ export const StatsCard: React.FC<{ label: string; value?: number }> = ({
 };
 
 const styles = StyleSheet.create({
+  statsGroupCtn: {
+    flex: 1,
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   statsCardCtn: {
     elevation: 1,
     margin: 4,
+    marginBottom: 8,
     paddingHorizontal: 8,
     paddingVertical: 12,
     borderRadius: 12,
@@ -184,10 +187,7 @@ const styles = StyleSheet.create({
   contentCtn: {
     paddingBottom: 40,
   },
-  statsRow: {
-    marginBottom: 8,
-    justifyContent: 'center',
-  },
+
   genreRow: {
     flexWrap: 'wrap',
   },

src/screens/browse/BrowseScreen.tsx

@@ -20,7 +20,7 @@ import { useSearch } from '../../hooks';
 import SourceCard from './components/SourceCard/SourceCard';
 import { getString } from '../../../strings/translations';
 import { Source } from '../../sources/types';
-import MalCard from './discover/MalCard/MalCard';
+import TrackerCard from './discover/TrackerCard';
 
 const BrowseScreen = () => {
   const { navigate } = useNavigation();
@@ -47,8 +47,11 @@ const BrowseScreen = () => {
     lastUsed,
   } = useSourcesReducer();
 
-  const { showMyAnimeList = true, onlyShowPinnedSources = false } =
-    useBrowseSettings();
+  const {
+    showMyAnimeList = true,
+    showAniList = true,
+    onlyShowPinnedSources = false,
+  } = useBrowseSettings();
 
   useEffect(() => {
     dispatch(getSourcesAction());
@@ -165,7 +168,22 @@ const BrowseScreen = () => {
                   >
                     {getString('browseScreen.discover')}
                   </Text>
-                  {showMyAnimeList && <MalCard theme={theme} />}
+                  {showAniList && (
+                    <TrackerCard
+                      theme={theme}
+                      icon={require('../../../assets/anilist.png')}
+                      navTarget="BrowseAL"
+                      trackerName="AniList"
+                    />
+                  )}
+                  {showMyAnimeList && (
+                    <TrackerCard
+                      theme={theme}
+                      icon={require('../../../assets/mal.png')}
+                      navTarget="BrowseMal"
+                      trackerName="MyAnimeList"
+                    />
+                  )}
                 </>
               ) : null
             }

src/screens/browse/BrowseSettings.tsx

@@ -23,6 +23,7 @@ const BrowseSettings = () => {
   const {
     searchAllSources = false,
     showMyAnimeList = true,
+    showAniList = true,
     onlyShowPinnedSources = false,
   } = useBrowseSettings();
 
@@ -66,6 +67,19 @@ const BrowseSettings = () => {
             <List.SubHeader theme={theme}>
               {getString('browseScreen.discover')}
             </List.SubHeader>
+            <SwitchItem
+              label="Show AniList"
+              value={showAniList}
+              onPress={() =>
+                dispatch(
+                  setBrowseSettings({
+                    key: 'showAniList',
+                    value: !showAniList,
+                  }),
+                )
+              }
+              theme={theme}
+            />
             <SwitchItem
               label="Show MyAnimeList"
               value={showMyAnimeList}

src/screens/browse/components/SourceCard/SourceCard.tsx

@@ -32,8 +32,8 @@ const SourceCard: React.FC<Props> = ({
       <Image source={{ uri: source.icon }} style={styles.icon} />
       <View style={styles.details}>
         <Text style={{ color: theme.onSurface }}>{source.sourceName}</Text>
-        <Text style={[{ color: theme.onSurfaceVariant }, styles.lang]}>
-          {source.lang}
+        <Text style={[{ color: theme.onSurfaceVariant }, styles.description]}>
+          <Text>{`${source.lang} (ID: ${source.sourceId})`}</Text>
         </Text>
       </View>
     </View>
@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
   details: {
     marginLeft: 16,
   },
-  lang: {
+  description: {
     fontSize: 12,
   },
   flexRow: {

src/screens/browse/discover/AniListTopNovels.js

@@ -0,0 +1,227 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View, ActivityIndicator, FlatList } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import * as WebBrowser from 'expo-web-browser';
+
+import { ErrorView } from '../../../components/ErrorView/ErrorView';
+import { SearchbarV2 } from '@components';
+
+import { showToast } from '../../../hooks/showToast';
+import TrackerNovelCard from './TrackerNovelCard/TrackerNovelCard';
+import { useTheme } from '@hooks/useTheme';
+import TrackerLoading from '../loadingAnimation/TrackerLoading';
+import { queryAniList } from '../../../services/Trackers/aniList';
+import dayjs from 'dayjs';
+
+function formatDate(date) {
+  if (date.year && date.month) {
+    return `${dayjs.monthsShort()[date.month - 1]} ${date.year}`;
+  }
+
+  return '';
+}
+
+function datesEqual(date1, date2) {
+  return date1.year === date2.year && date1.month === date2.month;
+}
+
+const BrowseALScreen = ({ navigation, route }) => {
+  const theme = useTheme();
+  const tracker = useSelector(state => state.trackerReducer.tracker);
+
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(true);
+  const [novels, setNovels] = useState([]);
+  const [error, setError] = useState();
+  const [limit, setLimit] = useState(50);
+
+  const [searchText, setSearchText] = useState('');
+
+  const anilistSearchQuery = `query($search: String, $page: Int) {
+    Page(page: $page) {
+      pageInfo {
+        hasNextPage
+      }
+      media(search: $search, type: MANGA, format: NOVEL, sort: POPULARITY_DESC) {
+        id
+        volumes
+        title {
+          userPreferred
+        }
+        coverImage {
+          extraLarge
+        }
+        averageScore
+        format
+        startDate {
+          month
+          year
+        }
+        endDate {
+          month
+          year
+        }
+      }
+    }
+  }`;
+  const anilistUrl =
+    'https://anilist.co/search/manga?format=NOVEL&sort=POPULARITY_DESC';
+
+  const searchAniList = async (onlyTop, page = 1) => {
+    try {
+      const { data } = await queryAniList(
+        anilistSearchQuery,
+        {
+          search: onlyTop ? undefined : searchText,
+          page,
+        },
+        tracker.auth,
+      );
+
+      const results = data.Page.media.map(m => {
+        return {
+          id: m.id,
+          novelName: m.title.userPreferred,
+          novelCover: m.coverImage.extraLarge,
+          score: `${m.averageScore}%`,
+          info: [
+            '', // MAL returns an item we don't care about first, so the component ignores the first element
+            `Light Novel (${m.volumes || '?'} Vols)`,
+            `${formatDate(m.startDate)}${
+              datesEqual(m.startDate, m.endDate)
+                ? ''
+                : `- ${formatDate(m.endDate)}`
+            }`,
+          ],
+        };
+      });
+
+      setHasNextPage(data.Page.pageInfo.hasNextPage);
+      setNovels(onlyTop ? before => before.concat(results) : results);
+      setLoading(false);
+    } catch (err) {
+      setError(err.message);
+      setNovels([]);
+      setLoading(false);
+      showToast(err.message);
+    }
+  };
+
+  const clearSearchbar = () => {
+    setNovels([]);
+    setHasNextPage(true);
+    searchAniList(true, 1);
+    setLoading(true);
+    setSearchText('');
+  };
+
+  useEffect(() => {
+    searchAniList(true);
+  }, []);
+
+  const renderItem = ({ item }) => (
+    <TrackerNovelCard
+      novel={item}
+      theme={theme}
+      onPress={() =>
+        navigation.navigate('GlobalSearchScreen', {
+          searchText: item.title,
+        })
+      }
+    />
+  );
+
+  const isCloseToBottom = ({
+    layoutMeasurement,
+    contentOffset,
+    contentSize,
+  }) => {
+    const paddingToBottom = 20;
+    return (
+      layoutMeasurement.height + contentOffset.y >=
+      contentSize.height - paddingToBottom
+    );
+  };
+
+  const ListEmptyComponent = () => (
+    <ErrorView
+      errorName={error || 'No results found'}
+      actions={[
+        {
+          name: 'Retry',
+          onPress: () => {
+            searchAniList(true);
+            setLoading(true);
+            setError();
+          },
+          icon: 'reload',
+        },
+      ]}
+      theme={theme}
+    />
+  );
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colorPrimaryDark }]}
+    >
+      <SearchbarV2
+        theme={theme}
+        placeholder="Search AniList"
+        leftIcon="arrow-left"
+        handleBackAction={() => navigation.goBack()}
+        searchText={searchText}
+        onChangeText={text => setSearchText(text)}
+        onSubmitEditing={() => searchAniList(false, 1)}
+        clearSearchbar={clearSearchbar}
+        rightIcons={[
+          {
+            iconName: 'earth',
+            onPress: () => WebBrowser.openBrowserAsync(anilistUrl),
+          },
+        ]}
+      />
+      {loading ? (
+        <TrackerLoading theme={theme} />
+      ) : (
+        <FlatList
+          contentContainerStyle={styles.novelsContainer}
+          data={novels}
+          keyExtractor={item => item.id}
+          renderItem={renderItem}
+          ListEmptyComponent={ListEmptyComponent}
+          onScroll={({ nativeEvent }) => {
+            if (hasNextPage && !searchText && isCloseToBottom(nativeEvent)) {
+              searchAniList(true, Math.ceil((limit + 50) / 50));
+              setLimit(before => before + 50);
+            }
+          }}
+          ListFooterComponent={
+            !searchText && (
+              <View style={{ paddingVertical: 16 }}>
+                <ActivityIndicator color={theme.primary} />
+              </View>
+            )
+          }
+        />
+      )}
+    </View>
+  );
+};
+
+export default BrowseALScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  novelsContainer: {
+    flexGrow: 1,
+    paddingBottom: 8,
+    paddingHorizontal: 4,
+  },
+});

src/screens/browse/discover/MalTopNovels.js

@@ -8,9 +8,9 @@ import { SearchbarV2 } from '@components';
 
 import { showToast } from '../../../hooks/showToast';
 import { scrapeSearchResults, scrapeTopNovels } from './MyAnimeListScraper';
-import MalNovelCard from './MalNovelCard/MalNovelCard';
+import MalNovelCard from './TrackerNovelCard/TrackerNovelCard';
 import { useTheme } from '@hooks/useTheme';
-import MalLoading from '../loadingAnimation/MalLoading';
+import MalLoading from '../loadingAnimation/TrackerLoading';
 
 const BrowseMalScreen = ({ navigation, route }) => {
   const theme = useTheme();

src/screens/browse/discover/TrackerCard.tsx

@@ -1,45 +1,57 @@
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
-import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
-import { getString } from '../../../../../strings/translations';
-import { Button } from '../../../../components';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  Pressable,
+  ImageSourcePropType,
+} from 'react-native';
+import { getString } from '../../../../strings/translations';
+import { Button } from '../../../components';
 
-import { ThemeColors } from '../../../../theme/types';
+import { ThemeColors } from '../../../theme/types';
 
 interface Props {
+  trackerName: string;
+  icon: ImageSourcePropType;
+  navTarget: string;
   theme: ThemeColors;
 }
 
-const MalCard: React.FC<Props> = ({ theme }) => {
+const TrackerCard: React.FC<Props> = ({
+  theme,
+  icon,
+  trackerName,
+  navTarget,
+}) => {
   const { navigate } = useNavigation();
 
   return (
     <Pressable
       style={styles.container}
-      onPress={() => navigate('BrowseMal' as never)}
+      onPress={() => navigate(navTarget as never)}
       android_ripple={{ color: theme.rippleColor }}
     >
       <View style={styles.flexRow}>
-        <Image
-          source={require('../../../../../assets/mal.png')}
-          style={styles.icon}
-        />
+        <Image source={icon} style={styles.icon} />
         <View style={styles.details}>
-          <Text style={{ color: theme.onSurface }}>MyAnimeList</Text>
+          <Text style={{ color: theme.onSurface }}>{trackerName}</Text>
         </View>
       </View>
       <View style={styles.flexRow}>
         <Button
           title={getString('browse')}
           textColor={theme.primary}
-          onPress={() => navigate('BrowseMal' as never)}
+          onPress={() => navigate(navTarget as never)}
         />
       </View>
     </Pressable>
   );
 };
 
-export default MalCard;
+export default TrackerCard;
 
 const styles = StyleSheet.create({
   container: {

src/screens/browse/loadingAnimation/LoadingNovel.tsx

@@ -100,7 +100,7 @@ const createStyleSheet = (pictureHeight: number, pictureWidth: number) => {
       borderRadius: 4,
     },
     listLoadingContainer: {
-      marginHorizontal: 12,
+      marginHorizontal: 8,
       marginVertical: 8,
       flexDirection: 'row',
       alignItems: 'center',

src/screens/browse/loadingAnimation/SourceScreenSkeletonLoading.tsx

@@ -9,9 +9,13 @@ import { useDeviceOrientation } from '@hooks/useDeviceOrientation';
 
 interface Props {
   theme: ThemeColors;
+  completeRow?: number;
 }
 
-const SourceScreenSkeletonLoading: React.FC<Props> = ({ theme }) => {
+const SourceScreenSkeletonLoading: React.FC<Props> = ({
+  theme,
+  completeRow,
+}) => {
   const [highlightColor, backgroundColor] = getLoadingColors(theme);
 
   const { displayMode = DisplayModes.Comfortable, novelsPerRow = 3 } =
@@ -62,6 +66,16 @@ const SourceScreenSkeletonLoading: React.FC<Props> = ({ theme }) => {
     );
   };
   let items: Array<number> = [];
+
+  if (completeRow) {
+    for (let i = -1; i >= completeRow; i--) {
+      items.push(i);
+    }
+    return (
+      <View style={styles.completeRow}>{items.map(renderLoadingNovel)}</View>
+    );
+  }
+
   if (displayMode === DisplayModes.List) {
     items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   } else {
@@ -69,7 +83,12 @@ const SourceScreenSkeletonLoading: React.FC<Props> = ({ theme }) => {
       items.push(i);
     }
   }
-  return <View style={styles.container}>{items.map(renderLoading)}</View>;
+
+  return (
+    <View style={[styles.container, { flex: 1 / numColumns }]}>
+      {items.map(renderLoading)}
+    </View>
+  );
 };
 
 const createStyleSheet = () => {
@@ -82,9 +101,17 @@ const createStyleSheet = () => {
       overflow: 'visible',
     },
     row: {
+      flexDirection: 'row',
+      // justifyContent: 'space-around',
+      paddingHorizontal: 1,
+    },
+    completeRow: {
       flexDirection: 'row',
       justifyContent: 'space-around',
       paddingHorizontal: 1,
+      marginBottom: 8,
+      position: 'absolute',
+      right: 0,
     },
   });
 };

src/screens/browse/migration/MigrationNovelList.js

@@ -10,7 +10,7 @@ import { showToast } from '../../../hooks/showToast';
 
 import { Button } from '@components';
 import { getString } from '@strings/translations';
-import { openNovel } from '@utils/handleNavigateParams';
+import { getNovelScreenRouteParams } from '@utils/NavigationUtils';
 
 const MigrationNovelList = ({ data, theme, library, navigation }) => {
   const [selectedNovel, setSelectedNovel] = useState(false);
@@ -30,7 +30,7 @@ const MigrationNovelList = ({ data, theme, library, navigation }) => {
       onLongPress={() =>
         navigation.navigate(
           'Novel',
-          openNovel({
+          getNovelScreenRouteParams({
             ...item,
             sourceId: item.sourceId,
           }),

src/screens/history/HistoryScreen.tsx

@@ -16,13 +16,12 @@ import { History } from '../../database/types';
 import { getString } from '@strings/translations';
 import ClearHistoryDialog from './components/ClearHistoryDialog';
 import {
-  openChapter,
-  openChapterChapterTypes,
-  openChapterNovelTypes,
-  openChapterFunctionTypes,
-  openNovel,
-  openNovelProps,
-} from '@utils/handleNavigateParams';
+  ChapterRouteParams,
+  NovelRouteParams,
+  getNovelScreenRouteParams,
+  getChapterScreenRouteParams,
+  NovelScreenRouteParams,
+} from '@utils/NavigationUtils';
 import HistorySkeletonLoading from './components/HistorySkeletonLoading';
 
 const HistoryScreen = () => {
@@ -76,16 +75,16 @@ const HistoryScreen = () => {
   };
 
   const handleNavigateToChapter = (
-    novel: openChapterNovelTypes,
-    chapter: openChapterChapterTypes,
+    novel: NovelRouteParams,
+    chapter: ChapterRouteParams,
   ) =>
     navigate(
       'Chapter' as never,
-      openChapter(novel, chapter) as openChapterFunctionTypes as never,
+      getChapterScreenRouteParams(novel, chapter) as never,
     );
 
-  const handleNavigateToNovel = (novel: openNovelProps) =>
-    navigate('Novel' as never, openNovel(novel) as openNovelProps as never);
+  const handleNavigateToNovel = (novel: NovelScreenRouteParams) =>
+    navigate('Novel' as never, getNovelScreenRouteParams(novel) as never);
 
   const {
     value: clearHistoryDialogVisible,

src/screens/history/components/HistoryCard/HistoryCard.tsx

@@ -11,19 +11,22 @@ import { History } from '@database/types';
 import { ThemeColors } from '@theme/types';
 import { coverPlaceholderColor } from '@theme/colors';
 import {
-  openChapterChapterTypes,
-  openChapterNovelTypes,
-  openNovelProps,
-} from '@utils/handleNavigateParams';
+  ChapterRouteParams,
+  NovelRouteParams,
+  NovelScreenRouteParams,
+} from '@utils/NavigationUtils';
+
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
 
 interface HistoryCardProps {
   history: History;
   handleNavigateToChapter: (
-    novel: openChapterNovelTypes,
-    chapter: openChapterChapterTypes,
+    novel: NovelRouteParams,
+    chapter: ChapterRouteParams,
   ) => void;
   handleRemoveFromHistory: (historyId: number) => void;
-  handleNavigateToNovel: (novel: openNovelProps) => void;
+  handleNavigateToNovel: (novel: NovelScreenRouteParams) => void;
   theme: ThemeColors;
 }
 
@@ -56,22 +59,48 @@ const HistoryCard: React.FC<HistoryCardProps> = ({
     [chapterName, historyTimeRead],
   );
 
+  const { cookies = '' } = getSourceStorage(sourceId);
+
   return (
     <Pressable
       style={styles.container}
       android_ripple={{ color: theme.rippleColor }}
       onPress={() =>
-        handleNavigateToNovel({
-          sourceId,
-          novelId,
-          novelUrl,
-          novelName,
-          novelCover,
-        })
+        handleNavigateToChapter(
+          { sourceId, novelName, novelUrl },
+          {
+            novelId,
+            chapterId,
+            chapterUrl,
+            chapterName,
+            bookmark,
+          },
+        )
       }
     >
       <View style={styles.imageAndNameContainer}>
-        <FastImage source={{ uri: novelCover }} style={styles.cover} />
+        <Pressable
+          onPress={() =>
+            handleNavigateToNovel({
+              sourceId,
+              novelId,
+              novelUrl,
+              novelName,
+              novelCover,
+            })
+          }
+        >
+          <FastImage
+            source={{
+              uri: novelCover,
+              headers: {
+                Cookie: cookies,
+                'User-Agent': defaultUserAgentString,
+              },
+            }}
+            style={styles.cover}
+          />
+        </Pressable>
         <View style={styles.detailsContainer}>
           <Text
             numberOfLines={2}
@@ -90,22 +119,6 @@ const HistoryCard: React.FC<HistoryCardProps> = ({
           theme={theme}
           onPress={() => handleRemoveFromHistory(historyId)}
         />
-        <IconButtonV2
-          name="play"
-          onPress={() =>
-            handleNavigateToChapter(
-              { sourceId, novelName, novelUrl },
-              {
-                novelId,
-                chapterId,
-                chapterUrl,
-                chapterName,
-                bookmark,
-              },
-            )
-          }
-          theme={theme}
-        />
       </View>
     </Pressable>
   );
@@ -135,7 +148,6 @@ const styles = StyleSheet.create({
   novelName: {
     marginBottom: 4,
   },
-  chapterName: {},
   imageAndNameContainer: {
     flex: 1,
     flexDirection: 'row',

src/screens/history/components/HistorySkeletonLoading.tsx

@@ -16,7 +16,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
 
   const renderLoadingChapter = (item: number, index: number) => {
     return (
-      <>
+      <View key={index}>
         {index === 0 || Math.random() > 0.6 ? (
           <ShimmerPlaceHolder
             style={styles.date}
@@ -25,7 +25,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
             width={Math.random() * 40 + 50}
           />
         ) : null}
-        <View style={styles.chapterCtn} key={index}>
+        <View style={styles.chapterCtn}>
           <ShimmerPlaceHolder
             style={styles.picture}
             shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
@@ -63,7 +63,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
             />
           </View>
         </View>
-      </>
+      </View>
     );
   };
 

src/screens/library/LibraryScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import BottomSheet from '@gorhom/bottom-sheet';
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import {
   NavigationState,
   SceneRendererProps,
@@ -26,12 +26,12 @@ import {
   markAllChaptersRead,
   markAllChaptersUnread,
 } from '../../database/queries/ChapterQueries';
-import { unfollowNovel } from '../../database/queries/NovelQueries';
+import { followNovel } from '../../database/queries/NovelQueries';
 import SetCategoryModal from '@screens/novel/components/SetCategoriesModal';
 import useBoolean from '@hooks/useBoolean';
 import { debounce, intersection } from 'lodash-es';
 import { useBackHandler } from '@hooks/useBackHandler';
-import { openChapter } from '@utils/handleNavigateParams';
+import { getChapterScreenRouteParams } from '@utils/NavigationUtils';
 import useHistory from '@hooks/useHistory';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSettings } from '@hooks/reduxHooks';
@@ -83,7 +83,7 @@ const LibraryScreen = () => {
 
   const [index, setIndex] = useState(0);
 
-  const bottomSheetRef = useRef<BottomSheet | null>(null);
+  const bottomSheetRef = useRef<BottomSheetModal | null>(null);
 
   const renderTabBar = (
     props: SceneRendererProps & { navigationState: State },
@@ -176,7 +176,7 @@ const LibraryScreen = () => {
               }
             : {
                 iconName: 'filter-variant',
-                onPress: () => bottomSheetRef.current?.expand(),
+                onPress: () => bottomSheetRef.current?.present(),
               },
         ]}
         theme={theme}
@@ -259,7 +259,7 @@ const LibraryScreen = () => {
             onPress={() => {
               navigate(
                 'Chapter' as never,
-                openChapter(history[0], history[0]) as never,
+                getChapterScreenRouteParams(history[0], history[0]) as never,
               );
             }}
           />
@@ -275,8 +275,8 @@ const LibraryScreen = () => {
           refetchLibrary();
         }}
       />
+      <LibraryBottomSheet bottomSheetRef={bottomSheetRef} />
       <Portal>
-        <LibraryBottomSheet bottomSheetRef={bottomSheetRef} />
         <Actionbar
           active={selectedNovelIds.length > 0}
           actions={[
@@ -303,7 +303,7 @@ const LibraryScreen = () => {
             {
               icon: 'delete-outline',
               onPress: () => {
-                selectedNovelIds.map(id => unfollowNovel(id));
+                selectedNovelIds.map(id => followNovel(1, id));
                 setSelectedNovelIds([]);
               },
             },

src/screens/library/components/LibraryBottomSheet/LibraryBottomSheet.tsx

@@ -18,14 +18,11 @@ import {
 import { FlashList } from '@shopify/flash-list';
 import { RadioButton } from '@components/RadioButton/RadioButton';
 import { overlay } from 'react-native-paper';
-import {
-  default as BottomSheetType,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+import { BottomSheetView, BottomSheetModal } from '@gorhom/bottom-sheet';
 import BottomSheet from '@components/BottomSheet/BottomSheet';
 
 interface LibraryBottomSheetProps {
-  bottomSheetRef: Ref<BottomSheetType> | null;
+  bottomSheetRef: Ref<BottomSheetModal> | null;
 }
 
 const FirstRoute = () => {
@@ -207,12 +204,7 @@ const LibraryBottomSheet: React.FC<LibraryBottomSheetProps> = ({
   });
 
   return (
-    <BottomSheet
-      bottomSheetRef={bottomSheetRef}
-      snapPoints={[520]}
-      height={520}
-      theme={theme}
-    >
+    <BottomSheet bottomSheetRef={bottomSheetRef} snapPoints={[520]}>
       <BottomSheetView
         style={[
           styles.bottomSheetCtn,

src/screens/library/components/LibraryListView.tsx

@@ -15,7 +15,7 @@ import { getString } from '@strings/translations';
 import { useAppDispatch } from '@redux/hooks';
 import { useTheme } from '@hooks/useTheme';
 import { updateLibraryAction } from '@redux/updates/updates.actions';
-import { openNovel } from '@utils/handleNavigateParams';
+import { getNovelScreenRouteParams } from '@utils/NavigationUtils';
 
 interface Props {
   categoryId: number;
@@ -46,7 +46,7 @@ export const LibraryView: React.FC<Props> = ({
         if (selectedNovelIds.length) {
           setSelectedNovelIds(xor(selectedNovelIds, [item.novelId]));
         } else {
-          navigate('Novel' as never, openNovel(item) as never);
+          navigate('Novel' as never, getNovelScreenRouteParams(item) as never);
           dispatch(setNovel(item));
         }
       }}

src/screens/novel/NovelScreen.js

@@ -8,7 +8,14 @@ import {
   Text,
 } from 'react-native';
 import { FlashList } from '@shopify/flash-list';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  interpolateColor,
+} from 'react-native-reanimated';
 
 import {
   Provider,
@@ -57,8 +64,10 @@ import DownloadCustomChapterModal from './components/DownloadCustomChapterModal'
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useBoolean from '@hooks/useBoolean';
 import { useCategorySettings } from '@hooks/useSettings';
-import { openChapter } from '../../utils/handleNavigateParams';
+import { getChapterScreenRouteParams } from '../../utils/NavigationUtils';
 import NovelScreenLoading from './components/LoadingAnimation/NovelScreenLoading';
+import { useTrackerReducer } from '@redux/hooks';
+import EpubIconButton from './components/EpubIconButton';
 
 const Novel = ({ route, navigation }) => {
   const item = route.params;
@@ -71,6 +80,7 @@ const Novel = ({ route, navigation }) => {
 
   const { novel, chapters, loading, updating } = useNovel();
   const { downloadQueue } = useSelector(state => state.downloadsReducer);
+  const { tracker } = useTrackerReducer();
 
   const [selected, setSelected] = useState([]);
   const [downloadMenu, showDownloadMenu] = useState(false);
@@ -101,6 +111,22 @@ const Novel = ({ route, navigation }) => {
 
   const { defaultCategoryId = 1 } = useCategorySettings();
 
+  const headerOpacity = useSharedValue(0);
+  const headerOpacityStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      headerOpacity.value,
+      [0, 1],
+      ['transparent', theme.surface],
+    );
+    return {
+      backgroundColor,
+    };
+  });
+  const onPageScroll = event => {
+    const y = event.nativeEvent.contentOffset.y;
+    headerOpacity.value = withTiming(y > 10 ? 1 : 0, { duration: 200 });
+  };
+
   useEffect(() => {
     dispatch(
       getNovelAction(
@@ -126,8 +152,8 @@ const Novel = ({ route, navigation }) => {
       progressViewOffset={progressViewOffset}
       onRefresh={onRefresh}
       refreshing={updating}
-      colors={[theme.primary]}
-      progressBackgroundColor={theme.onPrimary}
+      colors={[theme.onPrimary]}
+      progressBackgroundColor={theme.primary}
     />
   );
 
@@ -215,6 +241,7 @@ const Novel = ({ route, navigation }) => {
     }
 
     return list;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected]);
 
   const deleteChapter = chapter =>
@@ -290,7 +317,7 @@ const Novel = ({ route, navigation }) => {
   const navigateToChapter = chapter => {
     navigation.navigate(
       'Chapter',
-      openChapter({ sourceId, novelUrl, novelName }, chapter),
+      getChapterScreenRouteParams({ sourceId, novelUrl, novelName }, chapter),
     );
   };
 
@@ -300,13 +327,16 @@ const Novel = ({ route, navigation }) => {
       position[chapter.chapterId] &&
       position[chapter.chapterId].percentage;
     if (savedProgress < 100 && savedProgress > 0 && !chapter.read) {
+      const margin = chapter.releaseDate ? 5 : 0;
       return (
         <Text
-          style={{
-            color: theme.outline,
-            fontSize: 12,
-            marginLeft: chapter.releaseDate ? 5 : 0,
-          }}
+          style={[
+            styles.defaultTextSize,
+            {
+              color: theme.outline,
+              marginLeft: margin,
+            },
+          ]}
           numberOfLines={1}
         >
           {chapter.releaseDate ? '•  ' : null}
@@ -333,7 +363,6 @@ const Novel = ({ route, navigation }) => {
 
   const renderItem = ({ item: it, index }) => (
     <ChapterItem
-      theme={theme}
       chapter={it}
       index={index}
       showChapterTitles={showChapterTitles}
@@ -360,15 +389,7 @@ const Novel = ({ route, navigation }) => {
       <View style={[styles.container, { backgroundColor: theme.background }]}>
         <Portal>
           {selected.length === 0 ? (
-            <View
-              style={{
-                position: 'absolute',
-                height: StatusBar.currentHeight + 54,
-                width: '100%',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-              }}
-            >
+            <Animated.View style={[styles.row, headerOpacityStyle]}>
               <IconButton
                 icon="arrow-left"
                 iconColor={theme.onBackground}
@@ -399,7 +420,11 @@ const Novel = ({ route, navigation }) => {
                   }}
                   onPress={() => showJumpToChapterModal(true)}
                 />
-
+                <EpubIconButton
+                  theme={theme}
+                  style={{ marginTop: StatusBar.currentHeight + 8 }}
+                  novel={novel}
+                />
                 <Menu
                   visible={downloadMenu}
                   onDismiss={() => showDownloadMenu(false)}
@@ -532,9 +557,10 @@ const Novel = ({ route, navigation }) => {
                     titleStyle={{
                       color: theme.onSurface,
                     }}
-                    onPress={() =>
-                      dispatch(deleteAllChaptersAction(sourceId, chapters))
-                    }
+                    onPress={() => {
+                      dispatch(deleteAllChaptersAction(sourceId, chapters));
+                      showDownloadMenu(false);
+                    }}
                   />
                 </Menu>
 
@@ -546,10 +572,7 @@ const Novel = ({ route, navigation }) => {
                       icon="dots-vertical"
                       iconColor={theme.onBackground}
                       size={21}
-                      style={{
-                        marginTop: StatusBar.currentHeight + 8,
-                        marginRight: 16,
-                      }}
+                      style={styles.iconButton}
                       onPress={() => showExtraMenu(true)}
                     />
                   }
@@ -578,21 +601,17 @@ const Novel = ({ route, navigation }) => {
                   />
                 </Menu>
               </Row>
-            </View>
+            </Animated.View>
           ) : (
             <Animated.View
               entering={FadeIn.duration(150)}
               exiting={FadeOut.duration(150)}
-              style={{
-                position: 'absolute',
-                width: '100%',
-                elevation: 2,
-                backgroundColor: theme.surface2,
-                paddingTop: StatusBar.currentHeight,
-                flexDirection: 'row',
-                alignItems: 'center',
-                paddingBottom: 8,
-              }}
+              style={[
+                {
+                  backgroundColor: theme.surface2,
+                },
+                styles.animatedView,
+              ]}
             >
               <Appbar.Action
                 icon="close"
@@ -613,7 +632,7 @@ const Novel = ({ route, navigation }) => {
             </Animated.View>
           )}
         </Portal>
-        <View style={{ minHeight: 3, flex: 1 }}>
+        <View style={styles.flashlistContainer}>
           <FlashList
             ref={flatlistRef}
             estimatedItemSize={64}
@@ -624,8 +643,8 @@ const Novel = ({ route, navigation }) => {
             windowSize={15}
             initialNumToRender={7}
             renderItem={renderItem}
-            keyExtractor={(item, index) => 'chapter' + index}
-            contentContainerStyle={{ paddingBottom: 100 }}
+            keyExtractor={(_item, index) => 'chapter' + index}
+            contentContainerStyle={styles.paddingB100}
             ListHeaderComponent={
               <NovelInfoHeader
                 item={item}
@@ -642,6 +661,7 @@ const Novel = ({ route, navigation }) => {
                 deleteDownloadsSnackbar={deleteDownloadsSnackbar}
               />
             }
+            onScroll={onPageScroll}
             refreshControl={refreshControl()}
           />
         </View>
@@ -659,7 +679,7 @@ const Novel = ({ route, navigation }) => {
             onPress={() => {
               navigation.navigate(
                 'Chapter',
-                openChapter(novel, lastReadChapter),
+                getChapterScreenRouteParams(novel, lastReadChapter),
               );
             }}
           />
@@ -668,7 +688,7 @@ const Novel = ({ route, navigation }) => {
           <Actionbar
             active={selected.length > 0}
             theme={theme}
-            style={{ marginBottom: 24 }}
+            style={styles.marginB24}
             actions={actions}
           />
           <Snackbar
@@ -681,7 +701,7 @@ const Novel = ({ route, navigation }) => {
               },
             }}
             theme={{ colors: { primary: theme.primary } }}
-            style={{ backgroundColor: theme.surface, marginBottom: 32 }}
+            style={[{ backgroundColor: theme.surface }, styles.marginB32]}
           >
             <Text style={{ color: theme.onSurface }}>
               Delete downloaded chapters?
@@ -712,24 +732,26 @@ const Novel = ({ route, navigation }) => {
             theme={theme}
             dispatch={dispatch}
           />
-          <NovelBottomSheet
-            novelUrl={novelUrl}
-            bottomSheetRef={novelBottomSheetRef}
-            dispatch={dispatch}
-            sortAndFilterChapters={sortAndFilterChapters}
-            novelId={novel.novelId}
-            sort={sort}
-            theme={theme}
-            filter={filter}
-            showChapterTitles={showChapterTitles}
-          />
+        </Portal>
+        <NovelBottomSheet
+          novelUrl={novelUrl}
+          bottomSheetRef={novelBottomSheetRef}
+          dispatch={dispatch}
+          sortAndFilterChapters={sortAndFilterChapters}
+          novelId={novel.novelId}
+          sort={sort}
+          theme={theme}
+          filter={filter}
+          showChapterTitles={showChapterTitles}
+        />
+        {tracker ? (
           <TrackSheet
             bottomSheetRef={trackerSheetRef}
             novelId={novel.novelId}
             novelName={novel.novelName}
             theme={theme}
           />
-        </Portal>
+        ) : null}
       </View>
     </Provider>
   );
@@ -745,10 +767,43 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  row: {
+    position: 'absolute',
+    height: StatusBar.currentHeight + 54,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  iconButton: {
+    marginTop: StatusBar.currentHeight + 8,
+    marginRight: 16,
+  },
   fab: {
     position: 'absolute',
     margin: 16,
     right: 0,
     bottom: 16,
   },
+  defaultTextSize: {
+    fontSize: 12,
+  },
+  animatedView: {
+    position: 'absolute',
+    width: '100%',
+    elevation: 2,
+    paddingTop: StatusBar.currentHeight,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 8,
+  },
+  marginB24: {
+    marginBottom: 24,
+  },
+  marginB32: {
+    marginBottom: 32,
+  },
+  paddingB100: {
+    paddingBottom: 100,
+  },
+  flashlistContainer: { minHeight: 3, flex: 1 },
 });

src/screens/novel/components/Chapter/ChapterDownloadButtons.tsx

@@ -1,6 +1,6 @@
 import { ChapterItemExtended } from '@database/types';
 import { MD3ThemeType } from '@theme/types';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
 
 import { IconButton, Menu, overlay } from 'react-native-paper';
@@ -27,6 +27,9 @@ export const DownloadButton: React.FC<DownloadButtonProps> = ({
   deleteChapterMenuVisible,
 }) => {
   const [downloaded, setDownloaded] = useState(chapter.downloaded);
+  // React to external changes of chapter download state
+  useEffect(() => setDownloaded(chapter.downloaded ? 1 : 0), [chapter]);
+
   if (downloadQueue.some(chap => chap.chapterId === chapter.chapterId)) {
     return <ChapterDownloadingButton theme={theme} />;
   } else if (downloaded === 0) {

src/screens/novel/components/ChapterItem.tsx

@@ -1,21 +1,22 @@
-import React, { memo, ReactNode, useState } from 'react';
+import React, { memo, ReactNode } from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 import color from 'color';
+import isEqual from 'react-fast-compare';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import { Row } from '../../../components/Common';
+import { Row } from '@components/Common';
+
+import { useBoolean, useTheme } from '@hooks';
+import { ChapterItemExtended } from '@database/types';
+import { parseChapterNumber } from '@utils/parseChapterNumber';
 
 import {
   ChapterBookmarkButton,
   DownloadButton,
 } from './Chapter/ChapterDownloadButtons';
-import { parseChapterNumber } from '@utils/parseChapterNumber';
-
-import { ThemeColors } from '@theme/types';
-import { ChapterItemExtended } from '@database/types';
 
 interface ChapterItemProps {
   chapter: ChapterItemExtended;
-  theme: ThemeColors;
   index?: number;
   downloadQueue: any;
   showChapterTitles: boolean;
@@ -34,7 +35,6 @@ interface ChapterItemProps {
 
 const ChapterItem: React.FC<ChapterItemProps> = ({
   chapter,
-  theme,
   index,
   showChapterTitles,
   downloadQueue,
@@ -49,16 +49,20 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
   isUpdateCard,
   novelName,
 }) => {
+  const theme = useTheme();
+
   const { chapterId, chapterName, read, releaseDate, bookmark } = chapter;
-  const [deleteChapterMenuVisible, setDeleteChapterMenuVisible] =
-    useState(false);
-  const showDeleteChapterMenu = () => setDeleteChapterMenuVisible(true);
-  const hideDeleteChapterMenu = () => setDeleteChapterMenuVisible(false);
+
+  const {
+    value: isMenuVisible,
+    setTrue: showMenu,
+    setFalse: hideMenu,
+  } = useBoolean();
+
   const chapterNumber = parseChapterNumber(chapterName);
 
   return (
     <Pressable
-      key={chapterId.toString()}
       style={[
         styles.chapterCardContainer,
         isSelected?.(chapterId) && {
@@ -76,7 +80,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
       <Row style={styles.row}>
         {left}
         {!!bookmark && <ChapterBookmarkButton theme={theme} />}
-        <View>
+        <View style={{ flex: 1 }}>
           {isUpdateCard && (
             <Text
               style={[
@@ -90,25 +94,33 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
               {novelName}
             </Text>
           )}
-          <Text
-            style={[
-              {
+          <View style={styles.row}>
+            {!chapter.read ? (
+              <MaterialCommunityIcons
+                name="circle"
+                color={theme.primary}
+                size={8}
+                style={styles.unreadIcon}
+              />
+            ) : null}
+            <Text
+              style={{
                 fontSize: isUpdateCard ? 12 : 14,
                 color: read
                   ? theme.outline
                   : bookmark
                   ? theme.primary
-                  : theme.onSurfaceVariant,
-              },
-            ]}
-            numberOfLines={1}
-          >
-            {showChapterTitles
-              ? chapterNumber
-                ? 'Chapter ' + chapterNumber
-                : 'Chapter ' + index
-              : chapterName}
-          </Text>
+                  : theme.onSurface,
+              }}
+              numberOfLines={1}
+            >
+              {showChapterTitles
+                ? chapterNumber
+                  ? 'Chapter ' + chapterNumber
+                  : 'Chapter ' + index
+                : chapterName}
+            </Text>
+          </View>
           <View style={styles.textRow}>
             {releaseDate && !isUpdateCard ? (
               <Text
@@ -137,15 +149,15 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
         theme={theme}
         deleteChapter={deleteChapter}
         downloadChapter={downloadChapter}
-        hideDeleteChapterMenu={hideDeleteChapterMenu}
-        showDeleteChapterMenu={showDeleteChapterMenu}
-        deleteChapterMenuVisible={deleteChapterMenuVisible}
+        hideDeleteChapterMenu={hideMenu}
+        showDeleteChapterMenu={showMenu}
+        deleteChapterMenuVisible={isMenuVisible}
       />
     </Pressable>
   );
 };
 
-export default memo(ChapterItem);
+export default memo(ChapterItem, isEqual);
 
 const styles = StyleSheet.create({
   chapterCardContainer: {
@@ -163,5 +175,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginTop: 5,
   },
-  row: { flex: 1, overflow: 'hidden' },
+  row: {
+    flexShrink: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  unreadIcon: {
+    marginRight: 4,
+  },
 });

src/screens/novel/components/ChooseEpubLocationModal.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Modal, TextInput, Text } from 'react-native-paper';
+import { useDispatch } from 'react-redux';
+import { openDocumentTree } from 'react-native-saf-x';
+
+import { Button, List, SwitchItem } from '@components';
+
+import { useTheme, useBoolean } from '@hooks';
+import { useSettings } from '@hooks/reduxHooks';
+import { showToast } from '@hooks/showToast';
+import { getString } from '@strings/translations';
+import { setMultipleAppSettings } from '@redux/settings/settings.actions';
+
+interface ChooseEpubLocationModalProps {
+  isVisible: boolean;
+  onSubmit?: (uri: string) => void;
+  hideModal: () => void;
+}
+
+const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
+  isVisible,
+  onSubmit: onSubmitProp,
+  hideModal,
+}) => {
+  const theme = useTheme();
+  const {
+    epubLocation = '',
+    epubUseAppTheme = false,
+    epubUseCustomCSS = false,
+    epubUseCustomJS = false,
+  } = useSettings();
+  const dispatch = useDispatch();
+
+  const [uri, setUri] = useState(epubLocation);
+  const useAppTheme = useBoolean(epubUseAppTheme);
+  const useCustomCSS = useBoolean(epubUseCustomCSS);
+  const useCustomJS = useBoolean(epubUseCustomJS);
+
+  const onDismiss = () => {
+    hideModal();
+    setUri(epubLocation);
+  };
+
+  const onSubmit = () => {
+    dispatch(
+      setMultipleAppSettings({
+        'epubLocation': uri,
+        'epubUseAppTheme': useAppTheme.value,
+        'epubUseCustomCSS': useCustomCSS.value,
+        'epubUseCustomJS': useCustomJS.value,
+      }),
+    );
+
+    onSubmitProp?.(uri);
+    hideModal();
+  };
+
+  const openFolderPicker = async () => {
+    try {
+      const resultUri = await openDocumentTree(true);
+      if (resultUri) {
+        setUri(resultUri.uri);
+      }
+    } catch (error: any) {
+      showToast(error.message);
+    }
+  };
+
+  return (
+    <Modal
+      visible={isVisible}
+      onDismiss={onDismiss}
+      contentContainerStyle={[
+        styles.modalContainer,
+        { backgroundColor: theme.overlay3 },
+      ]}
+    >
+      <View style={styles.modalHeaderCtn}>
+        <Text style={[styles.modalTitle, { color: theme.onSurface }]}>
+          {getString('novelScreen.convertToEpubModal.chooseLocation')}
+        </Text>
+        <TextInput
+          onChangeText={setUri}
+          value={uri}
+          placeholder={getString('novelScreen.convertToEpubModal.pathToFolder')}
+          onSubmitEditing={onSubmit}
+          mode="outlined"
+          theme={{ colors: { ...theme } }}
+          underlineColor={theme.outline}
+          dense
+          right={
+            <TextInput.Icon
+              icon="folder-edit-outline"
+              onPress={openFolderPicker}
+            />
+          }
+        />
+      </View>
+      <View style={styles.settings}>
+        <SwitchItem
+          label={getString('novelScreen.convertToEpubModal.useReaderTheme')}
+          value={useAppTheme.value}
+          onPress={useAppTheme.toggle}
+          theme={theme}
+        />
+        <SwitchItem
+          label={getString('novelScreen.convertToEpubModal.useCustomCSS')}
+          value={useCustomCSS.value}
+          onPress={useCustomCSS.toggle}
+          theme={theme}
+        />
+        <SwitchItem
+          label={getString('novelScreen.convertToEpubModal.useCustomJS')}
+          description={getString(
+            'novelScreen.convertToEpubModal.useCustomJSWarning',
+          )}
+          value={useCustomJS.value}
+          onPress={useCustomJS.toggle}
+          theme={theme}
+        />
+      </View>
+      <List.InfoItem
+        title={getString('novelScreen.convertToEpubModal.chaptersWarning')}
+        theme={theme}
+      />
+      <View style={styles.modalFooterCtn}>
+        <Button title={getString('common.submit')} onPress={onSubmit} />
+        <Button title={getString('common.cancel')} onPress={hideModal} />
+      </View>
+    </Modal>
+  );
+};
+
+export default ChooseEpubLocationModal;
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    margin: 30,
+    borderRadius: 32,
+  },
+  settings: {
+    marginTop: 12,
+  },
+  modalHeaderCtn: {
+    padding: 20,
+    paddingTop: 32,
+    paddingBottom: 0,
+  },
+  modalFooterCtn: {
+    flexDirection: 'row-reverse',
+    paddingHorizontal: 20,
+    paddingTop: 8,
+    paddingBottom: 20,
+  },
+  modalTitle: {
+    fontSize: 24,
+    marginBottom: 16,
+  },
+});