Release v1.0.21

.gitignore

@@ -11,3 +11,63 @@ web-build/
 
 # macOS
 .DS_Store
+
+# @generated expo-cli sync-2138f1e3e130677ea10ea873f6d498e3890e677b
+# The following patterns were generated by expo-cli
+
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Expo
+.expo/
+web-build/
+
+# @end expo-cli

App.js

@@ -1,11 +1,14 @@
 import React, { useEffect } from "react";
+import { StatusBar } from "react-native";
+
 import { useFonts } from "expo-font";
 import { Provider as PaperProvider } from "react-native-paper";
-import Main from "./src/Navigators/Main";
-
 import { Provider } from "react-redux";
 import { persistor, store } from "./src/redux/store";
 import { PersistGate } from "redux-persist/lib/integration/react";
+
+import Main from "./src/Navigators/Main";
+
 import { createDB, deleteDb } from "./src/Database/DBHelper";
 import { fonts } from "./src/Theme/fonts";
 
@@ -24,6 +27,10 @@ const App = () => {
         <Provider store={store}>
             <PersistGate loading={null} persistor={persistor}>
                 <PaperProvider>
+                    <StatusBar
+                        translucent={true}
+                        backgroundColor="transparent"
+                    />
                     <Main />
                 </PaperProvider>
             </PersistGate>

android/app/BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "com.rajarsheechatterjee.LNReader",
+)
+
+android_resource(
+    name = "res",
+    package = "com.rajarsheechatterjee.LNReader",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)

android/app/build.gradle

@@ -0,0 +1,219 @@
+apply plugin: "com.android.application"
+
+import com.android.build.OutputFile
+
+/**
+ * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
+ * and bundleReleaseJsAndAssets).
+ * These basically call `react-native bundle` with the correct arguments during the Android build
+ * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
+ * bundle directly from the development server. Below you can see all the possible configurations
+ * and their defaults. If you decide to add a configuration block, make sure to add it before the
+ * `apply from: "../../node_modules/react-native/react.gradle"` line.
+ *
+ * project.ext.react = [
+ *   // the name of the generated asset file containing your JS bundle
+ *   bundleAssetName: "index.android.bundle",
+ *
+ *   // the entry file for bundle generation. If none specified and
+ *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
+ *   // default. Can be overridden with ENTRY_FILE environment variable.
+ *   entryFile: "index.android.js",
+ *
+ *   // https://reactnative.dev/docs/performance#enable-the-ram-format
+ *   bundleCommand: "ram-bundle",
+ *
+ *   // whether to bundle JS and assets in debug mode
+ *   bundleInDebug: false,
+ *
+ *   // whether to bundle JS and assets in release mode
+ *   bundleInRelease: true,
+ *
+ *   // whether to bundle JS and assets in another build variant (if configured).
+ *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
+ *   // The configuration property can be in the following formats
+ *   //         'bundleIn${productFlavor}${buildType}'
+ *   //         'bundleIn${buildType}'
+ *   // bundleInFreeDebug: true,
+ *   // bundleInPaidRelease: true,
+ *   // bundleInBeta: true,
+ *
+ *   // whether to disable dev mode in custom build variants (by default only disabled in release)
+ *   // for example: to disable dev mode in the staging build type (if configured)
+ *   devDisabledInStaging: true,
+ *   // The configuration property can be in the following formats
+ *   //         'devDisabledIn${productFlavor}${buildType}'
+ *   //         'devDisabledIn${buildType}'
+ *
+ *   // the root of your project, i.e. where "package.json" lives
+ *   root: "../../",
+ *
+ *   // where to put the JS bundle asset in debug mode
+ *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
+ *
+ *   // where to put the JS bundle asset in release mode
+ *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in debug mode
+ *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in release mode
+ *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
+ *
+ *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
+ *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
+ *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
+ *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
+ *   // for example, you might want to remove it from here.
+ *   inputExcludes: ["android/**", "ios/**"],
+ *
+ *   // override which node gets called and with what additional arguments
+ *   nodeExecutableAndArgs: ["node"],
+ *
+ *   // supply additional arguments to the packager
+ *   extraPackagerArgs: []
+ * ]
+ */
+
+project.ext.react = [
+    enableHermes: true
+]
+
+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"
+apply from: "../../node_modules/expo-updates/scripts/create-manifest-android.gradle"
+
+/**
+ * Set this to true to create two separate APKs instead of one:
+ *   - An APK that only works on ARM devices
+ *   - An APK that only works on x86 devices
+ * The advantage is the size of the APK is reduced by about 4MB.
+ * Upload all the APKs to the Play Store and people will download
+ * the correct one based on the CPU architecture of their device.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Run Proguard to shrink the Java bytecode in release builds.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore.
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US.  Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+/**
+ * Whether to enable the Hermes VM.
+ *
+ * This should be set on project.ext.react and mirrored here.  If it is not set
+ * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
+ * and the benefits of using Hermes will therefore be sharply reduced.
+ */
+def enableHermes = project.ext.react.get("enableHermes", false);
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    defaultConfig {
+        applicationId 'com.rajarsheechatterjee.LNReader'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.21"
+    }
+    splits {
+        abi {
+            reset()
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false  // If true, also generate a universal APK
+            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+        }
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // https://developer.android.com/studio/build/configure-apk-splits.html
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+            }
+
+        }
+    }
+}
+
+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"
+    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
+      exclude group:'com.facebook.fbjni'
+    }
+    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.facebook.flipper'
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
+    }
+    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")
+    } else {
+        implementation jscFlavor
+    }
+}
+
+// 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
+    into 'libs'
+}
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/app/build_defs.bzl

@@ -0,0 +1,19 @@
+"""Helper definitions to glob .aar and .jar targets"""
+
+def create_aar_targets(aarfiles):
+    for aarfile in aarfiles:
+        name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
+        lib_deps.append(":" + name)
+        android_prebuilt_aar(
+            name = name,
+            aar = aarfile,
+        )
+
+def create_jar_targets(jarfiles):
+    for jarfile in jarfiles:
+        name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
+        lib_deps.append(":" + name)
+        prebuilt_jar(
+            name = name,
+            binary_jar = jarfile,
+        )

android/app/proguard-rules.pro

@@ -0,0 +1,10 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+</manifest>

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

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ */
+package com.lnreader;
+
+import android.content.Context;
+import com.facebook.flipper.android.AndroidFlipperClient;
+import com.facebook.flipper.android.utils.FlipperUtils;
+import com.facebook.flipper.core.FlipperClient;
+import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
+import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
+import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
+import com.facebook.flipper.plugins.inspector.DescriptorMapping;
+import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
+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.ReactInstanceManager;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.modules.network.NetworkingModule;
+import okhttp3.OkHttpClient;
+
+public class ReactNativeFlipper {
+  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
+    if (FlipperUtils.shouldEnableFlipper(context)) {
+      final FlipperClient client = AndroidFlipperClient.getInstance(context);
+      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
+      client.addPlugin(new ReactFlipperPlugin());
+      client.addPlugin(new DatabasesFlipperPlugin(context));
+      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
+      client.addPlugin(CrashReporterPlugin.getInstance());
+      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
+      NetworkingModule.setCustomClientBuilder(
+          new NetworkingModule.CustomClientBuilder() {
+            @Override
+            public void apply(OkHttpClient.Builder builder) {
+              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
+            }
+          });
+      client.addPlugin(networkFlipperPlugin);
+      client.start();
+      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
+      // Hence we run if after all native modules have been initialized
+      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
+      if (reactContext == null) {
+        reactInstanceManager.addReactInstanceEventListener(
+            new ReactInstanceManager.ReactInstanceEventListener() {
+              @Override
+              public void onReactContextInitialized(ReactContext reactContext) {
+                reactInstanceManager.removeReactInstanceEventListener(this);
+                reactContext.runOnNativeModulesQueueThread(
+                    new Runnable() {
+                      @Override
+                      public void run() {
+                        client.addPlugin(new FrescoFlipperPlugin());
+                      }
+                    });
+              }
+            });
+      } else {
+        client.addPlugin(new FrescoFlipperPlugin());
+      }
+    }
+  }
+}

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,36 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.rajarsheechatterjee.LNReader">
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
+  <uses-permission android:name="android.permission.WAKE_LOCK"/>
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+  <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@rajarsheechatterjee/LNReader"/>
+    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="41.0.0"/>
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_color" android:resource="@color/notification_icon_color"/>
+    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:screenOrientation="unspecified">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="lnreader"/>
+        <data android:scheme="com.rajarsheechatterjee.LNReader"/>
+      </intent-filter>
+    </activity>
+    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
+  </application>
+</manifest>

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

@@ -0,0 +1,62 @@
+// FullScreenModule.java
+
+package com.rajarsheechatterjee.LNReader;
+
+import android.os.Build;
+import android.view.View;
+import android.view.WindowManager;
+import android.app.Activity;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.UiThreadUtil;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+
+public class FullScreenModule extends ReactContextBaseJavaModule {
+    @Override
+    public String getName() {
+        return "FullScreen";
+    }
+
+    @ReactMethod
+    public void enable() {
+        UiThreadUtil.runOnUiThread(
+            new Runnable() {
+                @Override
+                public void run() {
+                    getCurrentActivity().getWindow().getDecorView().setSystemUiVisibility(
+                        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
+                        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
+                        View.SYSTEM_UI_FLAG_FULLSCREEN |
+                        View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
+                        View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
+                    );
+                }
+            }
+        );
+
+    }
+
+    @ReactMethod
+    public void disable() {
+        UiThreadUtil.runOnUiThread(
+            new Runnable() {
+                @Override
+                public void run() {
+                    getCurrentActivity().getWindow().getDecorView().setSystemUiVisibility(
+                        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
+                        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
+                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
+                    );
+                }
+            }
+        );
+
+    }
+
+    FullScreenModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+}

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

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

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

@@ -0,0 +1,62 @@
+package com.rajarsheechatterjee.LNReader;
+import android.content.res.Configuration;
+import android.content.Intent;
+
+import android.os.Bundle;
+import android.view.WindowManager;
+import android.os.Build;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
+
+import expo.modules.splashscreen.singletons.SplashScreen;
+import expo.modules.splashscreen.SplashScreenImageResizeMode;
+
+
+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;
+        getWindow().setAttributes(layoutParams);
+    }
+    super.onCreate(savedInstanceState);
+    SplashScreen.show(this, SplashScreenImageResizeMode.COVER, ReactRootView.class, false);
+
+  }
+
+
+    /**
+     * Returns the name of the main component registered from JavaScript.
+     * This is used to schedule rendering of the component.
+     */
+    @Override
+    protected String getMainComponentName() {
+        return "main";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new ReactActivityDelegate(this, getMainComponentName()) {
+            @Override
+            protected ReactRootView createRootView() {
+                return new RNGestureHandlerEnabledRootView(MainActivity.this);
+            }
+        };
+    }
+}

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

@@ -0,0 +1,132 @@
+package com.rajarsheechatterjee.LNReader;
+
+import android.app.Application;
+import android.content.Context;
+import android.net.Uri;
+
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+import com.facebook.soloader.SoLoader;
+import com.rajarsheechatterjee.LNReader.generated.BasePackageList;
+
+import org.unimodules.adapters.react.ReactAdapterPackage;
+import org.unimodules.adapters.react.ModuleRegistryAdapter;
+import org.unimodules.adapters.react.ReactModuleRegistryProvider;
+import org.unimodules.core.interfaces.Package;
+import org.unimodules.core.interfaces.SingletonModule;
+import expo.modules.constants.ConstantsPackage;
+import expo.modules.permissions.PermissionsPackage;
+import expo.modules.filesystem.FileSystemPackage;
+import expo.modules.updates.UpdatesController;
+
+import com.facebook.react.bridge.JSIModulePackage;
+import com.swmansion.reanimated.ReanimatedJSIModulePackage;
+
+import java.lang.reflect.InvocationTargetException;
+import java.util.Arrays;
+import java.util.List;
+import javax.annotation.Nullable;
+
+import com.rajarsheechatterjee.LNReader.FullScreenPackage;
+
+
+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;
+    }
+
+    @Override
+    protected List<ReactPackage> getPackages() {
+      List<ReactPackage> packages = new PackageList(this).getPackages();
+      packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
+      packages.add(new FullScreenPackage());
+      return packages;
+    }
+
+    @Override
+    protected String getJSMainModuleName() {
+      return "index";
+    }
+
+    @Override
+    protected JSIModulePackage getJSIModulePackage() {
+      return new ReanimatedJSIModulePackage();
+    }
+
+    @Override
+    protected @Nullable String getJSBundleFile() {
+      if (BuildConfig.DEBUG) {
+        return super.getJSBundleFile();
+      } else {
+        return UpdatesController.getInstance().getLaunchAssetFile();
+      }
+    }
+
+    @Override
+    protected @Nullable String getBundleAssetName() {
+      if (BuildConfig.DEBUG) {
+        return super.getBundleAssetName();
+      } else {
+        return UpdatesController.getInstance().getBundleAssetName();
+      }
+    }
+  };
+
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+    return mReactNativeHost;
+  }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
+    SoLoader.init(this, /* native exopackage */ false);
+
+    if (!BuildConfig.DEBUG) {
+      UpdatesController.initialize(this);
+    }
+
+    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+  }
+
+  /**
+   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
+   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+   *
+   * @param context
+   * @param reactInstanceManager
+   */
+  private static void initializeFlipper(
+      Context context, ReactInstanceManager reactInstanceManager) {
+    if (BuildConfig.DEBUG) {
+      try {
+        /*
+         We use reflection here to pick up the class that initializes Flipper,
+        since Flipper library is not available in release mode
+        */
+        Class<?> aClass = Class.forName("com.rajarsheechatterjee.LNReader.ReactNativeFlipper");
+        aClass
+            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
+            .invoke(null, context, reactInstanceManager);
+      } catch (ClassNotFoundException e) {
+        e.printStackTrace();
+      } catch (NoSuchMethodException e) {
+        e.printStackTrace();
+      } catch (IllegalAccessException e) {
+        e.printStackTrace();
+      } catch (InvocationTargetException e) {
+        e.printStackTrace();
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+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.backgroundfetch.BackgroundFetchPackage(),
+        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.imageloader.ImageLoaderPackage(),
+        new expo.modules.keepawake.KeepAwakePackage(),
+        new expo.modules.lineargradient.LinearGradientPackage(),
+        new expo.modules.notifications.NotificationsPackage(),
+        new expo.modules.permissions.PermissionsPackage(),
+        new expo.modules.sharing.SharingPackage(),
+        new expo.modules.splashscreen.SplashScreenPackage(),
+        new expo.modules.sqlite.SQLitePackage(),
+        new expo.modules.taskManager.TaskManagerPackage(),
+        new expo.modules.updates.UpdatesPackage(),
+        new expo.modules.webbrowser.WebBrowserPackage()
+    );
+  }
+}

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

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  This file was created by '@expo/configure-splash-screen' and some of it's content shouldn't be modified by hand
+-->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+</layer-list>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<resources>
+  <color name="iconBackground">#FFFFFF</color>
+  <color name="splashscreen_background">#000000</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#00000000</color>
+  <color name="navigationBarColor">#000000</color>
+  <color name="notification_icon_color">#00adb5</color>
+</resources>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<resources>
+  <string name="app_name">LNReader</string>
+</resources>

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

@@ -0,0 +1,23 @@
+<?xml
+  version="1.0"
+  encoding="UTF-8"
+  standalone="yes"
+?>
+<resources>
+  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <item name="android:textColor">#000000</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+    <item name="android:navigationBarColor">#000000</item>
+    <item name="android:statusBarColor">#000000</item>
+    
+  </style>
+  <style name="Theme.App.SplashScreen" parent="Theme.AppCompat.Light.NoActionBar">
+    <!-- Below line is handled by '@expo/configure-splash-screen' command and it's discouraged to modify it manually -->
+    <!-- Customize your splash screen theme here -->
+    <item name="android:windowBackground">@drawable/splashscreen</item>
+    <item name="android:navigationBarColor">#000000</item>
+    <item name="android:statusBarColor">#000000</item>
+   
+  </style>
+</resources>

android/build.gradle

@@ -0,0 +1,38 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    ext {
+        buildToolsVersion = "29.0.3"
+        minSdkVersion = 21
+        compileSdkVersion = 30
+        targetSdkVersion = 30
+    }
+    repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:4.1.0")
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+allprojects {
+    repositories {
+        mavenLocal()
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url("$rootDir/../node_modules/react-native/android")
+        }
+        maven {
+            // Android JSC is installed from npm
+            url("$rootDir/../node_modules/jsc-android/dist")
+        }
+
+        google()
+        jcenter()
+        maven { url 'https://www.jitpack.io' }
+    }
+}

android/gradle.properties

@@ -0,0 +1,29 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# 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
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
+
+# Version of flipper SDK to use with React Native
+FLIPPER_VERSION=0.54.0

android/gradle/wrapper/gradle-wrapper.properties

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

android/gradlew

@@ -0,0 +1,183 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# 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
+#
+#      https://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.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# 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
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$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"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# 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
+    ;;
+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"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    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
+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" ;;
+    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, 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"
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,103 @@
+@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

android/settings.gradle

@@ -0,0 +1,9 @@
+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");
+applyNativeModulesSettingsGradle(settings)
+
+include ':app'

app.json

@@ -3,7 +3,7 @@
         "name": "LNReader",
         "slug": "LNReader",
         "scheme": "lnreader",
-        "version": "1.0.19",
+        "version": "1.0.21",
         "orientation": "default",
         "icon": "./assets/icon.png",
         "splash": {

index.js

@@ -0,0 +1,9 @@
+import 'react-native-gesture-handler';
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

metro.config.js

@@ -0,0 +1,4 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+module.exports = getDefaultConfig(__dirname);

package.json

@@ -1,9 +1,8 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "start": "react-native start",
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
     "web": "expo start --web",
     "eject": "expo eject"
   },
@@ -25,39 +24,48 @@
     "expo-notifications": "~0.11.6",
     "expo-permissions": "^12.0.1",
     "expo-sharing": "~9.1.2",
-    "expo-speech": "~9.1.0",
+    "expo-splash-screen": "~0.10.2",
     "expo-sqlite": "~9.1.0",
     "expo-status-bar": "~1.0.4",
     "expo-task-manager": "~9.1.0",
+    "expo-updates": "~0.5.4",
     "expo-web-browser": "~9.1.0",
     "moment": "^2.29.1",
     "qs": "^6.10.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native": "^0.64.2",
+    "react-native-cheerio": "^1.0.0-rc.4",
     "react-native-collapsible-header-views": "^1.1.2",
+    "react-native-device-info": "^8.1.3",
     "react-native-easing-gradient": "^0.1.2",
+    "react-native-fast-image": "^8.3.4",
     "react-native-fit-image": "^1.5.5",
     "react-native-gesture-handler": "~1.10.2",
+    "react-native-immersive-mode": "^2.0.0",
+    "react-native-navigation-bar-color": "^2.0.1",
     "react-native-offline": "^5.7.0",
+    "react-native-pager-view": "^5.1.10",
     "react-native-paper": "^4.5.0",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.0.0",
     "react-native-tab-view": "^3.0.1",
+    "react-native-unimodules": "~0.13.3",
     "react-native-vector-icons": "^7.1.0",
-    "react-native-web": "~0.13.12",
-    "react-native-webview": "11.2.3",
+    "react-native-web": "^0.16.5",
+    "react-native-webview": "^11.6.2",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.9",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
-    "rn-sliding-up-panel": "^2.4.4",
-    "react-native-pager-view": "5.0.12"
+    "rn-sliding-up-panel": "^2.4.4"
   },
   "devDependencies": {
     "@babel/core": "~7.9.0"
   },
-  "private": true
+  "private": true,
+  "name": "lnreader-eject",
+  "version": "1.0.0"
 }

src/Components/ColorPickerModal.js

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { StyleSheet, Text } from "react-native";
+
+import { Modal, Portal, TextInput } from "react-native-paper";
+
+const ColorPickerModal = ({
+    theme,
+    color,
+    title,
+    onSubmit,
+    hideModal,
+    modalVisible,
+}) => {
+    const [text, setText] = useState(color);
+    const [error, setError] = useState();
+
+    const onDismiss = () => {
+        hideModal();
+        setText();
+        setError();
+    };
+
+    const onChangeText = (text) => setText(text);
+
+    const onSubmitEditing = () => {
+        const re = /^#([0-9a-f]{6}|[0-9a-f]{3})$/i;
+
+        if (text.match(re)) {
+            onSubmit(text);
+            hideModal();
+        } else {
+            setError("Enter a valid hex color code");
+        }
+    };
+
+    const textInputTheme = {
+        colors: {
+            primary: color,
+            placeholder: theme.textColorHint,
+            text: theme.textColorPrimary,
+            background: "transparent",
+        },
+    };
+
+    return (
+        <Portal>
+            <Modal
+                visible={modalVisible}
+                onDismiss={onDismiss}
+                contentContainerStyle={[
+                    styles.modalContainer,
+                    { backgroundColor: theme.colorPrimary },
+                ]}
+            >
+                <Text
+                    style={[
+                        styles.modalTitle,
+                        { color: theme.textColorPrimary },
+                    ]}
+                >
+                    {title}
+                </Text>
+                <TextInput
+                    value={text}
+                    defaultValue={color}
+                    placeholder="Hex Color Code (E.g. #3399FF)"
+                    onChangeText={onChangeText}
+                    onSubmitEditing={onSubmitEditing}
+                    mode="outlined"
+                    theme={textInputTheme}
+                    underlineColor={theme.textColorHint}
+                    dense
+                    error={error}
+                />
+                <Text style={styles.errorText}>{error}</Text>
+            </Modal>
+        </Portal>
+    );
+};
+
+export default ColorPickerModal;
+
+const styles = StyleSheet.create({
+    modalContainer: {
+        margin: 30,
+        padding: 20,
+        borderRadius: 8,
+    },
+    modalTitle: {
+        fontSize: 18,
+        marginBottom: 16,
+    },
+    errorText: {
+        color: "#FF0033",
+        paddingTop: 8,
+    },
+});

src/Components/Fullscreen.js

@@ -0,0 +1,2 @@
+import { NativeModules } from "react-native";
+module.exports = NativeModules.FullScreen;

src/Components/ListView.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { StyleSheet, View, Text, Image } from "react-native";
+import FastImage from "react-native-fast-image";
 import { TouchableRipple } from "react-native-paper";
 
 const ListView = ({ item, downloadBadge, unreadBadge, theme, onPress }) => {
@@ -12,7 +13,7 @@ const ListView = ({ item, downloadBadge, unreadBadge, theme, onPress }) => {
             onPress={onPress}
         >
             <>
-                <Image
+                <FastImage
                     source={{ uri: item.novelCover }}
                     style={styles.extensionIcon}
                 />

src/Components/NovelCover.js

@@ -1,24 +1,27 @@
 import React from "react";
-import { StyleSheet, View, Text, ImageBackground, Image } from "react-native";
+import { StyleSheet, View, Text, useWindowDimensions } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { TouchableRipple } from "react-native-paper";
 
 import { useSelector } from "react-redux";
 import { useSettings, useTheme } from "../Hooks/reduxHooks";
 import ListView from "./ListView";
+import FastImage from "react-native-fast-image";
+import { getDeviceOrientation } from "../Services/utils/helpers";
 
 const NovelCover = ({ item, onPress, libraryStatus }) => {
     const theme = useTheme();
     const { displayMode, novelsPerRow, showDownloadBadges, showUnreadBadges } =
         useSettings();
 
-    const height = {
-        1: 550,
-        2: 280,
-        3: 180,
-        4: 140,
-        5: 100,
-    };
+    const window = useWindowDimensions();
+
+    const orientation = getDeviceOrientation();
+
+    const getNovelsPerRow = () =>
+        orientation === "landscape" ? 6 : novelsPerRow;
+
+    const getHeight = () => (window.width / getNovelsPerRow()) * (4 / 3);
 
     const comfortableTitle = () =>
         displayMode === 1 && (
@@ -66,6 +69,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
                     !showDownloadBadges && {
                         borderRadius: 4,
                     },
+                    { backgroundColor: theme.colorAccent },
                 ]}
             >
                 {item.chaptersUnread}
@@ -92,7 +96,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
         );
 
     return displayMode !== 2 ? (
-        <View style={{ flex: 1 / novelsPerRow }}>
+        <View style={{ flex: 1 / getNovelsPerRow() }}>
             <TouchableRipple
                 borderless
                 centered
@@ -101,21 +105,19 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
                 onPress={onPress}
             >
                 <>
-                    <ImageBackground
+                    <FastImage
                         source={{ uri: item.novelCover }}
-                        style={{ height: height[novelsPerRow] }}
-                        imageStyle={[
-                            { borderRadius: 4 },
+                        style={[
+                            { height: getHeight(), borderRadius: 4 },
                             libraryStatus && { opacity: 0.5 },
                         ]}
-                        progressiveRenderingEnabled={true}
                     >
                         <View style={{ flexDirection: "row", margin: 4 }}>
                             {downloadBadge()}
                             {unreadBadge()}
                         </View>
                         {compactTitle()}
-                    </ImageBackground>
+                    </FastImage>
                     {comfortableTitle()}
                 </>
             </TouchableRipple>
@@ -177,7 +179,6 @@ const styles = StyleSheet.create({
         fontSize: 12,
     },
     unreadBadge: {
-        backgroundColor: "#2979FF",
         color: "#FFFFFF",
         borderTopRightRadius: 4,
         borderBottomRightRadius: 4,

src/Components/NovelList.js

@@ -2,6 +2,7 @@ import React from "react";
 import { StyleSheet, FlatList } from "react-native";
 
 import { useSettings } from "../Hooks/reduxHooks";
+import { getDeviceOrientation } from "../Services/utils/helpers";
 
 const NovelList = ({
     data,
@@ -11,13 +12,25 @@ const NovelList = ({
 }) => {
     const { displayMode, novelsPerRow } = useSettings();
 
-    const getNovelsPerRow = () => (displayMode === 2 ? 1 : novelsPerRow);
+    const orientation = getDeviceOrientation();
+
+    const getNovelsPerRow = () => {
+        if (displayMode === 2) {
+            return 1;
+        }
+
+        if (orientation === "landscape") {
+            return 6;
+        } else {
+            return novelsPerRow;
+        }
+    };
 
     return (
         <FlatList
             contentContainerStyle={styles.flatListCont}
             numColumns={getNovelsPerRow()}
-            key={getNovelsPerRow()}
+            key={[orientation, getNovelsPerRow()]}
             data={data}
             keyExtractor={(item) => item.novelUrl}
             renderItem={renderItem}

src/Components/Searchbar.js

@@ -1,63 +1,41 @@
 import React, { useRef } from "react";
-import { View, TextInput, StyleSheet } from "react-native";
+import { StyleSheet, View, TextInput, Text, StatusBar } from "react-native";
+
 import { TouchableRipple, IconButton } from "react-native-paper";
-import Constants from "expo-constants";
-import { useSettings } from "../Hooks/reduxHooks";
-import { useDispatch } from "react-redux";
-import { setAppSettings } from "../redux/settings/settings.actions";
+import { Row } from "./Common";
 
 export const Searchbar = ({
     theme,
     placeholder,
     searchText,
-    left,
-    onPressLeft,
-    right,
-    displayMenu,
-    onPressRight,
+    backAction,
+    onBackAction,
     clearSearchbar,
     onChangeText,
     onSubmitEditing,
-    migrate,
-    onPressMigrate,
-    filter,
+    actions,
 }) => {
     const searchRef = useRef(null);
-    const dispatch = useDispatch();
-    const { displayMode } = useSettings();
-
-    const displayMenuIcon = () => {
-        const icons = {
-            0: "view-module",
-            1: "view-list",
-            2: "view-module",
-        };
-
-        return icons[displayMode];
-    };
-
-    const getDisplayMode = () =>
-        displayMode === 0 ? 1 : displayMode === 1 ? 2 : displayMode === 2 && 0;
 
     return (
         <TouchableRipple
             borderless
             onPress={() => searchRef.current.focus()}
             style={[
-                styles.searchAppbarContainer,
+                styles.searchbarContainer,
                 { backgroundColor: theme.searchBarColor },
             ]}
             rippleColor={theme.rippleColor}
         >
             <View style={styles.container}>
-                <View style={{ flex: 1, flexDirection: "row" }}>
-                    {left && (
+                <Row style={{ flex: 1 }}>
+                    {backAction && (
                         <IconButton
-                            icon={left}
+                            icon={backAction}
                             color={theme.textColorSecondary}
                             style={{ marginLeft: 0 }}
                             size={23}
-                            onPress={onPressLeft}
+                            onPress={onBackAction}
                         />
                     )}
                     <TextInput
@@ -72,7 +50,7 @@ export const Searchbar = ({
                         onSubmitEditing={onSubmitEditing}
                         defaultValue={searchText}
                     />
-                </View>
+                </Row>
                 {searchText !== "" && (
                     <IconButton
                         icon="close"
@@ -82,49 +60,25 @@ export const Searchbar = ({
                         onPress={clearSearchbar}
                     />
                 )}
-                {displayMenu && (
-                    <IconButton
-                        icon={displayMenuIcon()}
-                        color={theme.textColorSecondary}
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={() =>
-                            dispatch(
-                                setAppSettings("displayMode", getDisplayMode())
-                            )
-                        }
-                    />
-                )}
-                {right && (
-                    <IconButton
-                        icon={right}
-                        color={
-                            !filter
-                                ? theme.textColorSecondary
-                                : theme.filterColor
-                        }
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={onPressRight}
-                    />
-                )}
-                {migrate && (
-                    <IconButton
-                        icon={migrate}
-                        color={theme.textColorSecondary}
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={onPressMigrate}
-                    />
-                )}
+                {actions &&
+                    actions.map((action, index) => (
+                        <IconButton
+                            key={index}
+                            icon={action.icon}
+                            color={action.color ?? theme.textColorSecondary}
+                            style={{ marginRight: 0 }}
+                            size={23}
+                            onPress={action.onPress}
+                        />
+                    ))}
             </View>
         </TouchableRipple>
     );
 };
 
 const styles = StyleSheet.create({
-    searchAppbarContainer: {
-        marginTop: Constants.statusBarHeight + 4,
+    searchbarContainer: {
+        marginTop: StatusBar.currentHeight + 4,
         height: 48,
         flexDirection: "row",
         alignItems: "center",
@@ -133,6 +87,7 @@ const styles = StyleSheet.create({
         borderRadius: 8,
         marginHorizontal: 12,
         elevation: 2,
+        backgroundColor: "white",
     },
     container: {
         flex: 1,

src/Database/queries/LibraryQueries.js

@@ -56,7 +56,7 @@ const searchLibraryQuery = (searchText, sort, filter) =>
         GROUP BY chapters.novelId
     ) AS D
     ON novels.novelId = D.novelId
-    WHERE novels.followed = 1 AND novelName LIKE '%${searchText}%' OR source LIKE '%${searchText}%'  ${
+    WHERE novels.followed = 1 AND novelName LIKE '%${searchText}%'  ${
         filter ? "AND " + filter : ""
     }
     ${sort ? "ORDER BY " + sort : ""} `;

src/Hooks/githubUpdateChecker.js

@@ -22,7 +22,7 @@ export const githubUpdateChecker = () => {
     };
 
     const isNewVersion = (versionTag) => {
-        let currentVersion = "v1.0.19";
+        let currentVersion = "v1.0.21";
         const regex = /[^\\d.]/;
 
         let newVersion = versionTag.replace(regex, "");

src/Hooks/setStatusBarStyle.js

@@ -1,7 +1,10 @@
 import { setStatusBarStyle as setExpoStatusBarStyle } from "expo-status-bar";
 import { useTheme } from "../Hooks/reduxHooks";
+import changeNavigationBarColor from "react-native-navigation-bar-color";
 
 export const setStatusBarStyle = () => {
     const theme = useTheme();
+
     setExpoStatusBarStyle(theme.id === 1 ? "dark" : "light");
+    changeNavigationBarColor(theme.colorPrimary);
 };

src/Navigators/Main.js

@@ -8,18 +8,19 @@ import BottomNavigator from "./BottomNavigator";
 import Novel from "../Screens/Novel/Novel";
 import Chapter from "../Screens/Chapter/Chapter";
 import Extension from "../Screens/Extension/Extension";
-import GlobalSearch from "../Screens/Browse/GlobalSearch";
-import Migration from "../Screens/Browse/Migration";
+import GlobalSearch from "../Screens/Browse/globalsearch/GlobalSearch";
+import Migration from "../Screens/Browse/migration/Migration";
 import SourceNovels from "../Screens/Browse/SourceNovels";
-import MigrateNovel from "../Screens/Browse/MigrateNovel";
+import MigrateNovel from "../Screens/Browse/migration/MigrationNovels";
 import MoreStack from "./More";
-
+import MalTopNovels from "../Screens/Browse/discover/MalTopNovels";
 import { setStatusBarStyle } from "../Hooks/setStatusBarStyle";
 import { View } from "react-native";
 import { useTheme } from "../Hooks/reduxHooks";
 import { githubUpdateChecker } from "../Hooks/githubUpdateChecker";
 import NewUpdateDialog from "../Components/NewUpdateDialog";
 import { NavigationContainer } from "@react-navigation/native";
+import BrowseNovelUpdates from "../Screens/Browse/discover/BrowseNovelUpdates";
 
 const Stack = createStackNavigator();
 
@@ -57,6 +58,11 @@ const MainNavigator = () => {
                     />
                     <Stack.Screen name="MoreStack" component={MoreStack} />
                     <Stack.Screen name="Extension" component={Extension} />
+                    <Stack.Screen name="BrowseMal" component={MalTopNovels} />
+                    <Stack.Screen
+                        name="BrowseNovelUpdates"
+                        component={BrowseNovelUpdates}
+                    />
                     <Stack.Screen
                         name="GlobalSearch"
                         component={GlobalSearch}

src/Screens/Browse/Browse.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import {
     StyleSheet,
     View,
-    ScrollView,
     Text,
     FlatList,
     ActivityIndicator,
@@ -19,6 +18,8 @@ import {
 import SourceCard from "./components/SourceCard";
 import { showToast } from "../../Hooks/showToast";
 import { Searchbar } from "../../Components/Searchbar";
+import MalCard from "./components/MalCard";
+import NovelUpdatesCard from "./components/NovelUpdatesCard";
 
 const Browse = ({ navigation }) => {
     const [refreshing, setRefreshing] = useState(false);
@@ -74,15 +75,20 @@ const Browse = ({ navigation }) => {
             <Searchbar
                 theme={theme}
                 placeholder="Search Source"
-                left="magnify"
-                onPressLeft={clearSearchbar}
+                backAction="magnify"
                 searchText={searchText}
                 onChangeText={onChangeText}
                 clearSearchbar={clearSearchbar}
-                right="book-search"
-                onPressRight={() => navigation.navigate("GlobalSearch")}
-                migrate="swap-vertical-variant"
-                onPressMigrate={() => navigation.navigate("Migration")}
+                actions={[
+                    {
+                        icon: "book-search",
+                        onPress: () => navigation.navigate("GlobalSearch"),
+                    },
+                    {
+                        icon: "swap-vertical-variant",
+                        onPress: () => navigation.navigate("Migration"),
+                    },
+                ]}
             />
 
             <FlatList
@@ -93,6 +99,17 @@ const Browse = ({ navigation }) => {
                 extraData={pinned}
                 ListHeaderComponent={
                     <View>
+                        <Text
+                            style={{
+                                color: theme.textColorSecondary,
+                                paddingHorizontal: 16,
+                                paddingVertical: 8,
+                            }}
+                        >
+                            Discover
+                        </Text>
+                        <NovelUpdatesCard theme={theme} />
+                        <MalCard theme={theme} />
                         {pinned.length > 0 && (
                             <FlatList
                                 contentContainerStyle={{ paddingBottom: 16 }}

src/Screens/Browse/BrowseMal.js

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View, ActivityIndicator, FlatList } from "react-native";
+
+import * as WebBrowser from "expo-web-browser";
+
+import NovelCover from "../../Components/NovelCover";
+import { Searchbar } from "../../Components/Searchbar";
+import ErrorView from "../../Components/ErrorView";
+
+import { useTheme, useSettings } from "../../Hooks/reduxHooks";
+import { showToast } from "../../Hooks/showToast";
+import { getDeviceOrientation } from "../../Services/utils/helpers";
+import { scrapeSearchResults } from "./discover/MyAnimeListScraper";
+
+const BrowseMalScreen = ({ navigation, route }) => {
+    const theme = useTheme();
+
+    const [loading, setLoading] = useState(true);
+    const [novels, setNovels] = useState();
+    const [error, setError] = useState();
+
+    const [searchText, setSearchText] = useState("");
+
+    const baseUrl = "https://api.jikan.moe/v3/";
+    const malUrl = "https://myanimelist.net/topmanga.php?type=lightnovels";
+
+    const getNovels = async () => {
+        try {
+            const url = `${baseUrl}top/manga/1/novels`;
+
+            const res = await fetch(url);
+            const data = await res.json();
+
+            setNovels(data.top);
+            setLoading(false);
+        } catch (error) {
+            setError(error.message);
+            setNovels([]);
+            setLoading(false);
+            showToast(error.message);
+        }
+    };
+
+    const clearSearchbar = () => {
+        getNovels();
+        setLoading(true);
+        setSearchText("");
+    };
+
+    const getSearchResults = async () => {
+        try {
+            setLoading(true);
+
+            const data = await scrapeSearchResults(searchText);
+
+            setNovels(data);
+            setLoading(false);
+        } catch (error) {
+            setError(error.message);
+            setNovels([]);
+            setLoading(false);
+            showToast(error.message);
+        }
+    };
+
+    useEffect(() => {
+        getNovels();
+    }, []);
+
+    const renderItem = ({ item }) => (
+        <NovelCover
+            item={{ novelName: item.title, novelCover: item.image_url }}
+            onPress={() =>
+                navigation.navigate("GlobalSearch", {
+                    novelName: item.title,
+                })
+            }
+        />
+    );
+
+    const { displayMode, novelsPerRow } = useSettings();
+
+    const orientation = getDeviceOrientation();
+
+    const getNovelsPerRow = () => {
+        if (displayMode === 2) {
+            return 1;
+        }
+
+        if (orientation === "landscape") {
+            return 6;
+        } else {
+            return novelsPerRow;
+        }
+    };
+
+    const ListEmptyComponent = () => (
+        <ErrorView
+            error={error || "No results found"}
+            onRetry={() => {
+                getNovels();
+                setLoading(true);
+                setError();
+            }}
+            openWebView={() => WebBrowser.openBrowserAsync(topNovelsUrl)}
+            theme={theme}
+        />
+    );
+
+    return (
+        <View
+            style={[
+                styles.container,
+                { backgroundColor: theme.colorPrimaryDark },
+            ]}
+        >
+            <Searchbar
+                theme={theme}
+                placeholder="Search MyAnimeList"
+                backAction="arrow-left"
+                onBackAction={() => navigation.goBack()}
+                searchText={searchText}
+                onChangeText={(text) => setSearchText(text)}
+                onSubmitEditing={getSearchResults}
+                clearSearchbar={clearSearchbar}
+                actions={[
+                    {
+                        icon: "earth",
+                        onPress: () => WebBrowser.openBrowserAsync(malUrl),
+                    },
+                ]}
+            />
+            {loading ? (
+                <View style={{ flex: 1, justifyContent: "center" }}>
+                    <ActivityIndicator size={60} color={theme.colorAccent} />
+                </View>
+            ) : (
+                <FlatList
+                    contentContainerStyle={styles.novelsContainer}
+                    numColumns={getNovelsPerRow()}
+                    key={getNovelsPerRow()}
+                    data={novels}
+                    keyExtractor={(item) => item.mal_id.toString()}
+                    renderItem={renderItem}
+                    ListEmptyComponent={ListEmptyComponent}
+                />
+            )}
+        </View>
+    );
+};
+
+export default BrowseMalScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    novelsContainer: {
+        flexGrow: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+    },
+});

src/Screens/Browse/components/GlobalSearchNovelCover.js

@@ -1,71 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Text, ImageBackground } from "react-native";
-import { TouchableRipple } from "react-native-paper";
-
-import { useTheme } from "../../../Hooks/reduxHooks";
-
-const GlobalSearchNovelCover = ({ item, onPress, libraryStatus }) => {
-    const theme = useTheme();
-
-    const comfortableTitle = () => (
-        <Text
-            numberOfLines={2}
-            style={[
-                styles.title,
-                {
-                    width: 115,
-                    color: theme.textColorPrimary,
-                    padding: 4,
-                    flexWrap: "wrap",
-                },
-            ]}
-        >
-            {item.novelName}
-        </Text>
-    );
-
-    return (
-        <View style={{ flex: 1 }}>
-            <TouchableRipple
-                borderless
-                centered
-                rippleColor={theme.rippleColor}
-                style={styles.opac}
-                onPress={onPress}
-            >
-                <>
-                    <ImageBackground
-                        source={{ uri: item.novelCover }}
-                        style={{ height: 150, width: 115 }}
-                        imageStyle={[
-                            { borderRadius: 4 },
-                            libraryStatus && { opacity: 0.5 },
-                        ]}
-                        progressiveRenderingEnabled={true}
-                    />
-                    {comfortableTitle()}
-                </>
-            </TouchableRipple>
-        </View>
-    );
-};
-
-export default GlobalSearchNovelCover;
-
-const styles = StyleSheet.create({
-    titleContainer: {
-        flex: 1,
-        justifyContent: "flex-end",
-        borderRadius: 4,
-    },
-    title: {
-        fontFamily: "pt-sans-bold",
-        fontSize: 14,
-        padding: 8,
-    },
-    opac: {
-        paddingHorizontal: 5,
-        paddingVertical: 4,
-        borderRadius: 4,
-    },
-});

src/Screens/Browse/components/GlobalSearchNovelList.js

@@ -1,55 +0,0 @@
-import React from "react";
-import { StyleSheet, FlatList, Text } from "react-native";
-import GlobalSearchNovelCover from "./GlobalSearchNovelCover";
-
-const GlobalSearchNovelList = ({ data, theme, library, navigation }) => {
-    const checkIFInLibrary = (sourceId, novelUrl) => {
-        return library.some(
-            (obj) => obj.novelUrl === novelUrl && obj.sourceId === sourceId
-        );
-    };
-
-    const renderItem = ({ item }) => (
-        <GlobalSearchNovelCover
-            item={item}
-            onPress={() =>
-                navigation.navigate("Novel", {
-                    ...item,
-                    sourceId: item.extensionId,
-                })
-            }
-            libraryStatus={checkIFInLibrary(item.extensionId, item.novelUrl)}
-        />
-    );
-
-    return (
-        <FlatList
-            contentContainerStyle={styles.flatListCont}
-            horizontal={true}
-            data={data}
-            keyExtractor={(item) => item.novelUrl}
-            renderItem={renderItem}
-            ListEmptyComponent={
-                <Text
-                    style={{
-                        color: theme.textColorSecondary,
-                        padding: 8,
-                        paddingVertical: 4,
-                    }}
-                >
-                    No results found
-                </Text>
-            }
-        />
-    );
-};
-
-export default GlobalSearchNovelList;
-
-const styles = StyleSheet.create({
-    flatListCont: {
-        flexGrow: 1,
-        paddingVertical: 8,
-        paddingHorizontal: 4,
-    },
-});

src/Screens/Browse/components/MalCard.js

@@ -0,0 +1,80 @@
+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+
+import { TouchableRipple, Button } from "react-native-paper";
+import { useNavigation } from "@react-navigation/native";
+
+const MalCard = ({ theme }) => {
+    const navigation = useNavigation();
+
+    const navigateToExtension = () => navigation.navigate("BrowseMal");
+
+    return (
+        <TouchableRipple
+            style={styles.extensionCard}
+            onPress={navigateToExtension}
+            rippleColor={theme.rippleColor}
+        >
+            <>
+                <Image
+                    source={require("../../../../assets/mal.png")}
+                    style={styles.extensionIcon}
+                    resizeMode="contain"
+                />
+                <View style={styles.extensionDetails}>
+                    <View>
+                        <Text
+                            style={{
+                                color: theme.textColorPrimary,
+                                fontSize: 14,
+                            }}
+                        >
+                            MyAnimeList
+                        </Text>
+                    </View>
+                    <View
+                        style={{ flexDirection: "row", alignItems: "center" }}
+                    >
+                        <Button
+                            labelStyle={{ letterSpacing: 0 }}
+                            uppercase={false}
+                            color={theme.colorAccent}
+                            onPress={navigateToExtension}
+                        >
+                            Browse
+                        </Button>
+                    </View>
+                </View>
+            </>
+        </TouchableRipple>
+    );
+};
+
+export default MalCard;
+
+const styles = StyleSheet.create({
+    extensionCard: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginVertical: 4,
+        paddingVertical: 8,
+        paddingHorizontal: 20,
+    },
+    extensionIcon: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+    },
+    extensionDetails: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginLeft: 16,
+    },
+    sourceStatus: {
+        color: "#C14033",
+        fontSize: 12,
+        marginLeft: 5,
+    },
+});

src/Screens/Browse/components/NovelUpdatesCard.js

@@ -0,0 +1,80 @@
+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+
+import { TouchableRipple, Button } from "react-native-paper";
+import { useNavigation } from "@react-navigation/native";
+
+const NovelUpdatesCard = ({ theme }) => {
+    const navigation = useNavigation();
+
+    const navigateToExtension = () => navigation.navigate("BrowseNovelUpdates");
+
+    return (
+        <TouchableRipple
+            style={styles.extensionCard}
+            onPress={navigateToExtension}
+            rippleColor={theme.rippleColor}
+        >
+            <>
+                <Image
+                    source={require("../../../../assets/novelupdates.png")}
+                    style={styles.extensionIcon}
+                    resizeMode="contain"
+                />
+                <View style={styles.extensionDetails}>
+                    <View>
+                        <Text
+                            style={{
+                                color: theme.textColorPrimary,
+                                fontSize: 14,
+                            }}
+                        >
+                            Novel Updates
+                        </Text>
+                    </View>
+                    <View
+                        style={{ flexDirection: "row", alignItems: "center" }}
+                    >
+                        <Button
+                            labelStyle={{ letterSpacing: 0 }}
+                            uppercase={false}
+                            color={theme.colorAccent}
+                            onPress={navigateToExtension}
+                        >
+                            Browse
+                        </Button>
+                    </View>
+                </View>
+            </>
+        </TouchableRipple>
+    );
+};
+
+export default NovelUpdatesCard;
+
+const styles = StyleSheet.create({
+    extensionCard: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginVertical: 4,
+        paddingVertical: 8,
+        paddingHorizontal: 20,
+    },
+    extensionIcon: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+    },
+    extensionDetails: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginLeft: 16,
+    },
+    sourceStatus: {
+        color: "#C14033",
+        fontSize: 12,
+        marginLeft: 5,
+    },
+});

src/Screens/Browse/components/SourceCard.js

@@ -4,6 +4,7 @@ import { TouchableRipple, Button, IconButton } from "react-native-paper";
 import { useNavigation } from "@react-navigation/native";
 import { useDispatch } from "react-redux";
 import { pinSourceAction } from "../../../redux/source/source.actions";
+import FastImage from "react-native-fast-image";
 
 const ExtensionCard = ({ item, theme, isPinned }) => {
     const { sourceId, sourceName, sourceCover, sourceLanguage, status } = item;

src/Screens/Browse/discover/BrowseNovelUpdates.js

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from "react";
+import {
+    ActivityIndicator,
+    Button,
+    FlatList,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+
+import * as WebBrowser from "expo-web-browser";
+
+import { ScreenContainer } from "../../../Components/Common";
+import { Searchbar } from "../../../Components/Searchbar";
+
+import { useTheme } from "../../../Hooks/reduxHooks";
+import { scrapeSearchResults, scrapeTopNovels } from "./NovelUpdatesScraper";
+import NovelUpdatesNovelCard from "./NovelUpdatesNovelCard";
+
+const BrowseNovelUpdates = ({ navigation }) => {
+    const theme = useTheme();
+
+    const [novels, setNovels] = useState([]);
+    const [pageNo, setPageNo] = useState(1);
+    const [loading, setLoading] = useState(true);
+
+    const [searchText, setSearchText] = useState("");
+
+    const getNovels = async (pageNo) => {
+        const data = await scrapeTopNovels(pageNo);
+
+        setNovels((novels) => novels.concat(data));
+        setLoading(false);
+    };
+
+    useEffect(() => {
+        getNovels(1);
+    }, []);
+
+    const getSearchResults = async () => {
+        setLoading(true);
+
+        const data = await scrapeSearchResults(searchText);
+        setNovels(data);
+        setLoading(false);
+    };
+
+    const clearSearchbar = () => {
+        getNovels();
+        setLoading(true);
+        setSearchText("");
+    };
+
+    const isCloseToBottom = ({
+        layoutMeasurement,
+        contentOffset,
+        contentSize,
+    }) => {
+        const paddingToBottom = 20;
+        return (
+            layoutMeasurement.height + contentOffset.y >=
+            contentSize.height - paddingToBottom
+        );
+    };
+
+    return (
+        <ScreenContainer theme={theme}>
+            <Searchbar
+                theme={theme}
+                placeholder="Search Novel Updates"
+                backAction="arrow-left"
+                onBackAction={navigation.goBack}
+                searchText={searchText}
+                onChangeText={(text) => setSearchText(text)}
+                onSubmitEditing={getSearchResults}
+                clearSearchbar={clearSearchbar}
+                actions={[
+                    {
+                        icon: "earth",
+                        onPress: () =>
+                            WebBrowser.openBrowserAsync(
+                                "https://www.novelupdates.com/"
+                            ),
+                    },
+                ]}
+            />
+            {loading ? (
+                <View style={{ flex: 1, justifyContent: "center" }}>
+                    <ActivityIndicator size={60} color={theme.colorAccent} />
+                </View>
+            ) : (
+                <FlatList
+                    data={novels}
+                    keyExtractor={(item) => item.novelName.toString()}
+                    renderItem={({ item }) => (
+                        <NovelUpdatesNovelCard
+                            novel={item}
+                            theme={theme}
+                            onPress={() =>
+                                navigation.navigate("GlobalSearch", {
+                                    novelName: item.novelName,
+                                })
+                            }
+                        />
+                    )}
+                    onScroll={({ nativeEvent }) => {
+                        if (!searchText && isCloseToBottom(nativeEvent)) {
+                            getNovels(pageNo + 1);
+                            setPageNo((pageNo) => pageNo + 1);
+                        }
+                    }}
+                    ListFooterComponent={
+                        !searchText && (
+                            <View style={{ paddingVertical: 16 }}>
+                                <ActivityIndicator color={theme.colorAccent} />
+                            </View>
+                        )
+                    }
+                />
+            )}
+        </ScreenContainer>
+    );
+};
+
+export default BrowseNovelUpdates;
+
+const styles = StyleSheet.create({});

src/Screens/Browse/discover/MalTopNovels.js

@@ -0,0 +1,195 @@
+import React, { useEffect, useState } from "react";
+import {
+    StyleSheet,
+    View,
+    ActivityIndicator,
+    FlatList,
+    Button,
+} from "react-native";
+
+import * as WebBrowser from "expo-web-browser";
+
+import NovelCover from "../../../Components/NovelCover";
+import { Searchbar } from "../../../Components/Searchbar";
+import ErrorView from "../../../Components/ErrorView";
+
+import { useTheme, useSettings } from "../../../Hooks/reduxHooks";
+import { showToast } from "../../../Hooks/showToast";
+import { getDeviceOrientation } from "../../../Services/utils/helpers";
+import { scrapeSearchResults, scrapeTopNovels } from "./MyAnimeListScraper";
+
+const BrowseMalScreen = ({ navigation, route }) => {
+    const theme = useTheme();
+
+    const [loading, setLoading] = useState(true);
+    const [novels, setNovels] = useState([]);
+    const [error, setError] = useState();
+    const [limit, setLimit] = useState(0);
+
+    const [searchText, setSearchText] = useState("");
+
+    const baseUrl = "https://api.jikan.moe/v3/";
+    const malUrl = "https://myanimelist.net/topmanga.php?type=lightnovels";
+
+    const getNovels = async (limit) => {
+        try {
+            const data = await scrapeTopNovels(limit);
+
+            setNovels((novels) => novels.concat(data));
+            setLoading(false);
+        } catch (error) {
+            setError(error.message);
+            setNovels([]);
+            setLoading(false);
+            showToast(error.message);
+        }
+    };
+
+    const clearSearchbar = () => {
+        getNovels();
+        setLoading(true);
+        setSearchText("");
+    };
+
+    const getSearchResults = async () => {
+        try {
+            setLoading(true);
+
+            const data = await scrapeSearchResults(searchText);
+
+            setNovels(data);
+            setLoading(false);
+        } catch (error) {
+            setError(error.message);
+            setNovels([]);
+            setLoading(false);
+            showToast(error.message);
+        }
+    };
+
+    useEffect(() => {
+        getNovels();
+    }, []);
+
+    const renderItem = ({ item }) => (
+        <NovelCover
+            item={{ novelName: item.novelName, novelCover: item.novelCover }}
+            onPress={() =>
+                navigation.navigate("GlobalSearch", {
+                    novelName: item.novelName,
+                })
+            }
+        />
+    );
+
+    const { displayMode, novelsPerRow } = useSettings();
+
+    const orientation = getDeviceOrientation();
+
+    const getNovelsPerRow = () => {
+        if (displayMode === 2) {
+            return 1;
+        }
+
+        if (orientation === "landscape") {
+            return 6;
+        } else {
+            return novelsPerRow;
+        }
+    };
+
+    const isCloseToBottom = ({
+        layoutMeasurement,
+        contentOffset,
+        contentSize,
+    }) => {
+        const paddingToBottom = 20;
+        return (
+            layoutMeasurement.height + contentOffset.y >=
+            contentSize.height - paddingToBottom
+        );
+    };
+
+    const ListEmptyComponent = () => (
+        <ErrorView
+            error={error || "No results found"}
+            onRetry={() => {
+                getNovels();
+                setLoading(true);
+                setError();
+            }}
+            openWebView={() => WebBrowser.openBrowserAsync(topNovelsUrl)}
+            theme={theme}
+        />
+    );
+
+    return (
+        <View
+            style={[
+                styles.container,
+                { backgroundColor: theme.colorPrimaryDark },
+            ]}
+        >
+            <Searchbar
+                theme={theme}
+                placeholder="Search MyAnimeList"
+                backAction="arrow-left"
+                onBackAction={() => navigation.goBack()}
+                searchText={searchText}
+                onChangeText={(text) => setSearchText(text)}
+                onSubmitEditing={getSearchResults}
+                clearSearchbar={clearSearchbar}
+                actions={[
+                    {
+                        icon: "earth",
+                        onPress: () => WebBrowser.openBrowserAsync(malUrl),
+                    },
+                ]}
+            />
+            {loading ? (
+                <View style={{ flex: 1, justifyContent: "center" }}>
+                    <ActivityIndicator size={60} color={theme.colorAccent} />
+                </View>
+            ) : (
+                <FlatList
+                    contentContainerStyle={styles.novelsContainer}
+                    numColumns={getNovelsPerRow()}
+                    key={getNovelsPerRow()}
+                    data={novels}
+                    keyExtractor={(item) => item.novelName}
+                    renderItem={renderItem}
+                    ListEmptyComponent={ListEmptyComponent}
+                    onScroll={({ nativeEvent }) => {
+                        if (!searchText && isCloseToBottom(nativeEvent)) {
+                            getNovels(limit + 50);
+                            setLimit((limit) => limit + 50);
+                        }
+                    }}
+                    ListFooterComponent={
+                        !searchText && (
+                            <View style={{ paddingVertical: 16 }}>
+                                <ActivityIndicator color={theme.colorAccent} />
+                            </View>
+                        )
+                    }
+                />
+            )}
+        </View>
+    );
+};
+
+export default BrowseMalScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    novelsContainer: {
+        flexGrow: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+    },
+});

src/Screens/Browse/discover/MyAnimeListScraper.js

@@ -0,0 +1,70 @@
+import cheerio from "react-native-cheerio";
+
+const scrapeTopNovels = async (pageNo) => {
+    const url =
+        "https://myanimelist.net/topmanga.php?type=lightnovels&limit=" + pageNo;
+
+    const res = await fetch(url);
+    const body = await res.text();
+
+    const $ = cheerio.load(body);
+
+    const novels = [];
+
+    $("tr.ranking-list").each(function (res) {
+        const novelId = $(this).find("img").attr("data-src").split("/");
+
+        const novelCover =
+            "https://cdn.myanimelist.net/images/manga/" +
+            novelId[7] +
+            "/" +
+            novelId[8].split(".")[0] +
+            ".jpg";
+        const novelName = $(this).find("h3").text();
+
+        const novel = { novelName, novelCover };
+
+        novels.push(novel);
+    });
+
+    return novels;
+};
+
+const scrapeSearchResults = async (searchTerm) => {
+    const url =
+        "https://myanimelist.net/manga.php?q=" +
+        searchTerm +
+        "&cat=manga&type=2";
+
+    const res = await fetch(url);
+    const body = await res.text();
+
+    const $ = cheerio.load(body);
+
+    const novels = [];
+
+    $(".list")
+        .find("tr")
+        .each(function (res) {
+            const novelName = $(this).find("a > strong").text();
+
+            if (novelName) {
+                const novelId = $(this).find("img").attr("data-src").split("/");
+
+                const novelCover =
+                    "https://cdn.myanimelist.net/images/manga/" +
+                    novelId[7] +
+                    "/" +
+                    novelId[8].split(".")[0] +
+                    ".jpg";
+
+                const novel = { novelName, novelCover };
+
+                novels.push(novel);
+            }
+        });
+
+    return novels;
+};
+
+export { scrapeTopNovels, scrapeSearchResults };

src/Screens/Browse/discover/NovelUpdatesNovelCard.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { StyleSheet, Pressable, Text, View, FlatList } from "react-native";
+import FastImage from "react-native-fast-image";
+import { Row } from "../../../Components/Common";
+
+const GenreChip = ({ children, theme }) => (
+    <Text
+        style={[
+            styles.genreChip,
+            {
+                color: theme.colorAccent,
+                borderColor: theme.colorAccent,
+            },
+        ]}
+        numberOfLines={1}
+    >
+        {children}
+    </Text>
+);
+
+const NovelUpdatesNovelCard = ({ novel, theme, onPress }) => {
+    return (
+        <Pressable
+            style={styles.novelUpdatesCard}
+            onPress={onPress}
+            android_ripple={{ color: theme.rippleColor }}
+        >
+            <View style={{ flex: 1, flexDirection: "row" }}>
+                <FastImage
+                    source={{ uri: novel.novelCover }}
+                    style={{ width: 85, height: 120, borderRadius: 4 }}
+                />
+                <View style={{ flex: 1, paddingLeft: 16 }}>
+                    <Text
+                        style={{ color: theme.textColorPrimary, fontSize: 16 }}
+                    >
+                        {novel.novelName}
+                    </Text>
+
+                    <GenreChip theme={theme}>{novel.genres}</GenreChip>
+
+                    <Text
+                        style={{
+                            fontSize: 13,
+                            color: theme.textColorPrimary,
+                        }}
+                        numberOfLines={3}
+                    >
+                        {novel.novelSummary}
+                    </Text>
+                </View>
+            </View>
+        </Pressable>
+    );
+};
+
+export default NovelUpdatesNovelCard;
+
+const styles = StyleSheet.create({
+    novelUpdatesCard: {
+        flex: 1,
+        padding: 16,
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    genreChip: {
+        marginVertical: 4,
+        fontSize: 12,
+        // fontStyle: "italic",
+    },
+});

src/Screens/Browse/discover/NovelUpdatesScraper.js

@@ -0,0 +1,88 @@
+import cheerio from "react-native-cheerio";
+
+const scrapeTopNovels = async (pageNo) => {
+    const url =
+        "https://www.novelupdates.com/series-ranking/?rank=sixmonths&pg=" +
+        pageNo;
+
+    let headers = new Headers({
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        "User-Agent":
+            "'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36",
+    });
+
+    const res = await fetch(url, {
+        method: "GET",
+        headers: headers,
+    });
+    const body = await res.text();
+
+    const $ = cheerio.load(body);
+
+    const novels = [];
+
+    $("div.search_main_box_nu").each(function (res) {
+        const novelCover = $(this).find("img").attr("src");
+        const novelName = $(this).find(".search_title > a").text();
+
+        const genres = $(this)
+            .find(".search_genre")
+            .text()
+            .replace(/\s/g, ", ");
+
+        const novelSummary =
+            $(this).find(".search_genre")[0].nextSibling.nodeValue;
+
+        const novel = { novelName, novelCover, genres, novelSummary };
+
+        novels.push(novel);
+    });
+
+    return novels;
+};
+
+const scrapeSearchResults = async (searchTerm) => {
+    const url =
+        "https://www.novelupdates.com/?s=" +
+        searchTerm +
+        "&post_type=seriesplans";
+
+    let headers = new Headers({
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        "User-Agent":
+            "'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36",
+    });
+
+    const res = await fetch(url, {
+        method: "GET",
+        headers: headers,
+    });
+    const body = await res.text();
+
+    const $ = cheerio.load(body);
+
+    const novels = [];
+
+    $("div.search_main_box_nu").each(function (res) {
+        const novelCover = $(this).find("img").attr("src");
+        const novelName = $(this).find(".search_title > a").text();
+
+        const genres = $(this)
+            .find(".search_genre")
+            .text()
+            .replace(/\s/g, ", ");
+
+        const novelSummary =
+            $(this).find(".search_genre")[0].nextSibling.nodeValue;
+
+        const novel = { novelName, novelCover, genres, novelSummary };
+
+        novels.push(novel);
+    });
+
+    return novels;
+};
+
+export { scrapeTopNovels, scrapeSearchResults };

src/Screens/Browse/globalsearch/GlobalSearch.js

@@ -1,54 +1,47 @@
 import React, { useEffect, useState } from "react";
-import {
-    StyleSheet,
-    View,
-    Text,
-    FlatList,
-    ActivityIndicator,
-} from "react-native";
-import { useLibrary, useTheme } from "../../Hooks/reduxHooks";
-import { useDispatch, useSelector } from "react-redux";
+import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native";
 
-import { Searchbar } from "../../Components/Searchbar";
-import NovelCover from "../../Components/NovelCover";
-import NovelList from "../../Components/NovelList";
-import EmptyView from "../../Components/EmptyView";
-import GlobalSearchNovelList from "./components/GlobalSearchNovelList";
 import { ProgressBar } from "react-native-paper";
-import { showToast } from "../../Hooks/showToast";
+import { useSelector } from "react-redux";
+
+import { Searchbar } from "../../../Components/Searchbar";
+import EmptyView from "../../../Components/EmptyView";
+
+import { ScreenContainer } from "../../../Components/Common";
+import GlobalSearchSourceItem from "./GlobalSearchSourceItem";
+
+import { showToast } from "../../../Hooks/showToast";
+import { useLibrary, useTheme } from "../../../Hooks/reduxHooks";
 
 const GlobalSearch = ({ route, navigation }) => {
     const theme = useTheme();
-    let novelName = "";
 
+    let novelName = "";
     if (route.params) {
         novelName = route.params.novelName;
     }
 
-    const [loading, setLoading] = useState(false);
-    const [searchText, setSearchText] = useState(novelName);
-    const [searchResults, setSearchResults] = useState("");
     const { sources, pinned } = useSelector((state) => state.sourceReducer);
-    const [progress, setProgress] = useState(0);
-
-    const library = useLibrary();
-
     const pinnedSources = sources.filter(
         (source) => pinned.indexOf(source.sourceId) !== -1
     );
 
+    const [loading, setLoading] = useState(false);
+    const [searchText, setSearchText] = useState(novelName);
+    const [searchResults, setSearchResults] = useState([]);
+    const [progress, setProgress] = useState(0);
+
+    const library = useLibrary();
+
     useEffect(() => {
         novelName && onSubmitEditing();
     }, []);
 
-    const clearSearchbar = () => {
-        setSearchText("");
-    };
-
+    const clearSearchbar = () => setSearchText("");
     const onChangeText = (text) => setSearchText(text);
 
     const onSubmitEditing = () => {
-        setSearchResults("");
+        setSearchResults([]);
 
         const getSearchUrl = (sourceId) => {
             if (sourceId === 1) {
@@ -98,36 +91,21 @@ const GlobalSearch = ({ route, navigation }) => {
     };
 
     const renderItem = ({ item }) => (
-        <>
-            <View style={{ padding: 8, paddingVertical: 16 }}>
-                <Text style={{ color: theme.textColorPrimary }}>
-                    {item.sourceName}
-                </Text>
-                <Text style={{ color: theme.textColorSecondary, fontSize: 12 }}>
-                    {item.sourceLanguage}
-                </Text>
-            </View>
-            <GlobalSearchNovelList
-                data={item.novels}
-                theme={theme}
-                library={library}
-                navigation={navigation}
-            />
-        </>
+        <GlobalSearchSourceItem
+            source={item}
+            library={library}
+            theme={theme}
+            navigation={navigation}
+        />
     );
 
     return (
-        <View
-            style={[
-                styles.container,
-                { backgroundColor: theme.colorPrimaryDark },
-            ]}
-        >
+        <ScreenContainer theme={theme}>
             <Searchbar
                 theme={theme}
                 placeholder="Global Search"
-                left="arrow-left"
-                onPressLeft={() => navigation.goBack()}
+                backAction="arrow-left"
+                onBackAction={navigation.goBack}
                 searchText={searchText}
                 onChangeText={onChangeText}
                 onSubmitEditing={onSubmitEditing}
@@ -183,12 +161,10 @@ const GlobalSearch = ({ route, navigation }) => {
                     )
                 }
             />
-        </View>
+        </ScreenContainer>
     );
 };
 
 export default GlobalSearch;
 
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-});
+const styles = StyleSheet.create({});

src/Screens/Browse/globalsearch/GlobalSearchNovelCover.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { StyleSheet, View, Text, Image } from "react-native";
+
+import { TouchableRipple } from "react-native-paper";
+
+const GlobalSearchNovelCover = ({
+    novel,
+    theme,
+    onPress,
+    inLibrary,
+    onLongPress,
+}) => {
+    const { novelName, novelCover } = novel;
+
+    return (
+        <View style={{ flex: 1 }}>
+            <TouchableRipple
+                borderless
+                centered
+                rippleColor={theme.rippleColor}
+                style={styles.novelContainer}
+                onPress={onPress}
+                onLongPress={onLongPress}
+            >
+                <>
+                    <Image
+                        source={{ uri: novelCover }}
+                        style={[
+                            styles.novelCover,
+                            inLibrary && { opacity: 0.5 },
+                        ]}
+                        progressiveRenderingEnabled={true}
+                    />
+                    <Text
+                        numberOfLines={2}
+                        style={[
+                            styles.title,
+                            { color: theme.textColorPrimary },
+                        ]}
+                    >
+                        {novelName}
+                    </Text>
+                </>
+            </TouchableRipple>
+        </View>
+    );
+};
+
+export default GlobalSearchNovelCover;
+
+const styles = StyleSheet.create({
+    novelContainer: {
+        paddingHorizontal: 5,
+        paddingVertical: 4,
+        borderRadius: 4,
+    },
+    novelCover: {
+        height: 150,
+        width: 115,
+        borderRadius: 4,
+    },
+    title: {
+        fontFamily: "pt-sans-bold",
+        fontSize: 14,
+        padding: 4,
+        flexWrap: "wrap",
+        width: 115,
+    },
+});

src/Screens/Browse/globalsearch/GlobalSearchNovelList.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { StyleSheet, FlatList, Text } from "react-native";
+
+import GlobalSearchNovelCover from "./GlobalSearchNovelCover";
+
+const GlobalSearchNovelList = ({ data, theme, library, navigation }) => {
+    const inLibrary = (sourceId, novelUrl) =>
+        library.some(
+            (obj) => obj.novelUrl === novelUrl && obj.sourceId === sourceId
+        );
+
+    const navigateToNovel = (item) =>
+        navigation.navigate("Novel", {
+            ...item,
+            sourceId: item.extensionId,
+        });
+
+    const renderItem = ({ item }) => (
+        <GlobalSearchNovelCover
+            novel={item}
+            theme={theme}
+            onPress={() => navigateToNovel(item)}
+            inLibrary={inLibrary(item.extensionId, item.novelUrl)}
+        />
+    );
+
+    const ListEmptyComponent = (
+        <Text style={[{ color: theme.textColorSecondary }, styles.emptyList]}>
+            No results found
+        </Text>
+    );
+
+    return (
+        <FlatList
+            contentContainerStyle={styles.listContainer}
+            horizontal={true}
+            data={data}
+            keyExtractor={(item) => item.novelUrl}
+            renderItem={renderItem}
+            ListEmptyComponent={ListEmptyComponent}
+        />
+    );
+};
+
+export default GlobalSearchNovelList;
+
+const styles = StyleSheet.create({
+    listContainer: {
+        flexGrow: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+    },
+    emptyList: {
+        padding: 8,
+        paddingVertical: 4,
+    },
+});

src/Screens/Browse/globalsearch/GlobalSearchSourceItem.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+
+import GlobalSearchNovelList from "./GlobalSearchNovelList";
+
+const GlobalSearchSourceItem = ({ source, library, theme, navigation }) => {
+    const { sourceName, sourceLanguage, novels } = source;
+
+    return (
+        <>
+            <View style={styles.sourceContainer}>
+                <Text style={{ color: theme.textColorPrimary }}>
+                    {sourceName}
+                </Text>
+                <Text style={{ color: theme.textColorSecondary, fontSize: 12 }}>
+                    {sourceLanguage}
+                </Text>
+            </View>
+            <GlobalSearchNovelList
+                data={novels}
+                theme={theme}
+                library={library}
+                navigation={navigation}
+            />
+        </>
+    );
+};
+
+export default GlobalSearchSourceItem;
+
+const styles = StyleSheet.create({
+    sourceContainer: {
+        padding: 8,
+        paddingVertical: 16,
+    },
+});

src/Screens/Browse/migration/Migration.js

@@ -1,20 +1,27 @@
 import React from "react";
 import { StyleSheet, View, FlatList, Text } from "react-native";
-import { useLibrary, useTheme } from "../../Hooks/reduxHooks";
+
 import { useSelector } from "react-redux";
-import { Appbar } from "../../Components/Appbar";
-import MigrationSourceCard from "./components/MigrationSourceCard";
+
+import { Appbar } from "../../../Components/Appbar";
+import MigrationSourceCard from "./MigrationSourceCard";
+
+import { useLibrary, useTheme } from "../../../Hooks/reduxHooks";
 
 const GlobalSearch = ({ navigation }) => {
     const theme = useTheme();
 
-    const { sources } = useSelector((state) => state.sourceReducer);
-
     const library = useLibrary();
+    let { sources } = useSelector((state) => state.sourceReducer);
 
     const novelsPerSource = (sourceId) =>
         library.filter((novel) => novel.sourceId === sourceId).length;
 
+    sources = sources.filter(
+        (source) =>
+            library.filter((novel) => novel.sourceId === source.sourceId).length
+    );
+
     const renderItem = ({ item }) => (
         <MigrationSourceCard
             item={item}
@@ -25,6 +32,12 @@ const GlobalSearch = ({ navigation }) => {
         />
     );
 
+    const ListHeaderComponent = (
+        <Text style={[{ color: theme.textColorSecondary }, styles.listHeader]}>
+            Select a Source To Migrate From
+        </Text>
+    );
+
     return (
         <View
             style={[
@@ -32,26 +45,12 @@ const GlobalSearch = ({ navigation }) => {
                 { backgroundColor: theme.colorPrimaryDark },
             ]}
         >
-            <Appbar
-                title="Select Source"
-                onBackAction={() => navigation.goBack()}
-            />
+            <Appbar title="Select Source" onBackAction={navigation.goBack} />
             <FlatList
                 data={sources}
                 keyExtractor={(item) => item.sourceId.toString()}
                 renderItem={renderItem}
-                ListHeaderComponent={
-                    <Text
-                        style={{
-                            color: theme.textColorSecondary,
-                            padding: 20,
-                            paddingBottom: 10,
-                            textTransform: "uppercase",
-                        }}
-                    >
-                        Select a Source To Migrate From
-                    </Text>
-                }
+                ListHeaderComponent={ListHeaderComponent}
             />
         </View>
     );
@@ -60,10 +59,17 @@ const GlobalSearch = ({ navigation }) => {
 export default GlobalSearch;
 
 const styles = StyleSheet.create({
-    container: { flex: 1 },
+    container: {
+        flex: 1,
+    },
     containerStyle: {
         padding: 20,
         margin: 20,
         borderRadius: 6,
     },
+    listHeader: {
+        padding: 20,
+        paddingBottom: 10,
+        textTransform: "uppercase",
+    },
 });

src/Screens/Browse/migration/MigrationNovelList.js

@@ -1,9 +1,12 @@
 import React, { useState } from "react";
 import { StyleSheet, FlatList, Text, View } from "react-native";
+
 import { Portal, Modal, Button } from "react-native-paper";
+
+import GlobalSearchNovelCover from "../globalsearch/GlobalSearchNovelCover";
+
 import { migrateNovel } from "../../../Database/queries/NovelQueries";
 import { showToast } from "../../../Hooks/showToast";
-import GlobalSearchNovelCover from "./GlobalSearchNovelCover";
 
 const MigrationNovelList = ({ data, theme, library, navigation }) => {
     const [selectedNovel, setSelectedNovel] = useState(false);
@@ -12,7 +15,7 @@ const MigrationNovelList = ({ data, theme, library, navigation }) => {
     const showMigrateNovelDialog = () => setMigrateNovelDialog(true);
     const hideMigrateNovelDialog = () => setMigrateNovelDialog(false);
 
-    const checkIFInLibrary = (sourceId, novelUrl) => {
+    const inLibrary = (sourceId, novelUrl) => {
         return library.some(
             (obj) => obj.novelUrl === novelUrl && obj.sourceId === sourceId
         );
@@ -20,16 +23,23 @@ const MigrationNovelList = ({ data, theme, library, navigation }) => {
 
     const renderItem = ({ item }) => (
         <GlobalSearchNovelCover
-            item={item}
+            novel={item}
+            theme={theme}
             onPress={() =>
                 showModal(item.extensionId, item.novelUrl, item.novelName)
             }
-            libraryStatus={checkIFInLibrary(item.extensionId, item.novelUrl)}
+            onLongPress={() =>
+                navigation.navigate("Novel", {
+                    ...item,
+                    sourceId: item.extensionId,
+                })
+            }
+            inLibrary={inLibrary(item.extensionId, item.novelUrl)}
         />
     );
 
     const showModal = (sourceId, novelUrl, novelName) => {
-        if (checkIFInLibrary(sourceId, novelUrl)) {
+        if (inLibrary(sourceId, novelUrl)) {
             showToast("Novel already in library");
         } else {
             setSelectedNovel({ sourceId, novelUrl, novelName });

src/Screens/Browse/migration/MigrationNovels.js

@@ -7,15 +7,18 @@ import {
     ActivityIndicator,
 } from "react-native";
 import { ProgressBar } from "react-native-paper";
-import { useLibrary, useTheme } from "../../Hooks/reduxHooks";
+import { useLibrary, useTheme } from "../../../Hooks/reduxHooks";
 import { useSelector } from "react-redux";
 
-import EmptyView from "../../Components/EmptyView";
-import MigrationNovelList from "./components/MigrationNovelList";
-import { Appbar } from "../../Components/Appbar";
-import { showToast } from "../../Hooks/showToast";
+import EmptyView from "../../../Components/EmptyView";
+import MigrationNovelList from "./MigrationNovelList";
+import { Appbar } from "../../../Components/Appbar";
 
-const GlobalSearch = ({ navigation, route }) => {
+import { showToast } from "../../../Hooks/showToast";
+import { migrateNovel } from "../../../Database/queries/NovelQueries";
+import { ScreenContainer } from "../../../Components/Common";
+
+const MigrationNovels = ({ navigation, route }) => {
     const { sourceId, novelName } = route.params;
     const theme = useTheme();
 
@@ -104,12 +107,7 @@ const GlobalSearch = ({ navigation, route }) => {
     );
 
     return (
-        <View
-            style={[
-                styles.container,
-                { backgroundColor: theme.colorPrimaryDark },
-            ]}
-        >
+        <ScreenContainer theme={theme}>
             <Appbar
                 title={novelName}
                 onBackAction={() => navigation.goBack()}
@@ -157,12 +155,10 @@ const GlobalSearch = ({ navigation, route }) => {
                     )
                 }
             />
-        </View>
+        </ScreenContainer>
     );
 };
 
-export default GlobalSearch;
+export default MigrationNovels;
 
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-});
+const styles = StyleSheet.create({});

src/Screens/Browse/migration/MigrationSourceCard.js

@@ -3,21 +3,21 @@ import { View, Text, Image, StyleSheet } from "react-native";
 import { TouchableRipple } from "react-native-paper";
 
 const MigrationSourceCard = ({ item, theme, noOfNovels, onPress }) => {
-    const { sourceId, sourceName, sourceCover, sourceLanguage, status } = item;
+    const { sourceName, sourceCover, sourceLanguage } = item;
 
     return (
         <TouchableRipple
-            style={styles.extensionCard}
+            style={styles.cardContainer}
             onPress={onPress}
             rippleColor={theme.rippleColor}
         >
             <>
                 <Image
                     source={{ uri: sourceCover }}
-                    style={styles.extensionIcon}
+                    style={styles.sourceIcon}
                     resizeMode="contain"
                 />
-                <View style={styles.extensionDetails}>
+                <View style={styles.sourceDetailsContainer}>
                     <View>
                         <Text
                             style={{
@@ -27,16 +27,14 @@ const MigrationSourceCard = ({ item, theme, noOfNovels, onPress }) => {
                         >
                             {sourceName} {` (${noOfNovels || 0})`}
                         </Text>
-                        <View style={{ flexDirection: "row" }}>
-                            <Text
-                                style={{
-                                    color: theme.textColorSecondary,
-                                    fontSize: 12,
-                                }}
-                            >
-                                {sourceLanguage}
-                            </Text>
-                        </View>
+                        <Text
+                            style={{
+                                color: theme.textColorSecondary,
+                                fontSize: 12,
+                            }}
+                        >
+                            {sourceLanguage}
+                        </Text>
                     </View>
                 </View>
             </>
@@ -47,19 +45,19 @@ const MigrationSourceCard = ({ item, theme, noOfNovels, onPress }) => {
 export default MigrationSourceCard;
 
 const styles = StyleSheet.create({
-    extensionCard: {
+    cardContainer: {
         flexDirection: "row",
         alignItems: "center",
         marginVertical: 4,
         paddingVertical: 8,
         paddingHorizontal: 20,
     },
-    extensionIcon: {
+    sourceIcon: {
         width: 40,
         height: 40,
-        borderRadius: 8,
+        borderRadius: 4,
     },
-    extensionDetails: {
+    sourceDetailsContainer: {
         flex: 1,
         flexDirection: "row",
         justifyContent: "space-between",

src/Screens/Chapter/Chapter.js

@@ -1,7 +1,13 @@
 import React, { useState, useEffect, useRef } from "react";
-import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
+import {
+    StyleSheet,
+    View,
+    Text,
+    ActivityIndicator,
+    StatusBar,
+} from "react-native";
 
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import Constants from "expo-constants";
 import { IconButton, Portal } from "react-native-paper";
 import { CollapsibleHeaderScrollView } from "react-native-collapsible-header-views";
@@ -32,6 +38,11 @@ import ReaderSheet from "./components/ReaderSheet";
 import EmptyView from "../../Components/EmptyView";
 import FitImage from "react-native-fit-image";
 
+import {
+    hideNavigationBar,
+    showNavigationBar,
+} from "react-native-navigation-bar-color";
+
 const Chapter = ({ route, navigation }) => {
     const {
         sourceId,
@@ -48,6 +59,10 @@ const Chapter = ({ route, navigation }) => {
     const theme = useTheme();
     const dispatch = useDispatch();
     const reader = useReaderSettings();
+    const showScrollPercentage = useSelector(
+        (state) => state.settingsReducer.showScrollPercentage
+    );
+
     const { tracker, trackedNovels } = useTrackingStatus();
     const position = usePosition(novelId, chapterId);
 
@@ -108,6 +123,10 @@ const Chapter = ({ route, navigation }) => {
     useEffect(() => {
         getChapter(chapterId);
         dispatch(insertHistoryAction(novelId, chapterId));
+        return () => {
+            StatusBar.setHidden(false);
+            showNavigationBar();
+        };
     }, []);
 
     const isCloseToBottom = ({
@@ -157,6 +176,8 @@ const Chapter = ({ route, navigation }) => {
     };
 
     const scrollToSavedProgress = () => {
+        StatusBar.setHidden(true);
+        hideNavigationBar();
         if (position && firstLayout) {
             position.percentage < 100 &&
                 scrollViewRef.getNode().scrollTo({
@@ -173,7 +194,7 @@ const Chapter = ({ route, navigation }) => {
             paddingVertical: 16,
             paddingBottom: 32,
             fontSize: reader.textSize,
-            color: readerTextColor(reader.theme),
+            color: reader.textColor || readerTextColor(reader.theme),
             lineHeight: readerLineHeight(reader.textSize, reader.lineHeight),
             textAlign: reader.textAlign,
             paddingHorizontal: `${reader.padding}%`,
@@ -268,17 +289,23 @@ const Chapter = ({ route, navigation }) => {
                         bottomSheetRef={readerSheetRef}
                         selectText={selectText}
                         setSelectText={setSelectText}
+                        showScrollPercentage={showScrollPercentage}
                     />
                 </Portal>
             </CollapsibleHeaderScrollView>
-            <Text
-                style={[
-                    styles.scrollPercentage,
-                    { color: readerTextColor(reader.theme) },
-                ]}
-            >
-                {scrollPercentage + "%"}
-            </Text>
+            {showScrollPercentage && (
+                <Text
+                    style={[
+                        styles.scrollPercentage,
+                        {
+                            color: reader.textColor,
+                            backgroundColor: readerBackground(reader.theme),
+                        },
+                    ]}
+                >
+                    {scrollPercentage + "%"}
+                </Text>
+            )}
         </>
     );
 };
@@ -291,8 +318,12 @@ const styles = StyleSheet.create({
         paddingVertical: 10,
     },
     scrollPercentage: {
+        width: "100%",
         position: "absolute",
-        bottom: 12,
+        bottom: 0,
+        height: 30,
+        textAlign: "center",
+        textAlignVertical: "center",
         alignSelf: "center",
         fontFamily: "noto-sans",
         fontWeight: "bold",

src/Screens/Chapter/components/ReaderSheet.js

@@ -5,7 +5,10 @@ import Slider from "@react-native-community/slider";
 import Bottomsheet from "rn-sliding-up-panel";
 import { fonts } from "../../../Services/utils/constants";
 
-import { setReaderSettings } from "../../../redux/settings/settings.actions";
+import {
+    setAppSettings,
+    setReaderSettings,
+} from "../../../redux/settings/settings.actions";
 import BottomSheetHandle from "../../../Components/BottomSheetHandle";
 import { Row } from "../../../Components/Common";
 
@@ -16,6 +19,7 @@ const ReaderSheet = ({
     bottomSheetRef,
     selectText,
     setSelectText,
+    showScrollPercentage,
 }) => {
     const [fontMenu, setFontMenu] = useState(false);
     const openFontMenu = () => setFontMenu(true);
@@ -25,11 +29,18 @@ const ReaderSheet = ({
         <Text style={styles.title}>{title}</Text>
     );
 
+    const textColor = {
+        1: "rgba(255,255,255,0.7)",
+        2: "#000000",
+        3: "#000000",
+        4: "#FFFFFF",
+    };
+
     return (
         <Bottomsheet
             ref={bottomSheetRef}
-            draggableRange={{ top: 420, bottom: 0 }}
-            snappingPoints={[0, 420]}
+            draggableRange={{ top: 450, bottom: 0 }}
+            snappingPoints={[0, 450]}
             showBackdrop={true}
             backdropOpacity={0}
         >
@@ -45,7 +56,7 @@ const ReaderSheet = ({
                         value={reader.textSize}
                         minimumValue={12}
                         maximumValue={20}
-                        step={2}
+                        step={1}
                         minimumTrackTintColor={theme.colorAccent}
                         maximumTrackTintColor="#000000"
                         thumbTintColor={theme.colorAccent}
@@ -70,6 +81,12 @@ const ReaderSheet = ({
                                             value ?? reader.theme
                                         )
                                     );
+                                    dispatch(
+                                        setReaderSettings(
+                                            "textColor",
+                                            textColor[value] ?? reader.textColor
+                                        )
+                                    );
                                 }}
                                 value={reader.theme}
                             >
@@ -351,6 +368,28 @@ const ReaderSheet = ({
                             ))}
                         </Menu>
                     </Row>
+                    <Row
+                        style={{
+                            justifyContent: "space-between",
+                            width: "100%",
+                            paddingHorizontal: 16,
+                            marginTop: 16,
+                        }}
+                    >
+                        <ReaderSettingTitle title="Show Progress Percentage" />
+                        <Switch
+                            value={showScrollPercentage}
+                            onValueChange={() =>
+                                dispatch(
+                                    setAppSettings(
+                                        "showScrollPercentage",
+                                        !showScrollPercentage
+                                    )
+                                )
+                            }
+                            color={theme.colorAccent}
+                        />
+                    </Row>
                     <Row
                         style={{
                             justifyContent: "space-between",
@@ -389,7 +428,7 @@ const styles = StyleSheet.create({
         flex: 1,
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
-        backgroundColor: "rgba(0,0,0,0.5)",
+        backgroundColor: "rgba(0,0,0,0.7)",
     },
     readerSettingsContainer: {
         flex: 1,

src/Screens/Chapter/readerStyleController.js

@@ -6,14 +6,14 @@ export const readerBackground = (val) => {
         4: "#444444",
     };
 
-    return backgroundColor[val] ?? "#FFFFFF";
+    return backgroundColor[val] ?? val;
 };
 
 export const readerTextColor = (val) => {
     const textColor =
         val === 1 ? "rgba(255,255,255,0.7)" : val === 4 ? "#FFFFFF" : "#000000";
 
-    return textColor;
+    return textColor ?? val;
 };
 
 export const readerLineHeight = (fontSize, lineHeightMultiplier) => {

src/Screens/Extension/Extension.js

@@ -6,16 +6,20 @@ import NovelCover from "../../Components/NovelCover";
 import EmptyView from "../../Components/EmptyView";
 
 import { Searchbar } from "../../Components/Searchbar";
-import { useTheme, useLibrary } from "../../Hooks/reduxHooks";
+import { useTheme, useLibrary, useSettings } from "../../Hooks/reduxHooks";
 import NovelList from "../../Components/NovelList";
 import { showToast } from "../../Hooks/showToast";
 import ErrorView from "../../Components/ErrorView";
+import { useDispatch } from "react-redux";
+import { setAppSettings } from "../../redux/settings/settings.actions";
 
 const Extension = ({ navigation, route }) => {
     const { sourceId, sourceName, sourceUrl } = route.params;
 
     const theme = useTheme();
     const library = useLibrary();
+    const dispatch = useDispatch();
+    const { displayMode } = useSettings();
 
     const [loading, setLoading] = useState(true);
     const [novels, setNovels] = useState();
@@ -115,6 +119,19 @@ const Extension = ({ navigation, route }) => {
         />
     );
 
+    const displayMenuIcon = () => {
+        const icons = {
+            0: "view-module",
+            1: "view-list",
+            2: "view-module",
+        };
+
+        return icons[displayMode];
+    };
+
+    const getDisplayMode = () =>
+        displayMode === 0 ? 1 : displayMode === 1 ? 2 : displayMode === 2 && 0;
+
     return (
         <View
             style={[
@@ -125,15 +142,27 @@ const Extension = ({ navigation, route }) => {
             <Searchbar
                 theme={theme}
                 placeholder={`Search ${sourceName}`}
-                left="arrow-left"
-                onPressLeft={() => navigation.goBack()}
+                backAction="arrow-left"
+                onBackAction={() => navigation.goBack()}
                 searchText={searchText}
                 onChangeText={(text) => setSearchText(text)}
                 onSubmitEditing={getSearchResults}
                 clearSearchbar={clearSearchbar}
-                right="earth"
-                displayMenu={true}
-                onPressRight={() => WebBrowser.openBrowserAsync(sourceUrl)}
+                actions={[
+                    {
+                        icon: displayMenuIcon(),
+                        color: theme.textColorSecondary,
+                        onPress: () =>
+                            dispatch(
+                                setAppSettings("displayMode", getDisplayMode())
+                            ),
+                    },
+                    {
+                        icon: "earth",
+                        color: theme.textColorSecondary,
+                        onPress: () => WebBrowser.openBrowserAsync(sourceUrl),
+                    },
+                ]}
             />
 
             {loading ? (

src/Screens/History/History.js

@@ -1,22 +1,18 @@
 import React, { useState, useEffect } from "react";
 import { StyleSheet, FlatList, ActivityIndicator, Text } from "react-native";
 
-import HistoryCard from "./components/HistoryCard";
-
-import { useDispatch, useSelector } from "react-redux";
-import EmptyView from "../../Components/EmptyView";
-
-import {
-    getHistoryAction,
-    clearAllHistoryAction,
-} from "../../redux/history/history.actions";
-
 import moment from "moment";
-import { dateFormat } from "../../Services/utils/constants";
+import { useDispatch, useSelector } from "react-redux";
+
+import EmptyView from "../../Components/EmptyView";
+import HistoryItem from "./HistoryItem";
+import RemoveHistoryDialog from "./RemoveHistoryDialog";
 import { ScreenContainer } from "../../Components/Common";
 import { Searchbar } from "../../Components/Searchbar";
+
+import { getHistoryAction } from "../../redux/history/history.actions";
+import { dateFormat } from "../../Services/utils/constants";
 import { useTheme } from "../../Hooks/reduxHooks";
-import { Button, Dialog, Portal } from "react-native-paper";
 
 const History = ({ navigation }) => {
     const theme = useTheme();
@@ -38,15 +34,18 @@ const History = ({ navigation }) => {
     }, [getHistoryAction]);
 
     const renderHistoryCard = ({ item }) => (
-        <HistoryCard
+        <HistoryItem
             dispatch={dispatch}
-            item={item}
+            history={item}
             theme={theme}
             navigation={navigation}
         />
     );
 
-    const clearSearchbar = () => setSearchText("");
+    const clearSearchbar = () => {
+        setSearchText("");
+        setSearchResults([]);
+    };
 
     const onChangeText = (text) => {
         setSearchText(text);
@@ -77,10 +76,15 @@ const History = ({ navigation }) => {
                 searchText={searchText}
                 clearSearchbar={clearSearchbar}
                 onChangeText={onChangeText}
-                left="magnify"
+                backAction="magnify"
                 theme={theme}
-                right="trash-can-outline"
-                onPressRight={showDialog}
+                actions={[
+                    {
+                        icon: "trash-can-outline",
+                        color: theme.textColorSecondary,
+                        onPress: showDialog,
+                    },
+                ]}
             />
             <FlatList
                 contentContainerStyle={{
@@ -123,45 +127,12 @@ const History = ({ navigation }) => {
                     />
                 }
             />
-            <Portal>
-                <Dialog
-                    visible={visible}
-                    onDismiss={hideDialog}
-                    style={{
-                        borderRadius: 6,
-                        backgroundColor: theme.colorPrimary,
-                    }}
-                >
-                    <Dialog.Title
-                        style={{
-                            letterSpacing: 0,
-                            fontSize: 16,
-                            color: theme.textColorPrimary,
-                        }}
-                    >
-                        Are you sure? All history will be lost.
-                    </Dialog.Title>
-                    <Dialog.Actions>
-                        <Button
-                            uppercase={false}
-                            theme={{ colors: { primary: theme.colorAccent } }}
-                            onPress={hideDialog}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            uppercase={false}
-                            theme={{ colors: { primary: theme.colorAccent } }}
-                            onPress={() => {
-                                dispatch(clearAllHistoryAction());
-                                hideDialog();
-                            }}
-                        >
-                            Ok
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-            </Portal>
+            <RemoveHistoryDialog
+                dialogVisible={visible}
+                hideDialog={hideDialog}
+                dispatch={dispatch}
+                theme={theme}
+            />
         </ScreenContainer>
     );
 };

src/Screens/History/HistoryItem.js

@@ -0,0 +1,135 @@
+import React from "react";
+import { Pressable, StyleSheet, View, Image, Text } from "react-native";
+
+import moment from "moment";
+import { IconButton } from "react-native-paper";
+
+import { parseChapterNumber } from "../../Services/utils/helpers";
+import { deleteHistoryAction } from "../../redux/history/history.actions";
+
+const HistoryItem = ({ history, theme, dispatch, navigation }) => {
+    const {
+        historyId,
+        historyTimeRead,
+        historyChapterId,
+        sourceId,
+        novelId,
+        novelUrl,
+        novelName,
+        novelCover,
+        chapterName,
+        chapterUrl,
+    } = history;
+
+    const getChapterNumber = () =>
+        `Ch. ${parseChapterNumber(chapterName)} - ${moment(historyTimeRead)
+            .format("h:mm a")
+            .toUpperCase()}`;
+
+    const navigateToNovel = () => navigation.navigate("Novel", history);
+
+    const navigateToChapter = () =>
+        navigation.navigate("Chapter", {
+            chapterId: historyChapterId,
+            chapterUrl,
+            sourceId,
+            novelUrl,
+            novelId,
+            chapterName,
+            novelName,
+        });
+
+    return (
+        <View style={styles.historyItemContainer}>
+            <Pressable
+                onPress={navigateToNovel}
+                android_ripple={{ color: theme.rippleColor }}
+                style={styles.pressable}
+            >
+                <View
+                    style={{
+                        flex: 1,
+                        flexDirection: "row",
+                        overflow: "hidden",
+                    }}
+                >
+                    <View>
+                        <Image
+                            source={{ uri: novelCover }}
+                            style={styles.historyItemCover}
+                        />
+                    </View>
+                    <View
+                        style={{
+                            flexShrink: 1,
+                            marginLeft: 16,
+                            justifyContent: "center",
+                        }}
+                    >
+                        <Text
+                            style={[
+                                { color: theme.textColorPrimary },
+                                styles.historyItemTitle,
+                            ]}
+                            numberOfLines={2}
+                        >
+                            {novelName}
+                        </Text>
+                        <Text
+                            style={{
+                                color: theme.textColorSecondary,
+                                marginTop: 2,
+                            }}
+                            numberOfLines={1}
+                        >
+                            {getChapterNumber()}
+                        </Text>
+                    </View>
+                </View>
+                <View style={styles.historyActionsContainer}>
+                    <IconButton
+                        icon="delete-outline"
+                        size={22}
+                        color={theme.textColorPrimary}
+                        onPress={() => dispatch(deleteHistoryAction(historyId))}
+                    />
+                    <IconButton
+                        icon="play"
+                        size={24}
+                        color={theme.textColorPrimary}
+                        onPress={navigateToChapter}
+                    />
+                </View>
+            </Pressable>
+        </View>
+    );
+};
+
+export default HistoryItem;
+
+const styles = StyleSheet.create({
+    historyItemContainer: {
+        marginVertical: 8,
+        borderRadius: 4,
+        overflow: "hidden",
+    },
+    pressable: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    historyItemCover: {
+        height: 80,
+        width: 57,
+        borderRadius: 4,
+    },
+    historyItemTitle: {
+        fontSize: 16,
+        flexWrap: "wrap",
+    },
+    historyActionsContainer: {
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});

src/Screens/History/RemoveHistoryDialog.js

@@ -0,0 +1,59 @@
+import React from "react";
+
+import { Button, Dialog, Portal } from "react-native-paper";
+import { clearAllHistoryAction } from "../../redux/history/history.actions";
+
+const RemoveHistoryDialog = ({
+    dialogVisible,
+    hideDialog,
+    dispatch,
+    theme,
+}) => {
+    const onPress = () => {
+        dispatch(clearAllHistoryAction());
+        hideDialog();
+    };
+
+    return (
+        <Portal>
+            <Dialog
+                visible={dialogVisible}
+                onDismiss={hideDialog}
+                style={{
+                    borderRadius: 6,
+                    backgroundColor: theme.colorPrimary,
+                }}
+            >
+                <Dialog.Title
+                    style={{
+                        letterSpacing: 0,
+                        fontSize: 16,
+                        color: theme.textColorPrimary,
+                    }}
+                >
+                    Are you sure? All history will be lost.
+                </Dialog.Title>
+                <Dialog.Actions>
+                    <Button
+                        uppercase={false}
+                        theme={{ colors: { primary: theme.colorAccent } }}
+                        onPress={hideDialog}
+                        labelStyle={{ letterSpacing: 0 }}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        uppercase={false}
+                        theme={{ colors: { primary: theme.colorAccent } }}
+                        onPress={onPress}
+                        labelStyle={{ letterSpacing: 0 }}
+                    >
+                        Ok
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+        </Portal>
+    );
+};
+
+export default RemoveHistoryDialog;

src/Screens/History/components/HistoryCard.js

@@ -1,116 +0,0 @@
-import React from "react";
-
-import { StyleSheet, View, Text, Image } from "react-native";
-import { TouchableRipple, IconButton } from "react-native-paper";
-
-import moment from "moment";
-
-import { useDispatch } from "react-redux";
-import { setNovel } from "../../../redux/novel/novel.actions";
-import { parseChapterNumber } from "../../../Services/utils/helpers";
-import { deleteHistoryAction } from "../../../redux/history/history.actions";
-
-const HistoryCard = ({ item, navigation, theme, dispatch }) => {
-    return (
-        <TouchableRipple
-            style={styles.historyCard}
-            rippleColor={theme.rippleColor}
-            borderless
-            onPress={() => {
-                navigation.navigate("Novel", item);
-                dispatch(setNovel(item));
-            }}
-        >
-            <>
-                <Image
-                    source={{ uri: item.novelCover }}
-                    style={styles.historyCover}
-                />
-                <View style={styles.historyText}>
-                    <View style={{ flex: 0.9 }}>
-                        <Text
-                            style={{
-                                color: theme.textColorPrimary,
-                                fontWeight: "bold",
-                                fontSize: 16,
-                            }}
-                            numberOfLines={1}
-                        >
-                            {item.novelName}
-                        </Text>
-                        <Text
-                            style={{
-                                color: theme.textColorSecondary,
-                                marginTop: 2,
-                            }}
-                            numberOfLines={1}
-                        >
-                            {`Ch. ${parseChapterNumber(
-                                item.chapterName
-                            )} - ${moment(item.historyTimeRead)
-                                .format("h:mm a")
-                                .toUpperCase()}`}
-                        </Text>
-                    </View>
-                    <View
-                        style={{
-                            flexDirection: "row",
-                            alignItems: "center",
-                        }}
-                    >
-                        <IconButton
-                            icon="delete-outline"
-                            size={22}
-                            color={theme.textColorPrimary}
-                            style={{
-                                marginRight: 0,
-                            }}
-                            onPress={() =>
-                                dispatch(deleteHistoryAction(item.historyId))
-                            }
-                        />
-                        <IconButton
-                            icon="play"
-                            size={24}
-                            color={theme.textColorPrimary}
-                            style={{ marginRight: 0 }}
-                            onPress={() =>
-                                navigation.navigate("Chapter", {
-                                    chapterId: item.historyChapterId,
-                                    chapterUrl: item.chapterUrl,
-                                    sourceId: item.sourceId,
-                                    novelUrl: item.novelUrl,
-                                    novelId: item.novelId,
-                                    chapterName: item.chapterName,
-                                    novelName: item.novelName,
-                                })
-                            }
-                        />
-                    </View>
-                </View>
-            </>
-        </TouchableRipple>
-    );
-};
-
-export default HistoryCard;
-
-const styles = StyleSheet.create({
-    historyCard: {
-        marginVertical: 8,
-        borderRadius: 4,
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    historyCover: {
-        height: 80,
-        width: 57,
-        borderRadius: 4,
-    },
-    historyText: {
-        marginLeft: 15,
-        flex: 1,
-        flexDirection: "row",
-        justifyContent: "space-between",
-    },
-});

src/Screens/Library/Library.js

@@ -110,10 +110,16 @@ const LibraryScreen = ({ navigation }) => {
                     searchText={searchText}
                     clearSearchbar={clearSearchbar}
                     onChangeText={onChangeText}
-                    left="magnify"
-                    right="filter-variant"
-                    filter={filter}
-                    onPressRight={() => libraryFilterSheetRef.current.show()}
+                    backAction="magnify"
+                    actions={[
+                        {
+                            icon: "filter-variant",
+                            onPress: () => libraryFilterSheetRef.current.show(),
+                            color: filter
+                                ? theme.filterColor
+                                : theme.textColorSecondary,
+                        },
+                    ]}
                     theme={theme}
                 />
                 {loading ? (

src/Screens/More/About.js

@@ -17,12 +17,12 @@ const AboutScreen = ({ navigation }) => {
                 <ListSection>
                     <ListItem
                         title="Version"
-                        description="Stable 1.0.19"
+                        description="Stable 1.0.21"
                         theme={theme}
                     />
                     <ListItem
                         title="Build Time"
-                        description="31-05-21 21:30 PM"
+                        description="09-06-21 14:43 PM"
                         theme={theme}
                     />
                     <ListItem

src/Screens/More/GeneralSettings.js

@@ -15,6 +15,8 @@ import DisplayModeModal from "./components/DisplayModeModal";
 import GridSizeModal from "./components/GridSizeModal";
 import ThemeModal from "./components/ThemeModal";
 import AccentColorModal from "./components/AccentColorModal";
+import { setAccentColor } from "../../redux/settings/settings.actions";
+import ColorPickerModal from "../../Components/ColorPickerModal";
 
 const GenralSettings = ({ navigation }) => {
     const theme = useTheme();
@@ -89,7 +91,7 @@ const GenralSettings = ({ navigation }) => {
                 />
                 <ListItem
                     title="Accent Color"
-                    description={theme.colorAccent}
+                    description={theme.colorAccent.toUpperCase()}
                     onPress={showAccentColorModal}
                     theme={theme}
                     iconColor={theme.colorAccent}
@@ -116,10 +118,12 @@ const GenralSettings = ({ navigation }) => {
                 hidethemeModal={hidethemeModal}
                 theme={theme}
             />
-            <AccentColorModal
-                dispatch={dispatch}
-                accentColorModal={accentColorModal}
-                hideAccentColorModal={hideAccentColorModal}
+            <ColorPickerModal
+                title="Accent color"
+                modalVisible={accentColorModal}
+                hideModal={hideAccentColorModal}
+                color={theme.colorAccent}
+                onSubmit={(val) => dispatch(setAccentColor(val))}
                 theme={theme}
             />
         </ScreenContainer>

src/Screens/More/ReaderSettings.js

@@ -1,20 +1,278 @@
-import React from "react";
+import React, { useState } from "react";
+import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { ToggleButton } from "react-native-paper";
 import { useDispatch } from "react-redux";
 
 import { Appbar } from "../../Components/Appbar";
-import { ScreenContainer } from "../../Components/Common";
+import ColorPickerModal from "../../Components/ColorPickerModal";
+import { Row, ScreenContainer } from "../../Components/Common";
+import { ListItem, ListSection, ListSubHeader } from "../../Components/List";
 
-import { useTheme } from "../../Hooks/reduxHooks";
+import { useReaderSettings, useTheme } from "../../Hooks/reduxHooks";
+import { setReaderSettings } from "../../redux/settings/settings.actions";
+import {
+    readerBackground,
+    readerLineHeight,
+    readerTextColor,
+} from "../Chapter/readerStyleController";
 
 const ReaderSettings = ({ navigation }) => {
     const theme = useTheme();
     const dispatch = useDispatch();
 
+    const reader = useReaderSettings();
+
+    const textColor = {
+        1: "rgba(255,255,255,0.7)",
+        2: "#000000",
+        3: "#000000",
+        4: "#FFFFFF",
+    };
+
+    /**
+     * Reader Background Color Modal
+     */
+    const [readerBackgroundColorModal, setReaderBackgroundtColorModal] =
+        useState(false);
+    const showReaderBackgroundtColorModal = () =>
+        setReaderBackgroundtColorModal(true);
+    const hideReaderBackgroundtColorModal = () =>
+        setReaderBackgroundtColorModal(false);
+
+    /**
+     * Reader Text Color Modal
+     */
+    const [readerTextColorModal, setReaderTextColorModal] = useState(false);
+    const showReaderTextColorModal = () => setReaderTextColorModal(true);
+    const hideReaderTextColorModal = () => setReaderTextColorModal(false);
+
+    const setReaderBackground = (val) => {
+        dispatch(setReaderSettings("theme", val));
+    };
+
+    const setReaderTextColor = (val) => {
+        dispatch(setReaderSettings("textColor", val ?? reader.textColor));
+    };
+
+    const readerStyles = [
+        {
+            paddingVertical: 16,
+            paddingBottom: 32,
+            fontSize: reader.textSize,
+            color: reader.textColor,
+            lineHeight: readerLineHeight(reader.textSize, reader.lineHeight),
+            textAlign: reader.textAlign,
+            paddingHorizontal: `${reader.padding}%`,
+        },
+        reader.fontFamily && {
+            fontFamily: reader.fontFamily,
+        },
+    ];
+
+    const presetThemes = [
+        {
+            value: 1,
+            backgroundColor: "#000000",
+            textColor: "rgba(255,255,255,0.7)",
+        },
+        { value: 2, backgroundColor: "#FFFFFF", textColor: "#000000" },
+        { value: 3, backgroundColor: "#F4ECD8", textColor: "#000000" },
+        { value: 4, backgroundColor: "#444444", textColor: "#FFFFFF" },
+    ];
+
+    const onValueChange = (value) => {
+        dispatch(setReaderSettings("theme", value ?? reader.theme));
+        dispatch(
+            setReaderSettings("textColor", textColor[value] ?? reader.textColor)
+        );
+    };
+
+    const textAlignments = [
+        { value: "left", icon: "format-align-left" },
+        { value: "justify", icon: "format-align-justify" },
+        { value: "right", icon: "format-align-right" },
+    ];
+
+    const onValueChangeTextAlign = (value) => {
+        dispatch(setReaderSettings("textAlign", value ?? reader.textAlign));
+    };
+
     return (
         <ScreenContainer theme={theme}>
-            <Appbar title="Reader" onBackAction={() => navigation.goBack()} />
+            <Appbar title="Reader" onBackAction={navigation.goBack} />
+            <ScrollView>
+                <View
+                    style={{ backgroundColor: readerBackground(reader.theme) }}
+                >
+                    <Text style={readerStyles}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Ut lobortis nunc id nisl tempor, sed tristique sem
+                        sagittis. Mauris consequat orci egestas volutpat
+                        vestibulum. Nullam convallis, leo in porttitor
+                        fringilla, ex mi finibus felis, non molestie ligula
+                        ligula facilisis ligula. Nam eu est a turpis porttitor
+                        aliquet sed vel risus. Ut ac scelerisque diam. Nulla
+                        fringilla enim non ex rhoncus faucibus. Integer eget
+                        lacus justo. Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit. Ut vitae tempor metus. Morbi nec nisl
+                        cursus, gravida ex vitae, laoreet leo. Pellentesque in
+                        lectus ante. Aliquam porta suscipit pretium. Sed ut
+                        ligula at dolor pretium egestas quis vitae urna. In
+                        ullamcorper venenatis orci, eu pulvinar nibh venenatis
+                        sit amet.
+                    </Text>
+                </View>
+                <ListSection>
+                    <ListSubHeader theme={theme}>Preset</ListSubHeader>
+                    <Pressable
+                        android_ripple={{ color: theme.rippleColor }}
+                        style={styles.pressableListItem}
+                    >
+                        <Text
+                            style={{
+                                color: theme.textColorPrimary,
+                                fontSize: 16,
+                            }}
+                        >
+                            Preset Themes
+                        </Text>
+                        <Row>
+                            <ToggleButton.Row
+                                onValueChange={onValueChange}
+                                value={reader.theme}
+                            >
+                                {presetThemes.map((theme) => (
+                                    <ToggleButton
+                                        key={theme.value}
+                                        icon={
+                                            reader.theme === theme.value &&
+                                            "check"
+                                        }
+                                        color={theme.textColor}
+                                        value={theme.value}
+                                        style={[
+                                            {
+                                                backgroundColor:
+                                                    theme.backgroundColor,
+                                            },
+                                            styles.presetToggleButton,
+                                        ]}
+                                    />
+                                ))}
+                            </ToggleButton.Row>
+                        </Row>
+                    </Pressable>
+                    <ListSubHeader theme={theme}>Reader</ListSubHeader>
+                    <ListItem
+                        title="Background Color"
+                        description={readerBackground(
+                            reader.theme
+                        ).toUpperCase()}
+                        onPress={showReaderBackgroundtColorModal}
+                        theme={theme}
+                        iconColor={readerBackground(reader.theme)}
+                        right="circle"
+                    />
+                    <ListItem
+                        title="Text Color"
+                        description={
+                            reader.textColor.toUpperCase() ||
+                            readerTextColor(reader.theme)
+                        }
+                        onPress={showReaderTextColorModal}
+                        theme={theme}
+                        iconColor={
+                            reader.textColor || readerTextColor(reader.theme)
+                        }
+                        right="circle"
+                    />
+                    <ListSubHeader theme={theme}>Text</ListSubHeader>
+                    <Pressable
+                        android_ripple={{ color: theme.rippleColor }}
+                        style={styles.pressableListItem}
+                    >
+                        <View>
+                            <Text
+                                style={{
+                                    color: theme.textColorPrimary,
+                                    fontSize: 16,
+                                }}
+                            >
+                                Text Align
+                            </Text>
+                            <Text
+                                style={{
+                                    color: theme.textColorSecondary,
+                                    textTransform: "capitalize",
+                                }}
+                            >
+                                {reader.textAlign}
+                            </Text>
+                        </View>
+                        <Row>
+                            <ToggleButton.Row
+                                onValueChange={onValueChangeTextAlign}
+                                value={reader.textAlign}
+                            >
+                                {textAlignments.map((item) => (
+                                    <ToggleButton
+                                        key={item.value}
+                                        icon={item.icon}
+                                        color={
+                                            reader.textAlign === item.value
+                                                ? theme.colorAccent
+                                                : "#FFFFFF"
+                                        }
+                                        value={item.value}
+                                        style={{
+                                            backgroundColor: "transparent",
+                                            marginHorizontal: 10,
+                                            borderWidth: 0,
+                                            borderRadius: 4,
+                                        }}
+                                    />
+                                ))}
+                            </ToggleButton.Row>
+                        </Row>
+                    </Pressable>
+                </ListSection>
+            </ScrollView>
+            <ColorPickerModal
+                title="Reader background color"
+                modalVisible={readerBackgroundColorModal}
+                color={readerBackground(reader.theme)}
+                hideModal={hideReaderBackgroundtColorModal}
+                theme={theme}
+                onSubmit={setReaderBackground}
+            />
+            <ColorPickerModal
+                title="Reader text color"
+                modalVisible={readerTextColorModal}
+                color={reader.textColor}
+                hideModal={hideReaderTextColorModal}
+                theme={theme}
+                onSubmit={setReaderTextColor}
+            />
         </ScreenContainer>
     );
 };
 
 export default ReaderSettings;
+
+const styles = StyleSheet.create({
+    pressableListItem: {
+        padding: 16,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    presetToggleButton: {
+        marginLeft: 12,
+        borderRadius: 50,
+        borderTopRightRadius: 50,
+        borderBottomRightRadius: 50,
+        borderTopLeftRadius: 50,
+        borderBottomLeftRadius: 50,
+        borderWidth: 0,
+    },
+});

src/Screens/More/Settings.js

@@ -43,7 +43,7 @@ const SettingsScreen = ({ navigation }) => {
                     }
                     theme={theme}
                 />
-                {/* <ListItem
+                <ListItem
                     title="Reader"
                     icon="book-open-outline"
                     onPress={() =>
@@ -52,7 +52,7 @@ const SettingsScreen = ({ navigation }) => {
                         })
                     }
                     theme={theme}
-                /> */}
+                />
                 <ListItem
                     title="Tracking"
                     icon="sync"

src/Screens/More/components/AccentColorModal.js

@@ -1,15 +1,15 @@
 import React, { useState } from "react";
 import { StyleSheet, Text } from "react-native";
 import { Modal, Portal, TextInput } from "react-native-paper";
-import { setAccentColor } from "../../../redux/settings/settings.actions";
 
 const AccentColorModal = ({
-    dispatch,
     accentColorModal,
     hideAccentColorModal,
     theme,
+    onPress,
+    color,
 }) => {
-    const [text, setText] = useState(theme.colorAccent);
+    const [text, setText] = useState(color);
     const [error, setError] = useState();
 
     return (
@@ -36,11 +36,11 @@ const AccentColorModal = ({
                 </Text>
                 <TextInput
                     value={text}
-                    defaultValue={theme.colorAccent}
+                    defaultValue={color}
                     onChangeText={(text) => setText(text)}
                     onSubmitEditing={() => {
-                        if (text.match(/^#[0-9a-f]{3,6}$/i)) {
-                            dispatch(setAccentColor(text));
+                        if (text.match(/^#([0-9a-f]{6}|[0-9a-f]{3})$/i)) {
+                            onPress(text);
                             hideAccentColorModal();
                         } else {
                             setError("Enter a valid hex color code");
@@ -49,7 +49,7 @@ const AccentColorModal = ({
                     mode="outlined"
                     theme={{
                         colors: {
-                            primary: theme.colorAccent,
+                            primary: color,
                             placeholder: theme.textColorHint,
                             text: theme.textColorPrimary,
                             background: "transparent",

src/Screens/More/components/ThemeModal.js

@@ -4,6 +4,7 @@ import { Portal, Modal, Checkbox } from "react-native-paper";
 
 import { setStatusBarStyle } from "expo-status-bar";
 import { setAppTheme } from "../../../redux/settings/settings.actions";
+import ImmersiveMode from "react-native-immersive-mode";
 
 const ThemeModal = ({ themeModalVisible, hidethemeModal, dispatch, theme }) => {
     const themes = [
@@ -26,7 +27,8 @@ const ThemeModal = ({ themeModalVisible, hidethemeModal, dispatch, theme }) => {
                 color={theme.colorAccent}
                 onPress={() => {
                     dispatch(setAppTheme(item.id));
-                    setStatusBarStyle(item.statusBar);
+                    // setStatusBarStyle(item.statusBar);
+                    ImmersiveMode.setBarColor(item.colorPrimary);
                 }}
             />
         ));

src/Screens/Novel/Novel.js

@@ -155,7 +155,9 @@ const Novel = ({ route, navigation }) => {
                                     dispatch(
                                         markChaptersRead(
                                             selected,
-                                            novel.novelId
+                                            novel.novelId,
+                                            sort,
+                                            filter
                                         )
                                     );
                                     setSelected([]);

src/Screens/Novel/components/ChapterItem.js

@@ -1,7 +1,14 @@
 import React, { useState } from "react";
-import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
+import {
+    View,
+    Text,
+    ActivityIndicator,
+    StyleSheet,
+    Pressable,
+} from "react-native";
 
 import { TouchableRipple, IconButton, Menu } from "react-native-paper";
+import { Row } from "../../../Components/Common";
 
 import {
     deleteChapterAction,
@@ -121,127 +128,114 @@ const ChapterItem = ({
         return selected.some((obj) => obj.chapterId === chapterId);
     };
 
+    const onPress = () => {
+        if (selected.length === 0) {
+            navigateToChapter();
+        } else {
+            if (isSelected(chapter.chapterId)) {
+                setSelected((selected) =>
+                    selected.filter(
+                        (item) => item.chapterId !== chapter.chapterId
+                    )
+                );
+            } else {
+                setSelected((selected) => [...selected, chapter]);
+            }
+        }
+    };
+
+    const onLongPress = () => {
+        if (isSelected(chapter.chapterId)) {
+            setSelected((selected) =>
+                selected.filter((item) => item.chapterId !== chapter.chapterId)
+            );
+        } else {
+            setSelected((selected) => [...selected, chapter]);
+        }
+    };
+
     return (
-        <TouchableRipple
+        <Pressable
             style={[
                 styles.chapterCardContainer,
                 isSelected(chapter.chapterId) && {
                     backgroundColor: theme.rippleColor,
                 },
             ]}
-            onPress={() => {
-                if (selected.length === 0) {
-                    navigateToChapter();
-                } else {
-                    if (isSelected(chapter.chapterId)) {
-                        setSelected((selected) =>
-                            selected.filter(
-                                (item) => item.chapterId !== chapter.chapterId
-                            )
-                        );
-                    } else {
-                        setSelected((selected) => [...selected, chapter]);
-                    }
-                }
-            }}
-            onLongPress={() => {
-                if (isSelected(chapter.chapterId)) {
-                    setSelected((selected) =>
-                        selected.filter(
-                            (item) => item.chapterId !== chapter.chapterId
-                        )
-                    );
-                } else {
-                    setSelected((selected) => [...selected, chapter]);
-                }
-                // chapterActionsSheetRef.current.show();
-            }}
-            rippleColor={theme.rippleColor}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            android_ripple={{ color: theme.rippleColor }}
         >
-            <>
+            <Row>
+                {bookmarkButton()}
                 <View>
+                    <Text
+                        style={[
+                            { color: theme.textColorPrimary },
+                            chapter.read && {
+                                color: theme.textColorHint,
+                            },
+                        ]}
+                        numberOfLines={1}
+                    >
+                        {showChapterTitles
+                            ? parseChapterNumber(chapter.chapterName)
+                                ? "Chapter " +
+                                  parseChapterNumber(chapter.chapterName)
+                                : "Chapter " + index
+                            : chapter.chapterName.substring(0, 50)}
+                    </Text>
                     <View
                         style={{
                             flexDirection: "row",
-                            alignItems: "center",
+                            marginTop: 5,
                         }}
                     >
-                        {bookmarkButton()}
-                        <View>
+                        {chapter.releaseDate && (
                             <Text
                                 style={[
-                                    { color: theme.textColorPrimary },
+                                    {
+                                        color: theme.textColorSecondary,
+                                        fontSize: 12,
+                                    },
                                     chapter.read && {
                                         color: theme.textColorHint,
                                     },
                                 ]}
                                 numberOfLines={1}
                             >
-                                {showChapterTitles
-                                    ? parseChapterNumber(chapter.chapterName)
-                                        ? "Chapter " +
-                                          parseChapterNumber(
-                                              chapter.chapterName
-                                          )
-                                        : "Chapter " + index
-                                    : chapter.chapterName.substring(0, 50)}
+                                {chapter.releaseDate}
                             </Text>
-                            <View
-                                style={{
-                                    flexDirection: "row",
-                                    marginTop: 5,
-                                }}
-                            >
-                                {chapter.releaseDate && (
-                                    <Text
-                                        style={[
-                                            {
-                                                color: theme.textColorSecondary,
-                                                fontSize: 12,
-                                            },
-                                            chapter.read && {
-                                                color: theme.textColorHint,
-                                            },
-                                        ]}
-                                        numberOfLines={1}
-                                    >
-                                        {chapter.releaseDate}
-                                    </Text>
-                                )}
-                                {position &&
-                                    !chapter.read &&
-                                    position[chapter.chapterId] &&
-                                    position[chapter.chapterId].percentage <
-                                        100 &&
-                                    position[chapter.chapterId].percentage >
-                                        0 && (
-                                        <Text
-                                            style={[
-                                                {
-                                                    color: theme.textColorHint,
-                                                    fontSize: 12,
-                                                    marginLeft: 0,
-                                                },
-                                                chapter.releaseDate && {
-                                                    marginLeft: 5,
-                                                },
-                                            ]}
-                                            numberOfLines={1}
-                                        >
-                                            {chapter.releaseDate && "• "}
-                                            {"Progress " +
-                                                position[chapter.chapterId]
-                                                    .percentage +
-                                                "%"}
-                                        </Text>
-                                    )}
-                            </View>
-                        </View>
+                        )}
+                        {position &&
+                            !chapter.read &&
+                            position[chapter.chapterId] &&
+                            position[chapter.chapterId].percentage < 100 &&
+                            position[chapter.chapterId].percentage > 0 && (
+                                <Text
+                                    style={[
+                                        {
+                                            color: theme.textColorHint,
+                                            fontSize: 12,
+                                            marginLeft: 0,
+                                        },
+                                        chapter.releaseDate && {
+                                            marginLeft: 5,
+                                        },
+                                    ]}
+                                    numberOfLines={1}
+                                >
+                                    {chapter.releaseDate && "• "}
+                                    {"Progress " +
+                                        position[chapter.chapterId].percentage +
+                                        "%"}
+                                </Text>
+                            )}
                     </View>
                 </View>
-                <View>{displayDownloadButton()}</View>
-            </>
-        </TouchableRipple>
+            </Row>
+            <View>{displayDownloadButton()}</View>
+        </Pressable>
     );
 };
 

src/Screens/Novel/components/Info/NovelDetailsComponents.js

@@ -12,6 +12,7 @@ import { Chip, IconButton } from "react-native-paper";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
 import easeGradient from "react-native-easing-gradient";
+import FastImage from "react-native-fast-image";
 
 const NovelInfoContainer = ({ children }) => (
     <View style={styles.novelInfoContainer}>{children}</View>
@@ -26,7 +27,7 @@ const CoverImage = ({ children, source, theme }) => {
     });
 
     return (
-        <ImageBackground source={source} style={styles.coverImage}>
+        <FastImage source={source} style={styles.coverImage}>
             <LinearGradient
                 colors={colors}
                 locations={locations}
@@ -34,12 +35,12 @@ const CoverImage = ({ children, source, theme }) => {
             >
                 {children}
             </LinearGradient>
-        </ImageBackground>
+        </FastImage>
     );
 };
 
 const NovelThumbnail = ({ source }) => (
-    <Image source={source} style={styles.novelThumbnail} />
+    <FastImage source={source} style={styles.novelThumbnail} />
 );
 
 const NovelTitle = ({ theme, children, onLongPress, onPress }) => (