chore: Update translations (#625)

* New translations strings.json (Romanian)
[ci skip]

* New translations strings.json (French)
[ci skip]

* New translations strings.json (Spanish)
[ci skip]

* New translations strings.json (Afrikaans)
[ci skip]

* New translations strings.json (Arabic)
[ci skip]

* New translations strings.json (Catalan)
[ci skip]

* New translations strings.json (Czech)
[ci skip]

* New translations strings.json (Danish)
[ci skip]

* New translations strings.json (German)
[ci skip]

* New translations strings.json (Greek)
[ci skip]

* New translations strings.json (Finnish)
[ci skip]

* New translations strings.json (Hebrew)
[ci skip]

* New translations strings.json (Hungarian)
[ci skip]

* New translations strings.json (Italian)
[ci skip]

* New translations strings.json (Japanese)
[ci skip]

* New translations strings.json (Korean)
[ci skip]

* New translations strings.json (Dutch)
[ci skip]

* New translations strings.json (Norwegian)
[ci skip]

* New translations strings.json (Polish)
[ci skip]

* New translations strings.json (Portuguese)
[ci skip]

* New translations strings.json (Russian)
[ci skip]

* New translations strings.json (Albanian)
[ci skip]

* New translations strings.json (Serbian (Cyrillic))
[ci skip]

* New translations strings.json (Swedish)
[ci skip]

* New translations strings.json (Turkish)
[ci skip]

* New translations strings.json (Ukrainian)
[ci skip]

* New translations strings.json (Chinese Simplified)
[ci skip]

* New translations strings.json (Chinese Traditional)
[ci skip]

* New translations strings.json (Vietnamese)
[ci skip]

* New translations strings.json (Portuguese, Brazilian)
[ci skip]

* New translations strings.json (Indonesian)
[ci skip]

* New translations strings.json (Hindi)
[ci skip]

* New translations strings.json (Turkish)
[ci skip]

* New translations strings.json (French)
[ci skip]

* New translations strings.json (Hungarian)
[ci skip]

* New translations strings.json (Russian)
[ci skip]

* New translations strings.json (Portuguese, Brazilian)
[ci skip]

* New translations strings.json (Romanian)
[ci skip]

* New translations strings.json (French)
[ci skip]

* New translations strings.json (Spanish)
[ci skip]

* New translations strings.json (Afrikaans)
[ci skip]

* New translations strings.json (Arabic)
[ci skip]

* New translations strings.json (Catalan)
[ci skip]

* New translations strings.json (Czech)
[ci skip]

* New translations strings.json (Danish)
[ci skip]

* New translations strings.json (German)
[ci skip]

* New translations strings.json (Greek)
[ci skip]

* New translations strings.json (Finnish)
[ci skip]

* New translations strings.json (Hebrew)
[ci skip]

* New translations strings.json (Hungarian)
[ci skip]

* New translations strings.json (Italian)
[ci skip]

* New translations strings.json (Japanese)
[ci skip]

* New translations strings.json (Korean)
[ci skip]

* New translations strings.json (Dutch)
[ci skip]

* New translations strings.json (Norwegian)
[ci skip]

* New translations strings.json (Polish)
[ci skip]

* New translations strings.json (Portuguese)
[ci skip]

* New translations strings.json (Russian)
[ci skip]

* New translations strings.json (Albanian)
[ci skip]

* New translations strings.json (Serbian (Cyrillic))
[ci skip]

* New translations strings.json (Swedish)
[ci skip]

* New translations strings.json (Turkish)
[ci skip]

* New translations strings.json (Ukrainian)
[ci skip]

* New translations strings.json (Chinese Simplified)
[ci skip]

* New translations strings.json (Chinese Traditional)
[ci skip]

* New translations strings.json (Vietnamese)
[ci skip]

* New translations strings.json (Portuguese, Brazilian)
[ci skip]

* New translations strings.json (Indonesian)
[ci skip]

* New translations strings.json (Hindi)
[ci skip]

* New translations strings.json (Turkish)
[ci skip]

* New translations strings.json (Arabic)
[ci skip]

* New translations strings.json (Romanian)
[ci skip]

* New translations strings.json (French)
[ci skip]

* New translations strings.json (Spanish)
[ci skip]

* New translations strings.json (Afrikaans)
[ci skip]

* New translations strings.json (Arabic)
[ci skip]

* New translations strings.json (Catalan)
[ci skip]

* New translations strings.json (Czech)
[ci skip]

* New translations strings.json (Danish)
[ci skip]

* New translations strings.json (German)
[ci skip]

* New translations strings.json (Greek)
[ci skip]

* New translations strings.json (Finnish)
[ci skip]

* New translations strings.json (Hebrew)
[ci skip]

* New translations strings.json (Hungarian)
[ci skip]

* New translations strings.json (Italian)
[ci skip]

* New translations strings.json (Japanese)
[ci skip]

* New translations strings.json (Korean)
[ci skip]

* New translations strings.json (Dutch)
[ci skip]

* New translations strings.json (Norwegian)
[ci skip]

* New translations strings.json (Polish)
[ci skip]

* New translations strings.json (Portuguese)
[ci skip]

* New translations strings.json (Russian)
[ci skip]

* New translations strings.json (Albanian)
[ci skip]

* New translations strings.json (Serbian (Cyrillic))
[ci skip]

* New translations strings.json (Swedish)
[ci skip]

* New translations strings.json (Turkish)
[ci skip]

* New translations strings.json (Ukrainian)
[ci skip]

* New translations strings.json (Chinese Simplified)
[ci skip]

* New translations strings.json (Chinese Traditional)
[ci skip]

* New translations strings.json (Vietnamese)
[ci skip]

* New translations strings.json (Portuguese, Brazilian)
[ci skip]

* New translations strings.json (Indonesian)
[ci skip]

* New translations strings.json (Hindi)
[ci skip]

* New translations strings.json (Turkish)
[ci skip]

* New translations strings.json (Greek)
[ci skip]

* New translations strings.json (Greek)
[ci skip]

* New translations strings.json (Romanian)
[ci skip]

* New translations strings.json (French)
[ci skip]

* New translations strings.json (Spanish)
[ci skip]

* New translations strings.json (Afrikaans)
[ci skip]

* New translations strings.json (Arabic)
[ci skip]

* New translations strings.json (Catalan)
[ci skip]

* New translations strings.json (Czech)
[ci skip]

* New translations strings.json (Danish)
[ci skip]

* New translations strings.json (German)
[ci skip]

* New translations strings.json (Greek)
[ci skip]

* New translations strings.json (Finnish)
[ci skip]

* New translations strings.json (Hebrew)
[ci skip]

* New translations strings.json (Hungarian)
[ci skip]

* New translations strings.json (Italian)
[ci skip]

* New translations strings.json (Japanese)
[ci skip]

* New translations strings.json (Korean)
[ci skip]

* New translations strings.json (Dutch)
[ci skip]

* New translations strings.json (Norwegian)
[ci skip]

* New translations strings.json (Polish)
[ci skip]

* New translations strings.json (Portuguese)
[ci skip]

* New translations strings.json (Russian)
[ci skip]

* New translations strings.json (Albanian)
[ci skip]

* New translations strings.json (Serbian (Cyrillic))
[ci skip]

* New translations strings.json (Swedish)
[ci skip]

* New translations strings.json (Turkish)
[ci skip]

* New translations strings.json (Ukrainian)
[ci skip]

* New translations strings.json (Chinese Simplified)
[ci skip]

* New translations strings.json (Chinese Traditional)
[ci skip]

* New translations strings.json (Vietnamese)
[ci skip]

* New translations strings.json (Portuguese, Brazilian)
[ci skip]

* New translations strings.json (Indonesian)
[ci skip]

* New translations strings.json (Hindi)
[ci skip]

.editorconfig

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

.gitattributes

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

.github/ISSUE_TEMPLATE/report_issue.yml

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

.github/workflows/build.yml

@@ -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
+          npm install
 
       - 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') }}

.github/workflows/issue_moderator.yml

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

.github/workflows/lint.yml

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

.github/workflows/lock.yml

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

.gitignore

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

App.js

@@ -5,19 +5,35 @@ 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 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 { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
-import { createDatabase } from './src/database/db';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import LottieSplashScreen from 'react-native-lottie-splash-screen';
-import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+// Initialize trackers
+import './src/services/Trackers/index';
+import './src/services/Trackers/aniList';
+import './src/services/Trackers/myAnimeList';
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => {
+    return {
+      shouldShowAlert: true,
+      shouldPlaySound: true,
+      shouldSetBadge: true,
+    };
+  },
+});
 
 const App = () => {
   useEffect(() => {
@@ -32,8 +48,10 @@ const App = () => {
           <PersistGate loading={null} persistor={persistor}>
             <SafeAreaProvider>
               <PaperProvider>
-                <StatusBar translucent={true} backgroundColor="transparent" />
-                <Main />
+                <BottomSheetModalProvider>
+                  <StatusBar translucent={true} backgroundColor="transparent" />
+                  <Main />
+                </BottomSheetModalProvider>
               </PaperProvider>
             </SafeAreaProvider>
           </PersistGate>

CONTRIBUTING.md

@@ -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
 
@@ -16,18 +21,32 @@ cd lnreader
 # install dependencies
 npm install
 
-# 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/).

README.md

@@ -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)

android/app/build.gradle

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

android/app/src/debug/AndroidManifest.xml

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

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

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

android/app/src/main/AndroidManifest.xml

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

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

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

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

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

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

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

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

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

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

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

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

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

android/build.gradle

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

android/gradle.properties

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

android/gradle/wrapper/gradle-wrapper.properties

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

android/gradlew

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

android/gradlew.bat

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

android/settings.gradle

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

babel.config.js

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

crowdin.yml

@@ -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

env.d.ts

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

package.json

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

scripts/generateSource.cjs

@@ -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;

src/components/Actionbar/Actionbar.tsx

@@ -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}

src/components/AppErrorBoundary/AppErrorBoundary.tsx

@@ -4,7 +4,6 @@ import ErrorBoundary from 'react-native-error-boundary';
 
 import { Button, List } from '@components';
 import { useTheme } from '@hooks';
-import { ButtonVariation } from '@components/Button/Button';
 
 interface ErrorFallbackProps {
   error: Error;
@@ -44,11 +43,10 @@ export const ErrorFallback: React.FC<ErrorFallbackProps> = ({
       </View>
       <List.Divider theme={theme} />
       <Button
-        variation={ButtonVariation.DEFAULT}
         onPress={resetError}
         title={'Restart the application'}
         style={styles.buttonCtn}
-        theme={theme}
+        mode="contained"
       />
     </View>
   );

src/components/Appbar/Appbar.tsx

@@ -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>

src/components/BottomSheet/BottomSheet.tsx

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

src/components/Button/Button.tsx

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

src/components/Checkbox/Checkbox.tsx

@@ -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}
   >

src/components/Chip/Chip.tsx

@@ -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

src/components/ColorPickerModal/ColorPickerModal.tsx

@@ -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)}
         />

src/components/ColorPreferenceItem/ColorPreferenceItem.tsx

@@ -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>

src/components/Common/CrossFadeView.js

@@ -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',
-  },
-});

src/components/Common/ToggleButton.tsx

@@ -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>

src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -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>

src/components/Counter/Counter.tsx

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

src/components/EmptyView.js

@@ -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}

src/components/EmptyView/EmptyView.tsx

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

src/components/ErrorScreenV2/ErrorScreenV2.tsx

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

src/components/ErrorView/ErrorView.js

@@ -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}

src/components/IconButton/IconButton.js

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

src/components/IconButtonV2/IconButtonV2.tsx

@@ -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>

src/components/List.js

@@ -1,141 +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={[{ paddingHorizontal: 16, paddingVertical: 12 }, style]}
-    titleStyle={[{ color: theme.textColorPrimary }, titleStyle]}
-    description={description}
-    descriptionStyle={{ color: theme.textColorSecondary }}
-    descriptionNumberOfLines={1}
-    left={
-      icon
-        ? () => (
-            <View style={{ justifyContent: 'center' }}>
-              <PaperList.Icon
-                color={theme.primary}
-                icon={icon}
-                style={{
-                  marginVertical: 0,
-                }}
-              />
-            </View>
-          )
-        : undefined
-    }
-    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,
-  },
-});

src/components/List/List.tsx

@@ -1,18 +1,17 @@
 import React, { ReactNode } from 'react';
-import { StyleSheet, Text, 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;
+  right?: string;
   onPress?: () => void;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }
 
 const Section = ({ children }: { children: ReactNode }) => (
@@ -24,7 +23,7 @@ const SubHeader = ({
   theme,
 }: {
   children: ReactNode;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }) => (
   <PaperList.Subheader style={{ color: theme.primary }}>
     {children}
@@ -37,32 +36,43 @@ const Item: React.FC<ListItemProps> = ({
   icon,
   onPress,
   theme,
+  right,
 }) => (
   <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
+    }
+    right={
+      right
+        ? () => (
+            <PaperList.Icon
+              color={theme.primary}
+              icon={right}
+              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 = ({
@@ -72,7 +82,7 @@ const InfoItem = ({
 }: {
   title: string;
   icon: string;
-  theme: MD3ThemeType;
+  theme: ThemeColors;
 }) => (
   <View style={styles.infoCtn}>
     <MaterialIcon size={20} color={theme.onSurfaceVariant} name={icon} />
@@ -82,10 +92,37 @@ const InfoItem = ({
   </View>
 );
 
-const Icon = ({ icon, theme }: { icon: string; theme: MD3ThemeType }) => (
+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 {
   Section,
   SubHeader,
@@ -93,6 +130,7 @@ export default {
   Divider,
   InfoItem,
   Icon,
+  ColorItem,
 };
 
 const styles = StyleSheet.create({
@@ -102,12 +140,7 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-  },
-  iconContainer: {
-    justifyContent: 'center',
-  },
-  icon: {
-    marginVertical: 0,
+    opacity: 0.5,
   },
   infoCtn: {
     paddingVertical: 12,
@@ -117,4 +150,10 @@ const styles = StyleSheet.create({
     marginTop: 12,
     fontSize: 12,
   },
+  iconCtn: {
+    paddingLeft: 16,
+  },
+  listItemCtn: {
+    paddingVertical: 12,
+  },
 });

src/components/ListView.js

@@ -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}

src/components/LoadingMoreIndicator/LoadingMoreIndicator.tsx

@@ -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 }) => (

src/components/LoadingScreenV2/LoadingScreenV2.tsx

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

src/components/NewUpdateDialog.tsx

@@ -3,10 +3,9 @@ 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,43 +30,22 @@ 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,
-                lineHeight: 20,
-                paddingVertical: 8,
-              },
-              hr: {
-                backgroundColor: dividerColor(theme.isDark),
-                marginVertical: 16,
-              },
-              code_inline: {
-                backgroundColor: getDialogBackground(theme),
-              },
-            }}
-          >
-            {newVersion.body}
-          </Markdown>
+          {newVersion.body}
         </ScrollView>
         <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>

src/components/NovelCover.tsx

@@ -6,18 +6,31 @@ import {
   useWindowDimensions,
   Pressable,
 } from 'react-native';
-import color from 'color';
 
 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';
+import { LibraryNovelInfo } from '@database/types';
+import { SourceNovelItem } from 'src/sources/types';
+import { ThemeColors } from '@theme/types';
+import SourceScreenSkeletonLoading from '@screens/browse/loadingAnimation/SourceScreenSkeletonLoading';
 
-const NovelCover = ({
+interface NovelCoverProps {
+  item: LibraryNovelInfo;
+  onPress: () => void;
+  libraryStatus?: boolean;
+  theme: ThemeColors;
+  isSelected?: boolean;
+  onLongPress: (novelId: number) => void;
+  selectedNovels?: Array<SourceNovelItem>;
+}
+
+const NovelCover: React.FC<NovelCoverProps> = ({
   item,
   onPress,
   libraryStatus,
@@ -44,6 +57,7 @@ const NovelCover = ({
 
   const coverHeight = useMemo(
     () => (window.width / numColumns) * (4 / 3),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [numColumns],
   );
 
@@ -51,23 +65,23 @@ const NovelCover = ({
 
   const uri = item.novelCover;
 
-  return displayMode !== DisplayModes.List ? (
+  return item.sourceId < 0 ? (
+    <SourceScreenSkeletonLoading theme={theme} completeRow={item.sourceId} />
+  ) : displayMode !== DisplayModes.List ? (
     <View
       style={[
         {
           flex: 1 / numColumns,
-          borderRadius: 6,
-          overflow: 'hidden',
-          margin: 2,
         },
+        styles.standardNovelCover,
         isSelected && {
-          backgroundColor: theme.primary,
-          opacity: 0.8,
-        },
+            backgroundColor: theme.primary,
+          } &&
+          styles.selectedNovelCover,
       ]}
     >
       <Pressable
-        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
@@ -98,10 +112,10 @@ const NovelCover = ({
           style={[
             {
               height: coverHeight,
-              borderRadius: 4,
               backgroundColor: coverPlaceholderColor,
             },
-            libraryStatus && { opacity: 0.5 },
+            styles.standardBorderRadius,
+            libraryStatus && styles.opacityPoint5,
           ]}
         />
         <View style={styles.compactTitleContainer}>
@@ -152,14 +166,17 @@ const NovelCover = ({
 
 export default memo(NovelCover);
 
-const ComfortableTitle = ({ theme, novelName }) => (
+const ComfortableTitle: React.FC<{ theme: ThemeColors; novelName: string }> = ({
+  theme,
+  novelName,
+}) => (
   <Text
     numberOfLines={2}
     style={[
       styles.title,
+      styles.padding4,
       {
-        color: theme.textColorPrimary,
-        padding: 4,
+        color: theme.onSurface,
       },
     ]}
   >
@@ -167,46 +184,47 @@ const ComfortableTitle = ({ theme, novelName }) => (
   </Text>
 );
 
-const CompactTitle = ({ novelName }) => (
+const CompactTitle: React.FC<{ novelName: string }> = ({ novelName }) => (
   <View style={styles.titleContainer}>
     <LinearGradient
       colors={['transparent', 'rgba(0,0,0,0.7)']}
       style={styles.linearGradient}
     >
-      <Text
-        numberOfLines={2}
-        style={[
-          styles.title,
-          {
-            color: 'rgba(255,255,255,1)',
-            textShadowColor: 'rgba(0, 0, 0, 0.75)',
-            textShadowOffset: { width: -1, height: 1 },
-            textShadowRadius: 10,
-          },
-        ]}
-      >
+      <Text numberOfLines={2} style={[styles.title, styles.compactTitle]}>
         {novelName}
       </Text>
     </LinearGradient>
   </View>
 );
 
-const InLibraryBadge = ({ theme }) => (
+const InLibraryBadge: React.FC<{ theme: ThemeColors }> = ({ theme }) => (
   <Text
     style={[
       styles.inLibraryBadge,
       {
         backgroundColor: theme.primary,
         color: theme.onPrimary,
-        borderRadius: 4,
       },
+      styles.standardBorderRadius,
     ]}
   >
     In library
   </Text>
 );
 
-const UnreadBadge = ({
+interface BadgeProps {
+  chaptersDownloaded: number;
+  chaptersUnread: number;
+  theme: ThemeColors;
+}
+interface UnreadBadgeProps extends BadgeProps {
+  showDownloadBadges: boolean;
+}
+interface DownloadBadgeProps extends BadgeProps {
+  showUnreadBadges: boolean;
+}
+
+const UnreadBadge: React.FC<UnreadBadgeProps> = ({
   chaptersDownloaded,
   chaptersUnread,
   showDownloadBadges,
@@ -215,13 +233,8 @@ const UnreadBadge = ({
   <Text
     style={[
       styles.unreadBadge,
-      !chaptersDownloaded && {
-        borderTopLeftRadius: 4,
-        borderBottomLeftRadius: 4,
-      },
-      !showDownloadBadges && {
-        borderRadius: 4,
-      },
+      !chaptersDownloaded && styles.LeftBorderRadius,
+      !showDownloadBadges && styles.standardBorderRadius,
       {
         backgroundColor: theme.primary,
         color: theme.onPrimary,
@@ -232,7 +245,7 @@ const UnreadBadge = ({
   </Text>
 );
 
-const DownloadBadge = ({
+const DownloadBadge: React.FC<DownloadBadgeProps> = ({
   chaptersDownloaded,
   showUnreadBadges,
   chaptersUnread,
@@ -241,13 +254,8 @@ const DownloadBadge = ({
   <Text
     style={[
       styles.downloadBadge,
-      !chaptersUnread && {
-        borderTopRightRadius: 4,
-        borderBottomRightRadius: 4,
-      },
-      !showUnreadBadges && {
-        borderRadius: 4,
-      },
+      !chaptersUnread && styles.RightBorderRadius,
+      !showUnreadBadges && styles.standardBorderRadius,
       {
         backgroundColor: theme.tertiary,
         color: theme.onTertiary,
@@ -259,6 +267,19 @@ const DownloadBadge = ({
 );
 
 const styles = StyleSheet.create({
+  LeftBorderRadius: {
+    borderTopLeftRadius: 4,
+    borderBottomLeftRadius: 4,
+  },
+  RightBorderRadius: {
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
+  },
+  standardBorderRadius: {
+    borderRadius: 4,
+  },
+  opacityPoint5: { opacity: 0.5 },
+  padding4: { padding: 4 },
   titleContainer: {
     flex: 1,
     borderRadius: 4,
@@ -322,4 +343,18 @@ const styles = StyleSheet.create({
     left: 10,
     flexDirection: 'row',
   },
+  standardNovelCover: {
+    borderRadius: 6,
+    overflow: 'hidden',
+    margin: 2,
+  },
+  selectedNovelCover: {
+    opacity: 0.8,
+  },
+  compactTitle: {
+    color: 'rgba(255,255,255,1)',
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: { width: -1, height: 1 },
+    textShadowRadius: 10,
+  },
 });

src/components/NovelList.tsx

@@ -9,16 +9,18 @@ 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
 >;
 
-const NovelList: React.FC<
-  FlatListProps<LibraryNovelInfo | NovelInfo | SourceNovelItem>
-> = props => {
+interface NovelListProps
+  extends FlatListProps<LibraryNovelInfo | NovelInfo | SourceNovelItem> {
+  inSource?: boolean;
+}
+
+const NovelList: React.FC<NovelListProps> = props => {
   const { displayMode = DisplayModes.Comfortable, novelsPerRow = 3 } =
     useLibrarySettings();
 
@@ -38,7 +40,20 @@ const NovelList: React.FC<
     }
   }, [isListView, orientation, novelsPerRow]);
 
-  const keyExtractor = useCallback(item => item.sourceId + item.novelUrl, []);
+  const keyExtractor = useCallback(
+    (item: SourceNovelItem) => item.sourceId + item.novelUrl,
+    [],
+  );
+  var extendedNovelList: Array<SourceNovelItem | LibraryNovelInfo> =
+    props?.data as Array<LibraryNovelInfo>;
+  if (props.data?.length && props.inSource) {
+    let remainder = numColumns - (props.data?.length % numColumns);
+    let extension = [];
+    if (remainder !== 0 && remainder !== numColumns) {
+      extension.push({ sourceId: -remainder, novelName: '', novelUrl: '' });
+    }
+    extendedNovelList = [...props.data, ...extension];
+  }
 
   return (
     <FlatList
@@ -50,6 +65,7 @@ const NovelList: React.FC<
       key={numColumns}
       keyExtractor={keyExtractor}
       {...props}
+      data={extendedNovelList}
     />
   );
 };

src/components/RadioButton.js

@@ -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>

src/components/RadioButton/RadioButton.tsx

@@ -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}

src/components/SearchbarV2/SearchbarV2.tsx

@@ -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> = ({
@@ -53,13 +52,13 @@ const Searchbar: React.FC<SearcbarProps> = ({
           marginTop,
           marginRight,
           marginLeft,
-          backgroundColor: color(theme.primary).alpha(0.08).string(),
+          backgroundColor: theme.surface2,
         },
       ]}
     >
       <Pressable
         onPress={focusSearchbar}
-        android_ripple={{ color: color(theme.primary).alpha(12).toString() }}
+        android_ripple={{ color: theme.rippleColor }}
         style={[styles.searchbar]}
       >
         <IconButtonV2

src/components/Switch/Switch.js

@@ -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',
-  },
-});

src/components/Switch/Switch.tsx

@@ -0,0 +1,76 @@
+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: 12,
+    },
+    row: {
+      flexDirection: 'row',
+      flex: 1,
+    },
+    icon: {
+      margin: 0,
+    },
+    textContainer: {
+      marginLeft: icon && 16,
+    },
+    text: {
+      fontSize: 16,
+      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;

src/components/SwitchItem/SwitchItem.tsx

@@ -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

src/components/ThemePicker/ThemePicker.js

@@ -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,
       }}

src/database/db.ts

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

src/database/queries/CategoryQueries.ts

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

src/database/queries/ChapterQueries.ts

@@ -243,13 +243,15 @@ 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);
-  await RNFetchBlob.fs.createFile(path, '.nomedia', 'utf8');
 
   if (data) {
     const { sourceId, novelId, chapterId } = data;
@@ -269,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;
@@ -350,20 +374,16 @@ 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]}`);
         }
       }
     }

src/database/queries/DownloadQueries.ts

@@ -79,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;
+        },
       );
     }),
   );

src/database/queries/LibraryQueries.ts

@@ -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
     `;
 

src/database/queries/NovelQueries.js

@@ -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(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)';
@@ -53,19 +53,6 @@ export const followNovel = async (followed, novelId) => {
   });
 };
 
-export const unfollowNovel = async novelId => {
-  db.transaction(tx => {
-    tx.executeSql(
-      'UPDATE novels SET followed = 0 WHERE novelId = ?',
-      [novelId],
-      (txo, res) => {},
-      (txObj, error) => {
-        // console.log('Error ', error)
-      },
-    );
-  });
-};
-
 const checkNovelInCacheQuery = 'SELECT * FROM novels WHERE novelUrl=? LIMIT 1';
 
 export const checkNovelInCache = novelUrl => {

src/database/queries/NovelQueriesV2.ts

@@ -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');

src/database/queries/StatsQueries.ts

@@ -1,5 +1,5 @@
 import * as SQLite from 'expo-sqlite';
-import { countBy } from 'lodash';
+import { countBy } from 'lodash-es';
 import { LibraryStats } from '../types';
 import { txnErrorCallback } from '../utils/helpers';
 

src/database/tables/DownloadTable.ts

@@ -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)';

src/database/types/index.ts

@@ -30,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;

src/hooks/githubUpdateChecker.js

@@ -23,13 +23,19 @@ export const useGithubUpdateChecker = () => {
   };
 
   const isNewVersion = versionTag => {
-    let currentVersion = `${appVersion}`;
     const regex = /[^\\d.]/;
 
-    let newVersion = versionTag.replace(regex, '');
-    currentVersion = currentVersion;
+    const currentVersion = appVersion;
+    const newVersion = versionTag.replace(regex, '');
 
-    return newVersion !== currentVersion;
+    const newSemVer = newVersion.split('.');
+    const oldSemVer = currentVersion.split('.');
+
+    oldSemVer?.map((version, index) => {
+      if (newSemVer[index] > version) {
+        return true;
+      }
+    });
   };
 
   useEffect(() => {

src/hooks/index.ts

@@ -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';

src/hooks/reduxHooks.js

@@ -85,17 +85,10 @@ const usePosition = (novelId, chapterId) => {
   return position;
 };
 
-const useTrackingStatus = () => {
-  const tracker = useSelector(state => state.trackerReducer);
-
-  return tracker;
-};
-
 export {
   useSettings,
   usePreferences,
   useContinueReading,
-  useTrackingStatus,
   useNovel,
   useChapter,
   useSavedSettings,

src/hooks/useBoolean.ts

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

src/hooks/useChapter.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import sanitize from 'sanitize-html';
-import { defaultTo } from 'lodash';
+import { defaultTo } from 'lodash-es';
 import { getChapterFromDb } from '../database/queries/DownloadQueries';
 
 import { sourceManager } from '../sources/sourceManager';

src/hooks/useDeviceOrientation.ts

@@ -0,0 +1,11 @@
+import { useWindowDimensions } from 'react-native';
+
+export const useDeviceOrientation = () => {
+  const window = useWindowDimensions();
+
+  if (window.width > window.height) {
+    return 'landscape';
+  } else {
+    return 'potrait';
+  }
+};

src/hooks/useFullscreenMode.ts

@@ -8,7 +8,6 @@ import {
   hideNavigationBar,
   showNavigationBar,
 } from '../theme/NativeModules/NavigationBarColor';
-import { readerBackground } from '../screens/reader/utils/readerStyles';
 import { useTheme } from './useTheme';
 
 const useFullscreenMode = () => {
@@ -16,7 +15,7 @@ const useFullscreenMode = () => {
   const readerSettings = useReaderSettings();
   const { fullScreenMode } = useSettingsV1();
 
-  const backgroundColor = readerBackground(readerSettings.theme);
+  const backgroundColor = readerSettings.theme;
 
   const theme = useTheme();
 

src/hooks/usePreviousRouteName.ts

@@ -0,0 +1,9 @@
+import { useNavigationState } from '@react-navigation/native';
+
+export const usePreviousRouteName = () => {
+  return useNavigationState(state =>
+    state.routes[state.index - 1]?.name
+      ? state.routes[state.index - 1].name
+      : 'None',
+  );
+};

src/hooks/useSearch.ts

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

src/hooks/useSourceStorage.ts

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

src/hooks/useTextToSpeech.js

@@ -1,57 +1,37 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import Tts from 'react-native-tts';
-import { htmlToText } from '../sources/helpers/htmlToText';
-
-export const useTextToSpeech = (html, markChapterAdRead) => {
-  const [ttsStatus, setTtsStatus] = useState();
-  const [ttsPosition, setTtsPosition] = useState({ end: 0 });
-
-  let text = htmlToText(html);
 
+export const useTextToSpeech = (sentences, markChapterAsRead) => {
+  const [ttsStatus, setTtsStatus] = useState({});
+  const ttsPosition = useRef(0);
   useEffect(() => {
-    Tts.addEventListener('tts-start', () => setTtsStatus('start'));
-    Tts.addEventListener('tts-progress', event => {
-      setTtsStatus('progress');
-      setTtsPosition(event);
-    });
     Tts.addEventListener('tts-finish', () => {
-      setTtsStatus('finish');
-      markChapterAdRead();
+      if (ttsPosition.current == sentences.length - 1) {
+        markChapterAsRead();
+        setTtsStatus('finish');
+      }
+      ttsPosition.current = ttsPosition.current + 1;
     });
-    Tts.addEventListener('tts-cancel', () => setTtsStatus('paused'));
-
-    return () => Tts.stop();
-  }, []);
+    return () => {
+      Tts.removeAllListeners('tts-finish');
+      Tts.stop();
+    };
+  }, [sentences.length]);
+  // for the first time rendering, chapter was not loaded.
+  // then htmlToText function would return
+  // "Chapter is empty.\n\nReport if it's available in webview." (length = 3)
 
   const startTts = () => {
     if (ttsStatus === 'progress') {
-      setTtsPosition({ end: 0 });
-      setTtsStatus('finish');
+      setTtsStatus('paused');
       Tts.stop();
       return;
     }
 
-    if (text.length >= 3999) {
-      const splitNChars = (txt, num) => {
-        let result = [];
-        for (let i = 0; i < txt.length; i += num) {
-          result.push(txt.substr(i, num));
-        }
-        return result;
-      };
-
-      let splitMe = splitNChars(text, 3999);
-
-      splitMe.forEach(value => {
-        Tts.speak(value, {
-          androidParams: {
-            KEY_PARAM_STREAM: 'STREAM_MUSIC',
-          },
-        });
-      });
-    } else {
-      Tts.stop();
-      Tts.speak(text, {
+    setTtsStatus('progress');
+    Tts.stop();
+    for (let i = ttsPosition.current; i < sentences.length; i++) {
+      Tts.speak(sentences[i], {
         androidParams: {
           KEY_PARAM_STREAM: 'STREAM_MUSIC',
         },
@@ -59,42 +39,5 @@ export const useTextToSpeech = (html, markChapterAdRead) => {
     }
   };
 
-  const pauseTts = () => {
-    if (ttsStatus === 'progress') {
-      setTtsStatus('paused');
-      Tts.stop();
-      return;
-    } else {
-      text = text.slice(ttsPosition.end);
-
-      if (text.length >= 3999) {
-        const splitNChars = (txt, num) => {
-          let result = [];
-          for (let i = 0; i < txt.length; i += num) {
-            result.push(txt.substr(i, num));
-          }
-          return result;
-        };
-
-        let splitMe = splitNChars(text, 3999);
-
-        splitMe.forEach(value => {
-          Tts.speak(value, {
-            androidParams: {
-              KEY_PARAM_STREAM: 'STREAM_MUSIC',
-            },
-          });
-        });
-      } else {
-        Tts.stop();
-        Tts.speak(text, {
-          androidParams: {
-            KEY_PARAM_STREAM: 'STREAM_MUSIC',
-          },
-        });
-      }
-    }
-  };
-
-  return [ttsStatus, ttsPosition, startTts, pauseTts];
+  return [ttsStatus, startTts];
 };

src/hooks/useTheme.ts

@@ -1,33 +1,59 @@
+import { useMemo } from 'react';
+import { Appearance } from 'react-native';
 import {
   useMMKVBoolean,
   useMMKVObject,
   useMMKVString,
 } from 'react-native-mmkv';
-import { Appearance } from 'react-native';
-import { defaultTheme } from '../theme/md3/defaultTheme';
-import { MD3ThemeType } from '../theme/types';
-import { useMemo } from 'react';
+import { overlay } from 'react-native-paper';
+import Color from 'color';
 
-export const useTheme = (): MD3ThemeType => {
-  const [appTheme] = useMMKVObject<MD3ThemeType>('APP_THEME');
+import { defaultTheme } from '@theme/md3/defaultTheme';
+import { ThemeColors } from '@theme/types';
+
+const getElevationColor = (colors: ThemeColors, elevation: number) => {
+  return Color(colors.surface)
+    .mix(Color(colors.primary), elevation)
+    .rgb()
+    .string();
+};
+
+export const useTheme = (): ThemeColors => {
+  const [appTheme] = useMMKVObject<ThemeColors>('APP_THEME');
   const [isAmoledBlack] = useMMKVBoolean('AMOLED_BLACK');
   const [customAccent] = useMMKVString('CUSTOM_ACCENT_COLOR');
 
-  const theme: MD3ThemeType = useMemo(() => {
-    let colors =
+  const theme: ThemeColors = useMemo(() => {
+    const isDeviveColorSchemeDark = Appearance.getColorScheme() === 'dark';
+
+    let colors: ThemeColors =
       appTheme ||
-      ((Appearance.getColorScheme() === 'dark'
-        ? defaultTheme.dark
-        : defaultTheme.light) as MD3ThemeType);
+      (isDeviveColorSchemeDark ? defaultTheme.dark : defaultTheme.light);
 
     if (isAmoledBlack && colors.isDark) {
-      colors = { ...colors, background: '#000000', surface: '#000000' };
+      colors = {
+        ...colors,
+        background: '#000000',
+        surface: '#000000',
+      };
     }
 
     if (customAccent) {
-      colors = { ...colors, primary: customAccent, secondary: customAccent };
+      colors = {
+        ...colors,
+        primary: customAccent,
+        secondary: customAccent,
+      };
     }
 
+    colors = {
+      ...colors,
+      surface2: getElevationColor(colors, 0.08),
+      overlay3: overlay(3, colors.surface),
+      rippleColor: Color(colors.primary).alpha(0.12).toString(),
+      surfaceReader: Color(colors.surface).alpha(0.9).toString(),
+    };
+
     return colors;
   }, [appTheme?.id, isAmoledBlack, customAccent]);
 

src/navigators/BottomNavigator.js

@@ -25,12 +25,7 @@ const BottomNavigator = () => {
 
   return (
     <Tab.Navigator
-      barStyle={{
-        backgroundColor: Color(theme.surface)
-          .mix(Color(theme.primary), 0.08)
-          .rgb()
-          .string(),
-      }}
+      barStyle={{ backgroundColor: theme.surface2 }}
       theme={{ colors: theme }}
       activeColor={theme.onSecondaryContainer}
       shifting={!showLabelsInNav}

src/navigators/Main.js

@@ -25,6 +25,7 @@ import SourceNovels from '../screens/browse/SourceNovels';
 import MigrateNovel from '../screens/browse/migration/MigrationNovels';
 
 import MalTopNovels from '../screens/browse/discover/MalTopNovels';
+import AniListTopNovels from '../screens/browse/discover/AniListTopNovels';
 import NewUpdateDialog from '../components/NewUpdateDialog';
 import BrowseSettings from '../screens/browse/BrowseSettings';
 import { useAppDispatch } from '@redux/hooks';
@@ -67,6 +68,7 @@ const MainNavigator = () => {
         <Stack.Screen name="MoreStack" component={MoreStack} />
         <Stack.Screen name="SourceScreen" component={BrowseSourceScreen} />
         <Stack.Screen name="BrowseMal" component={MalTopNovels} />
+        <Stack.Screen name="BrowseAL" component={AniListTopNovels} />
         <Stack.Screen name="BrowseSettings" component={BrowseSettings} />
         <Stack.Screen
           name="GlobalSearchScreen"

src/navigators/MoreStack.js

@@ -9,7 +9,7 @@ import TrackerSettings from '../screens/settings/SettingsTrackerScreen';
 import ReaderSettings from '../screens/settings/SettingsReaderScreen/SettingsReaderScreen';
 import BackupSettings from '../screens/settings/SettingsBackupScreen';
 import AdvancedSettings from '../screens/settings/SettingsAdvancedScreen';
-import GeneralSettings from '../screens/settings/SettingsGeneralScreen';
+import GeneralSettings from '../screens/settings/SettingsGeneralScreen/SettingsGeneralScreen';
 import DownloadQueue from '../screens/more/DownloadQueueScreen';
 import Downloads from '../screens/more/DownloadsScreen';
 import AppearanceSettings from '../screens/settings/SettingsAppearanceScreen';

src/redux/hooks/index.ts

@@ -13,9 +13,6 @@ export const useSettingsV2 = () =>
 export const useBrowseSettings = () =>
   useAppSelector((state: RootState) => state.settingsReducerV2.browse) || {};
 
-export const useAppearanceSettings = () =>
-  useAppSelector((state: RootState) => state.settingsReducerV2.appearance);
-
 export const useReaderSettings = () =>
   useAppSelector((state: RootState) => state.settingsReducer.reader);
 
@@ -23,11 +20,11 @@ export const useReaderSettings = () =>
 export const useLibrarySettings = () =>
   useAppSelector((state: RootState) => state.settingsReducerV2.library);
 
-export const useUpdateSettings = () =>
-  useAppSelector((state: RootState) => state.settingsReducerV2.updates);
-
 export const useDownloadQueue = () =>
   useAppSelector((state: RootState) => state.downloadsReducer.downloadQueue);
 
 export const useSourcesReducer = () =>
   useAppSelector((state: RootState) => state.sourceReducerV2);
+
+export const useTrackerReducer = () =>
+  useAppSelector(state => state.trackerReducer);