chore: Update translations (#569 )

* 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 (Vietnamese) [ci skip] * New translations strings.json (Portuguese, Brazilian) [ci skip] * New translations strings.json (German) [ci skip] * New translations strings.json (German) [ci skip] * New translations strings.json (Italian) [ci skip] * New translations strings.json (Russian) [ci skip] * New translations strings.json (Russian) [ci skip]
feat: extending Volume button feature, by scroll amount (#587 )
2023-04-06 21:54:50 +05:30 · 2023-04-06 20:42:36 +05:30 · 2023-03-30 13:19:00 +05:30 · 2023-03-11 11:52:16 +05:30 · 2023-03-05 12:08:28 +05:30 · 2023-03-05 11:56:02 +05:30
396 changed files with 23391 additions and 14260 deletions
@@ -45,7 +45,7 @@ body:
      label: LNReader version
      description: You can find your LNReader version in **More → About**.
      placeholder: |
-        Example: "1.1.12"
+        Example: "1.1.14"
    validations:
      required: true

@@ -86,9 +86,9 @@ body:
          required: true
        - label: I have written a short but informative title.
          required: true
-        - label: If this is an issue with an source, I should be opening an issue in the [sources repository](https://github.com/lnreader/lnreader-sources/issues/new/choose).
+        - 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.12](https://github.com/lnreader/lnreader/releases/latest)**.
+        - label: I have updated the app to version **[1.1.14](https://github.com/lnreader/lnreader/releases/latest)**.
          required: true
        - label: I will fill out all of the requested information in this form.
          required: true
@@ -34,7 +34,7 @@ body:
          required: true
        - label: If this is an issue with a source, I should be opening an issue in the [sources repository](https://github.com/LNReader/lnreader-sources/issues/new/choose).
          required: true
-        - label: I have updated the app to version **[1.1.12](https://github.com/LNReader/lnreader/releases/latest)**.
+        - label: I have updated the app to version **[1.1.14](https://github.com/LNReader/lnreader/releases/latest)**.
          required: true
        - label: I will fill out all of the requested information in this form.
          required: true
@@ -8,19 +8,22 @@ jobs:
    name: Build App
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
      - name: Install Dependencies
        run: |
          npm install --legacy-peer-deps

      - name: Cache Gradle Wrapper
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: ~/.gradle/wrapper
          key: ${{ runner.os }}-gradle-wrapper-${{ hashFiles('gradle/wrapper/gradle-wrapper.properties') }}

      - name: Cache Gradle Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: ~/.gradle/caches
          key: ${{ runner.os }}-gradle-caches-${{ hashFiles('gradle/wrapper/gradle-wrapper.properties') }}
@@ -33,3 +36,14 @@ jobs:
      - name: Build Android Release
        run: |
          cd android && ./gradlew assembleRelease --no-daemon
+
+      - name: Set Env
+        run: |
+          set -x
+          echo "COMMIT_COUNT=$(git rev-list --count HEAD)" >> $GITHUB_ENV
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v1
+        with:
+          name: LNReader-r${{ env.COMMIT_COUNT }}
+          path: android/app/build/outputs/apk/release/app-release.apk
@@ -1,38 +1,55 @@
+import 'react-native-gesture-handler';
 import { enableFreeze } from 'react-native-screens';

 enableFreeze(true);

 import React, { useEffect } from 'react';
 import { StatusBar } from 'react-native';
-
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import LottieSplashScreen from 'react-native-lottie-splash-screen';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Provider as PaperProvider } from 'react-native-paper';
 import { Provider } from 'react-redux';
-import { persistor, store } from './src/redux/store';
 import { PersistGate } from 'redux-persist/lib/integration/react';
-import * as SplashScreen from 'expo-splash-screen';
+import * as Notifications from 'expo-notifications';
+
+import { createDatabase } from '@database/db';
+import { persistor, store } from '@redux/store';
+import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';

 import Main from './src/navigators/Main';

-import { createDatabase } from './src/database/db';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+Notifications.setNotificationHandler({
+  handleNotification: async () => {
+    return {
+      shouldShowAlert: true,
+      shouldPlaySound: true,
+      shouldSetBadge: true,
+    };
+  },
+});

 const App = () => {
  useEffect(() => {
-    SplashScreen.preventAutoHideAsync();
+    LottieSplashScreen.hide();
    createDatabase();
  }, []);

  return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <SafeAreaProvider>
-          <PaperProvider>
-            <StatusBar translucent={true} backgroundColor="transparent" />
-            <Main />
-          </PaperProvider>
-        </SafeAreaProvider>
-      </PersistGate>
-    </Provider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <AppErrorBoundary>
+        <Provider store={store}>
+          <PersistGate loading={null} persistor={persistor}>
+            <SafeAreaProvider>
+              <PaperProvider>
+                <StatusBar translucent={true} backgroundColor="transparent" />
+                <Main />
+              </PaperProvider>
+            </SafeAreaProvider>
+          </PersistGate>
+        </Provider>
+      </AppErrorBoundary>
+    </GestureHandlerRootView>
  );
 };

@@ -7,6 +7,11 @@ Contributions are welcome and are greatly appreciated!
 After forking to your own github org or account, do the following steps to get started:

 ```bash
+# prerequisites
+node --version <= 16.13.1   (for version management, get nvm [recommended])
+java sdk --version <= 11    (for version management, get jenv [optional])
+android sdk                 (https://developer.android.com/studio)
+
 # clone your fork to your local machine
 git clone https://github.com/<your-account-name>/lnreader.git

@@ -14,20 +19,34 @@ git clone https://github.com/<your-account-name>/lnreader.git
 cd lnreader

 # install dependencies
-npm install
+npm install --legacy-peer-deps

-# run metro for development
-npm start
+# build the apk (the built apk will be found in ~/lnreader/android/app/build/outputs/apk/release/)
+npm run buildRelease
 ```

 ### Developing on Android

-While the packager is running and you have an Android device or emulator connected to your computer, build and launch the Android app.
+You will need an Android device or emulator connected to your computer as well as an IDE of your choice. (eg: vscode)

-```
+```bash
+# prerequisites
+adb                         (https://developer.android.com/studio/command-line/adb)
+IDE
+
+# check if android device/emulator is connected
+adb devices
+
+# run metro for development
+npm start
+
+# then to view on your android device (new terminal)
 npm run android
 ```

+To view any changes to the app with new code, save your code and press "r" on the metro terminal to
+reload it. The app on the android device/emulator will reload shortly.
+
 ### Style & Linting

 This codebase's linting rules are enforced using [ESLint](http://eslint.org/).
@@ -9,7 +9,7 @@
 </p>
 <div align="center">
  <a href="https://github.com/LNReader/lnreader/actions/workflows/build.yml">
-    <img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/LNReader/lnreader/CI">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/LNReader/lnreader/build.yml?branch=main">
  </a>
  <a href="https://discord.gg/QdcWN4MD63">
    <img alt="Discord Chat" src="https://img.shields.io/discord/835746409357246465.svg?logo=discord&logoColor=white&logoWidth=20&labelColor=7289DA&label=Discord&color=17cf48">
@@ -43,6 +43,10 @@ LNReader does not have any affiliation with the content providers available.

 Source requests should be created at [LNReader/lnreader-sources](https://github.com/LNReader/lnreader-sources).

+## Building & Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md)
+
 ## License

-[MIT ](https://github.com/rajarsheechatterjee/lnreader/blob/main/LICENSE)
+[MIT](https://github.com/rajarsheechatterjee/lnreader/blob/main/LICENSE)
@@ -122,6 +122,12 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 */
 def enableHermes = project.ext.react.get("enableHermes", false);

+ext {
+    versionMajor = 1
+    versionMinor = 1
+    versionPatch = 14
+}
+
 android {
    compileSdkVersion rootProject.ext.compileSdkVersion

@@ -134,8 +140,9 @@ android {
        applicationId 'com.rajarsheechatterjee.LNReader'
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.1.12"
+        // Generated version code. Supports versions up to 1024.1024.2048
+        versionCode ((((versionMajor << 10) | versionMinor) << 11) | versionPatch)
+        versionName "$versionMajor.$versionMinor.$versionPatch"
    }
    splits {
        abi {
@@ -187,7 +194,7 @@ dependencies {
    //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 'com.github.bumptech.glide:glide:4.12.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
    
@@ -8,6 +8,8 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html

 # Add any project specific keep options here:
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
 -keep class com.facebook.hermes.unicode.** { *; }
 -keep class com.facebook.jni.** { *; }
 -keep public class com.dylanvann.fastimage.* {*;}
@@ -1,26 +1,26 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
-  	package="com.rajarsheechatterjee.LNReader">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="com.rajarsheechatterjee.LNReader">

 	<!-- Internet -->
-  	<uses-permission android:name="android.permission.INTERNET"/>
-  	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+	<uses-permission android:name="android.permission.INTERNET" />
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 	<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />

 	<!-- Storage -->
-  	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

 	<!-- For background jobs -->
-  	<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
-    <uses-permission android:name="android.permission.WAKE_LOCK"/>
+	<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+	<uses-permission android:name="android.permission.WAKE_LOCK" />


-  	<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-  	<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
-  	<uses-permission android:name="android.permission.VIBRATE"/>
-  	<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
-  	<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
-  	<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
+	<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
+	<uses-permission android:name="android.permission.READ_PHONE_STATE" />
+	<uses-permission android:name="android.permission.VIBRATE" />
+	<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+	<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
+	<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />

 	<queries>
 		<intent>
@@ -28,24 +28,23 @@
 		</intent>
 	</queries>

-  	<application 
-	  	android:name=".MainApplication"
+	<application
+		android:name=".MainApplication"
 		android:largeHeap="true"
 		android:label="@string/app_name"
 		android:icon="@mipmap/ic_launcher"
-		android:roundIcon="@mipmap/ic_launcher_round"
 		android:allowBackup="true"
 		android:theme="@style/AppTheme"
 		android:usesCleartextTraffic="true">
-	
+
 		<meta-data
 			android:name="expo.modules.notifications.default_notification_icon"
-			android:resource="@drawable/notification_icon"/>
-	
+			android:resource="@drawable/notification_icon" />
+
 		<meta-data
 			android:name="expo.modules.notifications.default_notification_color"
-			android:resource="@color/notification_icon_color"/>
-    
+			android:resource="@color/notification_icon_color" />
+
 		<activity
 			android:name=".MainActivity"
 			android:label="@string/app_name"
@@ -54,24 +53,24 @@
 			android:windowSoftInputMode="adjustResize"
 			android:theme="@style/Theme.App.SplashScreen"
 			android:screenOrientation="unspecified">
-			
-      		<intent-filter>
-      		  <action android:name="android.intent.action.MAIN"/>
-      		  <category android:name="android.intent.category.LAUNCHER"/>
-      		</intent-filter>
-      		
+
 			<intent-filter>
-      		  <action android:name="android.intent.action.VIEW"/>
-      		  <category android:name="android.intent.category.DEFAULT"/>
-      		  <category android:name="android.intent.category.BROWSABLE"/>
-      		  <data android:scheme="lnreader"/>
-      		  <data android:scheme="com.rajarsheechatterjee.LNReader"/>
-      		</intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+
+			<intent-filter>
+				<action android:name="android.intent.action.VIEW" />
+				<category android:name="android.intent.category.DEFAULT" />
+				<category android:name="android.intent.category.BROWSABLE" />
+				<data android:scheme="lnreader" />
+				<data android:scheme="com.rajarsheechatterjee.LNReader" />
+			</intent-filter>
 		</activity>
-    	
+
 		<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    
+
 		<service android:name="com.asterinet.react.bgactions.RNBackgroundActionsTask" />
-		
-  	</application>
-</manifest>
+
+	</application>
+</manifest>
@@ -1,15 +1,15 @@
 package com.rajarsheechatterjee.LNReader;

-import android.content.res.Configuration;
 import android.content.Intent;
-
-import android.os.Bundle;
+import android.content.res.Configuration;
 import android.graphics.Color;
-import android.view.KeyEvent;
-import android.view.WindowManager;
 import android.os.Build;
+import android.os.Bundle;
+import android.view.KeyEvent;
 import android.view.View;
 import android.view.Window;
+import android.widget.ScrollView;
+import android.view.WindowManager;

 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
@@ -17,9 +17,7 @@ import com.facebook.react.ReactRootView;
 import com.rajarsheechatterjee.VolumeButtonListener.VolumeButtonListener;
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

-import expo.modules.splashscreen.singletons.SplashScreen;
-import expo.modules.splashscreen.SplashScreenImageResizeMode;
-
+import org.devio.rn.splashscreen.SplashScreen;

 public class MainActivity extends ReactActivity {

@@ -35,7 +33,8 @@ public class MainActivity extends ReactActivity {
    @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
+        // 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;
@@ -45,11 +44,11 @@ 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);
+        SplashScreen.show(this,R.style.SplashScreenTheme, R.id.lottie);
+        SplashScreen.setAnimationFinished(true);
        super.onCreate(null);
-        SplashScreen.show(this, SplashScreenImageResizeMode.COVER, ReactRootView.class, false);
-
    }

    @Override
@@ -62,15 +61,15 @@ 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);
                    }
                    return true;
                case KeyEvent.KEYCODE_VOLUME_DOWN:
                    if (action == KeyEvent.ACTION_DOWN) {
-                        //voldown
-                        VolumeButtonListener.down();
+                        // voldown
+                        VolumeButtonListener.down(VolumeButtonListener.getScrollAmount());
                        if (!VolumeButtonListener.prevent)
                            return super.dispatchKeyEvent(event);
                    }
@@ -81,7 +80,6 @@ public class MainActivity extends ReactActivity {
        }
        return super.dispatchKeyEvent(event);
    }
-
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
@@ -101,4 +99,4 @@ public class MainActivity extends ReactActivity {
        };
    }

-}
+}
@@ -21,10 +21,11 @@ import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;

+import org.devio.rn.splashscreen.SplashScreenReactPackage;
+
 public class MainApplication extends Application implements ReactApplication {
  private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(
-    new BasePackageList().getPackageList()
-  );
+      new BasePackageList().getPackageList());

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
@@ -66,7 +67,8 @@ public class MainApplication extends Application implements ReactApplication {
  }

  /**
-   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
+   * Loads Flipper in React Native templates. Call this in the onCreate method
+   * with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
@@ -77,9 +79,9 @@ public class MainApplication extends Application implements ReactApplication {
    if (BuildConfig.DEBUG) {
      try {
        /*
-         We use reflection here to pick up the class that initializes Flipper,
-        since Flipper library is not available in release mode
-        */
+         * We use reflection here to pick up the class that initializes Flipper,
+         * since Flipper library is not available in release mode
+         */
        Class<?> aClass = Class.forName("com.rajarsheechatterjee.LNReader.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
@@ -20,7 +20,6 @@ public class BasePackageList {
        new expo.modules.localization.LocalizationPackage(),
        new expo.modules.notifications.NotificationsPackage(),
        new expo.modules.permissions.PermissionsPackage(),
-        new expo.modules.splashscreen.SplashScreenPackage(),
        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,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:layout_gravity="center"
+    android:background="@color/colorPrimaryDark"
+    android:gravity="center"
+    android:orientation="vertical"
+    android:scaleType="centerCrop"
+    android:navigationBarColor="#333333"
+    tools:context=".MainActivity">
+
+    <com.airbnb.lottie.LottieAnimationView
+        android:id="@+id/lottie"
+        android:layout_width="200dp"
+        android:layout_height="200dp"
+        android:layout_gravity="center_horizontal"
+        android:orientation="horizontal"
+        android:paddingLeft="25dp"
+        app:lottie_autoPlay="true"
+        app:lottie_loop="false"
+        app:lottie_rawRes="@raw/loading" />
+</LinearLayout>
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/iconBackground"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <background android:drawable="@mipmap/ic_launcher_background" />
+    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
 </adaptive-icon>
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/iconBackground"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-</adaptive-icon>
@@ -6,4 +6,5 @@
  <color name="colorPrimaryDark">#202125</color>
  <color name="navigationBarColor">#202125</color>
  <color name="notification_icon_color">#00adb5</color>
+  <color name="ic_launcher_background">#222831</color>
 </resources>
@@ -8,16 +8,20 @@
    <item name="android:textColor">#000000</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-    <item name="android:navigationBarColor">#202125</item>
-    <item name="android:statusBarColor">#202125</item>
-    
+    <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
+    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
  </style>
-  <style name="Theme.App.SplashScreen" parent="Theme.AppCompat.Light.NoActionBar">
+  <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
+    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
+    <item name="android:windowActionBar">false</item>
+    <item name="android:windowNoTitle">true</item>
+    <item name="android:windowFullscreen">true</item>
+    <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
+</style>
+  <style name="Theme.App.SplashScreen" parent="AppTheme">
    <!-- Below line is handled by '@expo/configure-splash-screen' command and it's discouraged to modify it manually -->
    <!-- Customize your splash screen theme here -->
+    <!-- <item name="icon">@drawable/no_icon</item> -->
    <item name="android:windowBackground">@drawable/splashscreen</item>
-    <item name="android:navigationBarColor">#202125</item>
-    <item name="android:statusBarColor">#202125</item>
-   
  </style>
 </resources>
@@ -22,6 +22,20 @@ buildscript {

 allprojects {
    repositories {
+        exclusiveContent {
+            // We get React Native's Android binaries exclusively through npm,
+            // from a local Maven repo inside node_modules/react-native/.
+            // (The use of exclusiveContent prevents looking elsewhere like Maven Central
+            // and potentially getting a wrong version.)
+            filter {
+                includeGroup "com.facebook.react"
+            }
+            forRepository {
+                maven {
+                    url "$rootDir/../node_modules/react-native/android"
+                }
+            }
+        }
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
@@ -6,4 +6,7 @@ includeUnimodulesProjects()
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
 applyNativeModulesSettingsGradle(settings)

+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'
@@ -20,6 +20,7 @@ module.exports = function (api) {
          },
        },
      ],
+      'react-native-reanimated/plugin',
    ],
  };
 };
@@ -2,4 +2,4 @@ pull_request_title: 'chore: Update translations'
 commit_message: '[ci skip]'
 files:
  - source: /strings/languages/en/strings.json
-    translation: /strings/languages/%two_letters_code%/strings.json
+    translation: /strings/languages/%locale_with_underscore%/strings.json
@@ -1,6 +1,6 @@
 {
  "name": "lnreader",
-  "version": "1.1.12",
+  "version": "1.1.14",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
@@ -8,24 +8,27 @@
    "start": "react-native start",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"",
-    "buildRelease": "cd android && gradlew clean && gradlew assembleRelease",
+    "buildRelease": "cd android && ./gradlew clean && ./gradlew assembleRelease",
+    "open": "open ./android/app/build/outputs/apk/release/",
    "sources:madara": "node scripts/generateMadaraSource.cjs",
    "source:generator": "node scripts/generateSource.cjs",
    "strings": "node scripts/stringTypes.cjs",
    "prepare": "husky install"
  },
  "dependencies": {
+    "@gorhom/bottom-sheet": "^4.4.5",
    "@react-native-async-storage/async-storage": "^1.15.11",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/slider": "^4.1.12",
+    "@react-native-cookies/cookies": "^6.2.1",
    "@react-native-picker/picker": "^2.4.1",
+    "@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",
-    "buffer": "^6.0.3",
    "cheerio": "^1.0.0-rc.10",
    "color": "^4.2.3",
    "dayjs": "^1.11.4",
@@ -38,30 +41,31 @@
    "expo-linking": "~2.2.3",
    "expo-localization": "~10.1.0",
    "expo-notifications": "~0.11.6",
-    "expo-splash-screen": "^0.11.4",
    "expo-sqlite": "~9.1.0",
    "expo-web-browser": "~9.1.0",
    "i18n-js": "^3.8.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lottie-react-native": "^5.1.4",
    "prop-types": "^15.7.2",
-    "qs": "^6.10.1",
+    "qs": "^6.10.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "^0.64.3",
    "react-native-background-actions": "^2.6.5",
    "react-native-device-info": "^8.4.7",
    "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": "~1.10.2",
+    "react-native-gesture-handler": "~2.1.3",
+    "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.0.0-rc.4",
-    "react-native-reanimated": "^2.2.4",
-    "react-native-render-html": "^6.3.4",
+    "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-swipe-gestures": "^1.0.5",
+    "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",
@@ -71,7 +75,6 @@
    "redux": "^4.1.2",
    "redux-persist": "^6.0.0",
    "rn-fetch-blob": "^0.12.0",
-    "rn-sliding-up-panel": "^2.4.4",
    "sanitize-html": "^2.7.0"
  },
  "devDependencies": {
@@ -80,7 +83,7 @@
    "@types/color": "^3.0.3",
    "@types/i18n-js": "^3.8.2",
    "@types/jest": "^27.4.0",
-    "@types/lodash": "^4.14.179",
+    "@types/lodash-es": "^4.17.6",
    "@types/react-native": "^0.66.15",
    "@types/react-native-vector-icons": "^6.4.10",
    "@types/react-test-renderer": "^17.0.1",
@@ -18,6 +18,7 @@ const getLanguageCode = language => {
    Chinese: 'cn',
    Japanese: 'jp',
    Vietnamese: 'vi',
+    Korean: 'kr',
  };

  return codes[language];
@@ -58,7 +59,6 @@ try {
        : ''
    }
    const popularNovels = async (page: number) => {
-      const totalPages = ${source.popularNovels.totalPages};
      const url = \`${source.popularNovels.url}\`;
    
      const result = await fetch(url);
@@ -102,8 +102,7 @@ try {
        }
      });
    
-      return { totalPages, novels };
-    };
+      return { novels };
    
    const parseNovelAndChapters = async (novelUrl: string) => {
      const url = novelUrl;
@@ -8,11 +8,8 @@ import {
  View,
  ViewProps,
 } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import color from 'color';
-
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { overlay } from 'react-native-paper';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

 type Action = {
  icon: string;
@@ -40,9 +37,7 @@ export const Actionbar: React.FC<ActionbarProps> = ({
        style={[
          styles.actionbarContainer,
          {
-            backgroundColor: theme.isDark
-              ? overlay(2, theme.surface)
-              : theme.secondaryContainer,
+            backgroundColor: theme.surface2,
            minHeight: 80 + bottom,
            paddingBottom: bottom,
          },
@@ -54,7 +49,7 @@ export const Actionbar: React.FC<ActionbarProps> = ({
            key={id}
            android_ripple={{
              radius: 50,
-              color: color(theme.primary).alpha(0.12).string(),
+              color: theme.rippleColor,
              borderless: true,
            }}
            onPress={onPress}
@@ -0,0 +1,96 @@
+import React from 'react';
+import { StyleSheet, View, Text, StatusBar } from 'react-native';
+import ErrorBoundary from 'react-native-error-boundary';
+
+import { Button, List } from '@components';
+import { useTheme } from '@hooks';
+
+interface ErrorFallbackProps {
+  error: Error;
+  resetError: () => void;
+}
+
+export const ErrorFallback: React.FC<ErrorFallbackProps> = ({
+  error,
+  resetError,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <View style={[styles.mainCtn, { backgroundColor: theme.background }]}>
+      <StatusBar translucent={true} backgroundColor="transparent" />
+      <View style={styles.errorInfoCtn}>
+        <Text style={[styles.errorTitle, { color: theme.onSurface }]}>
+          An Unexpected Error Ocurred
+        </Text>
+        <Text style={[styles.errorDesc, { color: theme.onSurface }]}>
+          The application ran into an unexpected error. We suggest you
+          screenshot this message and then share it in our support channel on
+          Discord.
+        </Text>
+        <Text
+          style={[
+            styles.errorCtn,
+            {
+              backgroundColor: theme.surfaceVariant,
+              color: theme.onSurfaceVariant,
+            },
+          ]}
+          numberOfLines={20}
+        >
+          {`${error.message}\n\n${error.stack}`}
+        </Text>
+      </View>
+      <List.Divider theme={theme} />
+      <Button
+        onPress={resetError}
+        title={'Restart the application'}
+        style={styles.buttonCtn}
+        mode="contained"
+      />
+    </View>
+  );
+};
+
+interface AppErrorBoundaryProps {
+  children: React.ReactNode | React.ReactElement;
+}
+
+const AppErrorBoundary: React.FC<AppErrorBoundaryProps> = ({ children }) => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+  );
+};
+
+export default AppErrorBoundary;
+
+const styles = StyleSheet.create({
+  mainCtn: {
+    flex: 1,
+  },
+  errorInfoCtn: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 16,
+  },
+  buttonCtn: {
+    margin: 16,
+    marginBottom: 32,
+  },
+  errorTitle: {
+    marginBottom: 8,
+    textAlign: 'center',
+    fontSize: 20,
+  },
+  errorDesc: {
+    lineHeight: 20,
+    marginVertical: 8,
+  },
+  errorCtn: {
+    borderRadius: 8,
+    lineHeight: 20,
+    marginVertical: 16,
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+  },
+});
@@ -2,12 +2,12 @@ import React from 'react';
 import { StatusBar } from 'react-native';

 import { Appbar as PaperAppbar } from 'react-native-paper';
-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

 interface AppbarProps {
  title: string;
  handleGoBack: () => void;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
 }

@@ -26,12 +26,12 @@ const Appbar: React.FC<AppbarProps> = ({
    {handleGoBack && (
      <PaperAppbar.BackAction
        onPress={handleGoBack}
-        iconColor={theme.textColorPrimary}
+        iconColor={theme.onSurface}
      />
    )}
    <PaperAppbar.Content
      title={title}
-      titleStyle={{ color: theme.textColorPrimary }}
+      titleStyle={{ color: theme.onSurface }}
    />
    {children}
  </PaperAppbar.Header>
@@ -0,0 +1,49 @@
+import React, { ReactElement, Ref, useCallback } from 'react';
+import { overlay } from 'react-native-paper';
+import { default as BS, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ThemeColors } from '@theme/types';
+import { StyleSheet } from 'react-native';
+
+interface BottomSheetProps {
+  bottomSheetRef: Ref<BS>;
+  snapPoints: Array<number>;
+  height: number;
+  theme: ThemeColors;
+  children: ReactElement;
+}
+
+const BottomSheet: React.FC<BottomSheetProps> = ({
+  bottomSheetRef,
+  snapPoints,
+  height,
+  theme,
+  children,
+}) => {
+  const { bottom } = useSafeAreaInsets();
+  const renderBackdrop = useCallback(
+    props => <BottomSheetBackdrop {...props} disappearsOnIndex={0} />,
+    [],
+  );
+  return (
+    <BS
+      index={-1}
+      backdropComponent={renderBackdrop}
+      snapPoints={[0.1].concat(snapPoints)}
+      enablePanDownToClose={true}
+      ref={bottomSheetRef}
+      handleStyle={styles.handle}
+      containerHeight={height + bottom}
+      containerStyle={{ paddingBottom: bottom }}
+      backgroundStyle={{ backgroundColor: overlay(2, theme.surface) }}
+    >
+      {children}
+    </BS>
+  );
+};
+const styles = StyleSheet.create({
+  handle: {
+    display: 'none',
+  },
+});
+export default BottomSheet;
@@ -1,105 +1,23 @@
+import React from 'react';
 import {
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-import React, { useMemo } from 'react';
-import color from 'color';
+  Button as PaperButton,
+  ButtonProps as PaperButtonProps,
+} from 'react-native-paper';

-import { MD3ThemeType } from '../../theme/types';
+import { useTheme } from '@hooks';

-export enum ButtonVariation {
-  DEFAULT = 'default',
-  OUTLINED = 'outlined',
-  CLEAR = 'clear',
+interface ButtonProps extends Omit<PaperButtonProps, 'children' | 'theme'> {
+  title?: string;
 }

-interface Props {
-  variation?: ButtonVariation;
-  title: string;
-  textColor?: string;
-  onPress?: () => void;
-  theme: MD3ThemeType;
-  style?: ViewStyle;
-  labelStyle?: StyleProp<TextStyle>;
-  disabled?: boolean;
-}
-
-const Button: React.FC<Props> = ({
-  variation = ButtonVariation.DEFAULT,
-  title,
-  textColor,
-  onPress,
-  theme,
-  style,
-  disabled,
-  labelStyle,
-}) => {
-  const textStyles: StyleProp<TextStyle> = useMemo(
-    () => ({
-      color: disabled
-        ? theme.textColorHint
-        : textColor
-        ? textColor
-        : variation === ButtonVariation.OUTLINED
-        ? theme.primary
-        : variation === ButtonVariation.CLEAR
-        ? theme.primary
-        : theme.onSecondary,
-    }),
-    [],
-  );
+const Button: React.FC<ButtonProps> = props => {
+  const theme = useTheme();

  return (
-    <View
-      style={[
-        styles.button,
-        variation === ButtonVariation.OUTLINED
-          ? {
-              ...styles.outlined,
-              borderColor: theme.textColorHint,
-            }
-          : variation !== ButtonVariation.CLEAR && {
-              backgroundColor: theme.secondary,
-            },
-        style,
-      ]}
-    >
-      <Pressable
-        style={styles.pressable}
-        onPress={onPress}
-        android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
-        disabled={disabled}
-      >
-        <Text style={[textStyles, labelStyle]} numberOfLines={1}>
-          {title}
-        </Text>
-      </Pressable>
-    </View>
+    <PaperButton {...props} theme={{ colors: theme }}>
+      {props.title || props.children}
+    </PaperButton>
  );
 };

 export default Button;
-
-const styles = StyleSheet.create({
-  button: {
-    minHeight: 40,
-    justifyContent: 'center',
-    borderRadius: 50,
-    overflow: 'hidden',
-  },
-  pressable: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 8,
-    paddingHorizontal: 24,
-  },
-  outlined: {
-    borderWidth: 1,
-  },
-});
@@ -9,16 +9,15 @@ import {
 } from 'react-native';
 import { Checkbox as PaperCheckbox } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import color from 'color';

-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

 interface CheckboxProps {
  label: string;
  status: boolean | 'indeterminate';
  onPress?: () => void;
  disabled?: boolean;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
  viewStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
 }
@@ -33,7 +32,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
  labelStyle,
 }) => (
  <Pressable
-    android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+    android_ripple={{ color: theme.rippleColor }}
    style={[styles.pressable, viewStyle]}
    onPress={onPress}
    disabled={disabled}
@@ -49,9 +48,9 @@ export const Checkbox: React.FC<CheckboxProps> = ({
      onPress={onPress}
      color={theme.primary}
      theme={{
-        colors: { disabled: theme.textColorSecondary },
+        colors: { disabled: theme.onSurfaceVariant },
      }}
-      uncheckedColor={theme.textColorSecondary}
+      uncheckedColor={theme.onSurfaceVariant}
      disabled={disabled}
    />
    <Text style={[styles.defaultLabel, { color: theme.onSurface }, labelStyle]}>
@@ -62,7 +61,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({

 export const SortItem = ({ label, status, onPress, theme }) => (
  <Pressable
-    android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+    android_ripple={{ color: theme.rippleColor }}
    style={[styles.pressable, { paddingVertical: 16, paddingLeft: 64 }]}
    onPress={onPress}
  >
@@ -1,13 +1,12 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import color from 'color';

-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';
 import { overlay } from 'react-native-paper';

 interface ChipProps {
  label: string;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }

 const Chip: React.FC<ChipProps> = ({ label, theme }) => (
@@ -22,7 +21,7 @@ const Chip: React.FC<ChipProps> = ({ label, theme }) => (
    ]}
  >
    <Pressable
-      android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+      android_ripple={{ color: theme.rippleColor }}
      style={styles.pressable}
    >
      <Text
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';

 import { Modal, overlay, Portal, TextInput } from 'react-native-paper';
-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

 interface ColorPickerModalProps {
  visible: boolean;
@@ -10,7 +10,7 @@ interface ColorPickerModalProps {
  color: string;
  onSubmit: (val: string) => void;
  closeModal: () => void;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
  showAccentColors?: boolean;
 }

@@ -80,7 +80,7 @@ const ColorPickerModal: React.FC<ColorPickerModalProps> = ({
          { backgroundColor: overlay(2, theme.surface) },
        ]}
      >
-        <Text style={[styles.modalTitle, { color: theme.textColorPrimary }]}>
+        <Text style={[styles.modalTitle, { color: theme.onSurface }]}>
          {title}
        </Text>
        {showAccentColors ? (
@@ -123,7 +123,7 @@ const ColorPickerModal: React.FC<ColorPickerModalProps> = ({
          onSubmitEditing={onSubmitEditing}
          mode="outlined"
          theme={{ colors: { ...theme } }}
-          underlineColor={theme.textColorHint}
+          underlineColor={theme.outline}
          dense
          error={Boolean(error)}
        />
@@ -22,10 +22,8 @@ const ColorPreferenceItem: React.FC<ColorPreferenceItemProps> = ({
    onPress={onPress}
  >
    <View>
-      <Text style={[styles.label, { color: theme.textColorPrimary }]}>
-        {label}
-      </Text>
-      <Text style={{ color: theme.textColorSecondary }}>
+      <Text style={[styles.label, { color: theme.onSurface }]}>{label}</Text>
+      <Text style={{ color: theme.onSurfaceVariant }}>
        {description?.toUpperCase?.()}
      </Text>
    </View>
@@ -18,7 +18,7 @@ const ScreenContainer = ({ children, theme }) => {
  );
 };

-const Row = ({ children, style }) => (
+const Row = ({ children, style = {} }) => (
  <View style={[styles.row, style]}>{children}</View>
 );

@@ -1,110 +0,0 @@
-/* eslint-disable no-bitwise */
-
-import PropTypes from 'prop-types';
-import React, { PureComponent, Children } from 'react';
-import { View, Animated, StyleSheet } from 'react-native';
-
-export default class FadeView extends PureComponent {
-  static defaultProps = {
-    animationDuration: 225,
-
-    active: false,
-    removeHiddenSubviews: true,
-  };
-
-  static propTypes = {
-    animationDuration: PropTypes.number,
-
-    active: PropTypes.bool,
-    removeHiddenSubviews: PropTypes.bool,
-
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-    ]),
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.renderChild = this.renderChild.bind(this);
-    this.mounted = false;
-
-    let { active } = this.props;
-
-    this.state = {
-      progress: new Animated.Value(Number(active)),
-      animating: false,
-    };
-  }
-
-  componentDidMount() {
-    this.mounted = true;
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  UNSAFE_componentWillReceiveProps({ active, animationDuration }) {
-    let { progress } = this.state;
-
-    if (active ^ this.props.active) {
-      this.setState({ animating: true });
-
-      Animated.timing(progress, {
-        toValue: Number(active),
-        duration: animationDuration,
-        useNativeDriver: true,
-      }).start(() => {
-        if (this.mounted) {
-          this.setState({ animating: false });
-        }
-      });
-    }
-  }
-
-  renderChild(child, index) {
-    let { active, removeHiddenSubviews } = this.props;
-    let { animating, progress } = this.state;
-
-    let opacity = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: index ? [0, 1] : [1, 0],
-    });
-
-    let hidden = active ^ !!index;
-
-    if (removeHiddenSubviews) {
-      if (!animating && hidden) {
-        return null;
-      }
-    }
-
-    let pointerEvents = hidden ? 'none' : 'box-none';
-
-    return (
-      <Animated.View
-        style={[styles.container, { opacity }]}
-        pointerEvents={pointerEvents}
-      >
-        {child}
-      </Animated.View>
-    );
-  }
-
-  render() {
-    let { children, ...props } = this.props;
-
-    return <View {...props}>{Children.map(children, this.renderChild)}</View>;
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    // ...StyleSheet.absoluteFillObject,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Pressable, View } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';
 import Color from 'color';

 interface ToggleButtonProps {
  icon: string;
  selected: boolean;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
  color?: string;
  onPress: () => void;
 }
@@ -27,7 +27,7 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
    }}
  >
    <Pressable
-      android_ripple={{ color: Color(theme.primary).alpha(0.12).string() }}
+      android_ripple={{ color: theme.rippleColor }}
      style={{
        padding: 8,
        alignItems: 'center',
@@ -40,9 +40,7 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
    >
      <MaterialCommunityIcons
        name={icon}
-        color={
-          selected ? theme.primary : color ? color : theme.textColorPrimary
-        }
+        color={selected ? theme.primary : color ? color : theme.onSurface}
        size={24}
      />
    </Pressable>
@@ -4,15 +4,13 @@ import { StyleSheet, View } from 'react-native';
 import { getString } from '@strings/translations';

 import { Dialog, Portal } from 'react-native-paper';
-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';
 import { Button } from '@components/index';
-import { ButtonVariation } from '@components/Button/Button';
-import { getDialogBackground } from '@theme/colors';

 interface ConfirmationDialogProps {
  title: string;
  visible: boolean;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
  onSubmit: () => void;
  onDismiss: () => void;
 }
@@ -34,27 +32,14 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
      <Dialog
        visible={visible}
        onDismiss={onDismiss}
-        style={[
-          styles.container,
-          { backgroundColor: getDialogBackground(theme) },
-        ]}
+        style={[styles.container, { backgroundColor: theme.overlay3 }]}
      >
-        <Dialog.Title style={[styles.title, { color: theme.textColorPrimary }]}>
+        <Dialog.Title style={[styles.title, { color: theme.onSurface }]}>
          {title}
        </Dialog.Title>
        <View style={styles.buttonCtn}>
-          <Button
-            theme={theme}
-            onPress={handleOnSubmit}
-            title={getString('common.ok')}
-            variation={ButtonVariation.CLEAR}
-          />
-          <Button
-            theme={theme}
-            onPress={onDismiss}
-            title={getString('common.cancel')}
-            variation={ButtonVariation.CLEAR}
-          />
+          <Button onPress={handleOnSubmit} title={getString('common.ok')} />
+          <Button onPress={onDismiss} title={getString('common.cancel')} />
        </View>
      </Dialog>
    </Portal>
@@ -10,16 +10,14 @@ const EmptyView = ({ icon, description, style, children, iconStyle }) => {
      <Text
        style={[
          styles.emptyViewIcon,
-          { color: theme.textColorHint },
+          { color: theme.outline },
          style,
          iconStyle,
        ]}
      >
        {icon}
      </Text>
-      <Text
-        style={[styles.emptyViewText, { color: theme.textColorHint }, style]}
-      >
+      <Text style={[styles.emptyViewText, { color: theme.outline }, style]}>
        {description}
      </Text>
      {children}
@@ -1,22 +1,20 @@
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

 interface EmptyViewProps {
  icon?: string;
  description: string;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }

 const EmptyView: React.FC<EmptyViewProps> = ({ icon, description, theme }) => (
  <View style={styles.container}>
    {icon ? (
-      <Text style={[styles.icon, { color: theme.textColorHint }]}>{icon}</Text>
+      <Text style={[styles.icon, { color: theme.outline }]}>{icon}</Text>
    ) : null}
-    <Text style={[styles.text, { color: theme.textColorHint }]}>
-      {description}
-    </Text>
+    <Text style={[styles.text, { color: theme.outline }]}>{description}</Text>
  </View>
 );

@@ -1,20 +1,21 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';

-import { MD3ThemeType } from '@theme/types';
+import { useTheme } from '@hooks/useTheme';

 interface ErrorScreenProps {
-  error?: string;
-  theme: MD3ThemeType;
+  error: string;
+  onRetry?: () => void;
+  retryIconColor?: string;
 }

-const ErrorScreen: React.FC<ErrorScreenProps> = ({ error, theme }) => {
+const ErrorScreen: React.FC<ErrorScreenProps> = ({ error }) => {
+  const theme = useTheme();
+
  return (
    <View style={styles.container}>
-      <Text style={[styles.icon, { color: theme.textColorHint }]}>ಥ_ಥ</Text>
-      <Text style={[styles.error, { color: theme.textColorHint }]}>
-        {error}
-      </Text>
+      <Text style={[styles.icon, { color: theme.outline }]}>ಥ_ಥ</Text>
+      <Text style={[styles.error, { color: theme.outline }]}>{error}</Text>
    </View>
  );
 };
@@ -6,11 +6,11 @@ import { IconButton } from 'react-native-paper';

 export const ErrorView = ({ errorName, actions, theme }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Text style={[styles.emptyViewIcon, { color: theme.textColorHint }]}>
+    <Text style={[styles.emptyViewIcon, { color: theme.outline }]}>
      {/* {icons[Math.floor(Math.random() * 5)]} */}
      ಥ_ಥ
    </Text>
-    <Text style={[styles.emptyViewText, { color: theme.textColorHint }]}>
+    <Text style={[styles.emptyViewText, { color: theme.outline }]}>
      {errorName}
    </Text>
    <View style={{ flexDirection: 'row' }}>
@@ -38,14 +38,14 @@ export const ErrorView = ({ errorName, actions, theme }) => (
          >
            <IconButton
              icon={action.icon}
-              color={theme.textColorHint}
+              color={theme.outline}
              size={24}
              style={{ margin: 0 }}
            />
            <Text
              style={{
                fontSize: 12,
-                color: theme.textColorHint,
+                color: theme.outline,
              }}
            >
              {action.name}
@@ -1,42 +0,0 @@
-import React from 'react';
-import { Pressable, StyleSheet, ViewPropTypes } from 'react-native';
-import PropTypes from 'prop-types';
-
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-
-export const IconButton = ({
-  icon,
-  size,
-  color,
-  onPress,
-  containerStyle,
-  theme,
-}) => (
-  <Pressable
-    style={[styles.container, containerStyle]}
-    android_ripple={{ color: theme.rippleColor, borderless: true, radius: 20 }}
-    onPress={onPress}
-  >
-    <MaterialCommunityIcons name={icon} size={size} color={color} />
-  </Pressable>
-);
-
-IconButton.defaultProps = {
-  size: 24,
-  color: '#FFFFFF',
-};
-
-IconButton.propTypes = {
-  icon: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  color: PropTypes.string,
-  onPress: PropTypes.func,
-  containerStyle: ViewPropTypes.style,
-  theme: PropTypes.object.isRequired,
-};
-
-const styles = StyleSheet.create({
-  container: {
-    margin: 6,
-  },
-});
@@ -3,7 +3,7 @@ import { Pressable, StyleSheet, View, ViewStyle } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Color from 'color';

-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

 type Props = {
  name: string;
@@ -12,7 +12,7 @@ type Props = {
  disabled?: boolean;
  padding?: number;
  onPress?: () => void;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
  style?: ViewStyle;
 };

@@ -40,7 +40,7 @@ const IconButton: React.FC<Props> = ({
      <MaterialCommunityIcons
        name={name}
        size={size}
-        color={disabled ? theme.textColorHint : color || theme.textColorPrimary}
+        color={disabled ? theme.outline : color || theme.onSurface}
      />
    </Pressable>
  </View>
@@ -1,139 +0,0 @@
-import React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import color from 'color';
-
-import { List as PaperList, Divider as PaperDivider } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-
-const ListSection = ({ children }) => (
-  <PaperList.Section style={styles.listSection}>{children}</PaperList.Section>
-);
-
-const ListSubHeader = ({ children, theme }) => (
-  <PaperList.Subheader style={[styles.listSubHeader, { color: theme.primary }]}>
-    {children}
-  </PaperList.Subheader>
-);
-
-const ListItem = ({
-  title,
-  description,
-  icon,
-  onPress,
-  theme,
-  right,
-  iconColor,
-  titleStyle,
-  style,
-}) => (
-  <PaperList.Item
-    title={title}
-    style={style}
-    titleStyle={[{ color: theme.textColorPrimary }, titleStyle]}
-    description={description}
-    descriptionStyle={{ color: theme.textColorSecondary }}
-    descriptionNumberOfLines={1}
-    left={() => (
-      <View style={{ justifyContent: 'center' }}>
-        {icon && (
-          <PaperList.Icon
-            color={theme.primary}
-            icon={icon}
-            style={{
-              marginVertical: 0,
-            }}
-          />
-        )}
-      </View>
-    )}
-    right={() =>
-      right && (
-        <MaterialCommunityIcons
-          name={right}
-          color={iconColor || '#47a84a'}
-          size={23}
-          style={{ marginRight: 16, textAlignVertical: 'center' }}
-        />
-      )
-    }
-    onPress={onPress}
-    rippleColor={color(theme.primary).alpha(0.12).string()}
-  />
-);
-
-const Divider = ({ theme }) => (
-  <PaperDivider
-    style={{
-      backgroundColor: color(theme.isDark ? '#FFFFFF' : '#000000')
-        .alpha(0.12)
-        .rgb()
-        .string(),
-      height: 1,
-    }}
-  />
-);
-
-const InfoItem = ({ title, icon, theme }) => (
-  <PaperList.Item
-    title={title}
-    titleStyle={{ color: theme.textColorSecondary, fontSize: 14 }}
-    titleNumberOfLines={5}
-    left={() =>
-      icon && <PaperList.Icon color={theme.textColorSecondary} icon={icon} />
-    }
-  />
-);
-
-const ColorItem = ({ title, description, theme, onPress }) => (
-  <Pressable
-    style={{
-      padding: 16,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    }}
-    android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
-    onPress={onPress}
-  >
-    <View>
-      <Text style={{ color: theme.textColorPrimary, fontSize: 16 }}>
-        {title}
-      </Text>
-      <Text style={{ color: theme.textColorSecondary }}>{description}</Text>
-    </View>
-    <View
-      style={{
-        backgroundColor: description,
-        height: 24,
-        width: 24,
-        borderRadius: 50,
-        marginRight: 16,
-      }}
-    />
-  </Pressable>
-);
-
-const Icon = ({ icon, theme }) => (
-  <PaperList.Icon color={theme.primary} icon={icon} style={{ margin: 0 }} />
-);
-
-export const List = {
-  Section: ListSection,
-  SubHeader: ListSubHeader,
-  Item: ListItem,
-  Divider,
-  InfoItem,
-  ColorItem,
-  Icon,
-};
-
-const styles = StyleSheet.create({
-  listSection: {
-    flex: 1,
-    marginVertical: 0,
-  },
-  listSubHeader: {
-    fontWeight: 'bold',
-    paddingBottom: 5,
-  },
-});
@@ -1,17 +1,16 @@
 import React, { ReactNode } from 'react';
-import { StyleSheet, View } from 'react-native';
-import color from 'color';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';

 import { List as PaperList, Divider as PaperDivider } from 'react-native-paper';
-import { MD3ThemeType } from '../../theme/types';
-import { dividerColor } from '../../theme/colors';
+import { ThemeColors } from '../../theme/types';

 interface ListItemProps {
  title: string;
  description?: string | null;
  icon?: string;
  onPress?: () => void;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }

 const Section = ({ children }: { children: ReactNode }) => (
@@ -23,7 +22,7 @@ const SubHeader = ({
  theme,
 }: {
  children: ReactNode;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }) => (
  <PaperList.Subheader style={{ color: theme.primary }}>
    {children}
@@ -39,48 +38,76 @@ const Item: React.FC<ListItemProps> = ({
 }) => (
  <PaperList.Item
    title={title}
-    titleStyle={{ color: theme.textColorPrimary }}
+    titleStyle={{ color: theme.onSurface }}
    description={description}
-    descriptionStyle={{ color: theme.textColorSecondary }}
-    left={() => (
-      <View style={styles.iconContainer}>
-        {icon && (
-          <PaperList.Icon
-            color={theme.primary}
-            icon={icon}
-            style={styles.icon}
-          />
-        )}
-      </View>
-    )}
+    descriptionStyle={{ color: theme.onSurfaceVariant }}
+    left={
+      icon
+        ? () => (
+            <PaperList.Icon
+              color={theme.primary}
+              icon={icon}
+              style={styles.iconCtn}
+            />
+          )
+        : undefined
+    }
    onPress={onPress}
-    rippleColor={color(theme.primary).alpha(0.12).string()}
+    rippleColor={theme.rippleColor}
+    style={styles.listItemCtn}
  />
 );

-const Divider = ({ theme }: { theme: MD3ThemeType }) => (
-  <PaperDivider
-    style={[styles.divider, { backgroundColor: dividerColor(theme.isDark) }]}
-  />
+const Divider = ({ theme }: { theme: ThemeColors }) => (
+  <PaperDivider style={[styles.divider, { backgroundColor: theme.outline }]} />
 );

 const InfoItem = ({
  title,
-  icon,
+  icon = 'information-outline',
  theme,
 }: {
  title: string;
  icon: string;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }) => (
-  <PaperList.Item
-    title={title}
-    titleStyle={[{ color: theme.textColorSecondary }, styles.infoItem]}
-    titleNumberOfLines={5}
-    left={() =>
-      icon && <PaperList.Icon color={theme.textColorSecondary} icon={icon} />
-    }
-  />
+  <View style={styles.infoCtn}>
+    <MaterialIcon size={20} color={theme.onSurfaceVariant} name={icon} />
+    <Text style={[styles.infoMsg, { color: theme.onSurfaceVariant }]}>
+      {title}
+    </Text>
+  </View>
+);
+
+const Icon = ({ icon, theme }: { icon: string; theme: ThemeColors }) => (
+  <PaperList.Icon color={theme.primary} icon={icon} style={{ margin: 0 }} />
+);
+
+const ColorItem = ({ title, description, theme, onPress }) => (
+  <Pressable
+    style={{
+      padding: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    }}
+    android_ripple={{ color: theme.rippleColor }}
+    onPress={onPress}
+  >
+    <View>
+      <Text style={{ color: theme.onSurface, fontSize: 16 }}>{title}</Text>
+      <Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
+    </View>
+    <View
+      style={{
+        backgroundColor: description,
+        height: 24,
+        width: 24,
+        borderRadius: 50,
+        marginRight: 16,
+      }}
+    />
+  </Pressable>
 );

 export default {
@@ -89,6 +116,8 @@ export default {
  Item,
  Divider,
  InfoItem,
+  Icon,
+  ColorItem,
 };

 const styles = StyleSheet.create({
@@ -98,14 +127,20 @@ const styles = StyleSheet.create({
  },
  divider: {
    height: 1,
+    opacity: 0.5,
  },
-  iconContainer: {
-    justifyContent: 'center',
+  infoCtn: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
  },
-  icon: {
-    marginVertical: 0,
+  infoMsg: {
+    marginTop: 12,
+    fontSize: 12,
  },
-  infoItem: {
-    fontSize: 14,
+  iconCtn: {
+    paddingLeft: 16,
+  },
+  listItemCtn: {
+    paddingVertical: 12,
  },
 });
@@ -2,7 +2,6 @@ import React from 'react';
 import { StyleSheet, View, Text, Pressable } from 'react-native';

 import FastImage from 'react-native-fast-image';
-import { defaultCoverUri } from '../sources/helpers/constants';
 import { coverPlaceholderColor } from '../theme/colors';

 import color from 'color';
@@ -19,7 +18,7 @@ const ListView = ({
 }) => {
  return (
    <Pressable
-      android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+      android_ripple={{ color: theme.rippleColor }}
      style={[
        styles.listView,
        isSelected && {
@@ -36,7 +35,7 @@ const ListView = ({
        style={[styles.extensionIcon, inLibraryBadge && { opacity: 0.5 }]}
      />
      <Text
-        style={[{ color: theme.textColorPrimary }, styles.novelName]}
+        style={[{ color: theme.onSurface }, styles.novelName]}
        numberOfLines={1}
      >
        {item.novelName}
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

 interface Props {
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }

 const LoadingMoreIndicator: React.FC<Props> = ({ theme }) => (
@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, ActivityIndicator } from 'react-native';

-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

-const LoadingScreen: React.FC<{ theme: MD3ThemeType }> = ({ theme }) => (
+const LoadingScreen: React.FC<{ theme: ThemeColors }> = ({ theme }) => (
  <ActivityIndicator size={50} color={theme.primary} style={styles.indicator} />
 );

@@ -3,10 +3,10 @@ import { StyleSheet, View, Text, Dimensions } from 'react-native';
 import { Portal, Modal } from 'react-native-paper';
 import * as Linking from 'expo-linking';
 import { ScrollView } from 'react-native-gesture-handler';
-import Button, { ButtonVariation } from './Button/Button';
+import Button from './Button/Button';
 import { getString } from '@strings/translations';
 import Markdown from 'react-native-markdown-display';
-import { dividerColor, getDialogBackground } from '@theme/colors';
+
 import { useTheme } from '@hooks/useTheme';

 interface NewUpdateDialogProps {
@@ -31,26 +31,26 @@ const NewUpdateDialog: React.FC<NewUpdateDialogProps> = ({ newVersion }) => {
        onDismiss={() => showNewUpdateDialog(false)}
        contentContainerStyle={[
          styles.containerStyle,
-          { backgroundColor: getDialogBackground(theme) },
+          { backgroundColor: theme.overlay3 },
        ]}
      >
-        <Text style={[styles.modalHeader, { color: theme.textColorPrimary }]}>
+        <Text style={[styles.modalHeader, { color: theme.onSurface }]}>
          {`${getString('common.newUpdateAvailable')} ${newVersion.tag_name}`}
        </Text>
        <ScrollView style={{ height: modalHeight }}>
          <Markdown
            style={{
              body: {
-                color: theme.textColorSecondary,
+                color: theme.onSurfaceVariant,
                lineHeight: 20,
                paddingVertical: 8,
              },
              hr: {
-                backgroundColor: dividerColor(theme.isDark),
+                backgroundColor: theme.outline,
                marginVertical: 16,
              },
              code_inline: {
-                backgroundColor: getDialogBackground(theme),
+                backgroundColor: theme.overlay3,
              },
            }}
          >
@@ -60,14 +60,10 @@ const NewUpdateDialog: React.FC<NewUpdateDialogProps> = ({ newVersion }) => {
        <View style={styles.buttonCtn}>
          <Button
            title={getString('common.cancel')}
-            theme={theme}
-            variation={ButtonVariation.CLEAR}
            onPress={() => showNewUpdateDialog(false)}
          />
          <Button
            title={getString('common.install')}
-            theme={theme}
-            variation={ButtonVariation.CLEAR}
            onPress={() => Linking.openURL(newVersion.downloadUrl)}
          />
        </View>
@@ -12,7 +12,7 @@ import { LinearGradient } from 'expo-linear-gradient';
 import FastImage from 'react-native-fast-image';
 import ListView from './ListView';

-import { useDeviceOrientation } from '../services/utils/helpers';
+import { useDeviceOrientation } from '@hooks/useDeviceOrientation';
 import { coverPlaceholderColor } from '../theme/colors';
 import { useLibrarySettings } from '@hooks/useSettings';
 import { DisplayModes } from '@screens/library/constants/constants';
@@ -67,7 +67,7 @@ const NovelCover = ({
      ]}
    >
      <Pressable
-        android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+        android_ripple={{ color: theme.rippleColor }}
        style={styles.opac}
        onPress={
          selectedNovels && selectedNovels.length > 0 ? selectNovel : onPress
@@ -158,7 +158,7 @@ const ComfortableTitle = ({ theme, novelName }) => (
    style={[
      styles.title,
      {
-        color: theme.textColorPrimary,
+        color: theme.onSurface,
        padding: 4,
      },
    ]}
@@ -9,8 +9,7 @@ import {
 } from 'react-native';
 import { SourceNovelItem } from '../sources/types';
 import { LibraryNovelInfo, NovelInfo } from '../database/types';
-
-import { useDeviceOrientation } from '../services/utils/helpers';
+import { useDeviceOrientation } from '@hooks/useDeviceOrientation';

 export type NovelListRenderItem = ListRenderItem<
  LibraryNovelInfo | NovelInfo | SourceNovelItem
@@ -13,14 +13,10 @@ export const RadioButton = ({ value, label, theme, labelStyle }) => (
    <MaterialRadioButton
      value={value}
      color={theme.primary}
-      uncheckedColor={theme.textColorSecondary}
+      uncheckedColor={theme.onSurfaceVariant}
    />
    <Text
-      style={[
-        styles.radioButtonLabel,
-        { color: theme.textColorPrimary },
-        labelStyle,
-      ]}
+      style={[styles.radioButtonLabel, { color: theme.onSurface }, labelStyle]}
    >
      {label}
    </Text>
@@ -8,8 +8,7 @@ import {
  ViewStyle,
 } from 'react-native';
 import { RadioButton as PaperRadioButton } from 'react-native-paper';
-import { MD3ThemeType } from '../../theme/types';
-import color from 'color';
+import { ThemeColors } from '../../theme/types';

 interface Props {
  label: string;
@@ -17,7 +16,7 @@ interface Props {
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }

 export const RadioButton: React.FC<Props> = ({
@@ -29,7 +28,7 @@ export const RadioButton: React.FC<Props> = ({
  theme,
 }) => (
  <Pressable
-    android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+    android_ripple={{ color: theme.rippleColor }}
    style={[styles.pressable, style]}
    onPress={onPress}
  >
@@ -38,7 +37,7 @@ export const RadioButton: React.FC<Props> = ({
      value={label}
      onPress={onPress}
      color={theme.primary}
-      uncheckedColor={theme.textColorSecondary}
+      uncheckedColor={theme.onSurfaceVariant}
    />
    <Text style={[styles.label, labelStyle, { color: theme.onSurface }]}>
      {label}
@@ -1,10 +1,9 @@
 import React, { useRef } from 'react';
 import { Pressable, StyleSheet, View, TextInput } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import color from 'color';

 import IconButtonV2 from '../IconButtonV2/IconButtonV2';
-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

 interface RightIcon {
  iconName: string;
@@ -22,7 +21,7 @@ interface SearcbarProps {
  handleBackAction?: () => void;
  clearSearchbar: () => void;
  onLeftIconPress?: () => void;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }

 const Searchbar: React.FC<SearcbarProps> = ({
@@ -40,8 +39,10 @@ const Searchbar: React.FC<SearcbarProps> = ({
  const searchbarRef = useRef<any>(null);
  const focusSearchbar = () => searchbarRef.current.focus();

-  const { top } = useSafeAreaInsets();
+  const { top, right, left } = useSafeAreaInsets();
  const marginTop = top + 8;
+  const marginRight = right + 16;
+  const marginLeft = left + 16;

  return (
    <View
@@ -49,13 +50,15 @@ const Searchbar: React.FC<SearcbarProps> = ({
        styles.searchbarContainer,
        {
          marginTop,
-          backgroundColor: color(theme.primary).alpha(0.08).string(),
+          marginRight,
+          marginLeft,
+          backgroundColor: theme.surface2,
        },
      ]}
    >
      <Pressable
        onPress={focusSearchbar}
-        android_ripple={{ color: color(theme.primary).alpha(12).toString() }}
+        android_ripple={{ color: theme.rippleColor }}
        style={[styles.searchbar]}
      >
        <IconButtonV2
@@ -108,7 +111,7 @@ const styles = StyleSheet.create({
  searchbarContainer: {
    marginHorizontal: 16,
    marginBottom: 12,
-    minHeight: 46,
+    minHeight: 56,
    borderRadius: 50,
    overflow: 'hidden',
    zIndex: 1,
@@ -1,49 +0,0 @@
-import React from 'react';
-import { Pressable, StyleSheet, View, Text } from 'react-native';
-import color from 'color';
-import { Switch, List } from 'react-native-paper';
-
-const SwitchSetting = ({ label, description, onPress, theme, icon, value }) => (
-  <Pressable
-    android_ripple={{ color: color(theme.primary).alpha(0.12).rgb().string() }}
-    style={[styles.container, { paddingVertical: description ? 16 : 12 }]}
-    onPress={onPress}
-  >
-    <View style={{ flexDirection: 'row', flex: 1 }}>
-      {icon && (
-        <List.Icon color={theme.primary} icon={icon} style={{ margin: 0 }} />
-      )}
-      <View style={[icon && { marginLeft: 16 }]}>
-        <Text
-          style={{
-            color: theme.textColorPrimary,
-            fontSize: 16,
-            flex: 1,
-            textAlignVertical: 'center',
-          }}
-        >
-          {label}
-        </Text>
-        {description && (
-          <Text style={{ color: theme.textColorSecondary }}>{description}</Text>
-        )}
-      </View>
-    </View>
-    <Switch
-      value={value}
-      onValueChange={onPress}
-      color={theme.primary}
-      style={{ marginLeft: 8 }}
-    />
-  </Pressable>
-);
-
-export default SwitchSetting;
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-});
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Pressable, StyleSheet, View, Text } from 'react-native';
+import { Switch, List } from 'react-native-paper';
+import { ThemeColors } from '@theme/types';
+
+interface SwitchProps {
+  label: string;
+  description?: string;
+  onPress: () => void;
+  theme: ThemeColors;
+  icon?: string;
+  value: boolean;
+}
+
+const SwitchSetting: React.FC<SwitchProps> = ({
+  label,
+  description,
+  onPress,
+  theme,
+  icon,
+  value,
+}) => {
+  const styles = StyleSheet.create({
+    container: {
+      paddingHorizontal: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingVertical: description ? 16 : 12,
+    },
+    row: {
+      flexDirection: 'row',
+      flex: 1,
+    },
+    icon: {
+      margin: 0,
+    },
+    textContainer: {
+      marginLeft: icon && 16,
+    },
+    text: {
+      fontSize: 16,
+      flex: 1,
+      textAlignVertical: 'center',
+    },
+    switch: { marginLeft: 8 },
+  });
+
+  return (
+    <Pressable
+      android_ripple={{
+        color: theme.rippleColor,
+      }}
+      style={styles.container}
+      onPress={onPress}
+    >
+      <View style={styles.row}>
+        {icon && (
+          <List.Icon color={theme.primary} icon={icon} style={styles.icon} />
+        )}
+        <View style={styles.textContainer}>
+          <Text style={[styles.text, { color: theme.onSurface }]}>{label}</Text>
+          {description && (
+            <Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
+          )}
+        </View>
+      </View>
+      <Switch
+        value={value}
+        onValueChange={onPress}
+        color={theme.primary}
+        style={styles.switch}
+      />
+    </Pressable>
+  );
+};
+
+export default SwitchSetting;
@@ -1,16 +1,15 @@
 import React from 'react';
 import { Pressable, StyleSheet, View, Text } from 'react-native';
-import color from 'color';

 import { Switch } from 'react-native-paper';
-import { MD3ThemeType } from '../../theme/types';
+import { ThemeColors } from '../../theme/types';

 interface SwitchItemProps {
  value: boolean;
  label: string;
  description?: string;
  onPress: () => void;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }

 const SwitchItem: React.FC<SwitchItemProps> = ({
@@ -21,16 +20,14 @@ const SwitchItem: React.FC<SwitchItemProps> = ({
  value,
 }) => (
  <Pressable
-    android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+    android_ripple={{ color: theme.rippleColor }}
    style={[styles.container]}
    onPress={onPress}
  >
    <View style={styles.labelContainer}>
-      <Text style={[{ color: theme.textColorPrimary }, styles.label]}>
-        {label}
-      </Text>
+      <Text style={[{ color: theme.onSurface }, styles.label]}>{label}</Text>
      {description ? (
-        <Text style={{ color: theme.textColorSecondary }}>{description}</Text>
+        <Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
      ) : null}
    </View>
    <Switch
@@ -54,7 +54,7 @@ export const ThemePicker = ({ theme, currentTheme, onPress }) => (
        >
          <View
            style={{
-              backgroundColor: theme.textColorPrimary,
+              backgroundColor: theme.onSurface,
              width: 44,
              height: 10,
              marginLeft: 8,
@@ -66,7 +66,7 @@ export const ThemePicker = ({ theme, currentTheme, onPress }) => (
          <View
            style={{
              height: 18,
-              backgroundColor: theme.textColorSecondary,
+              backgroundColor: theme.onSurfaceVariant,
              borderRadius: 4,
            }}
          />
@@ -75,7 +75,7 @@ export const ThemePicker = ({ theme, currentTheme, onPress }) => (
              style={{
                height: 10,
                width: 44,
-                backgroundColor: theme.textColorPrimary,
+                backgroundColor: theme.onSurface,
                borderRadius: 50,
              }}
            />
@@ -94,7 +94,7 @@ export const ThemePicker = ({ theme, currentTheme, onPress }) => (
              style={{
                height: 10,
                width: 24,
-                backgroundColor: theme.textColorSecondary,
+                backgroundColor: theme.onSurfaceVariant,
                borderRadius: 50,
              }}
            />
@@ -102,7 +102,7 @@ export const ThemePicker = ({ theme, currentTheme, onPress }) => (
              style={{
                height: 10,
                width: 24,
-                backgroundColor: theme.textColorSecondary,
+                backgroundColor: theme.onSurfaceVariant,
                borderRadius: 50,
                marginLeft: 4,
              }}
@@ -134,7 +134,7 @@ export const ThemePicker = ({ theme, currentTheme, onPress }) => (
                height: 12,
                width: 12,
                borderRadius: 50,
-                backgroundColor: theme.textColorPrimary,
+                backgroundColor: theme.onSurface,
                opacity: 0.54,
              }}
            />
@@ -151,7 +151,7 @@ export const ThemePicker = ({ theme, currentTheme, onPress }) => (
                height: 12,
                width: 12,
                borderRadius: 50,
-                backgroundColor: theme.textColorPrimary,
+                backgroundColor: theme.onSurface,
                opacity: 0.54,
              }}
            />
@@ -161,7 +161,7 @@ export const ThemePicker = ({ theme, currentTheme, onPress }) => (
    </View>
    <Text
      style={{
-        color: currentTheme.textColorPrimary,
+        color: currentTheme.onSurface,
        fontSize: 12,
        paddingVertical: 4,
      }}
@@ -14,7 +14,10 @@ import {
  createHistoryTableQuery,
  createChapterIdIndexQuery,
 } from './tables/HistoryTable';
-import { createDownloadTableQuery } from './tables/DownloadTable';
+import {
+  createDownloadIdIndex,
+  createDownloadTableQuery,
+} from './tables/DownloadTable';
 import { createUpdatesTableQuery } from './tables/UpdateTable';
 import {
  addCategorySortColumnQuery,
@@ -26,7 +29,7 @@ import {
  dbTxnErrorCallback,
  txnErrorCallbackWithoutToast,
 } from './utils/helpers';
-import { noop } from 'lodash';
+import { noop } from 'lodash-es';

 const dbName = 'lnreader.db';

@@ -71,6 +74,7 @@ const createIndexes = () => {
    tx.executeSql(createUnreadChaptersIndexQuery);
    tx.executeSql(createChapterIdIndexQuery);
    tx.executeSql(createCategorydIndexQuery);
+    tx.executeSql(createDownloadIdIndex);
  });
 };

@@ -1,5 +1,5 @@
 import * as SQLite from 'expo-sqlite';
-import { noop } from 'lodash';
+import { noop } from 'lodash-es';
 import { Category } from '../types';
 import { txnErrorCallback } from '../utils/helpers';
 const db = SQLite.openDatabase('lnreader.db');
@@ -72,8 +72,10 @@ export const isCategoryNameDuplicate = (
      tx.executeSql(
        isCategoryNameDuplicateQuery,
        [categoryName],
-        (txObj, { rows: { _array } }) =>
-          resolve(Boolean(_array[0]?.isDuplicate)),
+        (txObj, { rows }) => {
+          const { _array } = rows as any;
+          resolve(Boolean(_array[0]?.isDuplicate));
+        },
        txnErrorCallback,
      );
    }),
@@ -9,44 +9,33 @@ import { txnErrorCallback } from '@database/utils/helpers';

 const db = SQLite.openDatabase('lnreader.db');

-const insertChaptersQuery =
-  'INSERT INTO chapters (chapterUrl, chapterName, releaseDate, novelId) values (?, ?, ?, ?)';
+const insertChaptersQuery = `
+INSERT INTO chapters (
+  chapterUrl, chapterName, releaseDate, 
+  novelId
+) 
+values 
+  (?, ?, ?, ?)
+`;

 export const insertChapters = async (
  novelId: number,
-  chapters: ChapterItem[],
+  chapters?: ChapterItem[],
 ) => {
-  db.transaction(
-    tx => {
-      chapters.map(chapter =>
-        tx.executeSql(
-          insertChaptersQuery,
-          [
-            chapter.chapterUrl,
-            chapter.chapterName,
-            chapter.releaseDate,
-            novelId,
-          ],
-          (_txObj, _res) => {},
-          (_txObj, _error) => false,
-          // console.log(
-          //     "Error ",
-          //     error,
-          //     " Chapter URL: ",
-          //     chapter.chapterUrl,
-          //     " Novel ID ",
-          //     novelId
-          // )
-        ),
-      );
-    },
-    _err => {
-      // console.log('Error', err);
-    },
-    () => {
-      // console.log('Success ')
-    },
-  );
+  if (!chapters?.length) {
+    return;
+  }
+
+  db.transaction(tx => {
+    chapters.map(chapter =>
+      tx.executeSql(insertChaptersQuery, [
+        chapter.chapterUrl,
+        chapter.chapterName,
+        chapter.releaseDate,
+        novelId,
+      ]),
+    );
+  });
 };

 const getChaptersQuery = (sort = 'ORDER BY chapterId ASC', filter = '') =>
@@ -62,10 +51,7 @@ export const getChapters = (novelId: number, sort: string, filter: string) => {
          const _array = (rows as any)._array;
          resolve(_array);
        },
-        (_txObj, _error) => {
-          // console.log('Error ', error)
-          return false;
-        },
+        txnErrorCallback,
      );
    }),
  );
@@ -257,11 +243,16 @@ const createImageFolder = async (
  },
 ): Promise<string> => {
  const mkdirIfNot = async (p: string) => {
+    const nomediaPath =
+      p + (p.charAt(p.length - 1) === '/' ? '' : '/') + '.nomedia';
    if (!(await RNFetchBlob.fs.exists(p))) {
      await RNFetchBlob.fs.mkdir(p);
+      await RNFetchBlob.fs.createFile(nomediaPath, ',', 'utf8');
    }
  };
+
  await mkdirIfNot(path);
+
  if (data) {
    const { sourceId, novelId, chapterId } = data;
    await mkdirIfNot(`${path}/${sourceId}/`);
@@ -280,31 +271,53 @@ const downloadImages = async (
  chapterId: number,
 ): Promise<string> => {
  try {
+    const headers = sourceManager(sourceId)?.headers || {};
    const loadedCheerio = cheerio.load(html);
    const imgs = loadedCheerio('img').toArray();
    for (let i = 0; i < imgs.length; i++) {
      const elem = loadedCheerio(imgs[i]);
      const url = elem.attr('src');
      if (url) {
-        const imageb64 = (await RNFetchBlob.fetch('GET', url)).base64();
+        const imageb64 = (
+          await RNFetchBlob.fetch('GET', url, headers)
+        ).base64();
        const fileurl =
          (await createImageFolder(
            `${RNFetchBlob.fs.dirs.DownloadDir}/LNReader`,
            { sourceId, novelId, chapterId },
-          )) +
+          ).catch(() => {
+            showToast(
+              `Unexpected storage error!\nRemove ${fileurl} and try downloading again`,
+            );
+            return '--';
+          })) +
          i +
          '.b64.png';
-        elem.replaceWith(
-          `<img type="file" src="${url}" file-src="${fileurl}" file-id="${i}">`,
-        );
-        const exists = await RNFetchBlob.fs.exists(fileurl);
+        if (fileurl.charAt(0) === '-') {
+          return loadedCheerio.html();
+        }
+        elem.attr('src', `file://${fileurl}`);
+        const exists = await RNFetchBlob.fs.exists(fileurl).catch(() => {
+          showToast(
+            `Unexpected storage error!\nRemove ${fileurl} and try downloading again`,
+          );
+        });
        if (!exists) {
-          RNFetchBlob.fs.createFile(fileurl, imageb64, 'utf8');
+          RNFetchBlob.fs.createFile(fileurl, imageb64, 'base64').catch(() => {
+            showToast(
+              `Unexpected storage error!\nRemove ${fileurl} and try downloading again`,
+            );
+          });
        } else {
-          RNFetchBlob.fs.writeFile(fileurl, imageb64, 'utf8');
+          RNFetchBlob.fs.writeFile(fileurl, imageb64, 'base64').catch(() => {
+            showToast(
+              `Unexpected storage error!\nRemove ${fileurl} and try downloading again`,
+            );
+          });
        }
      }
    }
+    loadedCheerio('body').prepend("<input type='hidden' offline />");
    return loadedCheerio.html();
  } catch (e) {
    return html;
@@ -361,26 +374,20 @@ const deleteDownloadedImages = async (
  chapterId: number,
 ) => {
  try {
-    const path = `${RNFetchBlob.fs.dirs.DownloadDir}/LNReader/`;
-    const files = await RNFetchBlob.fs.ls(
-      await createImageFolder(path, { sourceId, novelId, chapterId }),
+    const path = await createImageFolder(
+      `${RNFetchBlob.fs.dirs.DownloadDir}/LNReader`,
+      { sourceId, novelId, chapterId },
    );
+    const files = await RNFetchBlob.fs.ls(path);
    for (let i = 0; i < files.length; i++) {
-      const ex = /(.*?)_(.*?)#(.*?)/.exec(files[i]);
+      const ex = /\.b64\.png/.exec(files[i]);
      if (ex) {
-        if (
-          parseInt(ex[1], 10) === sourceId &&
-          parseInt(ex[2], 10) === chapterId
-        ) {
-          if (await RNFetchBlob.fs.exists(`${path}${files[i]}`)) {
-            RNFetchBlob.fs.unlink(`${path}${files[i]}`);
-          }
+        if (await RNFetchBlob.fs.exists(`${path}${files[i]}`)) {
+          RNFetchBlob.fs.unlink(`${path}${files[i]}`);
        }
      }
    }
-  } catch (error) {
-    showToast(error.message);
-  }
+  } catch (error) {}
 };

 export const deleteChapter = async (
@@ -418,6 +425,38 @@ export const deleteChapter = async (
  });
 };

+export const deleteChapters = async (
+  sourceId: number,
+  chapters?: ChapterItem[],
+) => {
+  if (!chapters?.length) {
+    return;
+  }
+
+  const chapterIdsString = chapters
+    ?.map(chapter => chapter.chapterId)
+    .toString();
+
+  const updateIsDownloadedQuery = `UPDATE chapters SET downloaded = 0 WHERE chapterId IN (${chapterIdsString})`;
+  const deleteChapterQuery = `DELETE FROM downloads WHERE downloadChapterId IN (${chapterIdsString})`;
+
+  await Promise.all(
+    chapters?.map(chapter =>
+      deleteDownloadedImages(sourceId, chapter.novelId, chapter.chapterId),
+    ),
+  );
+
+  db.transaction(tx => {
+    tx.executeSql(
+      updateIsDownloadedQuery,
+      undefined,
+      undefined,
+      txnErrorCallback,
+    );
+    tx.executeSql(deleteChapterQuery, undefined, undefined, txnErrorCallback);
+  });
+};
+
 const getLastReadChapterQuery = `
    SELECT chapters.*
    FROM history
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */

+import { txnErrorCallback } from '@database/utils/helpers';
 import * as SQLite from 'expo-sqlite';
 import { showToast } from '../../hooks/showToast';
 import { sourceManager } from '../../sources/sourceManager';
@@ -36,7 +37,7 @@ export const fetchAndInsertChapterInDb = async (
      downloadChapterQuery,
      [chapterId, chapter.chapterName, chapter.chapterText],
      (txObj, res) => {},
-      (_txObj, error) => showToast(error),
+      txnErrorCallback,
    );
  });
 };
@@ -55,7 +56,7 @@ export const deleteChapterFromDb = (chapterId: number) => {
      deleteChapterFromDbQuery,
      [chapterId],
      (txObj, res) => {},
-      (_txObj, error) => showToast(error.message),
+      txnErrorCallback,
    );
  });
 };
@@ -78,7 +79,10 @@ export const getChapterFromDb = async (
        getChapterFromDbQuery,
        [chapterId],
        (txObj, results) => resolve(results.rows.item(0)),
-        (txObj, error) => reject(error),
+        (_, error) => {
+          reject(error);
+          return false;
+        },
      );
    }),
  );
@@ -122,13 +126,13 @@ export const deleteReadChaptersFromDb = (chapterId: number) => {
      updateChaptersDeletedQuery,
      [],
      (txObj, res) => {},
-      (txObj, error) => showToast(error.message),
+      txnErrorCallback,
    );
    tx.executeSql(
      deleteReadChaptersFromDbQuery,
      [],
      (txObj, res) => showToast('Deleted read chapters.'),
-      (txObj, error) => showToast(error.message),
+      txnErrorCallback,
    );
  });
 };
@@ -6,7 +6,7 @@ import { txnErrorCallback } from '../utils/helpers';
 const db = SQLite.openDatabase('lnreader.db');

 const getLibraryQuery = `
-    SELECT novels.*, C.chaptersUnread, D.chaptersDownloaded, H.lastReadAt
+    SELECT novels.*, C.chaptersUnread, D.chaptersDownloaded, H.lastReadAt, U.lastUpdatedAt
    FROM novels
    LEFT JOIN (
        SELECT chapters.novelId, COUNT(*) AS chaptersUnread 
@@ -30,6 +30,14 @@ const getLibraryQuery = `
        ORDER BY history.historyTimeRead DESC
    ) AS H
    ON novels.novelId = H.novelId
+    LEFT JOIN (
+      SELECT updates.novelId, updateTime AS lastUpdatedAt
+      FROM updates
+      GROUP BY updates.novelId
+      HAVING updates.updateTime = MAX(updates.updateTime)
+      ORDER BY updates.updateTime DESC
+    ) AS U
+    ON novels.novelId = U.novelId
    WHERE novels.followed = 1
    `;

@@ -9,7 +9,7 @@ import { insertChapters } from './ChapterQueries';

 import { showToast } from '../../hooks/showToast';
 import { txnErrorCallback } from '../utils/helpers';
-import { noop } from 'lodash';
+import { noop } from 'lodash-es';

 const insertNovelQuery =
  'INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre, categoryIds) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)';
@@ -143,7 +143,7 @@ export const restoreLibrary = async novel => {
        async (txObj, { insertId }) => {
          const chapters = await fetchChapters(novel.sourceId, novel.novelUrl);

-          if (chapters) {
+          if (chapters.length) {
            await insertChapters(insertId, chapters);

            resolve();
@@ -1,4 +1,4 @@
-import { noop, xor } from 'lodash';
+import { noop, xor } from 'lodash-es';

 import * as SQLite from 'expo-sqlite';
 const db = SQLite.openDatabase('lnreader.db');
@@ -0,0 +1,178 @@
+import * as SQLite from 'expo-sqlite';
+import { countBy } from 'lodash-es';
+import { LibraryStats } from '../types';
+import { txnErrorCallback } from '../utils/helpers';
+
+const db = SQLite.openDatabase('lnreader.db');
+
+const getLibraryStatsQuery = `
+  SELECT COUNT(*) as novelsCount, COUNT(DISTINCT sourceId) as sourcesCount
+  FROM novels
+  WHERE novels.followed = 1
+  `;
+
+const getChaptersReadCountQuery = `
+  SELECT COUNT(*) as chaptersRead
+  FROM chapters
+  JOIN novels
+  ON chapters.novelId = novels.novelId
+  WHERE chapters.read = 1 AND novels.followed = 1
+  `;
+
+const getChaptersTotalCountQuery = `
+  SELECT COUNT(*) as chaptersCount
+  FROM chapters
+  JOIN novels
+  ON chapters.novelId = novels.novelId
+  WHERE novels.followed = 1
+  `;
+
+const getChaptersUnreadCountQuery = `
+  SELECT COUNT(*) as chaptersUnread
+  FROM chapters
+  JOIN novels
+  ON chapters.novelId = novels.novelId
+  WHERE chapters.read = 0 AND novels.followed = 1
+  `;
+
+const getChaptersDownloadedCountQuery = `
+  SELECT COUNT(*) as chaptersDownloaded
+  FROM chapters
+  JOIN novels
+  ON chapters.novelId = novels.novelId
+  WHERE chapters.downloaded = 1 AND novels.followed = 1
+  `;
+
+const getNovelGenresQuery = `
+  SELECT genre
+  FROM novels
+  WHERE novels.followed = 1
+  `;
+
+const getNovelStatusQuery = `
+  SELECT status
+  FROM novels
+  WHERE novels.followed = 1
+  `;
+
+export const getLibraryStatsFromDb = async (): Promise<LibraryStats> => {
+  return new Promise(resolve => {
+    db.transaction(tx => {
+      tx.executeSql(
+        getLibraryStatsQuery,
+        undefined,
+        (txObj, { rows: { _array } }) => {
+          resolve(_array[0]);
+        },
+        txnErrorCallback,
+      );
+    });
+  });
+};
+
+export const getChaptersTotalCountFromDb = async (): Promise<LibraryStats> => {
+  return new Promise(resolve => {
+    db.transaction(tx => {
+      tx.executeSql(
+        getChaptersTotalCountQuery,
+        undefined,
+        (txObj, { rows: { _array } }) => {
+          resolve(_array[0]);
+        },
+        txnErrorCallback,
+      );
+    });
+  });
+};
+
+export const getChaptersReadCountFromDb = async (): Promise<LibraryStats> => {
+  return new Promise(resolve => {
+    db.transaction(tx => {
+      tx.executeSql(
+        getChaptersReadCountQuery,
+        undefined,
+        (txObj, { rows: { _array } }) => {
+          resolve(_array[0]);
+        },
+        txnErrorCallback,
+      );
+    });
+  });
+};
+
+export const getChaptersUnreadCountFromDb = async (): Promise<LibraryStats> => {
+  return new Promise(resolve => {
+    db.transaction(tx => {
+      tx.executeSql(
+        getChaptersUnreadCountQuery,
+        undefined,
+        (txObj, { rows: { _array } }) => {
+          resolve(_array[0]);
+        },
+        txnErrorCallback,
+      );
+    });
+  });
+};
+
+export const getChaptersDownloadedCountFromDb =
+  async (): Promise<LibraryStats> => {
+    return new Promise(resolve => {
+      db.transaction(tx => {
+        tx.executeSql(
+          getChaptersDownloadedCountQuery,
+          undefined,
+          (txObj, { rows: { _array } }) => {
+            resolve(_array[0]);
+          },
+          txnErrorCallback,
+        );
+      });
+    });
+  };
+
+export const getNovelGenresFromDb = async (): Promise<LibraryStats> => {
+  return new Promise(resolve => {
+    db.transaction(tx => {
+      tx.executeSql(
+        getNovelGenresQuery,
+        undefined,
+        (txObj, { rows: { _array } }) => {
+          let genres: string[] = [];
+
+          _array.forEach((item: { genre: string }) => {
+            const novelGenres = item.genre?.split(/\s*,\s*/);
+
+            if (novelGenres?.length) {
+              genres.push(...novelGenres);
+            }
+          });
+
+          resolve({ genres: countBy(genres) });
+        },
+        txnErrorCallback,
+      );
+    });
+  });
+};
+
+export const getNovelStatusFromDb = async (): Promise<LibraryStats> => {
+  return new Promise(resolve => {
+    db.transaction(tx => {
+      tx.executeSql(
+        getNovelStatusQuery,
+        undefined,
+        (txObj, { rows: { _array } }) => {
+          let status: string[] = [];
+
+          _array.forEach((item: { status: string }) => {
+            status.push(item.status);
+          });
+
+          resolve({ status: countBy(status) });
+        },
+        txnErrorCallback,
+      );
+    });
+  });
+};
@@ -35,7 +35,7 @@ const getUpdatesFromDbQuery = `
    WHERE 
      date(updates.updateTime) > date('now','-3 months')
    ORDER BY 
-      updates.updateTime DESC, chapters.releaseDate DESC
+      updates.updateTime DESC, chapters.chapterName DESC, chapters.releaseDate DESC
    `;

 export const getUpdatesFromDb = async (): Promise<Update[]> => {
@@ -7,3 +7,6 @@ export const createDownloadTableQuery = `
        FOREIGN KEY (downloadChapterId) REFERENCES chapters(chapterId) ON DELETE CASCADE
      )
  `;
+
+export const createDownloadIdIndex =
+  'CREATE INDEX IF NOT EXISTS downloadChapterIdIndex ON downloads(downloadChapterId)';
@@ -11,6 +11,7 @@ export interface NovelInfo {
  author?: string;
  status?: string;
  followed: number;
+  categoryIds: string;
 }

 export interface LibraryNovelInfo extends NovelInfo {
@@ -29,6 +30,12 @@ export interface ChapterItem {
  bookmark: number;
  downloaded: number;
 }
+export interface ChapterItemExtended extends ChapterItem {
+  novelId: number;
+  novelUrl: string;
+  sourceId: number;
+  novelName: string;
+}

 export interface DownloadedChapter {
  downloadId: number;
@@ -74,3 +81,14 @@ export interface Category {
  lastUpdatedAt: Date;
  sort: number | null;
 }
+
+export interface LibraryStats {
+  novelsCount?: number;
+  chaptersCount?: number;
+  chaptersRead?: number;
+  chaptersUnread?: number;
+  chaptersDownloaded?: number;
+  sourcesCount?: number;
+  genres?: Record<string, number>;
+  status?: Record<string, number>;
+}
@@ -9,3 +9,4 @@ export { default as useBoolean } from './useBoolean';
 export { useTheme } from './useTheme';
 export { default as useCategories } from './useCategories';
 export { useCategorySettings, useLibrarySettings } from './useSettings';
+export { usePreviousRouteName } from './usePreviousRouteName';
--- a/Show More
+++ b/Show More