chore: Update translations (#625 )

* New translations strings.json (Romanian) [ci skip] * New translations strings.json (French) [ci skip] * New translations strings.json (Spanish) [ci skip] * New translations strings.json (Afrikaans) [ci skip] * New translations strings.json (Arabic) [ci skip] * New translations strings.json (Catalan) [ci skip] * New translations strings.json (Czech) [ci skip] * New translations strings.json (Danish) [ci skip] * New translations strings.json (German) [ci skip] * New translations strings.json (Greek) [ci skip] * New translations strings.json (Finnish) [ci skip] * New translations strings.json (Hebrew) [ci skip] * New translations strings.json (Hungarian) [ci skip] * New translations strings.json (Italian) [ci skip] * New translations strings.json (Japanese) [ci skip] * New translations strings.json (Korean) [ci skip] * New translations strings.json (Dutch) [ci skip] * New translations strings.json (Norwegian) [ci skip] * New translations strings.json (Polish) [ci skip] * New translations strings.json (Portuguese) [ci skip] * New translations strings.json (Russian) [ci skip] * New translations strings.json (Albanian) [ci skip] * New translations strings.json (Serbian (Cyrillic)) [ci skip] * New translations strings.json (Swedish) [ci skip] * New translations strings.json (Turkish) [ci skip] * New translations strings.json (Ukrainian) [ci skip] * New translations strings.json (Chinese Simplified) [ci skip] * New translations strings.json (Chinese Traditional) [ci skip] * New translations strings.json (Vietnamese) [ci skip] * New translations strings.json (Portuguese, Brazilian) [ci skip] * New translations strings.json (Indonesian) [ci skip] * New translations strings.json (Hindi) [ci skip] * New translations strings.json (Turkish) [ci skip] * New translations strings.json (French) [ci skip] * New translations strings.json (Hungarian) [ci skip] * New translations strings.json (Russian) [ci skip] * New translations strings.json (Portuguese, Brazilian) [ci skip] * New translations strings.json (Romanian) [ci skip] * New translations strings.json (French) [ci skip] * New translations strings.json (Spanish) [ci skip] * New translations strings.json (Afrikaans) [ci skip] * New translations strings.json (Arabic) [ci skip] * New translations strings.json (Catalan) [ci skip] * New translations strings.json (Czech) [ci skip] * New translations strings.json (Danish) [ci skip] * New translations strings.json (German) [ci skip] * New translations strings.json (Greek) [ci skip] * New translations strings.json (Finnish) [ci skip] * New translations strings.json (Hebrew) [ci skip] * New translations strings.json (Hungarian) [ci skip] * New translations strings.json (Italian) [ci skip] * New translations strings.json (Japanese) [ci skip] * New translations strings.json (Korean) [ci skip] * New translations strings.json (Dutch) [ci skip] * New translations strings.json (Norwegian) [ci skip] * New translations strings.json (Polish) [ci skip] * New translations strings.json (Portuguese) [ci skip] * New translations strings.json (Russian) [ci skip] * New translations strings.json (Albanian) [ci skip] * New translations strings.json (Serbian (Cyrillic)) [ci skip] * New translations strings.json (Swedish) [ci skip] * New translations strings.json (Turkish) [ci skip] * New translations strings.json (Ukrainian) [ci skip] * New translations strings.json (Chinese Simplified) [ci skip] * New translations strings.json (Chinese Traditional) [ci skip] * New translations strings.json (Vietnamese) [ci skip] * New translations strings.json (Portuguese, Brazilian) [ci skip] * New translations strings.json (Indonesian) [ci skip] * New translations strings.json (Hindi) [ci skip] * New translations strings.json (Turkish) [ci skip] * New translations strings.json (Arabic) [ci skip] * New translations strings.json (Romanian) [ci skip] * New translations strings.json (French) [ci skip] * New translations strings.json (Spanish) [ci skip] * New translations strings.json (Afrikaans) [ci skip] * New translations strings.json (Arabic) [ci skip] * New translations strings.json (Catalan) [ci skip] * New translations strings.json (Czech) [ci skip] * New translations strings.json (Danish) [ci skip] * New translations strings.json (German) [ci skip] * New translations strings.json (Greek) [ci skip] * New translations strings.json (Finnish) [ci skip] * New translations strings.json (Hebrew) [ci skip] * New translations strings.json (Hungarian) [ci skip] * New translations strings.json (Italian) [ci skip] * New translations strings.json (Japanese) [ci skip] * New translations strings.json (Korean) [ci skip] * New translations strings.json (Dutch) [ci skip] * New translations strings.json (Norwegian) [ci skip] * New translations strings.json (Polish) [ci skip] * New translations strings.json (Portuguese) [ci skip] * New translations strings.json (Russian) [ci skip] * New translations strings.json (Albanian) [ci skip] * New translations strings.json (Serbian (Cyrillic)) [ci skip] * New translations strings.json (Swedish) [ci skip] * New translations strings.json (Turkish) [ci skip] * New translations strings.json (Ukrainian) [ci skip] * New translations strings.json (Chinese Simplified) [ci skip] * New translations strings.json (Chinese Traditional) [ci skip] * New translations strings.json (Vietnamese) [ci skip] * New translations strings.json (Portuguese, Brazilian) [ci skip] * New translations strings.json (Indonesian) [ci skip] * New translations strings.json (Hindi) [ci skip] * New translations strings.json (Turkish) [ci skip] * New translations strings.json (Greek) [ci skip] * New translations strings.json (Greek) [ci skip] * New translations strings.json (Romanian) [ci skip] * New translations strings.json (French) [ci skip] * New translations strings.json (Spanish) [ci skip] * New translations strings.json (Afrikaans) [ci skip] * New translations strings.json (Arabic) [ci skip] * New translations strings.json (Catalan) [ci skip] * New translations strings.json (Czech) [ci skip] * New translations strings.json (Danish) [ci skip] * New translations strings.json (German) [ci skip] * New translations strings.json (Greek) [ci skip] * New translations strings.json (Finnish) [ci skip] * New translations strings.json (Hebrew) [ci skip] * New translations strings.json (Hungarian) [ci skip] * New translations strings.json (Italian) [ci skip] * New translations strings.json (Japanese) [ci skip] * New translations strings.json (Korean) [ci skip] * New translations strings.json (Dutch) [ci skip] * New translations strings.json (Norwegian) [ci skip] * New translations strings.json (Polish) [ci skip] * New translations strings.json (Portuguese) [ci skip] * New translations strings.json (Russian) [ci skip] * New translations strings.json (Albanian) [ci skip] * New translations strings.json (Serbian (Cyrillic)) [ci skip] * New translations strings.json (Swedish) [ci skip] * New translations strings.json (Turkish) [ci skip] * New translations strings.json (Ukrainian) [ci skip] * New translations strings.json (Chinese Simplified) [ci skip] * New translations strings.json (Chinese Traditional) [ci skip] * New translations strings.json (Vietnamese) [ci skip] * New translations strings.json (Portuguese, Brazilian) [ci skip] * New translations strings.json (Indonesian) [ci skip] * New translations strings.json (Hindi) [ci skip]
fix(source): Arnovel (#671 )
2023-07-15 13:21:29 +05:30 · 2023-07-15 13:15:32 +05:30 · 2023-07-15 13:14:11 +05:30 · 2023-07-03 22:50:04 +05:30 · 2023-07-02 13:09:30 +05:30 · 2023-07-02 12:33:49 +05:30
196 changed files with 18571 additions and 23377 deletions
@@ -1,3 +0,0 @@
-# Windows files
-[*.bat]
-end_of_line = crlf
@@ -1,3 +0,0 @@
-# Windows files should use crlf line endings
-# https://help.github.com/articles/dealing-with-line-endings/
-*.bat text eol=crlf
@@ -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.15"
    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.15](https://github.com/lnreader/lnreader/releases/latest)**.
          required: true
        - label: I will fill out all of the requested information in this form.
          required: true
@@ -14,7 +14,7 @@ jobs:
          node-version: '16'
      - name: Install Dependencies
        run: |
-          npm install --legacy-peer-deps
+          npm install

      - name: Cache Gradle Wrapper
        uses: actions/cache@v3
@@ -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
@@ -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
@@ -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'
@@ -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
@@ -18,6 +18,12 @@ import { persistor, store } from '@redux/store';
 import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';

 import Main from './src/navigators/Main';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+// Initialize trackers
+import './src/services/Trackers/index';
+import './src/services/Trackers/aniList';
+import './src/services/Trackers/myAnimeList';

 Notifications.setNotificationHandler({
  handleNotification: async () => {
@@ -42,8 +48,10 @@ const App = () => {
          <PersistGate loading={null} persistor={persistor}>
            <SafeAreaProvider>
              <PaperProvider>
-                <StatusBar translucent={true} backgroundColor="transparent" />
-                <Main />
+                <BottomSheetModalProvider>
+                  <StatusBar translucent={true} backgroundColor="transparent" />
+                  <Main />
+                </BottomSheetModalProvider>
              </PaperProvider>
            </SafeAreaProvider>
          </PersistGate>
@@ -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
@@ -78,12 +78,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,19 +122,24 @@ 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 = 15
 }

 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'
@@ -143,13 +148,14 @@ android {
        // Generated version code. Supports versions up to 1024.1024.2048
        versionCode ((((versionMajor << 10) | versionMinor) << 11) | versionPatch)
        versionName "$versionMajor.$versionMinor.$versionPatch"
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
    }
    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 +199,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 +241,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 +255,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"
+}
@@ -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>
@@ -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);
@@ -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">

@@ -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;
+        }
+    }
+}
@@ -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 expo.modules.ApplicationLifecycleDispatcher;
+import expo.modules.ReactNativeHostWrapper;

 import com.facebook.react.bridge.JSIModulePackage;
 import com.swmansion.reanimated.ReanimatedJSIModulePackage;
@@ -22,40 +23,41 @@ 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());
+          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 +66,7 @@ public class MainApplication extends Application implements ReactApplication {
    SoLoader.init(this, /* native exopackage */ false);

    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+    ApplicationLifecycleDispatcher.onApplicationCreate(this);
  }

  /**
@@ -75,7 +78,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 +100,10 @@ public class MainApplication extends Application implements ReactApplication {
      }
    }
  }
-}
+
+  @Override
+  public void onConfigurationChanged(@NonNull Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
+  }
+}
@@ -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()
-    );
-  }
-}
@@ -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());
+    }
+}
@@ -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>
@@ -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>
@@ -1,19 +1,30 @@
+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()
    }
    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")

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
@@ -36,18 +47,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' }
    }
-}
+}
@@ -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
@@ -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
@@ -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" "$@"
@@ -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
@@ -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')
@@ -21,6 +21,14 @@ module.exports = function (api) {
        },
      ],
      'react-native-reanimated/plugin',
+      [
+        'module:react-native-dotenv',
+        {
+          envName: 'APP_ENV',
+          moduleName: '@env',
+          path: '.env',
+        },
+      ],
    ],
  };
 };
@@ -0,0 +1,4 @@
+declare module '@env' {
+  export const MYANIMELIST_CLIENT_ID: string;
+  export const ANILIST_CLIENT_ID: string;
+}
@@ -1,6 +1,6 @@
 {
  "name": "lnreader",
-  "version": "1.1.14",
+  "version": "1.1.15",
  "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"
@@ -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;
@@ -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',
+  },
+});
@@ -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}
@@ -5,7 +5,6 @@ import * as Linking from 'expo-linking';
 import { ScrollView } from 'react-native-gesture-handler';
 import Button from './Button/Button';
 import { getString } from '@strings/translations';
-import Markdown from 'react-native-markdown-display';

 import { useTheme } from '@hooks/useTheme';

@@ -38,24 +37,7 @@ const NewUpdateDialog: React.FC<NewUpdateDialogProps> = ({ newVersion }) => {
          {`${getString('common.newUpdateAvailable')} ${newVersion.tag_name}`}
        </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>
+          {newVersion.body}
        </ScrollView>
        <View style={styles.buttonCtn}>
          <Button
@@ -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,22 @@ 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 = ({
+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 +57,7 @@ const NovelCover = ({

  const coverHeight = useMemo(
    () => (window.width / numColumns) * (4 / 3),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
    [numColumns],
  );

@@ -51,19 +65,19 @@ const NovelCover = ({

  const uri = item.novelCover;

-  return displayMode !== DisplayModes.List ? (
+  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,
-        },
+            backgroundColor: theme.primary,
+          } &&
+          styles.selectedNovelCover,
      ]}
    >
      <Pressable
@@ -98,10 +112,10 @@ const NovelCover = ({
          style={[
            {
              height: coverHeight,
-              borderRadius: 4,
              backgroundColor: coverPlaceholderColor,
            },
-            libraryStatus && { opacity: 0.5 },
+            styles.standardBorderRadius,
+            libraryStatus && styles.opacityPoint5,
          ]}
        />
        <View style={styles.compactTitleContainer}>
@@ -152,14 +166,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 +184,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 +233,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 +245,7 @@ const UnreadBadge = ({
  </Text>
 );

-const DownloadBadge = ({
+const DownloadBadge: React.FC<DownloadBadgeProps> = ({
  chaptersDownloaded,
  showUnreadBadges,
  chaptersUnread,
@@ -241,13 +254,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 +267,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 +343,18 @@ const styles = StyleSheet.create({
    left: 10,
    flexDirection: 'row',
  },
+  standardNovelCover: {
+    borderRadius: 6,
+    overflow: 'hidden',
+    margin: 2,
+  },
+  selectedNovelCover: {
+    opacity: 0.8,
+  },
+  compactTitle: {
+    color: 'rgba(255,255,255,1)',
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: { width: -1, height: 1 },
+    textShadowRadius: 10,
+  },
 });
@@ -15,9 +15,12 @@ export type NovelListRenderItem = ListRenderItem<
  LibraryNovelInfo | NovelInfo | SourceNovelItem
 >;

-const NovelList: React.FC<
-  FlatListProps<LibraryNovelInfo | NovelInfo | SourceNovelItem>
-> = props => {
+interface NovelListProps
+  extends FlatListProps<LibraryNovelInfo | NovelInfo | SourceNovelItem> {
+  inSource?: boolean;
+}
+
+const NovelList: React.FC<NovelListProps> = props => {
  const { displayMode = DisplayModes.Comfortable, novelsPerRow = 3 } =
    useLibrarySettings();

@@ -37,7 +40,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) {
+    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 +65,7 @@ const NovelList: React.FC<
      key={numColumns}
      keyExtractor={keyExtractor}
      {...props}
+      data={extendedNovelList}
    />
  );
 };
@@ -25,7 +25,7 @@ const SwitchSetting: React.FC<SwitchProps> = ({
      paddingHorizontal: 16,
      flexDirection: 'row',
      justifyContent: 'space-between',
-      paddingVertical: description ? 16 : 12,
+      paddingVertical: 12,
    },
    row: {
      flexDirection: 'row',
@@ -39,7 +39,6 @@ const SwitchSetting: React.FC<SwitchProps> = ({
    },
    text: {
      fontSize: 16,
-      flex: 1,
      textAlignVertical: 'center',
    },
    switch: { marginLeft: 8 },
@@ -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 => {
@@ -23,13 +23,19 @@ export const useGithubUpdateChecker = () => {
  };

  const isNewVersion = versionTag => {
-    let currentVersion = `${appVersion}`;
    const regex = /[^\\d.]/;

-    let newVersion = versionTag.replace(regex, '');
-    currentVersion = currentVersion;
+    const currentVersion = appVersion;
+    const newVersion = versionTag.replace(regex, '');

-    return newVersion !== currentVersion;
+    const newSemVer = newVersion.split('.');
+    const oldSemVer = currentVersion.split('.');
+
+    oldSemVer?.map((version, index) => {
+      if (newSemVer[index] > version) {
+        return true;
+      }
+    });
  };

  useEffect(() => {
@@ -85,17 +85,10 @@ const usePosition = (novelId, chapterId) => {
  return position;
 };

-const useTrackingStatus = () => {
-  const tracker = useSelector(state => state.trackerReducer);
-
-  return tracker;
-};
-
 export {
  useSettings,
  usePreferences,
  useContinueReading,
-  useTrackingStatus,
  useNovel,
  useChapter,
  useSavedSettings,
@@ -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), []);
@@ -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]);
@@ -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');
  };
@@ -25,6 +25,7 @@ import SourceNovels from '../screens/browse/SourceNovels';
 import MigrateNovel from '../screens/browse/migration/MigrationNovels';

 import MalTopNovels from '../screens/browse/discover/MalTopNovels';
+import AniListTopNovels from '../screens/browse/discover/AniListTopNovels';
 import NewUpdateDialog from '../components/NewUpdateDialog';
 import BrowseSettings from '../screens/browse/BrowseSettings';
 import { useAppDispatch } from '@redux/hooks';
@@ -67,6 +68,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"
@@ -25,3 +25,6 @@ export const useDownloadQueue = () =>

 export const useSourcesReducer = () =>
  useAppSelector((state: RootState) => state.sourceReducerV2);
+
+export const useTrackerReducer = () =>
+  useAppSelector(state => state.trackerReducer);
@@ -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;
+}
@@ -1,3 +1,4 @@
+import { Dimensions } from 'react-native';
 import { SET_READER_SETTINGS, SET_APP_SETTINGS } from './settings.types';

 /**
@@ -64,12 +65,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',
@@ -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,
  },
 };
@@ -2,4 +2,5 @@ export interface BrowseSettingsMap {
  onlyShowPinnedSources: 'string';
  searchAllSources: 'string';
  showMyAnimeList: 'string';
+  showAniList: 'string';
 }
@@ -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({
@@ -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 },
    });
  };
@@ -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,
@@ -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,13 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
      ) : (
        <NovelList
          data={novelList}
+          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 +173,7 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
              fetchNextPage();
            }
          }}
+          onEndReachedThreshold={1.5}
          ListFooterComponent={
            hasNextPage && !searchText ? (
              <SourceScreenSkeletonLoading theme={theme} />
@@ -194,16 +193,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>
@@ -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}
@@ -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);
@@ -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
            }
@@ -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}
@@ -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: {
@@ -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,
+  },
+});
@@ -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();
@@ -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: {
@@ -100,7 +100,7 @@ const createStyleSheet = (pictureHeight: number, pictureWidth: number) => {
      borderRadius: 4,
    },
    listLoadingContainer: {
-      marginHorizontal: 12,
+      marginHorizontal: 8,
      marginVertical: 8,
      flexDirection: 'row',
      alignItems: 'center',
@@ -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,
    },
  });
 };
@@ -61,17 +61,32 @@ const HistoryCard: React.FC<HistoryCardProps> = ({
      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 }} style={styles.cover} />
+        </Pressable>
        <View style={styles.detailsContainer}>
          <Text
            numberOfLines={2}
@@ -90,22 +105,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 +134,6 @@ const styles = StyleSheet.create({
  novelName: {
    marginBottom: 4,
  },
-  chapterName: {},
  imageAndNameContainer: {
    flex: 1,
    flexDirection: 'row',
@@ -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>
    );
  };

@@ -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,7 +26,7 @@ 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';
@@ -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}
@@ -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([]);
              },
            },
@@ -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,
@@ -49,16 +49,18 @@ import NovelInfoHeader from './components/Info/NovelInfoHeader';
 import NovelBottomSheet from './components/NovelBottomSheet';
 import TrackSheet from './components/Tracker/TrackSheet';
 import { Row } from '../../components/Common';
-import JumpToChapterModal from './components/JumpToChapterModal';
+import JumpToChapterModal from './components/Modal/JumpToChapterModal';
 import { Actionbar } from '../../components/Actionbar/Actionbar';
-import EditInfoModal from './components/EditInfoModal';
+import EditInfoModal from './components/Modal/EditInfoModal';
 import { pickCustomNovelCover } from '../../database/queries/NovelQueries';
-import DownloadCustomChapterModal from './components/DownloadCustomChapterModal';
+import DownloadCustomChapterModal from './components/Modal/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 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 +73,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);
@@ -215,6 +218,7 @@ const Novel = ({ route, navigation }) => {
    }

    return list;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selected]);

  const deleteChapter = chapter =>
@@ -300,13 +304,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}
@@ -360,15 +367,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',
-              }}
-            >
+            <View style={styles.row}>
              <IconButton
                icon="arrow-left"
                iconColor={theme.onBackground}
@@ -537,7 +536,11 @@ const Novel = ({ route, navigation }) => {
                    }
                  />
                </Menu>
-
+                <EpubIconButton
+                  theme={theme}
+                  style={{ marginTop: StatusBar.currentHeight + 8 }}
+                  novel={novel}
+                />
                <Menu
                  visible={extraMenu}
                  onDismiss={() => showExtraMenu(false)}
@@ -546,10 +549,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)}
                    />
                  }
@@ -583,16 +583,12 @@ const Novel = ({ route, navigation }) => {
            <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 +609,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 +620,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}
@@ -668,7 +664,7 @@ const Novel = ({ route, navigation }) => {
          <Actionbar
            active={selected.length > 0}
            theme={theme}
-            style={{ marginBottom: 24 }}
+            style={styles.marginB24}
            actions={actions}
          />
          <Snackbar
@@ -681,7 +677,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 +708,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 +743,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 },
 });
@@ -1,5 +1,6 @@
 import React, { memo, ReactNode, useState } from 'react';
-import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { View, StyleSheet, Pressable } from 'react-native';
+import { Text } from 'react-native-paper';
 import color from 'color';

 import { Row } from '../../../components/Common';
@@ -73,10 +74,10 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
      onLongPress={() => onSelectLongPress?.(chapter)}
      android_ripple={{ color: theme.rippleColor }}
    >
+      {left && <View style={styles.flex}>{left}</View>}
      <Row style={styles.row}>
-        {left}
        {!!bookmark && <ChapterBookmarkButton theme={theme} />}
-        <View>
+        <View style={styles.textContainer}>
          {isUpdateCard && (
            <Text
              style={[
@@ -131,16 +132,18 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
          </View>
        </View>
      </Row>
-      <DownloadButton
-        downloadQueue={downloadQueue}
-        chapter={chapter}
-        theme={theme}
-        deleteChapter={deleteChapter}
-        downloadChapter={downloadChapter}
-        hideDeleteChapterMenu={hideDeleteChapterMenu}
-        showDeleteChapterMenu={showDeleteChapterMenu}
-        deleteChapterMenuVisible={deleteChapterMenuVisible}
-      />
+      <View style={styles.flex}>
+        <DownloadButton
+          downloadQueue={downloadQueue}
+          chapter={chapter}
+          theme={theme}
+          deleteChapter={deleteChapter}
+          downloadChapter={downloadChapter}
+          hideDeleteChapterMenu={hideDeleteChapterMenu}
+          showDeleteChapterMenu={showDeleteChapterMenu}
+          deleteChapterMenuVisible={deleteChapterMenuVisible}
+        />
+      </View>
    </Pressable>
  );
 };
@@ -155,13 +158,28 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
+    columnGab: 8,
  },
  text: {
    fontSize: 12,
  },
  textRow: {
    flexDirection: 'row',
-    marginTop: 5,
  },
-  row: { flex: 1, overflow: 'hidden' },
+  flex: {
+    flexBasis: 'auto',
+    flexShrink: 9,
+  },
+  textContainer: {
+    flex: 1,
+    marginVertical: '10%',
+    height: '80%',
+    justifyContent: 'space-evenly',
+  },
+  row: {
+    flexBasis: 10,
+    flexGrow: 1,
+    overflow: 'hidden',
+    height: '100%',
+  },
 });
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import useBoolean from '@hooks/useBoolean';
+import { IconButton, Portal } from 'react-native-paper';
+import ChooseEpubLocationModal from './Modal/ChooseEpubLocationModal';
+import { StatusBar, StyleProp } from 'react-native';
+import { IconProps } from 'react-native-paper/lib/typescript/src/components/MaterialCommunityIcon';
+import { ThemeColors } from '@theme/types';
+
+import EpubBuilder from '@cd-z/react-native-epub-creator';
+import { ChapterItem, LibraryNovelInfo } from '@database/types';
+import { showToast } from '@hooks/showToast';
+import { getChapterFromDb } from '@database/queries/DownloadQueries';
+import { useReaderSettings } from '@redux/hooks';
+import { useSettings } from '@hooks/reduxHooks';
+
+interface extendedNovelInfo extends LibraryNovelInfo {
+  chapters: ChapterItem[];
+}
+interface EpubIconButtonProps {
+  theme: ThemeColors;
+  style: StyleProp<IconProps>;
+  novel: extendedNovelInfo;
+}
+
+const EpubIconButton: React.FC<EpubIconButtonProps> = ({
+  theme,
+  style,
+  novel,
+}) => {
+  const chooseEpubLocationModal = useBoolean(false);
+  const readerSettings = useReaderSettings();
+  const {
+    epubUseAppTheme = false,
+    epubUseCustomCSS = false,
+    epubUseCustomJS = false,
+  } = useSettings();
+
+  const epubStyle = `${
+    epubUseAppTheme
+      ? `html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+    padding-top: ${StatusBar.currentHeight};
+    word-wrap: break-word;
+  }
+  body {
+    padding-left: ${readerSettings.padding}%;
+    padding-right: ${readerSettings.padding}%;
+    padding-bottom: 40px;
+    font-size: ${readerSettings.textSize}px;
+    color: ${readerSettings.textColor};
+    text-align: ${readerSettings.textAlign};
+    line-height: ${readerSettings.lineHeight};
+    font-family: "${readerSettings.fontFamily}";
+    background-color: "${readerSettings.theme}";
+  }
+  hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  a {
+    color: ${theme.primary};
+  }
+  img {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+  }`
+      : ''
+  }
+  ${
+    epubUseCustomCSS
+      ? readerSettings.customCSS
+          .replace(RegExp(`\#sourceId-${novel.sourceId}\\s*\\{`, 'g'), 'body {')
+          .replace(RegExp(`\#sourceId-${novel.sourceId}[^\.\#A-Z]*`, 'gi'), '')
+      : ''
+  }`;
+
+  const epubJS = `let novelName = "${novel.novelName}";
+    let chapterName = "";
+    let sourceId =${novel.sourceId};
+    let chapterId ="";
+    let novelId =${novel.novelId};
+    let html = document.querySelector("chapter").innerHTML;
+    ${readerSettings.customJS}
+  `;
+
+  const createEpub = async (uri: string) => {
+    var epub = new EpubBuilder(
+      {
+        title: novel.novelName,
+        fileName: novel.novelName.replace(/\s/g, ''),
+        language: 'en',
+        cover: novel.novelCover,
+        description: novel.novelSummary,
+        author: novel.author,
+        bookId: novel.novelId.toString(),
+        stylesheet: epubStyle || undefined,
+        js: epubUseCustomJS ? epubJS : undefined,
+      },
+      uri,
+    );
+    try {
+      // save and create the .epub file
+      await epub.prepare();
+      for (let i = 0; i < novel.chapters.length; i++) {
+        const chapter = novel.chapters[i];
+        if (chapter.downloaded) {
+          const downloaded = await getChapterFromDb(chapter.chapterId);
+
+          await epub.addChapter({
+            title: downloaded.chapterName?.trim() ?? 'Chapter ' + i,
+            fileName: 'Chapter' + i,
+            htmlBody: `<chapter data-novel-id='${chapter.novelId}' data-chapter-id='${chapter.chapterId}'>${downloaded.chapterText}</chapter>`,
+          });
+        }
+      }
+      var epubFilePath = await epub.save();
+      showToast('Epub file saved at: ' + epubFilePath);
+    } catch (error) {
+      showToast('Cannot create because: ' + error);
+      await epub.discardChanges();
+    }
+  };
+  return (
+    <>
+      <IconButton
+        icon="book-arrow-down-outline"
+        iconColor={theme.onBackground}
+        size={21}
+        style={style}
+        onPress={chooseEpubLocationModal.setTrue}
+      />
+      <Portal>
+        <ChooseEpubLocationModal
+          modalVisible={chooseEpubLocationModal.value}
+          hideModal={chooseEpubLocationModal.setFalse}
+          onSubmit={createEpub}
+        />
+      </Portal>
+    </>
+  );
+};
+export default EpubIconButton;
@@ -113,7 +113,7 @@ const NovelInfoHeader = ({
              deleteDownloadsSnackbar.setTrue();
            }
          }}
-          handleTrackerSheet={() => trackerSheetRef.current.expand()}
+          handleTrackerSheet={() => trackerSheetRef.current.present()}
          theme={theme}
        />
        <NovelSummary
@@ -125,7 +125,7 @@ const NovelInfoHeader = ({
        <ReadButton novel={novel} chapters={chapters} lastRead={lastRead} />
        <Pressable
          style={styles.bottomsheet}
-          onPress={() => novelBottomSheetRef.current.expand()}
+          onPress={() => novelBottomSheetRef.current.present()}
          android_ripple={{
            color: color(theme.primary).alpha(0.12).string(),
          }}
@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { getString } from '@strings/translations';
+import { Button } from '@components';
+
+import { Modal, TextInput, Text } from 'react-native-paper';
+import { useTheme } from '@hooks/useTheme';
+import { useSettings } from '@hooks/reduxHooks';
+import { openDocumentTree } from 'react-native-saf-x';
+import SwitchSetting from '@components/Switch/Switch';
+import useBoolean from '@hooks/useBoolean';
+import { useDispatch } from 'react-redux';
+import { setAppSettings } from '@redux/settings/settings.actions';
+
+interface ChooseEpubLocationModalProps {
+  hideModal: () => void;
+  modalVisible: boolean;
+  onSubmit?: (uri: string) => void;
+  dispatchConfig?: boolean;
+}
+
+const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
+  hideModal,
+  modalVisible,
+  onSubmit: onSubmitProp,
+  dispatchConfig,
+}) => {
+  const theme = useTheme();
+  const {
+    epubLocation = '',
+    epubUseAppTheme = false,
+    epubUseCustomCSS = false,
+    epubUseCustomJS = false,
+  } = useSettings();
+  const saveConfig = dispatchConfig || epubLocation === '';
+  const dispatch = useDispatch();
+
+  const [uri, setUri] = useState(epubLocation);
+  const useAppTheme = useBoolean(epubUseAppTheme);
+  const useCustomCSS = useBoolean(epubUseCustomCSS);
+  const useCustomJS = useBoolean(epubUseCustomJS);
+  const [error, setError] = useState('');
+
+  const onDismiss = () => {
+    hideModal();
+    setError('');
+    setUri(epubLocation);
+  };
+
+  const onSubmit = () => {
+    if (saveConfig) {
+      dispatch(setAppSettings('epubLocation', uri));
+      dispatch(setAppSettings('epubUseAppTheme', useAppTheme.value));
+      dispatch(setAppSettings('epubUseCustomCSS', useCustomCSS.value));
+      dispatch(setAppSettings('epubUseCustomJS', useCustomJS.value));
+    }
+    onSubmitProp?.(uri);
+    hideModal();
+  };
+
+  const openFolderPicker = async () => {
+    try {
+      const resultUri = await openDocumentTree(true);
+      if (resultUri) {
+        setUri(resultUri.uri);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <Modal
+      visible={modalVisible}
+      onDismiss={onDismiss}
+      contentContainerStyle={[
+        styles.modalContainer,
+        { backgroundColor: theme.overlay3 },
+      ]}
+    >
+      <View style={styles.modalHeaderCtn}>
+        <Text style={[styles.modalTitle, { color: theme.onSurface }]}>
+          {getString('novelScreen.convertToEpubModal.chooseLocation')}
+        </Text>
+        <View style={styles.row}>
+          <TextInput
+            style={styles.textInput}
+            onChangeText={setUri}
+            value={uri}
+            placeholder={getString(
+              'novelScreen.convertToEpubModal.pathToFolder',
+            )}
+            onSubmitEditing={onSubmit}
+            mode="outlined"
+            theme={{ colors: { ...theme } }}
+            underlineColor={theme.outline}
+            dense
+            error={error ? true : false}
+            right={
+              <TextInput.Icon
+                icon="folder-edit-outline"
+                onPress={openFolderPicker}
+              />
+            }
+          />
+        </View>
+      </View>
+      <View style={styles.settings}>
+        <SwitchSetting
+          label={getString('novelScreen.convertToEpubModal.useReaderTheme')}
+          value={useAppTheme.value}
+          onPress={useAppTheme.toggle}
+          theme={theme}
+        />
+        <SwitchSetting
+          label={getString('novelScreen.convertToEpubModal.useCustomCSS')}
+          value={useCustomCSS.value}
+          onPress={useCustomCSS.toggle}
+          theme={theme}
+        />
+        <SwitchSetting
+          label={getString('novelScreen.convertToEpubModal.useCustomJS')}
+          description={getString(
+            'novelScreen.convertToEpubModal.useCustomJSWarning',
+          )}
+          value={useCustomJS.value}
+          onPress={useCustomJS.toggle}
+          theme={theme}
+        />
+      </View>
+      <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,
+    paddingLeft: 5,
+  },
+  icon: { marginVertical: 0, marginRight: 0 },
+  textInput: { flex: 1 },
+  modalHeaderCtn: {
+    padding: 20,
+    paddingTop: 32,
+    paddingBottom: 0,
+  },
+  modalFooterCtn: {
+    flexDirection: 'row-reverse',
+    paddingHorizontal: 20,
+    paddingTop: 8,
+    paddingBottom: 20,
+  },
+  modalTitle: {
+    fontSize: 24,
+    marginBottom: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { StyleSheet, Text, View, TextInput } from 'react-native';

 import { Button, IconButton, Modal, Portal } from 'react-native-paper';
-import { downloadAllChaptersAction } from '../../../redux/novel/novel.actions';
+import { downloadAllChaptersAction } from '../../../../redux/novel/novel.actions';

 const DownloadCustomChapterModal = ({
  theme,
@@ -10,8 +10,8 @@ import {

 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { Modal, Portal, TextInput } from 'react-native-paper';
-import { setNovel } from '../../../redux/novel/novel.actions';
-import { updateNovelInfo } from '../../../database/queries/NovelQueries';
+import { setNovel } from '../../../../redux/novel/novel.actions';
+import { updateNovelInfo } from '../../../../database/queries/NovelQueries';

 import { getString } from '@strings/translations';
 import { Button } from '@components';
@@ -165,12 +165,7 @@ const ChaptersSettingsSheet = ({
  );

  return (
-    <BottomSheet
-      snapPoints={[240]}
-      bottomSheetRef={bottomSheetRef}
-      height={220}
-      theme={theme}
-    >
+    <BottomSheet snapPoints={[240]} bottomSheetRef={bottomSheetRef}>
      <BottomSheetView
        style={[
          styles.contentContainer,
@@ -32,11 +32,14 @@ const NovelScreenButtonGroup: React.FC<NovelScreenButtonGroupProps> = ({
  const trackerButtonColor = isTracked ? theme.primary : theme.outline;

  const handleOpenWebView = async () => {
-    navigate('WebviewScreen', {
-      sourceId: novel.sourceId,
-      name: novel.source,
-      url: sourceUrl,
-    });
+    navigate(
+      'WebviewScreen' as never,
+      {
+        sourceId: novel.sourceId,
+        name: novel.source,
+        url: sourceUrl,
+      } as never,
+    );
  };

  const handleMigrateNovel = () =>
@@ -130,7 +133,11 @@ const NovelScreenButtonGroup: React.FC<NovelScreenButtonGroupProps> = ({
      <Portal>
        <SetCategoryModal
          novelId={novel.novelId}
-          currentCategoryIds={JSON.parse(novel.categoryIds) as number[]}
+          followed={novel.followed}
+          handleFollowNovel={handleFollowNovel}
+          currentCategoryIds={
+            JSON.parse(novel.categoryIds).slice(1) as number[]
+          }
          closeModal={closeSetCategoryModal}
          visible={setCategoryModalVisible}
        />
@@ -19,6 +19,8 @@ import {

 interface SetCategoryModalProps {
  novelId: number | number[];
+  followed?: number;
+  handleFollowNovel?: () => void;
  visible: boolean;
  currentCategoryIds: number[];
  onEditCategories?: () => void;
@@ -28,6 +30,8 @@ interface SetCategoryModalProps {

 const SetCategoryModal: React.FC<SetCategoryModalProps> = ({
  novelId,
+  followed,
+  handleFollowNovel,
  currentCategoryIds,
  closeModal,
  visible,
@@ -124,6 +128,9 @@ const SetCategoryModal: React.FC<SetCategoryModalProps> = ({
                if (isArray(novelId)) {
                  updateNovelCategoryByIds(novelId, selectedCategories);
                } else {
+                  if (!followed && followed !== undefined) {
+                    handleFollowNovel?.();
+                  }
                  updateNovelCategoryById(novelId, selectedCategories);
                }
                closeModal();
@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  RadioButton,
+  RadioButtonGroup,
+} from '../../../../components/RadioButton';
+import { ScrollView } from 'react-native';
+
+/**
+ * @typedef {Object} ScoreFormatting
+ * @property {number} count The number of score values in this format
+ * @property {(score: number) => string} label A function that converts the score to a label
+ *
+ * @param {"POINT_100" | "POINT_10_DECIMAL" | "POINT_10" | "POINT_5" | "POINT_3"} scoreFormat
+ * @param {boolean?} shorten
+ * @returns {ScoreFormatting}
+ */
+export function getScoreFormatting(scoreFormat, shorten) {
+  switch (scoreFormat) {
+    case 'POINT_100':
+      return {
+        count: 101,
+        label: score => (score ? score.toLocaleString() : '-'),
+      };
+    case 'POINT_10_DECIMAL':
+      return {
+        count: 101,
+        label: score => (score ? (score / 10).toLocaleString() : '-'),
+      };
+    case 'POINT_10':
+      return {
+        count: 11,
+        label: score => (score ? score.toLocaleString() : '-'),
+      };
+    case 'POINT_5':
+      return {
+        count: 6,
+        label: score => {
+          if (shorten) {
+            return score ? `${score}★` : '-';
+          }
+          return '★'.repeat(score) || '-';
+        },
+      };
+    case 'POINT_3':
+      return {
+        count: 4,
+        label: score => {
+          switch (score) {
+            case 0:
+              return '-';
+            case 1:
+              return '☹️';
+            case 2:
+              return '😐';
+            case 3:
+              return '😃';
+          }
+        },
+      };
+  }
+}
+
+export const AniListScoreSelector = ({
+  trackItem,
+  updateTrackScore,
+  auth,
+  theme,
+}) => {
+  const formatting = getScoreFormatting(auth.meta.scoreFormat);
+  return (
+    <ScrollView>
+      <RadioButtonGroup
+        onValueChange={updateTrackScore}
+        value={trackItem.userData.score}
+      >
+        {[...Array(formatting.count).keys()].map((item, index) => (
+          <RadioButton
+            key={index}
+            value={item}
+            label={formatting.label(item)}
+            theme={theme}
+          />
+        ))}
+      </RadioButtonGroup>
+    </ScrollView>
+  );
+};
@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  RadioButton,
+  RadioButtonGroup,
+} from '../../../../components/RadioButton';
+
+export const MyAnimeListScoreSelector = ({
+  trackItem,
+  updateTrackScore,
+  theme,
+}) => {
+  const getScoreLabel = score => {
+    const myanimeListScores = {
+      0: 'No Score',
+      1: 'Apalling',
+      2: 'Horrible',
+      3: 'Very Bad',
+      4: 'Bad',
+      5: 'Average',
+      6: 'Fine',
+      7: 'Good',
+      8: 'Very Good',
+      9: 'Great',
+      10: 'Masterpiece',
+    };
+
+    return `(${score}) ${myanimeListScores[score]}`;
+  };
+
+  return (
+    <RadioButtonGroup
+      onValueChange={updateTrackScore}
+      value={trackItem.userData.score}
+    >
+      {[...Array(11).keys()].map((item, index) => (
+        <RadioButton
+          key={index}
+          value={item}
+          label={getScoreLabel(item)}
+          theme={theme}
+        />
+      ))}
+    </RadioButtonGroup>
+  );
+};
@@ -10,7 +10,7 @@ const SetTrackChaptersDialog = ({
  theme,
 }) => {
  const [trackChapters, setTrackChapters] = useState(
-    trackItem.my_list_status.num_chapters_read,
+    trackItem.userData.progress,
  );

  return (
@@ -1,10 +1,9 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
+import { useSelector } from 'react-redux';
 import { Modal, overlay } from 'react-native-paper';
-import {
-  RadioButton,
-  RadioButtonGroup,
-} from '../../../../components/RadioButton';
+import { MyAnimeListScoreSelector } from './MyAnimeList';
+import { AniListScoreSelector } from './AniList';

 const SetTrackScoreDialog = ({
  trackItem,
@@ -13,23 +12,7 @@ const SetTrackScoreDialog = ({
  updateTrackScore,
  theme,
 }) => {
-  const getScoreLabel = score => {
-    const myanimeListScores = {
-      0: 'No Score',
-      1: 'Apalling',
-      2: 'Horrible',
-      3: 'Very Bad',
-      4: 'Bad',
-      5: 'Average',
-      6: 'Fine',
-      7: 'Good',
-      8: 'Very Good',
-      9: 'Great',
-      10: 'Masterpiece',
-    };
-
-    return `(${score}) ${myanimeListScores[score]}`;
-  };
+  const tracker = useSelector(state => state.trackerReducer.tracker);

  return (
    <Modal
@@ -44,19 +27,20 @@ const SetTrackScoreDialog = ({
      <Text style={[styles.dialogTitle, { color: theme.onSurface }]}>
        Score
      </Text>
-      <RadioButtonGroup
-        onValueChange={updateTrackScore}
-        value={trackItem.my_list_status.score}
-      >
-        {[...Array(11).keys()].map((item, index) => (
-          <RadioButton
-            key={index}
-            value={item}
-            label={getScoreLabel(item)}
-            theme={theme}
-          />
-        ))}
-      </RadioButtonGroup>
+      {tracker.name === 'MyAnimeList' ? (
+        <MyAnimeListScoreSelector
+          theme={theme}
+          trackItem={trackItem}
+          updateTrackScore={updateTrackScore}
+        />
+      ) : (
+        <AniListScoreSelector
+          theme={theme}
+          trackItem={trackItem}
+          auth={tracker.auth}
+          updateTrackScore={updateTrackScore}
+        />
+      )}
    </Modal>
  );
 };
@@ -13,12 +13,14 @@ const SetTrackStatusDialog = ({
  updateTrackStatus,
  theme,
 }) => {
-  const myAnimeListStatus = {
-    reading: 'Reading',
-    completed: 'Completed',
-    on_hold: 'On Hold',
-    dropped: 'Dropped',
-    plan_to_read: 'Plan to read',
+  /** @type {Record<import("../../../../services/Trackers/index").UserListStatus, string>} */
+  const statusTypes = {
+    CURRENT: 'Reading',
+    PLANNING: 'Plan to read',
+    COMPLETED: 'Completed',
+    DROPPED: 'Dropped',
+    PAUSED: 'On Hold',
+    REPEATING: 'Rereading',
  };

  return (
@@ -35,13 +37,13 @@ const SetTrackStatusDialog = ({
      </Text>
      <RadioButtonGroup
        onValueChange={updateTrackStatus}
-        value={trackItem.my_list_status.status}
+        value={trackItem.userData.status}
      >
-        {Object.keys(myAnimeListStatus).map((key, index) => (
+        {Object.keys(statusTypes).map((key, index) => (
          <RadioButton
            key={index}
            value={key}
-            label={myAnimeListStatus[key]}
+            label={statusTypes[key]}
            theme={theme}
          />
        ))}
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, Image, ActivityIndicator } from 'react-native';
 import { Modal, overlay, TextInput, TouchableRipple } from 'react-native-paper';
-import { searchNovels } from '../../../../services/Trackers/myAnimeList';
+import { getTracker } from '../../../../services/Trackers/index';
 import { useSelector, useDispatch } from 'react-redux';
 import { ScrollView } from 'react-native-gesture-handler';
 import { trackNovel } from '../../../../redux/tracker/tracker.actions';
@@ -27,8 +27,10 @@ const TrackSearchDialog = ({
  const dispatch = useDispatch();

  const getSearchresults = async () => {
-    const res = await searchNovels(searchText, tracker.access_token);
-    setSearchResults(res);
+    setLoading(true);
+    const trackerObj = getTracker(tracker.name);
+    const results = await trackerObj.handleSearch(searchText, tracker.auth);
+    setSearchResults(results);
    setLoading(false);
  };

@@ -37,22 +39,25 @@ const TrackSearchDialog = ({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [trackSearchDialog]);

+  /**
+   * @param {import('../../../../services/Trackers').SearchResult} item
+   */
  const renderSearchResultCard = item => (
    <TouchableRipple
      style={[
        { flexDirection: 'row', borderRadius: 4, margin: 8 },
        selectedNovel &&
-          selectedNovel.id === item.node.id && {
+          selectedNovel.id === item.id && {
            backgroundColor: color(theme.primary).alpha(0.12).string(),
          },
      ]}
-      key={item.node.id}
-      onPress={() => setSelectedNovel(item.node)}
+      key={item.id}
+      onPress={() => setSelectedNovel(item)}
      rippleColor={color(theme.primary).alpha(0.12).string()}
      borderless
    >
      <>
-        {selectedNovel && selectedNovel.id === item.node.id && (
+        {selectedNovel && selectedNovel.id === item.id && (
          <MaterialCommunityIcons
            name="check-circle"
            color={theme.primary}
@@ -66,7 +71,7 @@ const TrackSearchDialog = ({
          />
        )}
        <Image
-          source={{ uri: item.node.main_picture.large }}
+          source={{ uri: item.coverImage }}
          style={{ height: 150, width: 100, borderRadius: 4 }}
        />
        <Text
@@ -80,7 +85,7 @@ const TrackSearchDialog = ({
            paddingLeft: 0,
          }}
        >
-          {item.node.title}
+          {item.title}
        </Text>
      </>
    </TouchableRipple>
@@ -125,8 +130,7 @@ const TrackSearchDialog = ({
          />
        ) : (
          searchResults &&
-          searchResults.data &&
-          searchResults.data.map(result => renderSearchResultCard(result))
+          searchResults.map(result => renderSearchResultCard(result))
        )}
      </ScrollView>
      <View
@@ -140,12 +144,14 @@ const TrackSearchDialog = ({
        <View style={{ flexDirection: 'row' }}>
          <Button onPress={() => setTrackSearchDialog(false)}>Cancel</Button>
          <Button
-            onPress={() => {
+            onPress={async () => {
              if (selectedNovel) {
                dispatch(
                  trackNovel(
-                    { ...selectedNovel, novelId },
-                    tracker.access_token,
+                    tracker.name,
+                    novelId,
+                    selectedNovel,
+                    tracker.auth,
                  ),
                );
              }
@@ -3,20 +3,18 @@ import { StyleSheet, View, ToastAndroid } from 'react-native';
 import { overlay, Portal } from 'react-native-paper';
 import BottomSheet from '@components/BottomSheet/BottomSheet';

-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { useTrackerReducer } from '@redux/hooks';
 import { updateTracker } from '../../../../redux/tracker/tracker.actions';

 import TrackSearchDialog from './TrackSearchDialog';
 import SetTrackStatusDialog from './SetTrackStatusDialog';
 import SetTrackScoreDialog from './SetTrackScoreDialog';
 import SetTrackChaptersDialog from './SetTrackChaptersDialog';
-import { AddMalTrackingCard, MalTrackItemCard } from './MyAnimeListCards';
+import { AddTrackingCard, TrackedItemCard } from './TrackerCards';

 const TrackSheet = ({ bottomSheetRef, novelId, novelName, theme }) => {
-  const tracker = useSelector(state => state.trackerReducer.tracker);
-  const trackedNovels = useSelector(
-    state => state.trackerReducer.trackedNovels,
-  );
+  const { tracker, trackedNovels } = useTrackerReducer();
  const dispatch = useDispatch();

  const [trackItem, setTrackItem] = useState();
@@ -30,32 +28,39 @@ const TrackSheet = ({ bottomSheetRef, novelId, novelName, theme }) => {
  const [trackChaptersDialog, setTrackChaptersDialog] = useState(false);
  const [trackScoreDialog, setTrackScoreDialog] = useState(false);

+  /** @type {(status: import("../../../../services/Trackers/index").UserListStatus) => string} */
  const getStatus = status => {
-    const myAnimeListStatus = {
-      reading: 'Reading',
-      completed: 'Completed',
-      on_hold: 'On Hold',
-      dropped: 'Dropped',
-      plan_to_read: 'Plan to read',
-    };
-
-    return myAnimeListStatus[status];
+    switch (status) {
+      case 'CURRENT':
+        return 'Reading';
+      case 'PLANNING':
+        return 'Plan to read';
+      case 'COMPLETED':
+        return 'Completed';
+      case 'DROPPED':
+        return 'Dropped';
+      case 'PAUSED':
+        return 'On Hold';
+      case 'REPEATING':
+        return 'Rereading';
+    }
  };

  const updateTrackChapters = newChapters => {
    if (newChapters !== '') {
+      const newProgress = Number(newChapters);
      setTrackItem({
        ...trackItem,
-        my_list_status: {
-          ...trackItem.my_list_status,
-          num_chapters_read: newChapters,
+        userData: {
+          ...trackItem.userData,
+          progress: newProgress,
        },
      });

      dispatch(
-        updateTracker(trackItem.id, tracker.access_token, {
-          ...trackItem.my_list_status,
-          num_chapters_read: newChapters,
+        updateTracker(tracker.name, trackItem.id, tracker.auth, {
+          ...trackItem.userData,
+          progress: newProgress,
        }),
      );

@@ -68,15 +73,15 @@ const TrackSheet = ({ bottomSheetRef, novelId, novelName, theme }) => {
  const updateTrackStatus = newStatus => {
    setTrackItem({
      ...trackItem,
-      my_list_status: {
-        ...trackItem.my_list_status,
+      userData: {
+        ...trackItem.userData,
        status: newStatus,
      },
    });

    dispatch(
-      updateTracker(trackItem.id, tracker.access_token, {
-        ...trackItem.my_list_status,
+      updateTracker(tracker.name, trackItem.id, trackItem, tracker.auth, {
+        ...trackItem.userData,
        status: newStatus,
      }),
    );
@@ -87,15 +92,15 @@ const TrackSheet = ({ bottomSheetRef, novelId, novelName, theme }) => {
  const updateTrackScore = newScore => {
    setTrackItem({
      ...trackItem,
-      my_list_status: {
-        ...trackItem.my_list_status,
+      userData: {
+        ...trackItem.userData,
        score: newScore,
      },
    });

    dispatch(
-      updateTracker(trackItem.id, tracker.access_token, {
-        ...trackItem.my_list_status,
+      updateTracker(tracker.name, trackItem.id, tracker.auth, {
+        ...trackItem.userData,
        score: newScore,
      }),
    );
@@ -105,12 +110,7 @@ const TrackSheet = ({ bottomSheetRef, novelId, novelName, theme }) => {

  return (
    <>
-      <BottomSheet
-        bottomSheetRef={bottomSheetRef}
-        snapPoints={[130]}
-        height={130}
-        theme={theme}
-      >
+      <BottomSheet bottomSheetRef={bottomSheetRef} snapPoints={[130]}>
        <View
          style={[
            styles.contentContainer,
@@ -118,12 +118,26 @@ const TrackSheet = ({ bottomSheetRef, novelId, novelName, theme }) => {
          ]}
        >
          {!trackItem ? (
-            <AddMalTrackingCard
-              theme={theme}
-              setTrackSearchDialog={setTrackSearchDialog}
-            />
+            tracker.name === 'MyAnimeList' ? (
+              <AddTrackingCard
+                icon={require('../../../../../assets/mal.png')}
+                theme={theme}
+                setTrackSearchDialog={setTrackSearchDialog}
+              />
+            ) : (
+              <AddTrackingCard
+                icon={require('../../../../../assets/anilist.png')}
+                theme={theme}
+                setTrackSearchDialog={setTrackSearchDialog}
+              />
+            )
          ) : (
-            <MalTrackItemCard
+            <TrackedItemCard
+              icon={
+                tracker.name === 'MyAnimeList'
+                  ? require('../../../../../assets/mal.png')
+                  : require('../../../../../assets/anilist.png')
+              }
              trackItem={trackItem}
              setTrackStatusDialog={setTrackStatusDialog}
              setTrackChaptersDialog={setTrackChaptersDialog}
@@ -1,18 +1,16 @@
 import React from 'react';
 import { StyleSheet, View, Text, Image, Pressable } from 'react-native';
 import { TouchableRipple, IconButton } from 'react-native-paper';
-import { useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { untrackNovel } from '../../../../redux/tracker/tracker.actions';
+import { getScoreFormatting } from './AniList';

 import color from 'color';
 import { dividerColor } from '../../../../theme/colors';

-export const AddMalTrackingCard = ({ theme, setTrackSearchDialog }) => (
+export const AddTrackingCard = ({ theme, setTrackSearchDialog, icon }) => (
  <View style={styles.addCardContainer}>
-    <Image
-      source={require('../../../../../assets/mal.png')}
-      style={styles.trackerIcon}
-    />
+    <Image source={icon} style={styles.trackerIcon} />

    <View
      style={{
@@ -44,14 +42,16 @@ export const AddMalTrackingCard = ({ theme, setTrackSearchDialog }) => (
  </View>
 );

-export const MalTrackItemCard = ({
+export const TrackedItemCard = ({
  trackItem,
  setTrackStatusDialog,
  setTrackChaptersDialog,
  setTrackScoreDialog,
  getStatus,
  theme,
+  icon,
 }) => {
+  const tracker = useSelector(state => state.trackerReducer.tracker);
  const dispatch = useDispatch();

  return (
@@ -59,10 +59,7 @@ export const MalTrackItemCard = ({
      <View
        style={[styles.titleContainer, { borderBottomColor: theme.outline }]}
      >
-        <Image
-          source={require('../../../../../assets/mal.png')}
-          style={styles.trackerIcon}
-        />
+        <Image source={icon} style={styles.trackerIcon} />
        <View style={styles.listItemContainer}>
          <Text style={[styles.listItem, { color: theme.onSurfaceVariant }]}>
            {trackItem.title}
@@ -83,7 +80,7 @@ export const MalTrackItemCard = ({
          rippleColor={color(theme.primary).alpha(0.12).string()}
        >
          <Text style={[styles.listItem, { color: theme.onSurfaceVariant }]}>
-            {getStatus(trackItem.my_list_status.status)}
+            {getStatus(trackItem.userData.status)}
          </Text>
        </TouchableRipple>
        <TouchableRipple
@@ -93,8 +90,8 @@ export const MalTrackItemCard = ({
          rippleColor={color(theme.primary).alpha(0.12).string()}
        >
          <Text style={[styles.listItem, { color: theme.onSurfaceVariant }]}>
-            {`${trackItem.my_list_status.num_chapters_read}/${
-              trackItem.num_chapters !== 0 ? trackItem.num_chapters : '-'
+            {`${trackItem.userData.progress}/${
+              trackItem.totalChapters ? trackItem.totalChapters : '-'
            }`}
          </Text>
        </TouchableRipple>
@@ -105,9 +102,13 @@ export const MalTrackItemCard = ({
          rippleColor={color(theme.primary).alpha(0.12).string()}
        >
          <Text style={[styles.listItem, { color: theme.onSurfaceVariant }]}>
-            {trackItem.my_list_status.score === 0
+            {tracker.name === 'AniList'
+              ? getScoreFormatting(tracker.auth.meta.scoreFormat, true).label(
+                  trackItem.userData.score,
+                )
+              : trackItem.userData.score === 0
              ? '-'
-              : trackItem.my_list_status.score}
+              : trackItem.userData.score}
          </Text>
        </TouchableRipple>
      </View>
@@ -4,7 +4,6 @@ import { Dimensions, NativeModules, NativeEventEmitter } from 'react-native';
 import VolumeButtonListener from './../../utils/volumeButtonListener';

 import { useDispatch } from 'react-redux';
-import { Portal } from 'react-native-paper';
 import { useKeepAwake } from 'expo-keep-awake';

 import {
@@ -13,11 +12,9 @@ import {
 } from '../../database/queries/ChapterQueries';
 import { fetchChapter } from '../../services/Source/source';
 import { showToast } from '../../hooks/showToast';
-import {
-  usePosition,
-  useSettings,
-  useTrackingStatus,
-} from '../../hooks/reduxHooks';
+import { usePosition, useSettings } from '../../hooks/reduxHooks';
+import { useTrackerReducer } from '@redux/hooks';
+
 import { useTheme } from '@hooks/useTheme';
 import { updateChaptersRead } from '../../redux/tracker/tracker.actions';
 import { markChapterReadAction } from '../../redux/novel/novel.actions';
@@ -35,7 +32,6 @@ import { useTextToSpeech } from '../../hooks/useTextToSpeech';
 import { useFullscreenMode, useLibrarySettings } from '../../hooks';
 import { getChapterFromDb } from '../../database/queries/DownloadQueries';
 import ReaderBottomSheetV2 from './components/ReaderBottomSheet/ReaderBottomSheet';
-import { useReaderSettings } from '../../redux/hooks';
 import { defaultTo } from 'lodash-es';
 import BottomInfoBar from './components/BottomInfoBar/BottomInfoBar';
 import { sanitizeChapterText } from './utils/sanitizeChapterText';
@@ -80,17 +76,17 @@ const ChapterContent = ({ route, navigation }) => {

  const theme = useTheme();
  const dispatch = useDispatch();
-  const readerSettings = useReaderSettings();
-  const { theme: backgroundColor } = readerSettings;

  const {
    swipeGestures = false,
    useVolumeButtons = false,
    autoScroll = false,
    autoScrollInterval = 10,
+    scrollAmount = Dimensions.get('window').height,
    autoScrollOffset = null,
    verticalSeekbar = true,
    removeExtraParagraphSpacing = false,
+    bionicReading = false,
  } = useSettings();
  const { incognitoMode } = useLibrarySettings();

@@ -101,7 +97,7 @@ const ChapterContent = ({ route, navigation }) => {
  const position = usePosition(novelId, chapterId);
  const minScroll = useRef(0);

-  const { tracker, trackedNovels } = useTrackingStatus();
+  const { tracker, trackedNovels } = useTrackerReducer();
  const isTracked = trackedNovels.find(obj => obj.novelId === novelId);

  const [chapter, setChapter] = useState({});
@@ -117,16 +113,19 @@ const ChapterContent = ({ route, navigation }) => {
    VolumeButtonListener.preventDefault();
    emmiter.current.addListener('VolumeUp', e => {
      webViewRef.current?.injectJavaScript(`(()=>{
-          window.scrollBy({top:${-Dimensions.get('window')
-            .height},behavior:'smooth',})
-        })()`);
+            window.scrollBy({top:${-defaultTo(
+              scrollAmount,
+              Dimensions.get('window').height,
+            )},behavior:'smooth',})
+          })()`);
    });
    emmiter.current.addListener('VolumeDown', e => {
      webViewRef.current?.injectJavaScript(`(()=>{
-          window.scrollBy({top:${
-            Dimensions.get('window').height
-          },behavior:'smooth',})
-        })()`);
+            window.scrollBy({top:${defaultTo(
+              scrollAmount,
+              Dimensions.get('window').height,
+            )},behavior:'smooth',})
+          })()`);
    });
  };

@@ -142,13 +141,17 @@ const ChapterContent = ({ route, navigation }) => {
    return () => {
      VolumeButtonListener.disconnect();
      emmiter.current.removeAllListeners('VolumeUp');
+      // eslint-disable-next-line react-hooks/exhaustive-deps
      emmiter.current.removeAllListeners('VolumeDown');
    };
-  }, [useVolumeButtons, chapter]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [useVolumeButtons, scrollAmount]);

-  const onLayout = useCallback(e => {
-    setTimeout(() => connectVolumeButton());
-  }, []);
+  const onLayout = useCallback(() => {
+    if (useVolumeButtons) {
+      setTimeout(() => connectVolumeButton());
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [useVolumeButtons]);

  const getChapter = async id => {
    try {
@@ -156,7 +159,7 @@ const ChapterContent = ({ route, navigation }) => {
      if (!(id && (result = await getChapterFromDb(id)))) {
        result = await fetchChapter(sourceId, novelUrl, chapterUrl);
      }
-      setChapter(result);
+      setChapter({ ...result, bookmark });
    } catch (e) {
      setError(e.message);
      showToast(e.message);
@@ -175,6 +178,7 @@ const ChapterContent = ({ route, navigation }) => {
        payload: { novelId, chapterId },
      });
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const [[nextChapter, prevChapter], setAdjacentChapter] = useState([]);
@@ -188,6 +192,7 @@ const ChapterContent = ({ route, navigation }) => {
      setAdjacentChapter([nextChap, prevChap]);
    };
    setPrevAndNextChap();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [chapter]);

  const [ttsStatus, startTts] = useTextToSpeech(
@@ -202,9 +207,11 @@ const ChapterContent = ({ route, navigation }) => {

  const scrollTo = useCallback(
    offsetY => {
-      webViewRef?.current.injectJavaScript(`(()=>{
-        window.scrollTo({top:${offsetY},behavior:'smooth',})
-      })()`);
+      requestAnimationFrame(() => {
+        webViewRef?.current?.injectJavaScript(`(()=>{
+          window.scrollTo({top:${offsetY},behavior:'smooth'})
+        })()`);
+      });
    },
    [webViewRef],
  );
@@ -212,6 +219,7 @@ const ChapterContent = ({ route, navigation }) => {
  let scrollInterval;
  useEffect(() => {
    if (autoScroll) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
      scrollInterval = setInterval(() => {
        webViewRef.current?.injectJavaScript(`(()=>{
          window.scrollBy({top:${defaultTo(
@@ -228,14 +236,18 @@ const ChapterContent = ({ route, navigation }) => {
  }, [autoScroll, webViewRef]);

  const updateTracker = () => {
-    const chapterNumber = parseChapterNumber(chapterName);
-
+    const chapterNumber = Number(parseChapterNumber(chapterName));
    isTracked &&
      chapterNumber &&
      Number.isInteger(chapterNumber) &&
-      chapterNumber > isTracked.my_list_status.num_chapters_read &&
+      chapterNumber > isTracked.userData.progress &&
      dispatch(
-        updateChaptersRead(isTracked.id, tracker.access_token, chapterNumber),
+        updateChaptersRead(
+          tracker.name,
+          isTracked.id,
+          tracker.auth,
+          chapterNumber,
+        ),
      );
  };

@@ -251,59 +263,66 @@ const ChapterContent = ({ route, navigation }) => {
        updateTracker();
      }
    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
    [chapter],
  );

-  const hideHeader = () => {
+  const hideHeader = useCallback(() => {
    if (!hidden) {
      setImmersiveMode();
    } else {
      showStatusAndNavBar();
    }
    setHidden(!hidden);
-  };
+  }, [hidden]);

-  const navigateToChapterBySwipe = name => {
-    let navChapter;
-    if (name === 'SWIPE_LEFT') {
-      navChapter = nextChapter;
-    } else if (name === 'SWIPE_RIGHT') {
-      navChapter = prevChapter;
-    } else {
-      return;
-    }
-    // you can add more condition for friendly usage. for example: if(name === "SWIPE_LEFT" || name === "right")
-    navChapter
-      ? navigation.replace('Chapter', {
-          ...params,
-          chapterUrl: navChapter.chapterUrl,
-          chapterId: navChapter.chapterId,
-          chapterName: navChapter.chapterName,
-          bookmark: navChapter.bookmark,
-        })
-      : showToast(
-          name === 'SWIPE_LEFT'
-            ? "There's no next chapter"
-            : "There's no previous chapter",
-        );
-  };
+  const navigateToChapterBySwipe = useCallback(
+    name => {
+      let navChapter;
+      if (name === 'SWIPE_LEFT') {
+        navChapter = nextChapter;
+      } else if (name === 'SWIPE_RIGHT') {
+        navChapter = prevChapter;
+      } else {
+        return;
+      }
+      // you can add more condition for friendly usage. for example: if(name === "SWIPE_LEFT" || name === "right")
+      navChapter
+        ? navigation.replace('Chapter', {
+            ...params,
+            chapterUrl: navChapter.chapterUrl,
+            chapterId: navChapter.chapterId,
+            chapterName: navChapter.chapterName,
+            bookmark: navChapter.bookmark,
+          })
+        : showToast(
+            name === 'SWIPE_LEFT'
+              ? "There's no next chapter"
+              : "There's no previous chapter",
+          );
+    },
+    [nextChapter, prevChapter],
+  );

-  const onWebViewNavigationStateChange = async ({ url }) => {
+  const onWebViewNavigationStateChange = useCallback(async ({ url }) => {
    if ((sourceId === 50 || sourceId === 62) && url !== 'about:blank') {
      setLoading(true);
      const res = await fetchChapter(sourceId, novelUrl, url);
      setChapter(res);
      setLoading(false);
    }
-  };
+  }, []);
+
+  const scrollToSavedProgress = () => scrollTo(position?.position);

  const chapterText = sanitizeChapterText(chapter.chapterText, {
    removeExtraParagraphSpacing,
+    bionicReading,
    sourceId: sourceId,
  });
  const openDrawer = () => {
    navigation.openDrawer();
-    setHidden(true);
+    hideHeader();
  };

  if (loading) {
@@ -314,6 +333,9 @@ const ChapterContent = ({ route, navigation }) => {
    return <ErrorScreenV2 error={error} />;
  }

+  const bookmarkChapter = () =>
+    setChapter(prevVal => ({ ...prevVal, bookmark: !prevVal?.bookmark }));
+
  return (
    <>
      <WebViewReader
@@ -324,10 +346,8 @@ const ChapterContent = ({ route, navigation }) => {
        minScroll={minScroll}
        nextChapter={nextChapter}
        webViewRef={webViewRef}
-        onLayout={() => {
-          useVolumeButtons && onLayout();
-          scrollTo(position?.position);
-        }}
+        onLayout={onLayout}
+        scrollToSavedProgress={scrollToSavedProgress}
        onPress={hideHeader}
        doSaveProgress={doSaveProgress}
        navigateToChapterBySwipe={navigateToChapterBySwipe}
@@ -338,13 +358,12 @@ const ChapterContent = ({ route, navigation }) => {
          position?.percentage || Math.round(minScroll.current) || 0
        }
      />
-      <Portal>
-        <ReaderBottomSheetV2 bottomSheetRef={readerSheetRef} />
-      </Portal>
+      <ReaderBottomSheetV2 bottomSheetRef={readerSheetRef} />
      {!hidden && (
        <>
          <ReaderAppbar
-            bookmark={bookmark}
+            bookmark={chapter.bookmark}
+            bookmarkChapter={bookmarkChapter}
            novelName={novelName}
            chapterId={chapterId}
            chapterName={chapterName || chapter.chapterName}
@@ -1,11 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
-import { Text } from 'react-native-paper';
+import { Text, Tooltip } from 'react-native-paper';
 import color from 'color';
 import { useTheme } from '@hooks/useTheme';
 import { FlashList } from '@shopify/flash-list';
 import { Button, LoadingScreenV2 } from '@components/index';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getString } from '@strings/translations';
 import { useNovel, useSettings, usePreferences } from '@hooks/reduxHooks';
 import { useDispatch } from 'react-redux';
@@ -13,8 +12,7 @@ import { setNovel, getNovelAction } from '@redux/novel/novel.actions';

 const ChapterDrawer = ({ state: st, navigation }) => {
  const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  const styles = createStylesheet(theme, insets);
+  const styles = createStylesheet(theme);
  let listRef = useRef();

  const dispatch = useDispatch();
@@ -57,8 +55,8 @@ const ChapterDrawer = ({ state: st, navigation }) => {
    });
    let res;
    res = indexOfCurrentChapter >= 2 ? indexOfCurrentChapter - 2 : 0;
-    listRef.current?.scrollToIndex?.(res);
    return res;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [chapters, currentChapterId, listAscending]);
  const [buttonProperties, setButtonProperties] = useState({
    up: {
@@ -87,27 +85,29 @@ const ChapterDrawer = ({ state: st, navigation }) => {
    });
  };
  const renderItem = ({ item }) => (
-    <View
-      style={[
-        styles.drawerElementContainer,
-        item.chapterId === currentChapterId && {
-          backgroundColor: color(theme.primary).alpha(0.12).string(),
-        },
-      ]}
-    >
-      <Pressable
-        android_ripple={{ color: theme.rippleColor }}
-        onPress={() => changeChapter(item)}
-        style={styles.chapterCtn}
+    <Tooltip title={item.chapterName} leaveTouchDelay={1000}>
+      <View
+        style={[
+          styles.drawerElementContainer,
+          item.chapterId === currentChapterId && {
+            backgroundColor: color(theme.primary).alpha(0.12).string(),
+          },
+        ]}
      >
-        <Text numberOfLines={1} style={styles.chapterNameCtn}>
-          {item.chapterName}
-        </Text>
-        {item?.releaseDate ? (
-          <Text style={styles.releaseDateCtn}>{item.releaseDate}</Text>
-        ) : null}
-      </Pressable>
-    </View>
+        <Pressable
+          android_ripple={{ color: theme.rippleColor }}
+          onPress={() => changeChapter(item)}
+          style={styles.chapterCtn}
+        >
+          <Text numberOfLines={1} style={styles.chapterNameCtn}>
+            {item.chapterName}
+          </Text>
+          {item?.releaseDate ? (
+            <Text style={styles.releaseDateCtn}>{item.releaseDate}</Text>
+          ) : null}
+        </Pressable>
+      </View>
+    </Tooltip>
  );

  const ListFooter = () => {
@@ -201,7 +201,7 @@ const ChapterDrawer = ({ state: st, navigation }) => {
  );
 };

-const createStylesheet = (theme, insets) => {
+const createStylesheet = theme => {
  return StyleSheet.create({
    drawer: {
      flex: 1,
@@ -248,7 +248,7 @@ const createStylesheet = (theme, insets) => {
    footer: {
      marginTop: 4,
      paddingTop: 8,
-      paddingBottom: insets.bottom,
+      paddingBottom: 30,
      borderTopWidth: 1,
      borderTopColor: theme.outline,
    },
@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useState } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import color from 'color';

@@ -17,10 +17,10 @@ const ReaderAppbar = ({
  tts,
  textToSpeech,
  theme,
+  bookmarkChapter,
 }) => {
  const dispatch = useAppDispatch();
  const { goBack } = useNavigation();
-  const [bookmarked, setBookmarked] = useState(bookmark);

  return (
    <Animated.View
@@ -66,11 +66,11 @@ const ReaderAppbar = ({
          />

          <IconButtonV2
-            name={bookmarked ? 'bookmark' : 'bookmark-outline'}
+            name={bookmark ? 'bookmark' : 'bookmark-outline'}
            size={24}
            onPress={() => {
              dispatch(bookmarkChapterAction([{ bookmark, chapterId }]));
-              setBookmarked(!bookmarked);
+              bookmarkChapter();
            }}
            iconColor={theme.onSurface}
            theme={theme}
@@ -1,11 +1,16 @@
-import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  TextInput,
+} from 'react-native';
 import React, { Ref, useMemo, useState } from 'react';
 import color from 'color';

-import {
-  default as BottomSheetType,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+import { BottomSheetView, BottomSheetModal } from '@gorhom/bottom-sheet';
+
+import { defaultTo } from 'lodash-es';
 import BottomSheet from '@components/BottomSheet/BottomSheet';
 import { useAppDispatch, useSettingsV1 } from '../../../../redux/hooks';
 import { useTheme } from '@hooks/useTheme';
@@ -43,8 +48,11 @@ const GeneralTab: React.FC = () => {
    showBatteryAndTime,
    showScrollPercentage,
    useVolumeButtons = false,
+    scrollAmount = 200,
    swipeGestures = false,
    removeExtraParagraphSpacing = false,
+    addChapterNameInReader = false,
+    bionicReading = false,
  } = useSettingsV1();

  return (
@@ -118,12 +126,46 @@ const GeneralTab: React.FC = () => {
        value={useVolumeButtons}
        theme={theme}
      />
+      {useVolumeButtons ? (
+        <View style={styles.textFieldContainer}>
+          <Text style={[styles.paddingRightM]} numberOfLines={2}>
+            {getString('readerScreen.bottomSheet.scrollAmount')}
+          </Text>
+          <TextInput
+            style={styles.textField}
+            defaultValue={defaultTo(scrollAmount, 200).toString()}
+            keyboardType="numeric"
+            onChangeText={text => {
+              if (text) {
+                dispatch(setAppSettings('scrollAmount', Number(text)));
+              }
+            }}
+          />
+        </View>
+      ) : null}
+      <ReaderSheetPreferenceItem
+        label={'Add chapter name in reader'}
+        onPress={() =>
+          dispatch(
+            setAppSettings('addChapterNameInReader', !addChapterNameInReader),
+          )
+        }
+        value={addChapterNameInReader}
+        theme={theme}
+      />
+      <ReaderSheetPreferenceItem
+        label={getString('readerScreen.bottomSheet.bionicReading')}
+        onPress={() =>
+          dispatch(setAppSettings('bionicReading', !bionicReading))
+        }
+        value={bionicReading}
+        theme={theme}
+      />
    </View>
  );
 };
-
 interface ReaderBottomSheetV2Props {
-  bottomSheetRef: Ref<BottomSheetType> | null;
+  bottomSheetRef: Ref<BottomSheetModal> | null;
 }

 const ReaderBottomSheetV2: React.FC<ReaderBottomSheetV2Props> = ({
@@ -178,12 +220,7 @@ const ReaderBottomSheetV2: React.FC<ReaderBottomSheetV2Props> = ({
  );

  return (
-    <BottomSheet
-      bottomSheetRef={bottomSheetRef}
-      snapPoints={[360, 560]}
-      height={560}
-      theme={theme}
-    >
+    <BottomSheet bottomSheetRef={bottomSheetRef} snapPoints={[360, 600]}>
      <BottomSheetView
        style={[styles.bottomSheetContainer, { backgroundColor }]}
      >
@@ -218,4 +255,23 @@ const styles = StyleSheet.create({
  readerTab: {
    paddingVertical: 8,
  },
+  textFieldContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  textField: {
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    width: 100,
+    textAlign: 'right',
+  },
+  paddingRightM: {
+    flex: 1,
+    paddingRight: 16,
+  },
 });
@@ -1,71 +1,31 @@
-import { StyleSheet, Text, TextStyle, View } from 'react-native';
+import { TextStyle } from 'react-native';
 import React from 'react';

 import { useAppDispatch, useReaderSettings } from '../../../../redux/hooks';
-import { useTheme } from '@hooks/useTheme';
-import { IconButtonV2 } from '../../../../components';
 import { setReaderSettings } from '../../../../redux/settings/settings.actions';
 import { getString } from '../../../../../strings/translations';
+import Counter from '@components/Counter/Counter';

 interface ReaderLineHeightProps {
  labelStyle?: TextStyle | TextStyle[];
 }

 const ReaderLineHeight: React.FC<ReaderLineHeightProps> = ({ labelStyle }) => {
-  const theme = useTheme();
  const dispatch = useAppDispatch();

  const { lineHeight } = useReaderSettings();
-
  return (
-    <View style={styles.container}>
-      <Text style={[{ color: theme.onSurfaceVariant }, labelStyle]}>
-        {getString('readerScreen.bottomSheet.lineHeight')}
-      </Text>
-      <View style={styles.buttonContainer}>
-        <IconButtonV2
-          name="minus"
-          color={theme.primary}
-          size={26}
-          disabled={lineHeight <= 1.3}
-          onPress={() =>
-            dispatch(setReaderSettings('lineHeight', lineHeight - 0.1))
-          }
-          theme={theme}
-        />
-        <Text style={[styles.value, { color: theme.onSurface }]}>
-          {`${Math.round(lineHeight * 10) / 10}%`}
-        </Text>
-        <IconButtonV2
-          name="plus"
-          color={theme.primary}
-          size={26}
-          disabled={lineHeight >= 2}
-          onPress={() =>
-            dispatch(setReaderSettings('lineHeight', lineHeight + 0.1))
-          }
-          theme={theme}
-        />
-      </View>
-    </View>
+    <Counter
+      labelStyle={labelStyle}
+      label={getString('readerScreen.bottomSheet.lineHeight')}
+      value={lineHeight}
+      displayValue={`${Math.round(lineHeight * 10) / 10}%`}
+      onChange={val => dispatch(setReaderSettings('lineHeight', val))}
+      step={0.1}
+      minimumValue={1.3}
+      maximumValue={2}
+    />
  );
 };

 export default ReaderLineHeight;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    marginVertical: 6,
-  },
-  value: {
-    paddingHorizontal: 24,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
--- a/Show More
+++ b/Show More