Release v1.1.6

Closes LNReader/lnreader-sources#93
LNReader/lnreader-sources#88

.editorconfig

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

.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+  rules: {
+    'react-native/no-inline-styles': 'off',
+    'no-console': 'warn',
+  },
+};

.expo-shared/assets.json

@@ -1,4 +0,0 @@
-{
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
-}

.gitattributes

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

.github/workflows/build.yml

@@ -0,0 +1,45 @@
+name: CI
+on:
+    push:
+        branches:
+            - main
+jobs:
+    install-and-test:
+        name: Install dependencies
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: Install npm dependencies
+              run: |
+                  npm install
+
+    build-android:
+        name: Build app
+        needs: install-and-test
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: Install Dependencies
+              run: |
+                  npm install
+
+            - name: Cache Gradle Wrapper
+              uses: actions/cache@v2
+              with:
+                  path: ~/.gradle/wrapper
+                  key: ${{ runner.os }}-gradle-wrapper-${{ hashFiles('gradle/wrapper/gradle-wrapper.properties') }}
+
+            - name: Cache Gradle Dependencies
+              uses: actions/cache@v2
+              with:
+                  path: ~/.gradle/caches
+                  key: ${{ runner.os }}-gradle-caches-${{ hashFiles('gradle/wrapper/gradle-wrapper.properties') }}
+                  restore-keys: |
+                      ${{ runner.os }}-gradle-caches-
+
+            - name: Make Gradlew Executable
+              run: cd android && chmod +x ./gradlew
+
+            - name: Build Android Release
+              run: |
+                  cd android && ./gradlew assembleRelease --no-daemon

.github/workflows/lint.yml

@@ -0,0 +1,12 @@
+name: Lint
+on: [push, pull_request]
+jobs:
+  build:
+    name: ESLint
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      run: npm i
+    - name: Run ESLint
+      run: npm run lint

.gitignore

@@ -11,3 +11,65 @@ 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
+
+.vscode/

.prettierignore

@@ -0,0 +1 @@
+**/node_modules

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'avoid',
+};

App.js

@@ -1,55 +1,43 @@
-import React, { useState, useEffect } from "react";
-import { StatusBar } from "expo-status-bar";
-import { NavigationContainer } from "@react-navigation/native";
-import * as Font from "expo-font";
-import AppLoading from "expo-app-loading";
+import React, {useEffect} from 'react';
+import {StatusBar} from 'react-native';
 
-import Router from "./src/navigation/Router";
+import {useFonts} from 'expo-font';
+import {Provider as PaperProvider} from 'react-native-paper';
+import {Provider} from 'react-redux';
+import {persistor, store} from './src/redux/store';
+import {PersistGate} from 'redux-persist/lib/integration/react';
+import * as SplashScreen from 'expo-splash-screen';
 
-// Redux
-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';
 
-const getFonts = () =>
-    Font.loadAsync({
-        "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"),
-    });
+import {createDB} from './src/database/DBHelper';
+import {fonts} from './src/theme/fonts';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
-    const [fontsLoaded, setFontsLoaded] = useState(false);
+  const [loaded] = useFonts(fonts);
 
-    useEffect(() => {
-        createDB();
-    }, []);
+  useEffect(() => {
+    SplashScreen.preventAutoHideAsync();
+    createDB();
+  }, []);
 
-    if (fontsLoaded) {
-        return (
-            <Provider store={store}>
-                <PersistGate loading={null} persistor={persistor}>
-                    <StatusBar />
-                    <NavigationContainer>
-                        <Router />
-                    </NavigationContainer>
-                </PersistGate>
-            </Provider>
-        );
-    } else {
-        return (
-            <AppLoading
-                startAsync={getFonts}
-                onError={() => warn(error)}
-                onFinish={() => setFontsLoaded(true)}
-            />
-        );
-    }
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <SafeAreaProvider>
+          <PaperProvider>
+            <StatusBar translucent={true} backgroundColor="transparent" />
+            <Main />
+          </PaperProvider>
+        </SafeAreaProvider>
+      </PersistGate>
+    </Provider>
+  );
 };
 
 export default App;

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+rajarshee.adm@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -0,0 +1,41 @@
+# Contributing Guide
+
+Contributions are welcome and are greatly appreciated!
+
+
+## Setting up your environment
+
+After forking to your own github org or account, do the following steps to get started:
+
+```bash
+# clone your fork to your local machine
+git clone https://github.com/<your-account-name>/lnreader.git
+
+# step into local repo
+cd lnreader
+
+# install dependencies
+npm install
+
+# run metro for development
+npm start
+```
+
+### Developing on Android
+
+While the packager is running and you have an Android device or emulator connected to your computer, build and launch the Android app.
+
+```
+npm run android
+```
+
+### Style & Linting
+
+This codebase's linting rules are enforced using [ESLint](http://eslint.org/).
+
+It is recommended that you install an eslint plugin for your editor of choice when working on this
+codebase, however you can always check to see if the source code is compliant by running:
+
+```bash
+npm run lint
+```

README.md

@@ -1,20 +1,41 @@
-<h1 align="center">
-  <br>
-  LNReader
-  <br>
-</h1>
-
-<p align="center">LNReader is a Tachiyomi-like, free and open source light novel reader for Android.</p>
-
----
-
-## Screenshots:
 <p align="center">
-<img src="./.github/readme-images/screenshots.png" align="center" height="350" />
+  <img src="./.github/readme-images/icon_alt.png" align="center" width="128" />
+<p>
+<h1 align="center">
+  LNReader
+</h1>
+<p align="center">
+  LNReader is a Tachiyomi-like, free and open source light novel reader for Android.
+</p>
+<div align="center">
+  <a href="https://github.com/LNReader/lnreader/actions/workflows/build.yml">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/LNReader/lnreader/CI">
+  </a>
+  <a href="https://discord.gg/QdcWN4MD63">
+    <img alt="Discord Chat" src="https://img.shields.io/discord/835746409357246465.svg?logo=discord&logoColor=white&logoWidth=20&labelColor=7289DA&label=Discord&color=17cf48">
+  </a>
+  <a href="https://github.com/LNReader/lnreader/releases/latest">
+    <img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/LNReader/lnreader">
+  </a>
+  <a href="https://github.com/LNReader/lnreader/blob/main/LICENSE">
+    <img alt="GitHub" src="https://img.shields.io/github/license/LNReader/lnreader">
+  </a>
+</div>
+
+<br>
+<br>
+
+<p align="center">
+  <img src="./.github/readme-images/screenshots.png" align="center" />
 </p>
 
 ## Download
 Get the app from our [releases page](https://github.com/rajarsheechatterjee/LNReader/releases).
 
+## Sources
+LNReader does not have any affiliation with the content providers available.
+
+Source requests should be created at [LNReader/lnreader-sources](https://github.com/LNReader/lnreader-sources).
+
 ## License
 [MIT ](https://github.com/rajarsheechatterjee/lnreader/blob/main/LICENSE)

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.1.6"
+    }
+    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,89 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
+  	package="com.rajarsheechatterjee.LNReader">
+
+	<!-- Internet -->
+  	<uses-permission android:name="android.permission.INTERNET"/>
+  	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+
+	<!-- Storage -->
+  	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+
+	<!-- For background jobs -->
+  	<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.WAKE_LOCK"/>
+
+
+  	<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  	<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
+  	<uses-permission android:name="android.permission.VIBRATE"/>
+  	<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+  	<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
+  	<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
+
+  	<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"
+		android:usesCleartextTraffic="true">
+    
+		<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" />
+    
+		<service android:name="com.asterinet.react.bgactions.RNBackgroundActionsTask" />
+		
+  	</application>
+</manifest>

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

@@ -0,0 +1,71 @@
+package com.rajarsheechatterjee.LNReader;
+import android.content.res.Configuration;
+import android.content.Intent;
+
+import android.os.Bundle;
+import android.graphics.Color;
+import android.view.WindowManager;
+import android.os.Build;
+import android.view.View;
+import android.view.Window;
+
+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);
+      }
+
+      Window w = getWindow();
+      w.setStatusBarColor(Color.TRANSPARENT);
+      w.setNavigationBarColor(Color.TRANSPARENT);
+      w.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
+
+      super.onCreate(null);
+      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,129 @@
+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;
+
+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 NavigationBarColorPackage());
+      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,28 @@
+package com.rajarsheechatterjee.LNReader.generated;
+
+import java.util.Arrays;
+import java.util.List;
+import org.unimodules.core.interfaces.Package;
+
+public class BasePackageList {
+  public List<Package> getPackageList() {
+    return Arrays.<Package>asList(
+        new expo.modules.application.ApplicationPackage(),
+        new expo.modules.constants.ConstantsPackage(),
+        new expo.modules.documentpicker.DocumentPickerPackage(),
+        new expo.modules.errorrecovery.ErrorRecoveryPackage(),
+        new expo.modules.filesystem.FileSystemPackage(),
+        new expo.modules.font.FontLoaderPackage(),
+        new expo.modules.haptics.HapticsPackage(),
+        new expo.modules.imageloader.ImageLoaderPackage(),
+        new expo.modules.keepawake.KeepAwakePackage(),
+        new expo.modules.lineargradient.LinearGradientPackage(),
+        new expo.modules.notifications.NotificationsPackage(),
+        new expo.modules.permissions.PermissionsPackage(),
+        new expo.modules.splashscreen.SplashScreenPackage(),
+        new expo.modules.sqlite.SQLitePackage(),
+        new expo.modules.updates.UpdatesPackage(),
+        new expo.modules.webbrowser.WebBrowserPackage()
+    );
+  }
+}

android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorModule.java

@@ -0,0 +1,170 @@
+package com.rajarsheechatterjee.LNReader;
+
+import android.animation.ArgbEvaluator;
+import android.animation.ValueAnimator;
+import android.annotation.TargetApi;
+import android.graphics.Color;
+import android.os.Build;
+import android.app.Activity;
+import android.view.View;
+import android.view.Window;
+import android.view.WindowManager;
+import androidx.annotation.UiThread;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.UiThreadUtil;
+import com.facebook.react.bridge.WritableMap;
+import java.util.HashMap;
+import java.util.Map;
+import com.facebook.react.uimanager.IllegalViewOperationException;
+import static com.facebook.react.bridge.UiThreadUtil.runOnUiThread;
+
+public class NavigationBarColorModule extends ReactContextBaseJavaModule {
+    public static final String REACT_CLASS = "NavigationBarColor";
+    private static final String ERROR_NO_ACTIVITY = "E_NO_ACTIVITY";
+    private static final String ERROR_NO_ACTIVITY_MESSAGE = "Tried to change the navigation bar while not attached to an Activity";
+    private static final String ERROR_API_LEVEL = "API_LEVEl";
+    private static final String ERROR_API_LEVEL_MESSAGE = "Only Android Oreo and above is supported";
+    private static ReactApplicationContext reactContext = null;
+    private static final int UI_FLAG_HIDE_NAV_BAR = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
+            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
+            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar
+            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
+
+    public NavigationBarColorModule(ReactApplicationContext context) {
+        super(context);
+        reactContext = context;
+    }
+
+    public void setNavigationBarTheme(Activity activity, Boolean light) {
+        if (activity != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            Window window = activity.getWindow();
+            int flags = window.getDecorView().getSystemUiVisibility();
+            if (light) {
+                flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+            } else {
+                flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+            }
+            window.getDecorView().setSystemUiVisibility(flags);
+        }
+    }
+
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    public Map<String, Object> getConstants() {
+        final Map<String, Object> constants = new HashMap<>();
+        constants.put("EXAMPLE_CONSTANT", "example");
+
+        return constants;
+    }
+
+    @ReactMethod
+    public void changeNavigationBarColor(final String color, final Boolean light, final Boolean animated, final Promise promise) {
+        final WritableMap map = Arguments.createMap();
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            if (getCurrentActivity() != null) {
+                try {
+                    final Window window = getCurrentActivity().getWindow();
+                    runOnUiThread(new Runnable() {
+                        @Override
+                        public void run() {
+                            if (color.equals("transparent") || color.equals("translucent")) {
+                                window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
+                                window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+                                if (color.equals("transparent")) {
+                                    window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
+                                } else {
+                                    window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+                                }
+                                setNavigationBarTheme(getCurrentActivity(), light);
+                                map.putBoolean("success", true);
+                                promise.resolve(map);
+                                return;
+                            } else {
+                                window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
+                                window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+                            }
+                            if (animated) {
+                                Integer colorFrom = window.getNavigationBarColor();
+                                Integer colorTo = Color.parseColor(String.valueOf(color));
+                                //window.setNavigationBarColor(colorTo);
+                                ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
+                                colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+                                    @Override
+                                    public void onAnimationUpdate(ValueAnimator animator) {
+                                        window.setNavigationBarColor((Integer) animator.getAnimatedValue());
+                                    }
+                                });
+                                colorAnimation.start();
+                            } else {
+                                window.setNavigationBarColor(Color.parseColor(String.valueOf(color)));
+                            }
+                            setNavigationBarTheme(getCurrentActivity(), light);
+                            WritableMap map = Arguments.createMap();
+                            map.putBoolean("success", true);
+                            promise.resolve(map);
+                        }
+                    });
+                } catch (IllegalViewOperationException e) {
+                    map.putBoolean("success", false);
+                    promise.reject("error", e);
+                }
+
+            } else {
+                promise.reject(ERROR_NO_ACTIVITY, new Throwable(ERROR_NO_ACTIVITY_MESSAGE));
+
+            }
+        } else {
+            promise.reject(ERROR_API_LEVEL, new Throwable(ERROR_API_LEVEL_MESSAGE));
+        }
+    }
+
+    @ReactMethod
+    public void hideNavigationBar(Promise promise) {
+        try {
+            runOnUiThread(new Runnable() {
+                @Override
+                public void run() {
+                    if (getCurrentActivity() != null) {
+                        View decorView = getCurrentActivity().getWindow().getDecorView();
+                        decorView.setSystemUiVisibility(UI_FLAG_HIDE_NAV_BAR);
+                    }
+                }
+            });
+        } catch (IllegalViewOperationException e) {
+            WritableMap map = Arguments.createMap();
+            map.putBoolean("success", false);
+            promise.reject("error", e);
+        }
+    }
+
+    @ReactMethod
+    public void showNavigationBar(Promise promise) {
+        try {
+            runOnUiThread(new Runnable() {
+                @Override
+                public void run() {
+                    if (getCurrentActivity() != null) {
+                        Window w = getCurrentActivity().getWindow();
+                        w.setStatusBarColor(Color.TRANSPARENT);
+                        w.setNavigationBarColor(Color.TRANSPARENT);
+                        View decorView = w.getDecorView();
+                        decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
+                    }
+                }
+            });
+        } catch (IllegalViewOperationException e) {
+            WritableMap map = Arguments.createMap();
+            map.putBoolean("success", false);
+            promise.reject("error", e);
+        }
+    }
+}

android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorPackage.java

@@ -0,0 +1,25 @@
+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 NavigationBarColorPackage 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 NavigationBarColorModule(reactContext));
+
+       return modules;
+   }
+}

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">#202125</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#202125</color>
+  <color name="navigationBarColor">#202125</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">#202125</item>
+    <item name="android:statusBarColor">#202125</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">#202125</item>
+    <item name="android:statusBarColor">#202125</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

@@ -1,38 +1,11 @@
 {
-    "expo": {
-        "name": "LNReader",
-        "slug": "LNReader",
-        "scheme": "lnreader",
-        "version": "1.0.15",
-        "orientation": "portrait",
-        "icon": "./assets/icon.png",
-        "splash": {
-            "image": "./assets/splash.png",
-            "resizeMode": "cover",
-            "backgroundColor": "#000000"
-        },
-        "updates": {
-            "fallbackToCacheTimeout": 0,
-            "enabled": false
-        },
-        "assetBundlePatterns": ["**/*"],
-        "ios": {
-            "supportsTablet": true
-        },
-        "android": {
-            "adaptiveIcon": {
-                "foregroundImage": "./assets/icon.png",
-                "backgroundColor": "#FFFFFF"
-            },
-            "package": "com.rajarsheechatterjee.LNReader"
-        },
-
-        "androidNavigationBar": {
-            "barStyle": "light-content",
-            "backgroundColor": "#000000"
-        },
-        "web": {
-            "favicon": "./assets/favicon.png"
-        }
+  "expo": {
+    "name": "LNReader",
+    "slug": "LNReader",
+    "scheme": "lnreader",
+    "notification": {
+      "icon": "./assets/notification.png",
+      "color": "#00adb5"
     }
+  }
 }

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],

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,56 +1,67 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "eject": "expo eject"
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "lint": "eslint ."
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.13.2",
+    "@react-native-async-storage/async-storage": "^1.13.0",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-native-community/netinfo": "^5.9.7",
-    "@react-native-community/slider": "^3.0.3",
+    "@react-native-community/netinfo": "6.0.0",
+    "@react-native-community/slider": "3.0.3",
+    "@react-navigation/bottom-tabs": "^5.11.15",
     "@react-navigation/material-bottom-tabs": "^5.3.10",
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
-    "expo": "~40.0.0",
-    "expo-app-loading": "^1.0.1",
-    "expo-font": "^8.4.0",
-    "expo-linear-gradient": "^8.4.0",
-    "expo-sharing": "~8.5.0",
-    "expo-sqlite": "~8.5.0",
-    "expo-status-bar": "~1.0.3",
-    "expo-web-browser": "~8.6.0",
+    "expo": "^41.0.1",
+    "expo-document-picker": "^9.1.2",
+    "expo-file-system": "~11.0.2",
+    "expo-font": "~9.1.0",
+    "expo-haptics": "~10.0.0",
+    "expo-linear-gradient": "~9.1.0",
+    "expo-linking": "~2.2.3",
+    "expo-notifications": "~0.11.6",
+    "expo-splash-screen": "^0.11.2",
+    "expo-sqlite": "~9.1.0",
+    "expo-updates": "~0.5.4",
+    "expo-web-browser": "~9.1.0",
     "moment": "^2.29.1",
+    "prop-types": "^15.7.2",
     "qs": "^6.10.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
-    "react-native-collapsible-header-views": "^1.1.2",
-    "react-native-gesture-handler": "^1.8.0",
-    "react-native-inappbrowser-reborn": "^3.5.1",
-    "react-native-offline": "^5.7.0",
+    "react-native": "^0.64.2",
+    "react-native-background-actions": "^2.6.1",
+    "react-native-cheerio": "^1.0.0-rc.4",
+    "react-native-device-info": "^8.1.3",
+    "react-native-easing-gradient": "^0.1.2",
+    "react-native-fast-image": "^8.3.4",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-pager-view": "^5.1.10",
     "react-native-paper": "^4.5.0",
-    "react-native-picker-scrollview": "^1.0.1",
-    "react-native-reanimated": "^1.13.2",
-    "react-native-safe-area-context": "3.1.9",
-    "react-native-screens": "~2.15.0",
+    "react-native-reanimated": "^2.1.0",
+    "react-native-safe-area-context": "3.2.0",
+    "react-native-screens": "~3.0.0",
+    "react-native-swipe-gestures": "^1.0.5",
+    "react-native-tab-view": "^3.0.1",
+    "react-native-tts": "^4.1.0",
+    "react-native-unimodules": "~0.13.3",
     "react-native-vector-icons": "^7.1.0",
-    "react-native-web": "~0.13.12",
-    "react-native-webview": "11.0.0",
+    "react-native-web": "^0.16.5",
+    "react-native-webview": "^11.6.2",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
-    "redux-devtools-extension": "^2.13.9",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
-    "reflect-metadata": "^0.1.13",
     "rn-sliding-up-panel": "^2.4.4"
   },
   "devDependencies": {
     "@babel/core": "~7.9.0",
-    "@types/node": "^14.14.35"
+    "@react-native-community/eslint-config": "^3.0.1",
+    "eslint": "^7.32.0"
   },
-  "private": true
+  "private": true,
+  "name": "lnreader",
+  "version": "1.1.6"
 }

src/components/Actionbar/Actionbar.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {Dimensions, StyleSheet, View} from 'react-native';
+
+import {IconButton} from 'react-native-paper';
+
+export const Actionbar = ({active, actions, theme, style}) => {
+  if (active) {
+    return (
+      <View
+        style={[
+          styles.actionbarContainer,
+          {backgroundColor: theme.colorPrimary},
+          style,
+        ]}
+      >
+        {actions.map(
+          (action, index) =>
+            action.icon && (
+              <IconButton
+                key={index}
+                icon={action.icon}
+                color={theme.textColorPrimary}
+                onPress={action.onPress}
+              />
+            ),
+        )}
+      </View>
+    );
+  } else {
+    return null;
+  }
+};
+
+const styles = StyleSheet.create({
+  actionbarContainer: {
+    position: 'absolute',
+    width: Dimensions.get('window').width - 32,
+    bottom: 0,
+    margin: 16,
+    borderRadius: 6,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    elevation: 2,
+  },
+});

src/components/Appbar.js

@@ -1,141 +1,30 @@
-import React, { useRef } from "react";
-import { View, TextInput, StyleSheet } from "react-native";
-import {
-    TouchableRipple,
-    IconButton,
-    Appbar as MaterialAppbar,
-} from "react-native-paper";
-import Constants from "expo-constants";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import { useNavigation } from "@react-navigation/native";
-import { useSelector } from "react-redux";
+import {Appbar as MaterialAppbar} from 'react-native-paper';
 
-export const Appbar = ({ title, onBackAction, style }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
+import {useTheme} from '../hooks/reduxHooks';
+import {ViewPropTypes} from 'react-native';
 
-    return (
-        <MaterialAppbar.Header
-            style={[{ backgroundColor: theme.colorPrimary }, style]}
-        >
-            {onBackAction && (
-                <MaterialAppbar.BackAction onPress={onBackAction} />
-            )}
-            <MaterialAppbar.Content
-                title={title}
-                titleStyle={{ color: theme.textColorPrimary }}
-            />
-        </MaterialAppbar.Header>
-    );
+export const Appbar = ({title, onBackAction, style, children}) => {
+  const theme = useTheme();
+
+  return (
+    <MaterialAppbar.Header
+      style={[{backgroundColor: theme.colorPrimary}, style]}
+    >
+      {onBackAction && <MaterialAppbar.BackAction onPress={onBackAction} />}
+      <MaterialAppbar.Content
+        title={title}
+        titleStyle={{color: theme.textColorPrimary}}
+      />
+      {children}
+    </MaterialAppbar.Header>
+  );
 };
 
-export const SearchAppbar = ({
-    placeholder,
-    getSearchResults,
-    setSearchText,
-    searchText,
-    getNovels,
-    setLoading,
-    screen,
-    openWebView,
-}) => {
-    const searchRef = useRef(null);
-
-    const navigation = useNavigation();
-
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    return (
-        <TouchableRipple
-            borderless
-            onPress={() => searchRef.current.focus()}
-            style={[
-                styles.searchAppbarContainer,
-                { backgroundColor: theme.searchBarColor },
-            ]}
-        >
-            <View
-                style={{
-                    flex: 1,
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                }}
-            >
-                <View style={{ flex: 1, flexDirection: "row" }}>
-                    {screen === "Library" ? (
-                        <IconButton
-                            icon="magnify"
-                            color={theme.textColorSecondary}
-                            style={{ marginLeft: 0 }}
-                            size={23}
-                        />
-                    ) : (
-                        <IconButton
-                            icon="arrow-left"
-                            color={theme.textColorSecondary}
-                            style={{ marginLeft: 0 }}
-                            size={23}
-                            onPress={() => navigation.goBack()}
-                        />
-                    )}
-                    <TextInput
-                        ref={searchRef}
-                        style={{
-                            fontSize: 16,
-                            color: theme.textColorSecondary,
-                        }}
-                        placeholder={placeholder}
-                        placeholderTextColor={theme.textColorSecondary}
-                        onChangeText={(text) => {
-                            setSearchText(text);
-                            if (screen === "Library") {
-                                getSearchResults(text);
-                            }
-                        }}
-                        onSubmitEditing={() => {
-                            if (screen === "Extension") {
-                                getSearchResults(searchText);
-                            }
-                        }}
-                        defaultValue={searchText}
-                    />
-                </View>
-                {searchText !== "" && (
-                    <IconButton
-                        icon="close"
-                        color={theme.textColorSecondary}
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={() => {
-                            setLoading?.(true);
-                            getNovels();
-                            setSearchText("");
-                        }}
-                    />
-                )}
-                {openWebView && (
-                    <IconButton
-                        icon="earth"
-                        color={theme.textColorSecondary}
-                        style={{ marginRight: 0 }}
-                        size={23}
-                        onPress={openWebView}
-                    />
-                )}
-            </View>
-        </TouchableRipple>
-    );
+Appbar.propTypes = {
+  title: PropTypes.string,
+  onBackAction: PropTypes.func,
+  style: ViewPropTypes.style,
 };
-
-const styles = StyleSheet.create({
-    searchAppbarContainer: {
-        marginTop: Constants.statusBarHeight + 8,
-        height: 48,
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 16,
-        marginBottom: 12,
-        borderRadius: 8,
-        marginHorizontal: 12,
-        elevation: 2,
-    },
-});

src/components/BottomSheetHandle.js

@@ -1,23 +1,17 @@
-import React from "react";
-import { View } from "react-native";
-import { useSelector } from "react-redux";
+import React from 'react';
+import {View} from 'react-native';
 
-const BottomSheetHandle = () => {
-    const theme = useSelector((state) => state.themeReducer.theme);
-    return (
-        <>
-            <View
-                style={{
-                    backgroundColor: theme.textColorHintDark,
-                    height: 5,
-                    width: 30,
-                    borderRadius: 50,
-                    top: 10,
-                    alignSelf: "center",
-                }}
-            />
-        </>
-    );
-};
+const BottomSheetHandle = ({theme}) => (
+  <View
+    style={{
+      backgroundColor: `${theme.textColorPrimary}66`,
+      height: 4,
+      width: 40,
+      borderRadius: 50,
+      top: 8,
+      alignSelf: 'center',
+    }}
+  />
+);
 
 export default BottomSheetHandle;

src/components/Checkbox/Checkbox.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import {Pressable, StyleSheet, Text} from 'react-native';
+import {Checkbox as PaperCheckbox} from 'react-native-paper';
+
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+export const Checkbox = ({label, status, onPress, disabled, theme}) => (
+  <Pressable
+    android_ripple={{color: theme.rippleColor}}
+    style={styles.pressable}
+    onPress={onPress}
+    disabled={disabled}
+  >
+    <PaperCheckbox
+      status={
+        status === 'indeterminate'
+          ? 'indeterminate'
+          : status
+          ? 'checked'
+          : 'unchecked'
+      }
+      onPress={onPress}
+      color={theme.colorAccent}
+      uncheckedColor={theme.textColorSecondary}
+      disabled={disabled}
+    />
+    <Text style={{color: theme.textColorPrimary, marginLeft: 12}}>{label}</Text>
+  </Pressable>
+);
+
+export const SortItem = ({label, status, onPress, theme}) => (
+  <Pressable
+    android_ripple={{color: theme.rippleColor}}
+    style={[styles.pressable, {paddingVertical: 16, paddingLeft: 64}]}
+    onPress={onPress}
+  >
+    {status && (
+      <MaterialCommunityIcons
+        name={status === 'asc' ? 'arrow-up' : 'arrow-down'}
+        color={theme.colorAccent}
+        size={21}
+        style={styles.icon}
+      />
+    )}
+    <Text style={{color: theme.textColorPrimary}}>{label}</Text>
+  </Pressable>
+);
+
+const styles = StyleSheet.create({
+  pressable: {
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    position: 'absolute',
+    left: 24,
+    alignSelf: 'center',
+  },
+});

src/components/Chip/Chip.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {View, Text, Pressable, StyleSheet} from 'react-native';
+
+import PropTypes from 'prop-types';
+
+export const Chip = ({label, onPress, theme}) => {
+  return (
+    <View style={[styles.container, {backgroundColor: theme.colorPrimary}]}>
+      <Pressable
+        style={styles.content}
+        onPress={onPress}
+        android_ripple={{color: theme.rippleColor}}
+      >
+        <Text style={[styles.label, {color: theme.textColorSecondary}]}>
+          {label}
+        </Text>
+      </Pressable>
+    </View>
+  );
+};
+
+Chip.propTypes = {
+  label: PropTypes.string,
+  onPress: PropTypes.func,
+  theme: PropTypes.object.isRequired,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    overflow: 'hidden',
+    alignSelf: 'flex-start',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 32,
+    marginHorizontal: 4,
+    elevation: 1,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  label: {
+    fontSize: 14,
+  },
+});

src/components/ColorPickerModal.js

@@ -0,0 +1,148 @@
+import React, {useState} from 'react';
+import {FlatList, Pressable, StyleSheet, Text, View} from 'react-native';
+
+import {Modal, Portal, TextInput} from 'react-native-paper';
+
+const ColorPickerModal = ({
+  theme,
+  color,
+  title,
+  onSubmit,
+  hideModal,
+  modalVisible,
+  showAccentColors,
+}) => {
+  const [text, setText] = useState(color);
+  const [error, setError] = useState();
+
+  const onDismiss = () => {
+    hideModal();
+    setText();
+    setError();
+  };
+
+  const onChangeText = txt => setText(txt);
+
+  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',
+    },
+  };
+
+  const accentColors = [
+    '#EF5350',
+    '#EC407A',
+    '#AB47BC',
+    '#7E57C2',
+    '#5C6BC0',
+    '#42A5F5',
+    '#29B6FC',
+    '#26C6DA',
+    '#26A69A',
+    '#66BB6A',
+    '#9CCC65',
+    '#D4E157',
+    '#FFEE58',
+    '#FFCA28',
+    '#FFA726',
+    '#FF7043',
+    '#8D6E63',
+    '#BDBDBD',
+    '#78909C',
+    '#000000',
+  ];
+
+  return (
+    <Portal>
+      <Modal
+        visible={modalVisible}
+        onDismiss={onDismiss}
+        contentContainerStyle={[
+          styles.modalContainer,
+          {backgroundColor: theme.colorPrimary},
+        ]}
+      >
+        <Text style={[styles.modalTitle, {color: theme.textColorPrimary}]}>
+          {title}
+        </Text>
+        {showAccentColors && (
+          <FlatList
+            contentContainerStyle={{marginBottom: 8}}
+            data={accentColors}
+            numColumns={4}
+            keyExtractor={item => item}
+            renderItem={({item}) => (
+              <View
+                style={{
+                  borderRadius: 4,
+                  overflow: 'hidden',
+                  backgroundColor: item,
+                  flex: 1 / 4,
+                  height: 40,
+                  marginHorizontal: 4,
+                  marginVertical: 4,
+                }}
+              >
+                <Pressable
+                  style={{flex: 1}}
+                  android_ripple={{
+                    color: 'rgba(0,0,0,0.12)',
+                  }}
+                  onPress={() => {
+                    onSubmit(item);
+                    hideModal();
+                  }}
+                />
+              </View>
+            )}
+          />
+        )}
+        <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,32 @@
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+
+const ScreenContainer = ({children, theme}) => {
+  const {bottom} = useSafeAreaInsets();
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: theme.colorPrimaryDark,
+        paddingBottom: bottom,
+      }}
+    >
+      {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/Common/CrossFadeView.js

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

src/components/Common/ToggleButton.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Pressable, View} from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+export const ToggleButton = ({icon, selected, theme, color, onPress}) => (
+  <View
+    style={{
+      borderRadius: 8,
+      overflow: 'hidden',
+      marginHorizontal: 4,
+    }}
+  >
+    <Pressable
+      android_ripple={{color: theme.rippleColor}}
+      style={{
+        padding: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      onPress={onPress}
+    >
+      <MaterialCommunityIcons
+        name={icon}
+        color={
+          selected ? theme.colorAccent : color ? color : theme.textColorPrimary
+        }
+        size={24}
+      />
+    </Pressable>
+  </View>
+);
+
+export const ToggleColorButton = ({
+  selected,
+  backgroundColor,
+  textColor,
+  onPress,
+}) => (
+  <View
+    style={{
+      borderRadius: 50,
+      overflow: 'hidden',
+      marginHorizontal: 6,
+      height: 44,
+      width: 44,
+    }}
+  >
+    <Pressable
+      android_ripple={{color: textColor}}
+      style={{
+        flex: 1,
+        padding: 10,
+        backgroundColor: backgroundColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      onPress={onPress}
+    >
+      {selected && (
+        <MaterialCommunityIcons name="check" color={textColor} size={24} />
+      )}
+    </Pressable>
+  </View>
+);

src/components/Dialog/Dialog.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-unused-vars */
+
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Dialog = ({visible, theme}) => {};
+
+const styles = StyleSheet.create({});

src/components/EmptyView.js

@@ -1,48 +1,45 @@
-import React from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { useSelector } from "react-redux";
+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}>
-            <Text
-                style={[
-                    styles.emptyViewIcon,
-                    { color: theme.textColorSecondary },
-                ]}
-            >
-                {icon}
-            </Text>
-            <Text
-                style={[
-                    styles.emptyViewText,
-                    { color: theme.textColorSecondary },
-                ]}
-            >
-                {description}
-            </Text>
-        </View>
-    );
+  return (
+    <View style={styles.emptyViewContainer}>
+      <Text
+        style={[
+          styles.emptyViewIcon,
+          {color: theme.textColorHint},
+          style,
+          iconStyle,
+        ]}
+      >
+        {icon}
+      </Text>
+      <Text style={[styles.emptyViewText, {color: theme.textColorHint}, style]}>
+        {description}
+      </Text>
+      {children}
+    </View>
+  );
 };
 
 export default EmptyView;
 
 const styles = StyleSheet.create({
-    emptyViewContainer: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    emptyViewIcon: {
-        fontSize: 45,
-        fontWeight: "bold",
-    },
-    emptyViewText: {
-        fontWeight: "bold",
-        marginTop: 10,
-        textAlign: "center",
-        paddingHorizontal: 30,
-    },
+  emptyViewContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyViewIcon: {
+    fontSize: 45,
+  },
+  emptyViewText: {
+    fontWeight: 'bold',
+    marginTop: 10,
+    textAlign: 'center',
+    paddingHorizontal: 30,
+  },
 });

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.text}
+        onPress={onRetry}
+      />
+      <Text style={{color: theme.textColorPrimary}}>Retry</Text>
+    </EmptyView>
+  </View>
+);
+
+export default ErrorView;

src/components/ErrorView/ErrorView.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {IconButton} from 'react-native-paper';
+
+// const icons = ['(･o･;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘･_･˘)', '(；￣Д￣)', '(･Д･。'];
+
+export const ErrorView = ({errorName, actions, theme}) => (
+  <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+    <Text style={[styles.emptyViewIcon, {color: theme.textColorHint}]}>
+      {/* {icons[Math.floor(Math.random() * 5)]} */}
+      ಥ_ಥ
+    </Text>
+    <Text style={[styles.emptyViewText, {color: theme.textColorHint}]}>
+      {errorName}
+    </Text>
+    <View style={{flexDirection: 'row'}}>
+      {actions.map(action => (
+        <View
+          style={{
+            borderRadius: 4,
+            overflow: 'hidden',
+            margin: 16,
+          }}
+        >
+          <Pressable
+            android_ripple={{
+              color: theme.rippleColor,
+              borderless: false,
+            }}
+            onPress={action.onPress}
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              paddingBottom: 8,
+              paddingHorizontal: 20,
+              minWidth: 100,
+            }}
+          >
+            <IconButton
+              icon={action.icon}
+              color={theme.textColorHint}
+              size={24}
+              style={{margin: 0}}
+            />
+            <Text
+              style={{
+                fontSize: 12,
+                color: theme.textColorHint,
+              }}
+            >
+              {action.name}
+            </Text>
+          </Pressable>
+        </View>
+      ))}
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  emptyViewContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyViewIcon: {
+    fontSize: 45,
+  },
+  emptyViewText: {
+    fontWeight: 'bold',
+    marginTop: 10,
+    textAlign: 'center',
+    paddingHorizontal: 30,
+  },
+});

src/components/IconButton/IconButton.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Pressable, StyleSheet, ViewPropTypes} from 'react-native';
+import PropTypes from 'prop-types';
+
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+export const IconButton = ({
+  icon,
+  size,
+  color,
+  onPress,
+  containerStyle,
+  theme,
+}) => (
+  <Pressable
+    style={[styles.container, containerStyle]}
+    android_ripple={{color: theme.rippleColor, borderless: true, radius: 20}}
+    onPress={onPress}
+  >
+    <MaterialCommunityIcons name={icon} size={size} color={color} />
+  </Pressable>
+);
+
+IconButton.defaultProps = {
+  size: 24,
+  color: '#FFFFFF',
+};
+
+IconButton.propTypes = {
+  icon: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string,
+  onPress: PropTypes.func,
+  containerStyle: ViewPropTypes.style,
+  theme: PropTypes.object.isRequired,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 6,
+  },
+});

src/components/List.js

@@ -1,66 +1,135 @@
-import React from "react";
-import { StyleSheet } from "react-native";
-import { List, Divider as PaperDivider } from "react-native-paper";
+import React from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
 
-const ListSection = ({ children }) => (
-    <List.Section style={styles.listSection}>{children}</List.Section>
+import {List as PaperList, Divider as PaperDivider} from 'react-native-paper';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const ListSection = ({children}) => (
+  <PaperList.Section style={styles.listSection}>{children}</PaperList.Section>
 );
 
-const ListSubHeader = ({ children, theme }) => (
-    <List.Subheader
-        style={[styles.listSubHeader, { color: theme.colorAccentDark }]}
-    >
-        {children}
-    </List.Subheader>
+const ListSubHeader = ({children, theme}) => (
+  <PaperList.Subheader
+    style={[styles.listSubHeader, {color: theme.colorAccent}]}
+  >
+    {children}
+  </PaperList.Subheader>
 );
 
-const ListItem = ({ title, description, icon, onPress, theme, right }) => (
-    <List.Item
-        title={title}
-        titleStyle={{ color: theme.textColorPrimary }}
-        description={description}
-        descriptionStyle={{ color: theme.textColorSecondary }}
-        descriptionNumberOfLines={1}
-        left={() =>
-            icon && (
-                <List.Icon
-                    color={theme.colorAccentDark}
-                    icon={icon}
-                    style={{ marginVertical: 0 }}
-                />
-            )
-        }
-        right={() =>
-            right && (
-                <List.Icon
-                    color="#47a84a"
-                    icon={right}
-                    style={{ marginVertical: 0 }}
-                />
-            )
-        }
-        onPress={onPress}
-        rippleColor={theme.rippleColor}
+const ListItem = ({
+  title,
+  description,
+  icon,
+  onPress,
+  theme,
+  right,
+  iconColor,
+  titleStyle,
+  style,
+}) => (
+  <PaperList.Item
+    title={title}
+    style={style}
+    titleStyle={[{color: theme.textColorPrimary}, titleStyle]}
+    description={description}
+    descriptionStyle={{color: theme.textColorSecondary}}
+    descriptionNumberOfLines={1}
+    left={() => (
+      <View style={{justifyContent: 'center'}}>
+        {icon && (
+          <PaperList.Icon
+            color={theme.colorAccent}
+            icon={icon}
+            style={{
+              marginVertical: 0,
+            }}
+          />
+        )}
+      </View>
+    )}
+    right={() =>
+      right && (
+        <MaterialCommunityIcons
+          name={right}
+          color={iconColor || '#47a84a'}
+          size={23}
+          style={{marginRight: 16, textAlignVertical: 'center'}}
+        />
+      )
+    }
+    onPress={onPress}
+    rippleColor={theme.rippleColor}
+  />
+);
+
+const Divider = ({theme}) => (
+  <PaperDivider style={{backgroundColor: theme.dividerColor, height: 1}} />
+);
+
+const InfoItem = ({title, icon, theme}) => (
+  <PaperList.Item
+    title={title}
+    titleStyle={{color: theme.textColorSecondary, fontSize: 14}}
+    titleNumberOfLines={5}
+    left={() =>
+      icon && (
+        <PaperList.Icon
+          color={theme.textColorSecondary}
+          icon={icon}
+          style={{marginVertical: 0}}
+        />
+      )
+    }
+  />
+);
+
+const ColorItem = ({title, description, theme, onPress}) => (
+  <Pressable
+    style={{
+      padding: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    }}
+    android_ripple={{color: theme.rippleColor}}
+    onPress={onPress}
+  >
+    <View>
+      <Text style={{color: theme.textColorPrimary, fontSize: 16}}>{title}</Text>
+      <Text style={{color: theme.textColorSecondary}}>{description}</Text>
+    </View>
+    <View
+      style={{
+        backgroundColor: description,
+        height: 24,
+        width: 24,
+        borderRadius: 50,
+        marginRight: 16,
+      }}
     />
+  </Pressable>
 );
 
-const Divider = ({ theme }) => (
-    <PaperDivider
-        style={{
-            backgroundColor: theme.dividerColor,
-            height: 1,
-        }}
-    />
+const Icon = ({icon, theme}) => (
+  <PaperList.Icon color={theme.colorAccent} icon={icon} style={{margin: 0}} />
 );
 
-export { ListSection, ListSubHeader, ListItem, Divider };
+export const List = {
+  Section: ListSection,
+  SubHeader: ListSubHeader,
+  Item: ListItem,
+  Divider,
+  InfoItem,
+  ColorItem,
+  Icon,
+};
 
 const styles = StyleSheet.create({
-    listSection: {
-        flex: 1,
-        marginVertical: 0,
-    },
-    listSubHeader: {
-        paddingBottom: 5,
-    },
+  listSection: {
+    flex: 1,
+    marginVertical: 0,
+  },
+  listSubHeader: {
+    paddingBottom: 5,
+  },
 });

src/components/ListView.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {StyleSheet, View, Text, Pressable} from 'react-native';
+
+import FastImage from 'react-native-fast-image';
+import {defaultCoverUri} from '../sources/helpers/constants';
+
+const ListView = ({
+  item,
+  downloadBadge,
+  unreadBadge,
+  inLibraryBadge,
+  theme,
+  onPress,
+  isSelected,
+  onLongPress,
+}) => {
+  const uri =
+    item.novelCover && !item.novelCover.startsWith('/')
+      ? item.novelCover
+      : defaultCoverUri;
+
+  return (
+    <Pressable
+      android_ripple={{color: theme.rippleColor}}
+      style={[
+        styles.listView,
+        isSelected && {backgroundColor: theme.rippleColor},
+      ]}
+      onPress={onPress}
+      onLongPress={onLongPress}
+    >
+      <FastImage
+        source={{
+          uri,
+        }}
+        style={[styles.extensionIcon, inLibraryBadge && {opacity: 0.5}]}
+      />
+      <Text
+        style={[{color: theme.textColorPrimary}, styles.novelName]}
+        numberOfLines={1}
+      >
+        {item.novelName}
+      </Text>
+      <View style={styles.badgeContainer}>
+        {downloadBadge}
+        {unreadBadge}
+        {inLibraryBadge}
+      </View>
+    </Pressable>
+  );
+};
+
+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/LoadingScreen/LoadingScreen.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import {ActivityIndicator, View} from 'react-native';
+
+export const LoadingScreen = ({theme}) => (
+  <View style={{flex: 1, justifyContent: 'center'}}>
+    <ActivityIndicator size={50} color={theme.colorAccent} />
+  </View>
+);

src/components/NewUpdateDialog.js

@@ -0,0 +1,75 @@
+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/reduxHooks';
+
+const NewUpdateDialog = ({newVersion}) => {
+  const [newUpdateDialog, showNewUpdateDialog] = useState(true);
+
+  const theme = useTheme();
+
+  return (
+    <Portal>
+      <Modal
+        visible={newUpdateDialog}
+        onDismiss={() => showNewUpdateDialog(false)}
+        contentContainerStyle={[
+          styles.containerStyle,
+          {backgroundColor: theme.colorPrimaryDark},
+        ]}
+      >
+        <Text style={[styles.modalHeader, {color: theme.textColorPrimary}]}>
+          {`New update available ${newVersion.tag_name}`}
+        </Text>
+        <Text style={{color: theme.textColorSecondary, fontSize: 16}}>
+          {newVersion.body}
+        </Text>
+        <View
+          style={{
+            flexDirection: 'row',
+            marginTop: 30,
+            justifyContent: 'flex-end',
+          }}
+        >
+          <Button
+            labelStyle={{
+              color: theme.colorAccent,
+              letterSpacing: 0,
+              textTransform: 'none',
+            }}
+            theme={{colors: {primary: theme.colorAccent}}}
+            onPress={() => showNewUpdateDialog(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            labelStyle={{
+              color: theme.colorAccent,
+              letterSpacing: 0,
+              textTransform: 'none',
+            }}
+            theme={{colors: {primary: theme.colorAccent}}}
+            onPress={() => Linking.openURL(newVersion.downloadUrl)}
+          >
+            Install
+          </Button>
+        </View>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default NewUpdateDialog;
+
+const styles = StyleSheet.create({
+  containerStyle: {
+    padding: 20,
+    margin: 20,
+    borderRadius: 6,
+  },
+  modalHeader: {
+    fontSize: 20,
+    marginBottom: 10,
+  },
+});

src/components/NovelCover.js

@@ -1,274 +1,312 @@
-import React from "react";
-import { StyleSheet, View, Text, ImageBackground, Image } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { TouchableRipple } from "react-native-paper";
+import React, {memo, useCallback} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  useWindowDimensions,
+  Pressable,
+} from 'react-native';
 
-import { useSelector } from "react-redux";
+import {LinearGradient} from 'expo-linear-gradient';
+import FastImage from 'react-native-fast-image';
 
-const NovelCover = ({ item, onPress, libraryStatus }) => {
-    const displayMode = useSelector(
-        (state) => state.settingsReducer.displayMode
-    );
+import ListView from './ListView';
 
-    const theme = useSelector((state) => state.themeReducer.theme);
+import {useDeviceOrientation} from '../services/utils/helpers';
+import {useSettings} from '../hooks/reduxHooks';
+import {defaultCoverUri} from '../sources/helpers/constants';
 
-    const itemsPerRow = useSelector(
-        (state) => state.settingsReducer.itemsPerRow
-    );
+const NovelCover = ({
+  item,
+  onPress,
+  libraryStatus,
+  theme,
+  isSelected,
+  onLongPress,
+  selectedNovels,
+}) => {
+  const {displayMode, novelsPerRow, showDownloadBadges, showUnreadBadges} =
+    useSettings();
 
-    const height = {
-        1: 550,
-        2: 280,
-        3: 180,
-        4: 140,
-        5: 100,
-        6: 80,
-        7: 70,
-        8: 58,
-        9: 55,
-        10: 50,
-    };
+  const window = useWindowDimensions();
 
-    return displayMode !== 2 ? (
-        <View style={{ flex: 1 / itemsPerRow }}>
-            <TouchableRipple
-                borderless
-                centered
-                rippleColor={theme.rippleColor}
-                style={styles.opac}
-                onPress={onPress}
-            >
-                <>
-                    {item.novelCover && (
-                        <ImageBackground
-                            source={{ uri: item.novelCover }}
-                            style={{ height: height[itemsPerRow] }}
-                            imageStyle={[
-                                { borderRadius: 4 },
-                                libraryStatus && { opacity: 0.5 },
-                            ]}
-                            progressiveRenderingEnabled={true}
-                        >
-                            <View style={{ flexDirection: "row", margin: 4 }}>
-                                {item.chaptersDownloaded && (
-                                    <Text
-                                        style={[
-                                            {
-                                                flex: 0,
-                                                backgroundColor: "#47a84a",
-                                                color: "#FFFFFF",
-                                                borderTopLeftRadius: 4,
-                                                borderBottomLeftRadius: 4,
-                                                paddingTop: 2,
-                                                paddingHorizontal: 4,
-                                                alignSelf: "flex-start",
-                                                fontSize: 12,
-                                            },
-                                            !item.chaptersUnread && {
-                                                borderTopRightRadius: 4,
-                                                borderBottomRightRadius: 4,
-                                            },
-                                        ]}
-                                    >
-                                        {item.chaptersDownloaded}
-                                    </Text>
-                                )}
-                                {item.chaptersUnread && (
-                                    <Text
-                                        style={[
-                                            {
-                                                flex: 0,
-                                                backgroundColor: "#2979FF",
-                                                color: "#FFFFFF",
-                                                borderTopRightRadius: 4,
-                                                borderBottomRightRadius: 4,
-                                                paddingTop: 2,
-                                                paddingHorizontal: 4,
-                                                alignSelf: "flex-start",
-                                                fontSize: 12,
-                                            },
-                                            !item.chaptersDownloaded && {
-                                                borderTopLeftRadius: 4,
-                                                borderBottomLeftRadius: 4,
-                                            },
-                                        ]}
-                                    >
-                                        {item.chaptersUnread}
-                                    </Text>
-                                )}
-                            </View>
-                            {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>
-                            )}
-                        </ImageBackground>
-                    )}
-                    {displayMode === 1 && (
-                        <Text
-                            numberOfLines={2}
-                            style={[
-                                styles.title,
-                                {
-                                    color: theme.textColorPrimary,
-                                    padding: 4,
-                                },
-                            ]}
-                        >
-                            {item.novelName}
-                        </Text>
-                    )}
-                </>
-            </TouchableRipple>
+  const orientation = useDeviceOrientation();
+
+  const getNovelsPerRow = () =>
+    orientation === 'landscape' ? 6 : novelsPerRow;
+
+  const getHeight = useCallback(
+    () => (window.width / getNovelsPerRow()) * (4 / 3),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const selectNovel = () => onLongPress && onLongPress(item.novelId);
+
+  const uri =
+    item.novelCover && !item.novelCover.startsWith('/')
+      ? item.novelCover
+      : defaultCoverUri;
+
+  return displayMode !== 2 ? (
+    <View
+      style={[
+        {
+          flex: 1 / getNovelsPerRow(),
+          borderRadius: 6,
+          overflow: 'hidden',
+          margin: 2,
+        },
+        isSelected && {
+          backgroundColor: theme.colorAccent,
+          opacity: 0.8,
+        },
+      ]}
+    >
+      <Pressable
+        android_ripple={{color: theme.colorAccent}}
+        style={styles.opac}
+        onPress={
+          selectedNovels && selectedNovels.length > 0 ? selectNovel : onPress
+        }
+        onLongPress={selectNovel}
+      >
+        <View style={styles.badgeContainer}>
+          {libraryStatus && <InLibraryBadge theme={theme} />}
+          {showDownloadBadges && item.chaptersDownloaded && (
+            <DownloadBadge
+              showUnreadBadges={showUnreadBadges}
+              chaptersDownloaded={item.chaptersDownloaded}
+              chaptersUnread={item.chaptersUnread}
+            />
+          )}
+          {showUnreadBadges && item.chaptersUnread && (
+            <UnreadBadge
+              theme={theme}
+              chaptersDownloaded={item.chaptersDownloaded}
+              chaptersUnread={item.chaptersUnread}
+              showDownloadBadges={showDownloadBadges}
+            />
+          )}
         </View>
-    ) : (
-        <TouchableRipple
-            borderless
-            centered
-            rippleColor={theme.rippleColor}
-            style={styles.listView}
-            onPress={onPress}
-        >
-            <View
-                style={{
-                    flex: 1,
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                }}
-            >
-                <View
-                    style={{
-                        flexDirection: "row",
-                        alignItems: "center",
-                    }}
-                >
-                    <Image
-                        source={{ uri: item.novelCover }}
-                        style={styles.extensionIcon}
-                    />
-                    <Text
-                        style={{
-                            color: theme.textColorPrimary,
-                            marginLeft: 16,
-                            fontSize: 15,
-                            paddingRight: 8,
-                        }}
-                        numberOfLines={1}
-                    >
-                        {item.novelName}
-                    </Text>
-                </View>
-                <View
-                    style={{
-                        flexDirection: "row",
-                        alignItems: "center",
-                    }}
-                >
-                    {item.chaptersDownloaded && (
-                        <Text
-                            style={[
-                                {
-                                    backgroundColor: "#47a84a",
-                                    color: "#FFFFFF",
-                                    borderTopLeftRadius: 4,
-                                    borderBottomLeftRadius: 4,
-                                    paddingTop: 2,
-                                    paddingHorizontal: 4,
-                                    fontSize: 12,
-                                },
-                                !item.chaptersUnread && {
-                                    borderTopRightRadius: 4,
-                                    borderBottomRightRadius: 4,
-                                },
-                            ]}
-                        >
-                            {item.chaptersDownloaded}
-                        </Text>
-                    )}
-                    {item.chaptersUnread && (
-                        <Text
-                            style={[
-                                {
-                                    backgroundColor: "#2979FF",
-                                    color: "#FFFFFF",
-                                    borderTopRightRadius: 4,
-                                    borderBottomRightRadius: 4,
-                                    paddingTop: 2,
-                                    paddingHorizontal: 4,
-                                    fontSize: 12,
-                                },
-                                !item.chaptersDownloaded && {
-                                    borderTopLeftRadius: 4,
-                                    borderBottomLeftRadius: 4,
-                                },
-                            ]}
-                        >
-                            {item.chaptersUnread}
-                        </Text>
-                    )}
-                </View>
-            </View>
-        </TouchableRipple>
-    );
+        <FastImage
+          source={{uri}}
+          style={[
+            {height: getHeight(), borderRadius: 4},
+            libraryStatus && {opacity: 0.5},
+          ]}
+        />
+        <View style={styles.compactTitleContainer}>
+          {displayMode === 0 && <CompactTitle novelName={item.novelName} />}
+        </View>
+        {displayMode === 1 && (
+          <ComfortableTitle novelName={item.novelName} theme={theme} />
+        )}
+      </Pressable>
+    </View>
+  ) : (
+    <ListView
+      item={item}
+      downloadBadge={
+        showDownloadBadges &&
+        item.chaptersDownloaded && (
+          <DownloadBadge
+            showUnreadBadges={showUnreadBadges}
+            chaptersDownloaded={item.chaptersDownloaded}
+            chaptersUnread={item.chaptersUnread}
+          />
+        )
+      }
+      unreadBadge={
+        showUnreadBadges &&
+        item.chaptersUnread && (
+          <UnreadBadge
+            theme={theme}
+            chaptersDownloaded={item.chaptersDownloaded}
+            chaptersUnread={item.chaptersUnread}
+            showDownloadBadges={showDownloadBadges}
+          />
+        )
+      }
+      inLibraryBadge={libraryStatus && <InLibraryBadge theme={theme} />}
+      theme={theme}
+      onPress={
+        selectedNovels && selectedNovels.length > 0 ? selectNovel : onPress
+      }
+      onLongPress={selectNovel}
+      isSelected={isSelected}
+    />
+  );
 };
 
-export default NovelCover;
+export default memo(NovelCover);
+
+const ComfortableTitle = ({theme, novelName}) => (
+  <Text
+    numberOfLines={2}
+    style={[
+      styles.title,
+      {
+        color: theme.textColorPrimary,
+        padding: 4,
+      },
+    ]}
+  >
+    {novelName}
+  </Text>
+);
+
+const CompactTitle = ({novelName}) => (
+  <View style={styles.titleContainer}>
+    <LinearGradient
+      colors={['transparent', 'rgba(0,0,0,0.7)']}
+      style={styles.linearGradient}
+    >
+      <Text
+        numberOfLines={2}
+        style={[
+          styles.title,
+          {
+            color: 'rgba(255,255,255,1)',
+            textShadowColor: 'rgba(0, 0, 0, 0.75)',
+            textShadowOffset: {width: -1, height: 1},
+            textShadowRadius: 10,
+          },
+        ]}
+      >
+        {novelName}
+      </Text>
+    </LinearGradient>
+  </View>
+);
+
+const InLibraryBadge = ({theme}) => (
+  <Text
+    style={[
+      styles.inLibraryBadge,
+      {
+        backgroundColor: theme.colorAccent,
+        color: theme.colorButtonText,
+        borderRadius: 4,
+      },
+    ]}
+  >
+    In library
+  </Text>
+);
+
+const UnreadBadge = ({
+  chaptersDownloaded,
+  chaptersUnread,
+  showDownloadBadges,
+  theme,
+}) => (
+  <Text
+    style={[
+      styles.unreadBadge,
+      !chaptersDownloaded && {
+        borderTopLeftRadius: 4,
+        borderBottomLeftRadius: 4,
+      },
+      !showDownloadBadges && {
+        borderRadius: 4,
+      },
+      {
+        backgroundColor: theme.colorAccent,
+        color: theme.colorButtonText,
+      },
+    ]}
+  >
+    {chaptersUnread}
+  </Text>
+);
+
+const DownloadBadge = ({
+  chaptersDownloaded,
+  showUnreadBadges,
+  chaptersUnread,
+}) => (
+  <Text
+    style={[
+      styles.downloadBadge,
+      !chaptersUnread && {
+        borderTopRightRadius: 4,
+        borderBottomRightRadius: 4,
+      },
+      !showUnreadBadges && {
+        borderRadius: 4,
+      },
+    ]}
+  >
+    {chaptersDownloaded}
+  </Text>
+);
 
 const styles = StyleSheet.create({
-    // logo: {
-    //     height: 180,
-    // },
-    titleContainer: {
-        flex: 1,
-        justifyContent: "flex-end",
-        borderRadius: 4,
-    },
-    title: {
-        fontFamily: "pt-sans-bold",
-        fontSize: 14,
-        padding: 8,
-    },
+  titleContainer: {
+    flex: 1,
+    borderRadius: 4,
+  },
+  title: {
+    fontFamily: 'pt-sans-bold',
+    fontSize: 14,
+    padding: 8,
+  },
+  linearGradient: {
+    borderRadius: 4,
+  },
+  opac: {
+    padding: 4.8,
+    borderRadius: 4,
+    flex: 1,
+  },
+  extensionIcon: {
+    width: 42,
+    height: 42,
+    borderRadius: 4,
+  },
+  listView: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 4,
+  },
 
-    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: '#2979FF',
+    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,
+  },
+  inLibraryBadge: {
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    fontSize: 12,
+  },
+  compactTitleContainer: {
+    position: 'absolute',
+    bottom: 4,
+    left: 4,
+    right: 4,
+  },
+  badgeContainer: {
+    position: 'absolute',
+    zIndex: 1,
+    top: 8,
+    left: 8,
+    flexDirection: 'row',
+  },
 });

src/components/NovelList.js

@@ -0,0 +1,61 @@
+import React, {useCallback} from 'react';
+import {StyleSheet, FlatList} from 'react-native';
+
+import {useSettings} from '../hooks/reduxHooks';
+import {useDeviceOrientation} from '../services/utils/helpers';
+
+const NovelList = ({
+  data,
+  onScroll,
+  onEndReached,
+  renderItem,
+  refreshControl,
+  ListEmptyComponent,
+  ListFooterComponent,
+}) => {
+  const {displayMode, novelsPerRow} = useSettings();
+
+  const orientation = useDeviceOrientation();
+
+  const getNovelsPerRow = () => {
+    if (displayMode === 2) {
+      return 1;
+    }
+
+    if (orientation === 'landscape') {
+      return 6;
+    } else {
+      return novelsPerRow;
+    }
+  };
+
+  const keyExtractor = useCallback(item => item.novelUrl, []);
+
+  return (
+    <FlatList
+      contentContainerStyle={[
+        styles.flatListCont,
+        displayMode !== 2 && {paddingHorizontal: 4},
+      ]}
+      numColumns={getNovelsPerRow()}
+      key={[orientation, getNovelsPerRow()]}
+      data={data}
+      keyExtractor={keyExtractor}
+      renderItem={renderItem}
+      refreshControl={refreshControl}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      onScroll={onScroll}
+      onEndReached={onEndReached}
+    />
+  );
+};
+
+export default NovelList;
+
+const styles = StyleSheet.create({
+  flatListCont: {
+    flexGrow: 1,
+    paddingBottom: 56,
+  },
+});

src/components/RadioButton.js

@@ -1,36 +1,40 @@
-import React from "react";
-import { StyleSheet, View, Text } from "react-native";
-import { RadioButton as MaterialRadioButton } from "react-native-paper";
+import React from 'react';
+import {StyleSheet, View, Text} from 'react-native';
+import {RadioButton as MaterialRadioButton} from 'react-native-paper';
 
-export const RadioButtonGroup = ({ children, value, onValueChange }) => (
-    <MaterialRadioButton.Group onValueChange={onValueChange} value={value}>
-        {children}
-    </MaterialRadioButton.Group>
+export const RadioButtonGroup = ({children, value, onValueChange}) => (
+  <MaterialRadioButton.Group onValueChange={onValueChange} value={value}>
+    {children}
+  </MaterialRadioButton.Group>
 );
 
-export const RadioButton = ({ value, label, theme }) => (
-    <View style={styles.radioButtonContainer}>
-        <MaterialRadioButton
-            value={value}
-            color={theme.colorAccentDark}
-            uncheckedColor={theme.textColorSecondary}
-        />
-        <Text
-            style={[styles.radioButtonLabel, { color: theme.textColorPrimary }]}
-        >
-            {label}
-        </Text>
-    </View>
+export const RadioButton = ({value, label, theme, labelStyle}) => (
+  <View style={styles.radioButtonContainer}>
+    <MaterialRadioButton
+      value={value}
+      color={theme.colorAccent}
+      uncheckedColor={theme.textColorSecondary}
+    />
+    <Text
+      style={[
+        styles.radioButtonLabel,
+        {color: theme.textColorPrimary},
+        labelStyle,
+      ]}
+    >
+      {label}
+    </Text>
+  </View>
 );
 
 const styles = StyleSheet.create({
-    radioButtonContainer: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingVertical: 8,
-    },
-    radioButtonLabel: {
-        marginLeft: 16,
-        fontSize: 16,
-    },
+  radioButtonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  radioButtonLabel: {
+    marginLeft: 16,
+    fontSize: 16,
+  },
 });