Release v1.0.21

* Refactor

* Add migration

* Finish migration

* Add progress bar

.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,26 +1,23 @@
 import React, { useEffect } from "react";
-import { NavigationContainer } from "@react-navigation/native";
+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 { createDB, deleteDb } from "./src/database/DBHelper";
+
+import Main from "./src/Navigators/Main";
+
+import { createDB, deleteDb } from "./src/Database/DBHelper";
+import { fonts } from "./src/Theme/fonts";
 
 const App = () => {
-    const [loaded] = useFonts({
-        "pt-sans-bold": require("./assets/fonts/PTSansNarrow-Bold.ttf"),
-        "arbutus-slab": require("./assets/fonts/ArbutusSlab-Regular.ttf"),
-        domine: require("./assets/fonts/Domine-VariableFont_wght.ttf"),
-        lato: require("./assets/fonts/Lato-Regular.ttf"),
-        "noto-sans": require("./assets/fonts/NotoSans-Regular.ttf"),
-        "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
-        "pt-serif": require("./assets/fonts/PTSerif-Regular.ttf"),
-    });
+    const [loaded] = useFonts(fonts);
 
-    useEffect(() => createDB(), []);
+    useEffect(() => {
+        createDB();
+    }, []);
 
     if (!loaded) {
         return null;
@@ -30,9 +27,11 @@ const App = () => {
         <Provider store={store}>
             <PersistGate loading={null} persistor={persistor}>
                 <PaperProvider>
-                    <NavigationContainer>
-                        <Main />
-                    </NavigationContainer>
+                    <StatusBar
+                        translucent={true}
+                        backgroundColor="transparent"
+                    />
+                    <Main />
                 </PaperProvider>
             </PersistGate>
         </Provider>

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,8 +3,8 @@
         "name": "LNReader",
         "slug": "LNReader",
         "scheme": "lnreader",
-        "version": "1.0.16",
-        "orientation": "portrait",
+        "version": "1.0.21",
+        "orientation": "default",
         "icon": "./assets/icon.png",
         "splash": {
             "image": "./assets/splash.png",
@@ -15,6 +15,10 @@
             "fallbackToCacheTimeout": 0,
             "enabled": false
         },
+        "notification": {
+            "icon": "./assets/notification.png",
+            "color": "#00adb5"
+        },
         "assetBundlePatterns": ["**/*"],
         "ios": {
             "supportsTablet": true
@@ -26,7 +30,11 @@
             },
             "package": "com.rajarsheechatterjee.LNReader"
         },
-
+        "androidStatusBar": {
+            "barStyle": "light-content",
+            "backgroundColor": "#00000000",
+            "translucent": true
+        },
         "androidNavigationBar": {
             "barStyle": "light-content",
             "backgroundColor": "#000000"

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"
   },
@@ -16,34 +15,46 @@
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
     "expo": "^41.0.1",
-    "expo-app-loading": "^1.0.1",
+    "expo-background-fetch": "~9.1.0",
     "expo-document-picker": "^9.1.2",
     "expo-file-system": "~11.0.2",
     "expo-font": "~9.1.0",
     "expo-linear-gradient": "~9.1.0",
     "expo-linking": "~2.2.3",
-    "expo-media-library": "~12.0.2",
+    "expo-notifications": "~0.11.6",
     "expo-permissions": "^12.0.1",
     "expo-sharing": "~9.1.2",
+    "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-picker-scrollview": "^1.0.1",
     "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",
@@ -54,5 +65,7 @@
   "devDependencies": {
     "@babel/core": "~7.9.0"
   },
-  "private": true
+  "private": true,
+  "name": "lnreader-eject",
+  "version": "1.0.0"
 }

src/Components/Appbar.js

@@ -10,8 +10,8 @@ import Constants from "expo-constants";
 import { useNavigation } from "@react-navigation/native";
 import { useSelector } from "react-redux";
 
-export const Appbar = ({ title, onBackAction, style }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
+export const Appbar = ({ title, onBackAction, style, children }) => {
+    const theme = useSelector((state) => state.settingsReducer.theme);
 
     return (
         <MaterialAppbar.Header
@@ -24,6 +24,7 @@ export const Appbar = ({ title, onBackAction, style }) => {
                 title={title}
                 titleStyle={{ color: theme.textColorPrimary }}
             />
+            {children}
         </MaterialAppbar.Header>
     );
 };
@@ -42,7 +43,7 @@ export const SearchAppbar = ({
 
     const navigation = useNavigation();
 
-    const theme = useSelector((state) => state.themeReducer.theme);
+    const theme = useSelector((state) => state.settingsReducer.theme);
 
     return (
         <TouchableRipple

src/Components/BottomSheetHandle.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { View } from "react-native";
+
+const BottomSheetHandle = ({ theme }) => (
+    <View
+        style={{
+            backgroundColor: theme.textColorHint,
+            height: 5,
+            width: 30,
+            borderRadius: 50,
+            top: 10,
+            alignSelf: "center",
+        }}
+    />
+);
+
+export default BottomSheetHandle;

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/Common.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+
+const ScreenContainer = ({ children, theme }) => (
+    <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
+        {children}
+    </View>
+);
+
+const Row = ({ children, style }) => (
+    <View style={[styles.row, style]}>{children}</View>
+);
+
+export { ScreenContainer, Row };
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+});

src/Components/EmptyView.js

@@ -2,8 +2,8 @@ import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { useSelector } from "react-redux";
 
-const EmptyView = ({ icon, description }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
+const EmptyView = ({ icon, description, style, children, iconStyle }) => {
+    const theme = useSelector((state) => state.settingsReducer.theme);
 
     return (
         <View style={styles.emptyViewContainer}>
@@ -11,6 +11,8 @@ const EmptyView = ({ icon, description }) => {
                 style={[
                     styles.emptyViewIcon,
                     { color: theme.textColorSecondary },
+                    style,
+                    iconStyle,
                 ]}
             >
                 {icon}
@@ -19,10 +21,12 @@ const EmptyView = ({ icon, description }) => {
                 style={[
                     styles.emptyViewText,
                     { color: theme.textColorSecondary },
+                    style,
                 ]}
             >
                 {description}
             </Text>
+            {children}
         </View>
     );
 };
@@ -37,7 +41,6 @@ const styles = StyleSheet.create({
     },
     emptyViewIcon: {
         fontSize: 45,
-        fontWeight: "bold",
     },
     emptyViewText: {
         fontWeight: "bold",

src/Components/ErrorView.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Text, View } from "react-native";
+
+import { IconButton } from "react-native-paper";
+import { Row } from "./Common";
+
+import EmptyView from "./EmptyView";
+
+const ErrorView = ({ theme, onRetry, error, openWebView }) => (
+    <View style={{ flex: 1, justifyContent: "center" }}>
+        <EmptyView
+            icon="(；￣Д￣)"
+            description={error}
+            style={{ color: theme.textColorSecondary }}
+        >
+            <IconButton
+                icon="reload"
+                size={25}
+                style={{ margin: 0, marginTop: 24 }}
+                color={theme.textColorSecondary}
+                onPress={onRetry}
+            />
+            <Text style={{ color: theme.textColorPrimary }}>Retry</Text>
+        </EmptyView>
+    </View>
+);
+
+export default ErrorView;

src/Components/Fullscreen.js

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

src/Components/List.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { StyleSheet } from "react-native";
+
 import { List, Divider as PaperDivider } from "react-native-paper";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 
 const ListSection = ({ children }) => (
     <List.Section style={styles.listSection}>{children}</List.Section>
@@ -8,23 +10,34 @@ const ListSection = ({ children }) => (
 
 const ListSubHeader = ({ children, theme }) => (
     <List.Subheader
-        style={[styles.listSubHeader, { color: theme.colorAccentDark }]}
+        style={[styles.listSubHeader, { color: theme.colorAccent }]}
     >
         {children}
     </List.Subheader>
 );
 
-const ListItem = ({ title, description, icon, onPress, theme, right }) => (
+const ListItem = ({
+    title,
+    description,
+    icon,
+    onPress,
+    theme,
+    right,
+    iconColor,
+    titleStyle,
+    style,
+}) => (
     <List.Item
         title={title}
-        titleStyle={{ color: theme.textColorPrimary }}
+        style={style}
+        titleStyle={[{ color: theme.textColorPrimary }, titleStyle]}
         description={description}
         descriptionStyle={{ color: theme.textColorSecondary }}
         descriptionNumberOfLines={1}
         left={() =>
             icon && (
                 <List.Icon
-                    color={theme.colorAccentDark}
+                    color={theme.colorAccent}
                     icon={icon}
                     style={{ marginVertical: 0 }}
                 />
@@ -32,10 +45,11 @@ const ListItem = ({ title, description, icon, onPress, theme, right }) => (
         }
         right={() =>
             right && (
-                <List.Icon
-                    color="#47a84a"
-                    icon={right}
-                    style={{ marginVertical: 0 }}
+                <MaterialCommunityIcons
+                    name={right}
+                    color={iconColor || "#47a84a"}
+                    size={23}
+                    style={{ marginRight: 16, textAlignVertical: "center" }}
                 />
             )
         }
@@ -45,15 +59,10 @@ const ListItem = ({ title, description, icon, onPress, theme, right }) => (
 );
 
 const Divider = ({ theme }) => (
-    <PaperDivider
-        style={{
-            backgroundColor: theme.dividerColor,
-            height: 1,
-        }}
-    />
+    <PaperDivider style={{ backgroundColor: theme.dividerColor, height: 1 }} />
 );
 
-const InfoItem = ({ title, description, icon, onPress, theme, right }) => (
+const InfoItem = ({ title, icon, theme }) => (
     <List.Item
         title={title}
         titleStyle={{ color: theme.textColorSecondary, fontSize: 14 }}

src/Components/ListView.js

@@ -0,0 +1,65 @@
+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 }) => {
+    return (
+        <TouchableRipple
+            borderless
+            centered
+            rippleColor={theme.rippleColor}
+            style={styles.listView}
+            onPress={onPress}
+        >
+            <>
+                <FastImage
+                    source={{ uri: item.novelCover }}
+                    style={styles.extensionIcon}
+                />
+                <Text
+                    style={[
+                        { color: theme.textColorPrimary },
+                        styles.novelName,
+                    ]}
+                    numberOfLines={1}
+                >
+                    {item.novelName}
+                </Text>
+                <View style={styles.badgeContainer}>
+                    {downloadBadge}
+                    {unreadBadge}
+                </View>
+            </>
+        </TouchableRipple>
+    );
+};
+
+export default ListView;
+
+const styles = StyleSheet.create({
+    listView: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+    },
+    extensionIcon: {
+        width: 40,
+        height: 40,
+        borderRadius: 4,
+    },
+    novelName: {
+        flex: 1,
+        marginLeft: 16,
+        fontSize: 15,
+        paddingRight: 8,
+        flexWrap: "wrap",
+    },
+    badgeContainer: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+    },
+});

src/Components/NewUpdateDialog.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { StyleSheet, View, Text } from "react-native";
 import { Portal, Modal, Button } from "react-native-paper";
 import * as Linking from "expo-linking";
-import { useTheme } from "../Hooks/useTheme";
+import { useTheme } from "../Hooks/reduxHooks";
 
 const NewUpdateDialog = ({ newVersion }) => {
     const [newUpdateDialog, showNewUpdateDialog] = useState(true);
@@ -39,22 +39,22 @@ const NewUpdateDialog = ({ newVersion }) => {
                 >
                     <Button
                         labelStyle={{
-                            color: theme.colorAccentDark,
+                            color: theme.colorAccent,
                             letterSpacing: 0,
                             textTransform: "none",
                         }}
-                        theme={{ colors: { primary: theme.colorAccentDark } }}
+                        theme={{ colors: { primary: theme.colorAccent } }}
                         onPress={() => showNewUpdateDialog(false)}
                     >
                         Cancel
                     </Button>
                     <Button
                         labelStyle={{
-                            color: theme.colorAccentDark,
+                            color: theme.colorAccent,
                             letterSpacing: 0,
                             textTransform: "none",
                         }}
-                        theme={{ colors: { primary: theme.colorAccentDark } }}
+                        theme={{ colors: { primary: theme.colorAccent } }}
                         onPress={() => Linking.openURL(newVersion.downloadUrl)}
                     >
                         Install

src/Components/NovelCover.js

@@ -0,0 +1,189 @@
+import React from "react";
+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 window = useWindowDimensions();
+
+    const orientation = getDeviceOrientation();
+
+    const getNovelsPerRow = () =>
+        orientation === "landscape" ? 6 : novelsPerRow;
+
+    const getHeight = () => (window.width / getNovelsPerRow()) * (4 / 3);
+
+    const comfortableTitle = () =>
+        displayMode === 1 && (
+            <Text
+                numberOfLines={2}
+                style={[
+                    styles.title,
+                    {
+                        color: theme.textColorPrimary,
+                        padding: 4,
+                    },
+                ]}
+            >
+                {item.novelName}
+            </Text>
+        );
+
+    const compactTitle = () =>
+        displayMode === 0 && (
+            <View style={styles.titleContainer}>
+                <LinearGradient
+                    colors={["transparent", "rgba(0,0,0,0.6)"]}
+                    style={styles.linearGradient}
+                >
+                    <Text
+                        numberOfLines={2}
+                        style={[styles.title, { color: "rgba(255,255,255,1)" }]}
+                    >
+                        {item.novelName}
+                    </Text>
+                </LinearGradient>
+            </View>
+        );
+
+    const unreadBadge = () =>
+        showUnreadBadges &&
+        item.chaptersUnread && (
+            <Text
+                style={[
+                    styles.unreadBadge,
+                    !item.chaptersDownloaded && {
+                        borderTopLeftRadius: 4,
+                        borderBottomLeftRadius: 4,
+                    },
+                    !showDownloadBadges && {
+                        borderRadius: 4,
+                    },
+                    { backgroundColor: theme.colorAccent },
+                ]}
+            >
+                {item.chaptersUnread}
+            </Text>
+        );
+
+    const downloadBadge = () =>
+        showDownloadBadges &&
+        item.chaptersDownloaded && (
+            <Text
+                style={[
+                    styles.downloadBadge,
+                    !item.chaptersUnread && {
+                        borderTopRightRadius: 4,
+                        borderBottomRightRadius: 4,
+                    },
+                    !showUnreadBadges && {
+                        borderRadius: 4,
+                    },
+                ]}
+            >
+                {item.chaptersDownloaded}
+            </Text>
+        );
+
+    return displayMode !== 2 ? (
+        <View style={{ flex: 1 / getNovelsPerRow() }}>
+            <TouchableRipple
+                borderless
+                centered
+                rippleColor={theme.rippleColor}
+                style={styles.opac}
+                onPress={onPress}
+            >
+                <>
+                    <FastImage
+                        source={{ uri: item.novelCover }}
+                        style={[
+                            { height: getHeight(), borderRadius: 4 },
+                            libraryStatus && { opacity: 0.5 },
+                        ]}
+                    >
+                        <View style={{ flexDirection: "row", margin: 4 }}>
+                            {downloadBadge()}
+                            {unreadBadge()}
+                        </View>
+                        {compactTitle()}
+                    </FastImage>
+                    {comfortableTitle()}
+                </>
+            </TouchableRipple>
+        </View>
+    ) : (
+        <ListView
+            item={item}
+            downloadBadge={downloadBadge()}
+            unreadBadge={unreadBadge()}
+            theme={theme}
+            onPress={onPress}
+        />
+    );
+};
+
+export default NovelCover;
+
+const styles = StyleSheet.create({
+    titleContainer: {
+        flex: 1,
+        justifyContent: "flex-end",
+        borderRadius: 4,
+    },
+    title: {
+        fontFamily: "pt-sans-bold",
+        fontSize: 14,
+        padding: 8,
+    },
+    linearGradient: {
+        bottom: -1,
+        borderRadius: 4,
+    },
+    opac: {
+        paddingHorizontal: 4.5,
+        paddingVertical: 4,
+        borderRadius: 4,
+    },
+    extensionIcon: {
+        width: 42,
+        height: 42,
+        borderRadius: 4,
+    },
+    listView: {
+        flex: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        borderRadius: 4,
+    },
+
+    downloadBadge: {
+        backgroundColor: "#47a84a",
+        color: "#FFFFFF",
+        borderTopLeftRadius: 4,
+        borderBottomLeftRadius: 4,
+        paddingTop: 2,
+        paddingHorizontal: 4,
+        fontSize: 12,
+    },
+    unreadBadge: {
+        color: "#FFFFFF",
+        borderTopRightRadius: 4,
+        borderBottomRightRadius: 4,
+        paddingTop: 2,
+        paddingHorizontal: 4,
+        fontSize: 12,
+    },
+});

src/Components/NovelList.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { StyleSheet, FlatList } from "react-native";
+
+import { useSettings } from "../Hooks/reduxHooks";
+import { getDeviceOrientation } from "../Services/utils/helpers";
+
+const NovelList = ({
+    data,
+    renderItem,
+    refreshControl,
+    ListEmptyComponent,
+}) => {
+    const { displayMode, novelsPerRow } = useSettings();
+
+    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={[orientation, getNovelsPerRow()]}
+            data={data}
+            keyExtractor={(item) => item.novelUrl}
+            renderItem={renderItem}
+            refreshControl={refreshControl}
+            ListEmptyComponent={ListEmptyComponent}
+        />
+    );
+};
+
+export default NovelList;
+
+const styles = StyleSheet.create({
+    flatListCont: {
+        flexGrow: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+    },
+});

src/Components/RadioButton.js

@@ -8,15 +8,19 @@ export const RadioButtonGroup = ({ children, value, onValueChange }) => (
     </MaterialRadioButton.Group>
 );
 
-export const RadioButton = ({ value, label, theme }) => (
+export const RadioButton = ({ value, label, theme, labelStyle }) => (
     <View style={styles.radioButtonContainer}>
         <MaterialRadioButton
             value={value}
-            color={theme.colorAccentDark}
+            color={theme.colorAccent}
             uncheckedColor={theme.textColorSecondary}
         />
         <Text
-            style={[styles.radioButtonLabel, { color: theme.textColorPrimary }]}
+            style={[
+                styles.radioButtonLabel,
+                { color: theme.textColorPrimary },
+                labelStyle,
+            ]}
         >
             {label}
         </Text>

src/Components/Searchbar.js

@@ -1,19 +1,19 @@
 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 { Row } from "./Common";
 
 export const Searchbar = ({
     theme,
     placeholder,
     searchText,
-    left,
-    onPressLeft,
-    right,
-    onPressRight,
+    backAction,
+    onBackAction,
     clearSearchbar,
     onChangeText,
     onSubmitEditing,
+    actions,
 }) => {
     const searchRef = useRef(null);
 
@@ -22,19 +22,20 @@ export const Searchbar = ({
             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
@@ -49,7 +50,7 @@ export const Searchbar = ({
                         onSubmitEditing={onSubmitEditing}
                         defaultValue={searchText}
                     />
-                </View>
+                </Row>
                 {searchText !== "" && (
                     <IconButton
                         icon="close"
@@ -59,23 +60,25 @@ export const Searchbar = ({
                         onPress={clearSearchbar}
                     />
                 )}
-                {right && (
-                    <IconButton
-                        icon="earth"
-                        color={theme.textColorSecondary}
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={onPressRight}
-                    />
-                )}
+                {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 + 8,
+    searchbarContainer: {
+        marginTop: StatusBar.currentHeight + 4,
         height: 48,
         flexDirection: "row",
         alignItems: "center",
@@ -84,6 +87,7 @@ const styles = StyleSheet.create({
         borderRadius: 8,
         marginHorizontal: 12,
         elevation: 2,
+        backgroundColor: "white",
     },
     container: {
         flex: 1,

src/Database/queries/ChapterQueries.js

@@ -35,11 +35,12 @@ export const insertChapters = async (novelId, chapters) => {
 };
 
 const getChaptersQuery = (sort, filter) =>
-    `SELECT * FROM chapters WHERE novelId = ? ${filter ?? ""} ${
-        sort ?? "ORDER BY chapterId ASC"
+    `SELECT * FROM chapters WHERE novelId = ? ${filter || ""} ${
+        sort || "ORDER BY chapterId ASC"
     }`;
 
 export const getChapters = (novelId, sort, filter) => {
+    // console.log(getChaptersQuery(sort, filter));
     return new Promise((resolve, reject) =>
         db.transaction((tx) => {
             tx.executeSql(
@@ -56,7 +57,7 @@ export const getChapters = (novelId, sort, filter) => {
 
 const getChapterQuery = `SELECT * FROM downloads WHERE downloadChapterId = ?`;
 
-export const getChapter = async (chapterId) => {
+export const getChapterFromDB = async (chapterId) => {
     return new Promise((resolve, reject) =>
         db.transaction((tx) => {
             tx.executeSql(
@@ -71,6 +72,36 @@ export const getChapter = async (chapterId) => {
     );
 };
 
+export const getNextChapterFromDB = async (novelId, chapterId) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                `SELECT * FROM chapters WHERE novelId = ? AND chapterId > ?`,
+                [novelId, chapterId],
+                (tx, results) => {
+                    resolve(results.rows.item(0));
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+export const getPrevChapterFromDB = async (novelId, chapterId) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                `SELECT * FROM chapters WHERE novelId = ? AND chapterId < ?`,
+                [novelId, chapterId],
+                (tx, results) => {
+                    resolve(results.rows.item(results.rows.length - 1));
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
 const markChapterReadQuery = `UPDATE chapters SET \`read\` = 1 WHERE chapterId = ?`;
 
 export const markChapterRead = async (chapterId) => {
@@ -84,6 +115,19 @@ export const markChapterRead = async (chapterId) => {
     });
 };
 
+const markChapterUnreadQuery = `UPDATE chapters SET \`read\` = 0 WHERE chapterId = ?`;
+
+export const markChapterUnread = async (chapterId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            markChapterUnreadQuery,
+            [chapterId],
+            (tx, res) => {},
+            (tx, error) => console.log(error)
+        );
+    });
+};
+
 const isChapterDownloadedQuery = `SELECT * FROM downloads WHERE downloadChapterId=?`;
 
 export const isChapterDownloaded = async (chapterId) => {
@@ -108,14 +152,12 @@ export const isChapterDownloaded = async (chapterId) => {
 const downloadChapterQuery = `INSERT INTO downloads (downloadChapterId, chapterName, chapterText, prevChapter, nextChapter) VALUES (?, ?, ?, ?, ?)`;
 
 export const downloadChapter = async (
-    extensionId,
+    sourceId,
     novelUrl,
     chapterUrl,
     chapterId
 ) => {
-    const downloadUrl = `https://lnreader-extensions.vercel.app/api/${extensionId}/novel/${novelUrl}${chapterUrl}`;
-
-    // console.log(downloadUrl);
+    const downloadUrl = `https://lnreader-extensions.vercel.app/api/${sourceId}/novel/${novelUrl}${chapterUrl}`;
 
     const response = await fetch(downloadUrl);
     const chapter = await response.json();
@@ -149,7 +191,7 @@ export const deleteChapter = async (chapterId) => {
         tx.executeSql(
             updateIsDownloadedQuery,
             [chapterId],
-            (tx, res) => console.log(`Chaptermarked not downapdeod deleted`),
+            (tx, res) => {},
             (txObj, error) => console.log("Error ", error)
         );
         tx.executeSql(
@@ -161,26 +203,6 @@ export const deleteChapter = async (chapterId) => {
     });
 };
 
-// export const deleteAllChapters = async (novelId) => {
-//     const updateIsDownloadedQuery = `UPDATE chapters SET downloaded = 0 WHERE novelId=?`;
-//     const deleteChapterQuery = `DELETE FROM downloads WHERE downloadChapterId=?`;
-
-//     db.transaction((tx) => {
-//         tx.executeSql(
-//             updateIsDownloadedQuery,
-//             [chapterId],
-//             (tx, res) => console.log(`Chaptermarked not downapdeod deleted`),
-//             (txObj, error) => console.log("Error ", error)
-//         );
-//         tx.executeSql(
-//             deleteChapterQuery,
-//             [chapterId],
-//             (tx, res) => console.log(`Chapter deleted`),
-//             (txObj, error) => console.log("Error ", error)
-//         );
-//     });
-// };
-
 const getLastReadChapterQuery = `
     SELECT chapters.*
     FROM history
@@ -201,3 +223,42 @@ export const getLastReadChapter = async (novelId) => {
         });
     });
 };
+
+const bookmarkChapterQuery = `UPDATE chapters SET bookmark = ? WHERE chapterId = ?`;
+
+export const bookmarkChapter = async (bookmark, chapterId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            bookmarkChapterQuery,
+            [!bookmark, chapterId],
+            (tx, res) => {},
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};
+
+const markPreviuschaptersReadQuery = `UPDATE chapters SET \`read\` = 1 WHERE chapterId < ? AND novelId = ?`;
+
+export const markPreviuschaptersRead = async (chapterId, novelId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            markPreviuschaptersReadQuery,
+            [chapterId, novelId],
+            (tx, res) => {},
+            (tx, error) => console.log(error)
+        );
+    });
+};
+
+const markPreviousChaptersUnreadQuery = `UPDATE chapters SET \`read\` = 0 WHERE chapterId < ? AND novelId = ?`;
+
+export const markPreviousChaptersUnread = async (chapterId, novelId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            markPreviousChaptersUnreadQuery,
+            [chapterId, novelId],
+            (tx, res) => {},
+            (tx, error) => console.log(error)
+        );
+    });
+};

src/Database/queries/HistoryQueries.js

@@ -8,7 +8,10 @@ const getHistoryQuery = `
     ON history.historyChapterId = chapters.chapterId
     JOIN novels
     ON history.historyNovelId = novels.novelId
-    ORDER BY history.historyTimeRead DESC`;
+    GROUP BY novels.novelId
+    HAVING history.historyTimeRead = MAX(history.historyTimeRead)
+    ORDER BY history.historyTimeRead DESC
+    `;
 
 export const getHistory = async () => {
     return new Promise((resolve, reject) => {
@@ -41,15 +44,18 @@ export const insertHistory = async (novelId, chapterId) => {
     });
 };
 
-export const deleteHistory = async (novelId) => {
+export const deleteHistory = async (historyId) => {
     db.transaction((tx) => {
-        tx.executeSql("DELETE FROM history WHERE historyNovelId = ?", [
-            novelId,
-        ]);
+        tx.executeSql(
+            "DELETE FROM history WHERE historyId = ?",
+            [historyId],
+            (txObj, res) => {},
+            (txObj, error) => console.log("Error ", error)
+        );
     });
 };
 
-export const deleteAllHistory = () => {
+export const deleteAllHistory = async () => {
     db.transaction((tx) => {
         tx.executeSql("DELETE FROM history; VACCUM;");
     });

src/Database/queries/LibraryQueries.js

@@ -1,7 +1,7 @@
 import * as SQLite from "expo-sqlite";
 const db = SQLite.openDatabase("lnreader.db");
 
-const getLibraryQuery = `
+const getLibraryQuery = (sort, filter) => `
     SELECT novels.*, C.chaptersUnread, D.chaptersDownloaded
     FROM novels
     LEFT JOIN (
@@ -18,15 +18,15 @@ const getLibraryQuery = `
         GROUP BY chapters.novelId
     ) AS D
     ON novels.novelId = D.novelId
-    WHERE novels.followed = 1
-    GROUP BY novels.novelId
+    WHERE novels.followed = 1 ${filter ? "AND " + filter : ""}
+    ${sort ? "ORDER BY " + sort : ""}
     `;
 
-export const getLibrary = () => {
+export const getLibrary = (sort, filter) => {
     return new Promise((resolve, reject) =>
         db.transaction((tx) => {
             tx.executeSql(
-                getLibraryQuery,
+                getLibraryQuery(sort, filter),
                 null,
                 (txObj, { rows: { _array } }) => {
                     // console.log(_array);
@@ -38,32 +38,34 @@ export const getLibrary = () => {
     );
 };
 
-// const searchLibraryQuery = ``;
+const searchLibraryQuery = (searchText, sort, filter) =>
+    `
+    SELECT novels.*, C.chaptersUnread, D.chaptersDownloaded
+    FROM novels
+    LEFT JOIN (
+        SELECT chapters.novelId, COUNT(*) AS chaptersUnread 
+        FROM chapters
+        WHERE chapters.read = 0
+        GROUP BY chapters.novelId
+    ) AS C
+    ON novels.novelId = C.novelId
+    LEFT JOIN (
+        SELECT chapters.novelId, COUNT(*) AS chaptersDownloaded 
+        FROM chapters
+        WHERE chapters.downloaded = 1
+        GROUP BY chapters.novelId
+    ) AS D
+    ON novels.novelId = D.novelId
+    WHERE novels.followed = 1 AND novelName LIKE '%${searchText}%'  ${
+        filter ? "AND " + filter : ""
+    }
+    ${sort ? "ORDER BY " + sort : ""} `;
 
-export const searchLibrary = (searchText) => {
+export const searchLibrary = (searchText, sort, filter) => {
     return new Promise((resolve, reject) => {
         db.transaction((tx) => {
             tx.executeSql(
-                `
-                SELECT novels.*, C.chaptersUnread, D.chaptersDownloaded
-                FROM novels
-                LEFT JOIN (
-                    SELECT chapters.novelId, COUNT(*) AS chaptersUnread 
-                    FROM chapters
-                    WHERE chapters.read = 0
-                    GROUP BY chapters.novelId
-                ) AS C
-                ON novels.novelId = C.novelId
-                LEFT JOIN (
-                    SELECT chapters.novelId, COUNT(*) AS chaptersDownloaded 
-                    FROM chapters
-                    WHERE chapters.downloaded = 1
-                    GROUP BY chapters.novelId
-                ) AS D
-                ON novels.novelId = D.novelId
-                WHERE novels.followed = 1 AND novelName LIKE '%${searchText}%'
-                GROUP BY novels.novelId
-                `,
+                searchLibraryQuery(searchText, sort, filter),
                 null,
                 (txObj, { rows: { _array } }) => resolve(_array),
                 (txObj, error) => console.log("Error ", error)

src/Database/queries/NovelQueries.js

@@ -1,7 +1,7 @@
 import * as SQLite from "expo-sqlite";
 const db = SQLite.openDatabase("lnreader.db");
 
-import { fetchChapters } from "../../Services/Source/source";
+import { fetchChapters, fetchNovel } from "../../Services/Source/source";
 import { insertChapters } from "./ChapterQueries";
 
 const insertNovelQuery = `INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
@@ -63,12 +63,12 @@ export const checkNovelInCache = (novelUrl) => {
     );
 };
 
-export const getNovel = async (novelUrl) => {
+export const getNovel = async (sourceId, novelUrl) => {
     return new Promise((resolve, reject) =>
         db.transaction((tx) => {
             tx.executeSql(
-                `SELECT * FROM novels WHERE novelUrl = ?`,
-                [novelUrl],
+                `SELECT * FROM novels WHERE novelUrl = ? AND sourceId = ?`,
+                [novelUrl, sourceId],
                 (txObj, { rows }) => resolve(rows.item(0)),
                 (txObj, error) => console.log("Error ", error)
             );
@@ -123,3 +123,37 @@ export const restoreLibrary = async (novel) => {
         )
     );
 };
+
+const migrateNovelQuery = `INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre, followed) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+
+export const migrateNovel = async (sourceId, novelUrl) => {
+    const novel = await fetchNovel(sourceId, novelUrl);
+
+    db.transaction((tx) =>
+        tx.executeSql(
+            migrateNovelQuery,
+            [
+                novel.novelUrl,
+                novel.sourceUrl,
+                novel.sourceId,
+                novel.source,
+                novel.novelName,
+                novel.novelCover,
+                novel.novelSummary,
+                novel.author,
+                novel.artist,
+                novel.status,
+                novel.genre,
+                1,
+            ],
+            async (txObj, { insertId }) => {
+                const chapters = await fetchChapters(
+                    novel.sourceId,
+                    novel.novelUrl
+                );
+                await insertChapters(insertId, chapters);
+            },
+            (txObj, error) => console.log("Error ", error)
+        )
+    );
+};

src/Database/queries/UpdateQueries.js

@@ -2,13 +2,14 @@ import * as SQLite from "expo-sqlite";
 const db = SQLite.openDatabase("lnreader.db");
 
 const getUpdatesQuery = `
-    SELECT chapters.chapterId, chapters.chapterUrl, chapters.chapterName, novels.novelUrl, novels.novelId, novels.novelCover, novels.novelName, novels.sourceId, updates.updateTime, updates.updateId
+    SELECT chapters.chapterId, chapters.read, chapters.downloaded, chapters.chapterUrl, chapters.chapterName, novels.novelUrl, novels.novelId, novels.novelCover, novels.novelName, novels.sourceId, updates.updateTime, updates.updateId
     FROM updates 
     JOIN chapters 
     ON updates.chapterId = chapters.chapterId
     JOIN novels
     ON updates.novelId = novels.novelId
-    ORDER BY updates.updateTime DESC`;
+    ORDER BY updates.updateTime DESC
+    `;
 
 export const getUpdates = async () => {
     return new Promise((resolve, reject) => {

src/Database/tables/HistoryTable.js

@@ -1,8 +1,8 @@
 export const createHistoryTableQuery = `
     CREATE TABLE IF NOT EXISTS history(
     historyId INTEGER PRIMARY KEY AUTOINCREMENT,
-    historyChapterId INTEGER NOT NULL,
-    historyNovelId INTEGER NOT NULL UNIQUE,
+    historyChapterId INTEGER NOT NULL UNIQUE,
+    historyNovelId INTEGER NOT NULL,
     historyTimeRead DATETIME DEFAULT CURRENT_TIMESTAMP,
     FOREIGN KEY (historyChapterId) REFERENCES chapters(chapterId)
     ON DELETE CASCADE

src/Hooks/githubUpdateChecker.js

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

src/Hooks/reduxHooks.js

@@ -0,0 +1,131 @@
+import { shallowEqual, useSelector } from "react-redux";
+import { showChapterTitlesAction } from "../redux/novel/novel.actions";
+
+const useTheme = () => {
+    const theme = useSelector((state) => state.settingsReducer.theme);
+
+    return theme;
+};
+
+const useReaderSettings = () => {
+    const readerSettings = useSelector((state) => state.settingsReducer.reader);
+
+    return readerSettings;
+};
+
+const useSettings = () => {
+    const settings = useSelector((state) => state.settingsReducer);
+
+    return settings;
+};
+
+const useLibrary = () => {
+    const library = useSelector((state) => state.libraryReducer.novels);
+
+    return library;
+};
+
+const useNovel = () => {
+    const novel = useSelector((state) => state.novelReducer);
+
+    return novel;
+};
+
+const useChapter = () => {
+    const chapter = useSelector((state) => state.chapterReducer);
+
+    return chapter;
+};
+
+const findNovel = (novelId) => {
+    let novel = useSelector((state) => state.preferenceReducer.novelSettings);
+    novel = novel[novelId];
+
+    return novel;
+};
+
+const usePreferences = (novelId) => {
+    let sort, filter, position, showChapterTitles;
+
+    const novel = findNovel(novelId);
+
+    if (novel) {
+        sort = novel.sort;
+        filter = novel.filter;
+        position = novel.position;
+        showChapterTitles = novel.showChapterTitles;
+    }
+
+    return { sort, filter, position, showChapterTitles };
+};
+
+const useSavedSettings = () => {
+    const settings = useSelector(
+        (state) => state.preferenceReducer.novelSettings
+    );
+
+    return settings;
+};
+
+const useContinueReading = (chapters, novelId) => {
+    let lastReadChapter, chapterId, novel, position;
+
+    novel = findNovel(novelId);
+    if (novel) {
+        chapterId = novel.lastRead;
+        position = novel.position;
+    }
+
+    if (chapterId) {
+        lastReadChapter = chapters.find(
+            (obj) => obj.chapterId === chapterId && obj.read === 0
+        );
+    }
+
+    if (!lastReadChapter) {
+        lastReadChapter = chapters.find((obj) => obj.read === 0);
+    }
+
+    return { lastReadChapter, position };
+};
+
+const usePosition = (novelId, chapterId) => {
+    let novel, position;
+
+    novel = findNovel(novelId);
+
+    if (novel) {
+        if (novel.position) {
+            position = novel.position[chapterId] || null;
+        }
+    }
+
+    return position;
+};
+
+const useTrackingStatus = () => {
+    const tracker = useSelector((state) => state.trackerReducer);
+
+    return tracker;
+};
+
+const useLibraryFilters = () => {
+    const filters = useSelector((state) => state.libraryReducer.filters);
+
+    return filters;
+};
+
+export {
+    useTheme,
+    useReaderSettings,
+    useLibrary,
+    useSettings,
+    usePreferences,
+    useContinueReading,
+    useTrackingStatus,
+    useNovel,
+    useChapter,
+    useSavedSettings,
+    useLibraryFilters,
+    usePosition,
+};

src/Hooks/setStatusBarStyle.js

@@ -1,7 +1,10 @@
 import { setStatusBarStyle as setExpoStatusBarStyle } from "expo-status-bar";
-import { useTheme } from "../Hooks/useTheme";
+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/Hooks/useLibrary.js

@@ -1,7 +0,0 @@
-import { useSelector } from "react-redux";
-
-export const useLibrary = () => {
-    const library = useSelector((state) => state.libraryReducer.novels);
-
-    return library;
-};

src/Hooks/useReaderSettings.js

@@ -1,7 +0,0 @@
-import { useSelector } from "react-redux";
-
-export const useReaderSettings = () => {
-    const readerSettings = useSelector((state) => state.settingsReducer.reader);
-
-    return readerSettings;
-};

src/Hooks/useTheme.js

@@ -1,7 +0,0 @@
-import { useSelector } from "react-redux";
-
-export const useTheme = () => {
-    const currentTheme = useSelector((state) => state.themeReducer.theme);
-
-    return currentTheme;
-};

src/Navigators/BottomNavigator.js

@@ -1,7 +1,8 @@
 import React from "react";
+import { View } from "react-native";
+
 import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
-import { useTheme } from "../Hooks/useTheme";
 
 import Library from "../Screens/Library/Library";
 import Updates from "../Screens/Updates/Updates";
@@ -9,83 +10,86 @@ import History from "../Screens/History/History";
 import Browse from "../Screens/Browse/Browse";
 import More from "../Screens/More/More";
 
+import { useTheme } from "../Hooks/reduxHooks";
+
 const Tab = createMaterialBottomTabNavigator();
 
 const BottomNavigator = () => {
     const theme = useTheme();
 
     return (
-        <Tab.Navigator
-            shifting={false}
-            barStyle={{ backgroundColor: theme.colorPrimary }}
-            activeColor={theme.colorAccentDark}
-        >
-            <Tab.Screen
-                name="Library"
-                component={Library}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="book-variant-multiple"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-            <Tab.Screen
-                name="Updates"
-                component={Updates}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="alert-decagram-outline"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-            <Tab.Screen
-                name="History"
-                component={History}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="history"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-            <Tab.Screen
-                name="Browse"
-                component={Browse}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="compass-outline"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-            <Tab.Screen
-                name="More"
-                component={More}
-                options={{
-                    tabBarIcon: ({ color }) => (
-                        <MaterialCommunityIcons
-                            name="dots-horizontal"
-                            color={color}
-                            size={24}
-                        />
-                    ),
-                }}
-            />
-        </Tab.Navigator>
+        <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
+            <Tab.Navigator
+                barStyle={{ backgroundColor: theme.colorPrimary }}
+                activeColor={theme.colorAccent}
+            >
+                <Tab.Screen
+                    name="Library"
+                    component={Library}
+                    options={{
+                        tabBarIcon: ({ color }) => (
+                            <MaterialCommunityIcons
+                                name="book-variant-multiple"
+                                color={color}
+                                size={24}
+                            />
+                        ),
+                    }}
+                />
+                <Tab.Screen
+                    name="Updates"
+                    component={Updates}
+                    options={{
+                        tabBarIcon: ({ color }) => (
+                            <MaterialCommunityIcons
+                                name="alert-decagram-outline"
+                                color={color}
+                                size={24}
+                            />
+                        ),
+                    }}
+                />
+                <Tab.Screen
+                    name="History"
+                    component={History}
+                    options={{
+                        tabBarIcon: ({ color }) => (
+                            <MaterialCommunityIcons
+                                name="history"
+                                color={color}
+                                size={24}
+                            />
+                        ),
+                    }}
+                />
+                <Tab.Screen
+                    name="Browse"
+                    component={Browse}
+                    options={{
+                        tabBarIcon: ({ color }) => (
+                            <MaterialCommunityIcons
+                                name="compass-outline"
+                                color={color}
+                                size={24}
+                            />
+                        ),
+                    }}
+                />
+                <Tab.Screen
+                    name="More"
+                    component={More}
+                    options={{
+                        tabBarIcon: ({ color }) => (
+                            <MaterialCommunityIcons
+                                name="dots-horizontal"
+                                color={color}
+                                size={24}
+                            />
+                        ),
+                    }}
+                />
+            </Tab.Navigator>
+        </View>
     );
 };
 

src/Navigators/Main.js

@@ -8,13 +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/GlobalSearch";
+import Migration from "../Screens/Browse/migration/Migration";
+import SourceNovels from "../Screens/Browse/SourceNovels";
+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/useTheme";
+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();
 
@@ -28,33 +34,51 @@ const MainNavigator = () => {
     const { isNewVersion, latestRelease } = githubUpdateChecker() || {};
 
     return (
-        <View style={{ flex: 1, backgroundColor: theme.colorPrimary }}>
-            {isNewVersion && <NewUpdateDialog newVersion={latestRelease} />}
-            <Stack.Navigator screenOptions={stackNavigatorConfig}>
-                <Stack.Screen
-                    name="BottomNavigator"
-                    component={BottomNavigator}
-                />
-                <Stack.Screen
-                    name="Novel"
-                    component={Novel}
-                    options={{
-                        headerTitle: "",
-                        headerShown: true,
-                        headerTransparent: true,
-                        headerTintColor: "white",
-                        ...TransitionPresets.RevealFromBottomAndroid,
-                    }}
-                />
-                <Stack.Screen
-                    name="Chapter"
-                    component={Chapter}
-                    options={{ ...TransitionPresets.SlideFromRightIOS }}
-                />
-                <Stack.Screen name="MoreStack" component={MoreStack} />
-                <Stack.Screen name="Extension" component={Extension} />
-            </Stack.Navigator>
-        </View>
+        <NavigationContainer
+            theme={{ colors: { background: theme.colorPrimaryDark } }}
+        >
+            <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
+                {isNewVersion && <NewUpdateDialog newVersion={latestRelease} />}
+                <Stack.Navigator screenOptions={stackNavigatorConfig}>
+                    <Stack.Screen
+                        name="BottomNavigator"
+                        component={BottomNavigator}
+                    />
+                    <Stack.Screen
+                        name="Novel"
+                        component={Novel}
+                        options={{
+                            ...TransitionPresets.RevealFromBottomAndroid,
+                        }}
+                    />
+                    <Stack.Screen
+                        name="Chapter"
+                        component={Chapter}
+                        options={{ ...TransitionPresets.SlideFromRightIOS }}
+                    />
+                    <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}
+                    />
+                    <Stack.Screen name="Migration" component={Migration} />
+                    <Stack.Screen
+                        name="SourceNovels"
+                        component={SourceNovels}
+                    />
+                    <Stack.Screen
+                        name="MigrateNovel"
+                        component={MigrateNovel}
+                    />
+                </Stack.Navigator>
+            </View>
+        </NavigationContainer>
     );
 };
 

src/Navigators/More.js

@@ -1,24 +1,60 @@
 import React from "react";
+import { View } from "react-native";
+import { useTheme } from "../Hooks/reduxHooks";
+
 import { createStackNavigator } from "@react-navigation/stack";
 
 import About from "../Screens/More/About";
 import Settings from "../Screens/More/Settings";
-import Trackers from "../Screens/More/Trackers";
-import { View } from "react-native";
-import { useTheme } from "../Hooks/useTheme";
+import TrackerSettings from "../Screens/More/TrackerSettings";
+import ReaderSettings from "../Screens/More/ReaderSettings";
+import BackupSettings from "../Screens/More/BackupSettings";
+import AdvancedSettings from "../Screens/More/AdvancedSettings";
+import GeneralSettings from "../Screens/More/GeneralSettings";
 
 const Stack = createStackNavigator();
 
 const stackNavigatorConfig = { headerShown: false };
 
+const SettingsStack = () => {
+    const theme = useTheme();
+
+    return (
+        <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
+            <Stack.Navigator screenOptions={stackNavigatorConfig}>
+                <Stack.Screen name="Settings" component={Settings} />
+                <Stack.Screen
+                    name="GeneralSettings"
+                    component={GeneralSettings}
+                />
+                <Stack.Screen
+                    name="ReaderSettings"
+                    component={ReaderSettings}
+                />
+                <Stack.Screen
+                    name="TrackerSettings"
+                    component={TrackerSettings}
+                />
+                <Stack.Screen
+                    name="BackupSettings"
+                    component={BackupSettings}
+                />
+                <Stack.Screen
+                    name="AdvancedSettings"
+                    component={AdvancedSettings}
+                />
+            </Stack.Navigator>
+        </View>
+    );
+};
+
 const MoreStack = () => {
     const theme = useTheme();
 
     return (
-        <View style={{ flex: 1, backgroundColor: theme.colorPrimary }}>
+        <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
             <Stack.Navigator screenOptions={stackNavigatorConfig}>
-                <Stack.Screen name="Settings" component={Settings} />
-                <Stack.Screen name="Trackers" component={Trackers} />
+                <Stack.Screen name="SettingsStack" component={SettingsStack} />
                 <Stack.Screen name="About" component={About} />
             </Stack.Navigator>
         </View>

src/Screens/Browse/Browse.js

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+import {
+    StyleSheet,
+    View,
+    Text,
+    FlatList,
+    ActivityIndicator,
+    RefreshControl,
+} from "react-native";
+import { useTheme } from "../../Hooks/reduxHooks";
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+    getSourcesAction,
+    searchSourcesAction,
+} from "../../redux/source/source.actions";
+
+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);
+    const [searchText, setSearchText] = useState("");
+    // const [globalSearch, setGlobalSearch] = useState(false);
+    // const [searchResult, setSearchResults] = useState();
+    const { sources, search, loading, pinned } = useSelector(
+        (state) => state.sourceReducer
+    );
+    const theme = useTheme();
+    const dispatch = useDispatch();
+
+    const isPinned = (sourceId) =>
+        pinned.indexOf(sourceId) === -1 ? false : true;
+
+    useEffect(() => {
+        dispatch(getSourcesAction());
+    }, [getSourcesAction]);
+
+    const onRefresh = () => {
+        showToast("Updating extension list");
+        setRefreshing(true);
+        getSourcesAction();
+        setRefreshing(false);
+    };
+
+    const clearSearchbar = () => {
+        setSearchText("");
+    };
+
+    const onChangeText = (text) => {
+        setSearchText(text);
+        dispatch(searchSourcesAction(text));
+    };
+
+    // const onSubmitEditing = () => {};
+
+    const renderItem = ({ item }) => (
+        <SourceCard
+            item={item}
+            isPinned={isPinned(item.sourceId)}
+            theme={theme}
+        />
+    );
+
+    return (
+        <View
+            style={[
+                styles.container,
+                { backgroundColor: theme.colorPrimaryDark },
+            ]}
+        >
+            <Searchbar
+                theme={theme}
+                placeholder="Search Source"
+                backAction="magnify"
+                searchText={searchText}
+                onChangeText={onChangeText}
+                clearSearchbar={clearSearchbar}
+                actions={[
+                    {
+                        icon: "book-search",
+                        onPress: () => navigation.navigate("GlobalSearch"),
+                    },
+                    {
+                        icon: "swap-vertical-variant",
+                        onPress: () => navigation.navigate("Migration"),
+                    },
+                ]}
+            />
+
+            <FlatList
+                contentContainerStyle={{ flexGrow: 1 }}
+                data={!searchText ? sources : search}
+                keyExtractor={(item) => item.sourceId.toString()}
+                renderItem={renderItem}
+                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 }}
+                                data={sources.filter((source) =>
+                                    isPinned(source.sourceId)
+                                )}
+                                keyExtractor={(item) =>
+                                    item.sourceId.toString()
+                                }
+                                renderItem={renderItem}
+                                extraData={pinned}
+                                ListHeaderComponent={
+                                    <Text
+                                        style={{
+                                            color: theme.textColorSecondary,
+                                            paddingHorizontal: 16,
+                                            paddingVertical: 8,
+                                        }}
+                                    >
+                                        Pinned
+                                    </Text>
+                                }
+                            />
+                        )}
+                        <Text
+                            style={{
+                                color: theme.textColorSecondary,
+                                paddingHorizontal: 16,
+                                paddingVertical: 8,
+                            }}
+                        >
+                            Sources
+                        </Text>
+                    </View>
+                }
+                ListEmptyComponent={
+                    loading && (
+                        <ActivityIndicator
+                            size="small"
+                            color={theme.colorAccent}
+                            style={{ marginTop: 16 }}
+                        />
+                    )
+                }
+                refreshControl={
+                    <RefreshControl
+                        refreshing={refreshing}
+                        onRefresh={onRefresh}
+                        colors={["white"]}
+                        progressBackgroundColor={theme.colorAccent}
+                    />
+                }
+            />
+        </View>
+    );
+};
+
+export default Browse;
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+});

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/SourceNovels.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { StyleSheet, View, FlatList, Text } from "react-native";
+import { useLibrary, useTheme } from "../../Hooks/reduxHooks";
+
+import EmptyView from "../../Components/EmptyView";
+import { Appbar } from "../../Components/Appbar";
+import ListView from "../../Components/ListView";
+
+const SourceNovels = ({ navigation, route }) => {
+    const sourceId = route.params;
+    const theme = useTheme();
+    const library = useLibrary();
+
+    const sourceNovels = library.filter((novel) => novel.sourceId === sourceId);
+
+    const renderItem = ({ item }) => (
+        <ListView
+            item={item}
+            theme={theme}
+            onPress={() =>
+                navigation.navigate("MigrateNovel", {
+                    sourceId: item.sourceId,
+                    novelName: item.novelName,
+                })
+            }
+        />
+    );
+
+    return (
+        <View
+            style={[
+                styles.container,
+                { backgroundColor: theme.colorPrimaryDark },
+            ]}
+        >
+            <Appbar
+                title="Select Novel"
+                onBackAction={() => navigation.goBack()}
+            />
+            <FlatList
+                data={sourceNovels}
+                keyExtractor={(item) => item.novelId.toString()}
+                renderItem={renderItem}
+                ListEmptyComponent={
+                    <Text
+                        style={{
+                            color: theme.textColorSecondary,
+                            padding: 20,
+                            textAlign: "center",
+                        }}
+                    >
+                        Your library does not have any novels from this source
+                    </Text>
+                }
+            />
+            {/* <Portal>
+                <MigrationDialog
+                    migrationDialog={migrationDialog}
+                    hideMigrationDialog={hideMigrationDIalog}
+                    theme={theme}
+                    selectedNovel={selectedNovel}
+                    loading={loading}
+                    migrationNovel={migrationNovel}
+                />
+                <SourceToMigrateDialog
+                    selectedNovel={selectedNovel}
+                    sourceToMigrateDialog={sourceToMigrateDialog}
+                    hideSourceToMigrateDialog={hideSourceToMigrateDialog}
+                    sources={sources}
+                    theme={theme}
+                    showMigrationDialog={showMigrationDialog}
+                    selectSourceToMigrate={selectSourceToMigrate}
+                />
+            </Portal> */}
+        </View>
+    );
+};
+
+export default SourceNovels;
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+});

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

@@ -1,12 +1,16 @@
 import React from "react";
 import { View, Text, Image, StyleSheet } from "react-native";
-import { TouchableRipple, Button } from "react-native-paper";
+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 }) => {
-    const { sourceName, sourceCover, sourceLanguage, status } = item;
+const ExtensionCard = ({ item, theme, isPinned }) => {
+    const { sourceId, sourceName, sourceCover, sourceLanguage, status } = item;
 
     const navigation = useNavigation();
+    const dispatch = useDispatch();
 
     const navigateToExtension = () =>
         navigation.navigate("Extension", {
@@ -51,15 +55,29 @@ const ExtensionCard = ({ item, theme }) => {
                             </Text>
                         </View>
                     </View>
-                    <View>
+                    <View
+                        style={{ flexDirection: "row", alignItems: "center" }}
+                    >
                         <Button
                             labelStyle={{ letterSpacing: 0 }}
                             uppercase={false}
-                            color={theme.colorAccentDark}
+                            color={theme.colorAccent}
                             onPress={navigateToExtension}
                         >
                             Browse
                         </Button>
+                        <IconButton
+                            icon={isPinned ? "pin" : "pin-outline"}
+                            animated
+                            size={21}
+                            onPress={() => dispatch(pinSourceAction(sourceId))}
+                            color={
+                                isPinned
+                                    ? theme.colorAccent
+                                    : theme.textColorSecondary
+                            }
+                            style={{ margin: 2 }}
+                        />
                     </View>
                 </View>
             </>

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