Release v1.1.14

Closes LNReader/lnreader-sources#405

.editorconfig

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

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  overrides: [
+    {
+      files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
+      rules: {
+        '@typescript-eslint/no-shadow': ['warn'],
+        'no-shadow': 'off',
+        'no-undef': 'off',
+        'react-native/no-inline-styles': 'warn',
+        'no-console': 'warn',
+        'react-hooks/exhaustive-deps': 'warn',
+      },
+    },
+  ],
+};

.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/ISSUE_TEMPLATE/report_issue.yml

@@ -0,0 +1,94 @@
+# Cloned from tachiyomi
+
+name: Issue report
+description: Report an issue in LNReader
+labels: [Bug]
+body:
+  - type: textarea
+    id: reproduce-steps
+    attributes:
+      label: Steps to reproduce
+      description: Provide an example of the issue.
+      placeholder: |
+        Example:
+          1. First step
+          2. Second step
+          3. Issue here
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: Explain what you should expect to happen.
+      placeholder: |
+        Example:
+          "This should happen..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual-behavior
+    attributes:
+      label: Actual behavior
+      description: Explain what actually happens.
+      placeholder: |
+        Example:
+          "This happened instead..."
+    validations:
+      required: true
+
+  - type: input
+    id: lnreader-version
+    attributes:
+      label: LNReader version
+      description: You can find your LNReader version in **More → About**.
+      placeholder: |
+        Example: "1.1.14"
+    validations:
+      required: true
+
+  - type: input
+    id: android-version
+    attributes:
+      label: Android version
+      description: You can find this somewhere in your Android settings.
+      placeholder: |
+        Example: "Android 11"
+    validations:
+      required: true
+
+  - type: input
+    id: device
+    attributes:
+      label: Device
+      description: List your device and model.
+      placeholder: |
+        Example: "Google Pixel 5"
+    validations:
+      required: true
+
+  - type: textarea
+    id: other-details
+    attributes:
+      label: Other details
+      placeholder: |
+        Additional details and attachments.
+
+  - type: checkboxes
+    id: acknowledgements
+    attributes:
+      label: Acknowledgements
+      description: Read this carefully, we will close and ignore your issue if you skimmed through this.
+      options:
+        - label: I have searched the existing issues and this is a new ticket, **NOT** a duplicate or related to another open or closed issue.
+          required: true
+        - label: I have written a short but informative title.
+          required: true
+        - label: If this is an issue with a source, I should be opening an issue in the [sources repository](https://github.com/lnreader/lnreader-sources/issues/new/choose).
+          required: true
+        - label: I have updated the app to version **[1.1.14](https://github.com/lnreader/lnreader/releases/latest)**.
+          required: true
+        - label: I will fill out all of the requested information in this form.
+          required: true

.github/ISSUE_TEMPLATE/request_feature.yml

@@ -0,0 +1,40 @@
+# Cloned from tachiyomi
+
+name: Feature request
+description: Suggest a feature to improve LNReader
+labels: [Feature Request]
+body:
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Describe your suggested feature
+      description: How can LNReader be improved?
+      placeholder: |
+        Example:
+          "It should work like this..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: other-details
+    attributes:
+      label: Other details
+      placeholder: |
+        Additional details and attachments.
+
+  - type: checkboxes
+    id: acknowledgements
+    attributes:
+      label: Acknowledgements
+      description: Read this carefully, we will close and ignore your issue if you skimmed through this.
+      options:
+        - label: I have searched the existing issues and this is a new ticket, **NOT** a duplicate or related to another open or closed issue.
+          required: true
+        - label: I have written a short but informative title.
+          required: true
+        - label: If this is an issue with a source, I should be opening an issue in the [sources repository](https://github.com/LNReader/lnreader-sources/issues/new/choose).
+          required: true
+        - label: I have updated the app to version **[1.1.14](https://github.com/LNReader/lnreader/releases/latest)**.
+          required: true
+        - label: I will fill out all of the requested information in this form.
+          required: true

.github/workflows/build.yml

@@ -1,45 +1,46 @@
 name: CI
 on:
-    push:
-        branches:
-            - main
+  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
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Dependencies
+        run: |
+          npm install --legacy-peer-deps
 
-    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 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: 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: Make Gradlew Executable
-              run: cd android && chmod +x ./gradlew
+      - name: Build Android Release
+        run: |
+          cd android && ./gradlew assembleRelease --no-daemon
 
-            - name: Build Android Release
-              run: |
-                  cd android && ./gradlew assembleRelease --no-daemon
+      - name: Set Env
+        run: |
+          set -x
+          echo "COMMIT_COUNT=$(git rev-list --count HEAD)" >> $GITHUB_ENV
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v1
+        with:
+          name: LNReader-r${{ env.COMMIT_COUNT }}
+          path: android/app/build/outputs/apk/release/app-release.apk

.github/workflows/issue_moderator.yml

@@ -0,0 +1,31 @@
+# Cloned from tachiyomi
+
+name: Issue moderator
+
+on:
+  issues:
+    types: [opened, edited, reopened]
+  issue_comment:
+    types: [created]
+
+jobs:
+  moderate:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Moderate issues
+        uses: tachiyomiorg/issue-moderator-action@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          auto-close-rules: |
+            [
+              {
+                "type": "body",
+                "regex": ".*DELETE THIS SECTION IF YOU HAVE READ AND ACKNOWLEDGED IT.*",
+                "message": "The acknowledgment section was not removed."
+              },
+              {
+                "type": "body",
+                "regex": ".*\\* (LNReader version|Android version|Device): \\?.*",
+                "message": "Requested information in the template was not filled out."
+              }
+            ]

.github/workflows/lint.yml

@@ -0,0 +1,19 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install modules
+        run: npm i --legacy-peer-deps
+      - name: Run ESLint
+        run: npm run lint

.gitignore

@@ -70,4 +70,7 @@ buck-out/
 .expo/
 web-build/
 
-# @end expo-cli
+# @end expo-cli
+
+.vscode/
+src/sources/en/generators/

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

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

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  tabWidth: 2,
+  bracketSpacing: true,
+  useTabs: false,
+  bracketSameLine: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'avoid',
+  quoteProps: 'preserve',
+};

App.js

@@ -1,43 +1,46 @@
-import React, { useEffect } from "react";
-import { StatusBar } from "react-native";
+import 'react-native-gesture-handler';
+import { enableFreeze } from 'react-native-screens';
 
-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";
+enableFreeze(true);
 
-import Main from "./src/navigators/Main";
+import React, { useEffect } from 'react';
+import { StatusBar } from 'react-native';
 
-import { createDB } from "./src/database/DBHelper";
-import { fonts } from "./src/theme/fonts";
+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 Main from './src/navigators/Main';
+
+import { createDatabase } from './src/database/db';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import LottieSplashScreen from 'react-native-lottie-splash-screen';
+import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const App = () => {
-    const [loaded] = useFonts(fonts);
+  useEffect(() => {
+    LottieSplashScreen.hide();
+    createDatabase();
+  }, []);
 
-    useEffect(() => {
-        SplashScreen.preventAutoHideAsync();
-        createDB();
-    }, []);
-
-    if (!loaded) {
-        return null;
-    }
-
-    return (
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <AppErrorBoundary>
         <Provider store={store}>
-            <PersistGate loading={null} persistor={persistor}>
-                <PaperProvider>
-                    <StatusBar
-                        translucent={true}
-                        backgroundColor="transparent"
-                    />
-                    <Main />
-                </PaperProvider>
-            </PersistGate>
+          <PersistGate loading={null} persistor={persistor}>
+            <SafeAreaProvider>
+              <PaperProvider>
+                <StatusBar translucent={true} backgroundColor="transparent" />
+                <Main />
+              </PaperProvider>
+            </SafeAreaProvider>
+          </PersistGate>
         </Provider>
-    );
+      </AppErrorBoundary>
+    </GestureHandlerRootView>
+  );
 };
 
 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,40 @@
+# 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

@@ -17,6 +17,10 @@
   <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-preview/releases/latest">
+    <img alt="GitHub release (latest SemVer)" src="https://img.shields.io/github/v/release/LNReader/lnreader-preview?color=red&label=preview">
+  </a>
+  <a title="Crowdin" target="_blank" href="https://crowdin.com/project/lnreader"><img src="https://badges.crowdin.net/lnreader/localized.svg"></a>
   <a href="https://github.com/LNReader/lnreader/blob/main/LICENSE">
     <img alt="GitHub" src="https://img.shields.io/github/license/LNReader/lnreader">
   </a>
@@ -30,12 +34,15 @@
 </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/build.gradle

@@ -84,7 +84,6 @@ project.ext.react = [
 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:
@@ -123,6 +122,12 @@ def jscFlavor = 'org.webkit:android-jsc:+'
  */
 def enableHermes = project.ext.react.get("enableHermes", false);
 
+ext {
+    versionMajor = 1
+    versionMinor = 1
+    versionPatch = 14
+}
+
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
 
@@ -135,8 +140,9 @@ android {
         applicationId 'com.rajarsheechatterjee.LNReader'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.1.2"
+        // Generated version code. Supports versions up to 1024.1024.2048
+        versionCode ((((versionMajor << 10) | versionMinor) << 11) | versionPatch)
+        versionName "$versionMajor.$versionMinor.$versionPatch"
     }
     splits {
         abi {
@@ -188,6 +194,10 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+    implementation project(':react-native-lottie-splash-screen')
+    implementation 'com.github.bumptech.glide:glide:4.12.0'
+    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
+    
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
     }

android/app/proguard-rules.pro

@@ -8,3 +8,15 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+-keep class com.facebook.hermes.unicode.** { *; }
+-keep class com.facebook.jni.** { *; }
+-keep public class com.dylanvann.fastimage.* {*;}
+-keep public class com.dylanvann.fastimage.** {*;}
+-keep public class * implements com.bumptech.glide.module.GlideModule
+-keep public class * extends com.bumptech.glide.module.AppGlideModule
+-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
+  **[] $VALUES;
+  public *;
+}

android/app/src/main/AndroidManifest.xml

@@ -1,38 +1,76 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.rajarsheechatterjee.LNReader">
-  <uses-permission android:name="android.permission.INTERNET"/>
-  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-  <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
-  <uses-permission android:name="android.permission.VIBRATE"/>
-  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
-  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
-  <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
-  <uses-permission android:name="android.permission.WAKE_LOCK"/>
-  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
-  <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" 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 xmlns:android="http://schemas.android.com/apk/res/android"
+	package="com.rajarsheechatterjee.LNReader">
+
+	<!-- Internet -->
+	<uses-permission android:name="android.permission.INTERNET" />
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+	<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
+
+	<!-- 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" />
+
+	<queries>
+		<intent>
+			<action android:name="android.intent.action.TTS_SERVICE" />
+		</intent>
+	</queries>
+
+	<application
+		android:name=".MainApplication"
+		android:largeHeap="true"
+		android:label="@string/app_name"
+		android:icon="@mipmap/ic_launcher"
+		android:allowBackup="true"
+		android:theme="@style/AppTheme"
+		android:usesCleartextTraffic="true">
+
+		<meta-data
+			android:name="expo.modules.notifications.default_notification_icon"
+			android:resource="@drawable/notification_icon" />
+
+		<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

@@ -1,19 +1,22 @@
 package com.rajarsheechatterjee.LNReader;
-import android.content.res.Configuration;
-import android.content.Intent;
 
-import android.os.Bundle;
-import android.view.WindowManager;
+import android.content.Intent;
+import android.content.res.Configuration;
+import android.graphics.Color;
 import android.os.Build;
+import android.os.Bundle;
+import android.view.KeyEvent;
+import android.view.View;
+import android.view.Window;
+import android.view.WindowManager;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
+import com.rajarsheechatterjee.VolumeButtonListener.VolumeButtonListener;
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
-import expo.modules.splashscreen.singletons.SplashScreen;
-import expo.modules.splashscreen.SplashScreenImageResizeMode;
-
+import org.devio.rn.splashscreen.SplashScreen;
 
 public class MainActivity extends ReactActivity {
 
@@ -26,20 +29,56 @@ public class MainActivity extends ReactActivity {
         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);
+    @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);
+        SplashScreen.show(this,R.style.SplashScreenTheme, R.id.lottie);
+        SplashScreen.setAnimationFinished(true);
+        super.onCreate(null);
     }
-    super.onCreate(savedInstanceState);
-    SplashScreen.show(this, SplashScreenImageResizeMode.COVER, ReactRootView.class, false);
 
-  }
+    @Override
+    public boolean dispatchKeyEvent(KeyEvent event) {
+        if (VolumeButtonListener.isActive()) {
 
+            int action = event.getAction();
+            int keyCode = event.getKeyCode();
+            switch (keyCode) {
+                case KeyEvent.KEYCODE_VOLUME_UP:
+                    if (action == KeyEvent.ACTION_DOWN) {
+                        // volup
+                        VolumeButtonListener.up();
+                        if (!VolumeButtonListener.prevent)
+                            return super.dispatchKeyEvent(event);
+                    }
+                    return true;
+                case KeyEvent.KEYCODE_VOLUME_DOWN:
+                    if (action == KeyEvent.ACTION_DOWN) {
+                        // voldown
+                        VolumeButtonListener.down();
+                        if (!VolumeButtonListener.prevent)
+                            return super.dispatchKeyEvent(event);
+                    }
+                    return true;
+                default:
+                    return super.dispatchKeyEvent(event);
+            }
+        }
+        return super.dispatchKeyEvent(event);
+    }
 
     /**
      * Returns the name of the main component registered from JavaScript.
@@ -59,4 +98,5 @@ public class MainActivity extends ReactActivity {
             }
         };
     }
+
 }

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

@@ -2,39 +2,30 @@ 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 com.rajarsheechatterjee.VolumeButtonListener.VolumeButtonListenerPackage;
 
-import org.unimodules.adapters.react.ReactAdapterPackage;
 import org.unimodules.adapters.react.ModuleRegistryAdapter;
 import org.unimodules.adapters.react.ReactModuleRegistryProvider;
-import org.unimodules.core.interfaces.Package;
-import org.unimodules.core.interfaces.SingletonModule;
-import expo.modules.constants.ConstantsPackage;
-import expo.modules.permissions.PermissionsPackage;
-import expo.modules.filesystem.FileSystemPackage;
-import expo.modules.updates.UpdatesController;
 
 import com.facebook.react.bridge.JSIModulePackage;
 import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 
 import java.lang.reflect.InvocationTargetException;
-import java.util.Arrays;
 import java.util.List;
-import javax.annotation.Nullable;
+
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 
 public class MainApplication extends Application implements ReactApplication {
   private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(
-    new BasePackageList().getPackageList()
-  );
+      new BasePackageList().getPackageList());
 
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
     @Override
@@ -46,6 +37,8 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       List<ReactPackage> packages = new PackageList(this).getPackages();
       packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
+      packages.add(new com.rajarsheechatterjee.LNReader.NavigationBarColorPackage());
+      packages.add(new VolumeButtonListenerPackage());
       return packages;
     }
 
@@ -58,24 +51,6 @@ public class MainApplication extends Application implements ReactApplication {
     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
@@ -88,15 +63,12 @@ public class MainApplication extends Application implements ReactApplication {
     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
+   * Loads Flipper in React Native templates. Call this in the onCreate method
+   * with something like
    * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    *
    * @param context
@@ -107,9 +79,9 @@ public class MainApplication extends Application implements ReactApplication {
     if (BuildConfig.DEBUG) {
       try {
         /*
-         We use reflection here to pick up the class that initializes Flipper,
-        since Flipper library is not available in release mode
-        */
+         * We use reflection here to pick up the class that initializes Flipper,
+         * since Flipper library is not available in release mode
+         */
         Class<?> aClass = Class.forName("com.rajarsheechatterjee.LNReader.ReactNativeFlipper");
         aClass
             .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)

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

@@ -13,14 +13,14 @@ public class BasePackageList {
         new expo.modules.errorrecovery.ErrorRecoveryPackage(),
         new expo.modules.filesystem.FileSystemPackage(),
         new expo.modules.font.FontLoaderPackage(),
+        new expo.modules.haptics.HapticsPackage(),
         new expo.modules.imageloader.ImageLoaderPackage(),
         new expo.modules.keepawake.KeepAwakePackage(),
         new expo.modules.lineargradient.LinearGradientPackage(),
+        new expo.modules.localization.LocalizationPackage(),
         new expo.modules.notifications.NotificationsPackage(),
         new expo.modules.permissions.PermissionsPackage(),
-        new expo.modules.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/java/com/rajarsheechatterjee/VolumeButtonListener/VolumeButtonListener.java

@@ -0,0 +1,93 @@
+package com.rajarsheechatterjee.VolumeButtonListener;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+
+public class VolumeButtonListener extends ReactContextBaseJavaModule {
+
+    static ReactApplicationContext appContext;
+
+    public VolumeButtonListener(ReactApplicationContext context) {
+        super(context);
+        appContext = context;
+    }
+
+    private static boolean active = false;
+
+    public static boolean isActive() {
+        return active;
+    }
+
+    public static boolean prevent = false;
+
+    public static void sendEvent(boolean up) {
+        if (active) {
+            WritableMap args = Arguments.createMap();
+            if (up)
+                appContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("VolumeUp", args);
+            else
+                appContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("VolumeDown", args);
+        }
+    }
+
+    public static void down() {
+        sendEvent(false);
+    }
+
+    public static void up() {
+        sendEvent(true);
+    }
+
+    @ReactMethod
+    public void connect() {
+        active = true;
+    }
+
+    @ReactMethod
+    void disconnect() {
+        active = false;
+    }
+
+    @ReactMethod
+    public void pause() {
+        active = false;
+    }
+
+    @ReactMethod
+    public void unpause() {
+        active = true;
+    }
+
+    @ReactMethod
+    public void preventDefault() {
+        prevent = true;
+    }
+
+    @ReactMethod
+    public void noPreventDefault() {
+        prevent = false;
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "VolumeButtonListener";
+    }
+
+    @ReactMethod
+    public void addListener(String eventName) {
+        // Keep: Required for RN built in Event Emitter Calls.
+    }
+
+    @ReactMethod
+    public void removeListeners(Integer count) {
+        // Keep: Required for RN built in Event Emitter Calls.
+    }
+}

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

@@ -0,0 +1,30 @@
+package com.rajarsheechatterjee.VolumeButtonListener;
+
+import androidx.annotation.NonNull;
+
+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 VolumeButtonListenerPackage implements ReactPackage {
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<NativeModule>();
+
+        modules.add(new VolumeButtonListener(reactContext));
+
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

android/app/src/main/res/layout/launch_screen.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:layout_gravity="center"
+    android:background="@color/colorPrimaryDark"
+    android:gravity="center"
+    android:orientation="vertical"
+    android:scaleType="centerCrop"
+    android:navigationBarColor="#333333"
+    tools:context=".MainActivity">
+
+    <com.airbnb.lottie.LottieAnimationView
+        android:id="@+id/lottie"
+        android:layout_width="200dp"
+        android:layout_height="200dp"
+        android:layout_gravity="center_horizontal"
+        android:orientation="horizontal"
+        android:paddingLeft="25dp"
+        app:lottie_autoPlay="true"
+        app:lottie_loop="false"
+        app:lottie_rawRes="@raw/loading" />
+</LinearLayout>

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

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

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

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

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

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

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

@@ -8,16 +8,20 @@
     <item name="android:textColor">#000000</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-    <item name="android:navigationBarColor">#000000</item>
-    <item name="android:statusBarColor">#000000</item>
-    
+    <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
+    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
   </style>
-  <style name="Theme.App.SplashScreen" parent="Theme.AppCompat.Light.NoActionBar">
+  <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
+    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
+    <item name="android:windowActionBar">false</item>
+    <item name="android:windowNoTitle">true</item>
+    <item name="android:windowFullscreen">true</item>
+    <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
+</style>
+  <style name="Theme.App.SplashScreen" parent="AppTheme">
     <!-- Below line is handled by '@expo/configure-splash-screen' command and it's discouraged to modify it manually -->
     <!-- Customize your splash screen theme here -->
+    <!-- <item name="icon">@drawable/no_icon</item> -->
     <item name="android:windowBackground">@drawable/splashscreen</item>
-    <item name="android:navigationBarColor">#000000</item>
-    <item name="android:statusBarColor">#000000</item>
-   
   </style>
 </resources>

android/build.gradle

@@ -6,6 +6,7 @@ buildscript {
         minSdkVersion = 21
         compileSdkVersion = 30
         targetSdkVersion = 30
+        ndkVersion = "21.1.6352462"
     }
     repositories {
         google()
@@ -21,6 +22,20 @@ buildscript {
 
 allprojects {
     repositories {
+        exclusiveContent {
+            // We get React Native's Android binaries exclusively through npm,
+            // from a local Maven repo inside node_modules/react-native/.
+            // (The use of exclusiveContent prevents looking elsewhere like Maven Central
+            // and potentially getting a wrong version.)
+            filter {
+                includeGroup "com.facebook.react"
+            }
+            forRepository {
+                maven {
+                    url "$rootDir/../node_modules/react-native/android"
+                }
+            }
+        }
         mavenLocal()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

android/settings.gradle

@@ -6,4 +6,7 @@ includeUnimodulesProjects()
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
 applyNativeModulesSettingsGradle(settings)
 
+include ':react-native-lottie-splash-screen'
+project(':react-native-lottie-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-lottie-splash-screen/android')
+
 include ':app'

app.json

@@ -1,11 +1,11 @@
 {
-    "expo": {
-        "name": "LNReader",
-        "slug": "LNReader",
-        "scheme": "lnreader",
-        "notification": {
-            "icon": "./assets/notification.png",
-            "color": "#00adb5"
-        }
+  "expo": {
+    "name": "LNReader",
+    "slug": "LNReader",
+    "scheme": "lnreader",
+    "notification": {
+      "icon": "./assets/notification.png",
+      "color": "#00adb5"
     }
+  }
 }

babel.config.js

@@ -1,6 +1,26 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          alias: {
+            '@components': './src/components',
+            '@database': './src/database',
+            '@hooks': './src/hooks',
+            '@screens': './src/screens',
+            '@strings': './strings',
+            '@redux': './src/redux',
+            '@services': './src/services',
+            '@sources': './src/sources',
+            '@utils': './src/utils',
+            '@theme': './src/theme',
+          },
+        },
+      ],
+      'react-native-reanimated/plugin',
+    ],
   };
 };

crowdin.yml

@@ -0,0 +1,5 @@
+pull_request_title: 'chore: Update translations'
+commit_message: '[ci skip]'
+files:
+  - source: /strings/languages/en/strings.json
+    translation: /strings/languages/%two_letters_code%/strings.json

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'react-native',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package.json

@@ -1,73 +1,112 @@
 {
-    "scripts": {
-        "start": "react-native start",
-        "android": "react-native run-android",
-        "ios": "react-native run-ios",
-        "web": "expo start --web",
-        "eject": "expo eject"
-    },
-    "dependencies": {
-        "@react-native-async-storage/async-storage": "^1.13.0",
-        "@react-native-community/masked-view": "0.1.10",
-        "@react-native-community/netinfo": "6.0.0",
-        "@react-native-community/slider": "3.0.3",
-        "@react-navigation/material-bottom-tabs": "^5.3.10",
-        "@react-navigation/native": "^5.8.10",
-        "@react-navigation/stack": "^5.12.8",
-        "expo": "^41.0.1",
-        "expo-document-picker": "^9.1.2",
-        "expo-file-system": "~11.0.2",
-        "expo-font": "~9.1.0",
-        "expo-linear-gradient": "~9.1.0",
-        "expo-linking": "~2.2.3",
-        "expo-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",
-        "qs": "^6.10.1",
-        "react": "16.13.1",
-        "react-dom": "16.13.1",
-        "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-fit-image": "^1.5.5",
-        "react-native-gesture-handler": "~1.10.2",
-        "react-native-navigation-bar-color": "^2.0.1",
-        "react-native-pager-view": "^5.1.10",
-        "react-native-paper": "^4.5.0",
-        "react-native-reanimated": "^2.1.0",
-        "react-native-safe-area-context": "3.2.0",
-        "react-native-screens": "~3.0.0",
-        "react-native-swipe-gestures": "^1.0.5",
-        "react-native-tab-view": "^3.0.1",
-        "react-native-unimodules": "~0.13.3",
-        "react-native-vector-icons": "^7.1.0",
-        "react-native-web": "^0.16.5",
-        "react-native-webview": "^11.6.2",
-        "react-redux": "^7.2.2",
-        "redux": "^4.0.5",
-        "redux-persist": "^6.0.0",
-        "redux-thunk": "^2.3.0",
-        "rn-sliding-up-panel": "^2.4.4"
-    },
-    "devDependencies": {
-        "@babel/core": "~7.9.0"
-    },
-    "prettier": {
-        "tabWidth": 4,
-        "semi": true,
-        "singleQuote": false,
-        "quoteProps": "as-needed",
-        "trailingComma": "es5",
-        "bracketSpacing": true,
-        "arrowParens": "always"
-    },
-    "private": true,
-    "name": "lnreader",
-    "version": "1.0.0"
+  "name": "lnreader",
+  "version": "1.1.14",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"",
+    "buildRelease": "cd android && ./gradlew clean && ./gradlew assembleRelease",
+    "open": "open ./android/app/build/outputs/apk/release/",
+    "sources:madara": "node scripts/generateMadaraSource.cjs",
+    "source:generator": "node scripts/generateSource.cjs",
+    "strings": "node scripts/stringTypes.cjs",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "^4.4.5",
+    "@react-native-async-storage/async-storage": "^1.15.11",
+    "@react-native-community/clipboard": "^1.5.1",
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-community/slider": "^4.1.12",
+    "@react-native-cookies/cookies": "^6.2.1",
+    "@react-native-picker/picker": "^2.4.1",
+    "@react-navigation/drawer": "^6.0.1",
+    "@react-navigation/material-bottom-tabs": "^6.0.9",
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/stack": "^6.0.11",
+    "@reduxjs/toolkit": "^1.7.2",
+    "@shopify/flash-list": "^1.2.1",
+    "buffer": "^6.0.3",
+    "cheerio": "^1.0.0-rc.10",
+    "color": "^4.2.3",
+    "dayjs": "^1.11.4",
+    "expo": "^41.0.1",
+    "expo-document-picker": "^9.2.4",
+    "expo-file-system": "~11.0.2",
+    "expo-haptics": "~10.0.0",
+    "expo-keep-awake": "~9.1.2",
+    "expo-linear-gradient": "~9.1.0",
+    "expo-linking": "~2.2.3",
+    "expo-localization": "~10.1.0",
+    "expo-notifications": "~0.11.6",
+    "expo-sqlite": "~9.1.0",
+    "expo-web-browser": "~9.1.0",
+    "i18n-js": "^3.8.0",
+    "lodash": "^4.17.21",
+    "lottie-react-native": "^5.1.4",
+    "prop-types": "^15.7.2",
+    "qs": "^6.10.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "^0.64.3",
+    "react-native-background-actions": "^2.6.5",
+    "react-native-device-info": "^8.4.7",
+    "react-native-easing-gradient": "^1.0.0",
+    "react-native-error-boundary": "^1.1.16",
+    "react-native-fast-image": "^8.5.11",
+    "react-native-gesture-handler": "~2.1.3",
+    "react-native-lottie-splash-screen": "^1.0.1",
+    "react-native-markdown-display": "^7.0.0-alpha.2",
+    "react-native-mmkv": "^2.4.3",
+    "react-native-pager-view": "^5.4.9",
+    "react-native-paper": "^5.1.2",
+    "react-native-reanimated": "^2.13.0",
+    "react-native-render-html": "^6.3.4",
+    "react-native-safe-area-context": "^3.2.0",
+    "react-native-screens": "^3.9.0",
+    "react-native-shimmer-placeholder": "^2.0.9",
+    "react-native-swipe-gestures": "^1.0.5",
+    "react-native-tab-view": "^3.1.1",
+    "react-native-tts": "^4.1.0",
+    "react-native-unimodules": "^0.13.3",
+    "react-native-vector-icons": "^9.0.0",
+    "react-native-webview": "^11.14.3",
+    "react-redux": "^7.2.6",
+    "redux": "^4.1.2",
+    "redux-persist": "^6.0.0",
+    "rn-fetch-blob": "^0.12.0",
+    "sanitize-html": "^2.7.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@react-native-community/eslint-config": "^3.0.1",
+    "@types/color": "^3.0.3",
+    "@types/i18n-js": "^3.8.2",
+    "@types/jest": "^27.4.0",
+    "@types/lodash": "^4.14.179",
+    "@types/react-native": "^0.66.15",
+    "@types/react-native-vector-icons": "^6.4.10",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/sanitize-html": "^2.6.2",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react-native": "^3.11.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "typescript": "^4.5.5"
+  },
+  "resolutions": {
+    "@types/react": "^17"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --check"
+    ]
+  }
 }

react-native-congfig.js

@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ['./assets/fonts/'],
+};

scripts/generateMadaraSource.cjs

@@ -0,0 +1,79 @@
+const path = require('path');
+const fs = require('fs');
+const prettier = require('prettier');
+const prettierConfig = require('../.prettierrc');
+
+const MadaraSources = require('../src/sources/multisrc/madara/MadaraSources.json');
+const AllSources = require('../src/sources/sources.json');
+
+const getScraperName = scraperName => {
+  let name = scraperName
+    .replace(/\s+/g, '')
+    .replace(/-/g, 'Dash')
+    .replace(/\./g, 'Dot')
+    .replace('1st', 'First');
+
+  return name;
+};
+
+let content =
+  "/**\n * This file is auto-generated\n */\n\nimport MadaraScraper from './MadaraScraper';\n\n";
+
+MadaraSources.forEach(source => {
+  content =
+    content +
+    `export const ${getScraperName(
+      source.sourceName,
+    )}Scraper = new MadaraScraper(${source.sourceId}, "${source.baseUrl}", "${
+      source.sourceName
+    }", ${source.options ? JSON.stringify(source.options) : ''});\n\n`;
+});
+
+content = prettier.format(content, {
+  parser: 'typescript',
+  ...prettierConfig,
+});
+
+fs.writeFile(
+  path.resolve(process.cwd(), 'src/sources/multisrc/madara/MadaraGenerator.ts'),
+  content,
+  error => {
+    if (error) {
+      console.log(error);
+    }
+  },
+);
+
+MadaraSources.forEach(madaraSource => {
+  if (!AllSources.some(source => source.sourceId === madaraSource.sourceId)) {
+    let allSourcesContent = AllSources;
+
+    allSourcesContent.push({
+      sourceId: madaraSource.sourceId,
+      sourceName: madaraSource.sourceName,
+      icon: `https://github.com/LNReader/lnreader-sources/blob/main/multisrc/madara/icons/${madaraSource.sourceName
+        .replace(/\s+/g, '')
+        .toLowerCase()}.png?raw=true`,
+      url: madaraSource.baseUrl,
+      lang: madaraSource.options.lang || 'English',
+    });
+
+    allSourcesContent = JSON.stringify(allSourcesContent);
+
+    allSourcesContent = prettier.format(allSourcesContent, {
+      parser: 'json5',
+      quoteProps: 'preserve',
+      trailingComma: 'none',
+    });
+
+    fs.writeFile(
+      path.resolve(process.cwd(), 'src/sources/sources.json'),
+      allSourcesContent,
+      error => {
+        if (error) {
+          console.log(error);
+        }
+      },
+    );
+  }
+});

scripts/generateSource.cjs

@@ -0,0 +1,328 @@
+/**
+ * This script can be used to generate sources
+ */
+
+const fs = require('fs');
+const path = require('path');
+const prettier = require('prettier');
+const prettierConfig = require('../.prettierrc');
+
+const AllSources = require('../src/sources/sources.json');
+
+const getLanguageCode = language => {
+  const codes = {
+    English: 'en',
+    Arabic: 'ar',
+    French: 'fr',
+    Turkish: 'tr',
+    Chinese: 'cn',
+    Japanese: 'jp',
+    Vietnamese: 'vi',
+  };
+
+  return codes[language];
+};
+
+try {
+  if (process.argv[2]) {
+    const source = JSON.parse(
+      fs.readFileSync(path.resolve(process.cwd(), process.argv[2]), 'utf8'),
+    );
+
+    const isDuplicate = AllSources.some(
+      item => item.sourceId === source.sourceId,
+    );
+
+    const content = `
+    import * as cheerio from 'cheerio';
+    import { isUrlAbsolute } from '../../utils/isAbsoluteUrl';
+    ${
+      source?.options?.imports?.toaster
+        ? "import { showToast } from '../../hooks/showToast'"
+        : ''
+    };
+    import {
+      SourceChapter,
+      SourceChapterItem,
+      SourceNovel,
+      SourceNovelItem,
+    } from '../types';
+    
+    const sourceId = ${source.sourceId};
+    const sourceName = "${source.sourceName}";
+    const baseUrl = "${source.baseUrl}";
+    
+    ${
+      !source.popularNovels.url.includes('${page}')
+        ? '// eslint-disable-next-line @typescript-eslint/no-unused-vars'
+        : ''
+    }
+    const popularNovels = async (page: number) => {
+      const totalPages = ${source.popularNovels.totalPages};
+      const url = \`${source.popularNovels.url}\`;
+    
+      const result = await fetch(url);
+      const body = await result.text();
+    
+      const loadedCheerio = cheerio.load(body);
+    
+      const novels: SourceNovelItem[] = [];
+    
+      loadedCheerio('${
+        source.popularNovels.selectors.novelList
+      }').each(function () {
+        let novelUrl = loadedCheerio(this).find('${
+          source.popularNovels.selectors.novelUrl
+        }').attr('href');
+    
+        if (novelUrl && !isUrlAbsolute(novelUrl)) {
+          novelUrl = baseUrl + novelUrl;
+        }
+    
+        if (novelUrl) {
+          const novelName = loadedCheerio(this).find('${
+            source.popularNovels.selectors.novelName
+          }').text().trim();
+          let novelCover = loadedCheerio(this).find('${
+            source.popularNovels.selectors.novelCover
+          }').attr('src');
+    
+          if (novelCover && !isUrlAbsolute(novelCover)) {
+            novelCover = baseUrl + novelCover;
+          }
+    
+          const novel = {
+            sourceId,
+            novelUrl,
+            novelName,
+            novelCover,
+          };
+    
+          novels.push(novel);
+        }
+      });
+    
+      return { totalPages, novels };
+    };
+    
+    const parseNovelAndChapters = async (novelUrl: string) => {
+      const url = novelUrl;
+    
+      const result = await fetch(url);
+      const body = await result.text();
+    
+      let loadedCheerio = cheerio.load(body);
+    
+      const novel: SourceNovel = {
+        sourceId,
+        sourceName,
+        url: novelUrl,
+        novelUrl,
+        chapters: [],
+      };
+    
+      novel.novelName = loadedCheerio('${
+        source.novelAndChapters.selectors.novelName
+      }').text();
+    
+      let novelCover = loadedCheerio('${
+        source.novelAndChapters.selectors.novelCover
+      }').attr('src');
+    
+      novel.novelCover = novelCover
+        ? isUrlAbsolute(novelCover)
+          ? novelCover
+          : baseUrl + novelCover
+        : undefined;
+    
+      novel.summary = loadedCheerio('${
+        source.novelAndChapters.selectors.summary
+      }').text().trim();
+    
+      novel.author = loadedCheerio('${
+        source.novelAndChapters.selectors.author
+      }').text().trim();
+    
+      novel.genre = loadedCheerio('${
+        source.novelAndChapters.selectors.genre
+      }').text().trim()${source?.options?.status?.replace || ''};
+
+    
+      novel.status = loadedCheerio('${
+        source.novelAndChapters.selectors.status
+      }').text().trim();
+    
+      loadedCheerio('${
+        source.novelAndChapters.selectors.chapterList
+      }').each(function () {
+        let chapterUrl = loadedCheerio(this).find('a').attr('href');
+    
+        if (chapterUrl && !isUrlAbsolute(chapterUrl)) {
+          chapterUrl = baseUrl + chapterUrl;
+        }
+    
+        if (chapterUrl) {
+          const chapterName = loadedCheerio(this).find('${
+            source.novelAndChapters.selectors.chapterName
+          }').text().trim();
+          const releaseDate = ${
+            source.novelAndChapters.selectors.releaseDate
+              ? `loadedCheerio(this).find('${source.novelAndChapters.selectors.releaseDate}').text();`
+              : null
+          }
+    
+          const chapter: SourceChapterItem = {
+            chapterName,
+            releaseDate,
+            chapterUrl,
+          };
+    
+          novel.chapters?.push(chapter);
+        }
+      });
+    
+      return novel;
+    };
+    
+    const parseChapter = async (novelUrl: string, chapterUrl: string) => {
+      const url = chapterUrl;
+    
+      const result = await fetch(url);
+      const body = await result.text();
+    
+      const loadedCheerio = cheerio.load(body);
+    
+      const chapterName = loadedCheerio('${
+        source.chapter.selectors.chapterName
+      }').text();
+      const chapterText = loadedCheerio('${
+        source.chapter.selectors.chapterText
+      }').html() || '';
+    
+      const chapter: SourceChapter = {
+        sourceId,
+        novelUrl,
+        chapterUrl,
+        chapterName,
+        chapterText,
+      };
+    
+      return chapter;
+    };
+    
+    ${
+      !source.search.url.includes('${searchTerm}')
+        ? '// eslint-disable-next-line @typescript-eslint/no-unused-vars'
+        : ''
+    }
+    const searchNovels = async (searchTerm: string) => {
+    ${
+      source.search
+        ? `
+      const url = \`${source.search.url}\`;
+    
+      const result = await fetch(url);
+      const body = await result.text();
+    
+      const loadedCheerio = cheerio.load(body);
+    
+      const novels: SourceNovelItem[] = [];
+    
+      loadedCheerio('${source.search.selectors.novelList}').each(function () {
+        let novelUrl = loadedCheerio(this).find('${source.search.selectors.novelUrl}').attr('href');
+
+        if (novelUrl && !isUrlAbsolute(novelUrl)) {
+          novelUrl = baseUrl + novelUrl;
+        }
+  
+        if (novelUrl) {
+          const novelName = loadedCheerio(this).find('${source.search.selectors.novelName}').text();
+          let novelCover = loadedCheerio(this).find('${source.search.selectors.novelCover}').attr('src');
+    
+          if (novelCover && !isUrlAbsolute(novelCover)) {
+            novelCover = baseUrl + novelCover;
+          }
+    
+          novels.push({
+            sourceId,
+            novelUrl,
+            novelName,
+            novelCover,
+          });
+        }
+      });
+    
+      return novels;`
+        : `
+      showToast('${source.sourceName}: Search is not available in this source')
+      
+      return [];
+      `
+    }
+    };
+    
+    const ${source.sourceName}Scraper = {
+      popularNovels,
+      parseNovelAndChapters,
+      parseChapter,
+      searchNovels,
+    };
+    
+    export default ${source.sourceName}Scraper;
+    
+    `;
+
+    const formatContent = prettier.format(content, {
+      parser: 'typescript',
+      ...prettierConfig,
+    });
+
+    fs.writeFile(
+      path.resolve(
+        process.cwd(),
+        `src/sources/${getLanguageCode(source.lang)}/${source.sourceName}.ts`,
+      ),
+      formatContent,
+      error => {
+        if (error) {
+          console.log(error);
+        }
+      },
+    );
+
+    if (!isDuplicate) {
+      let allSourcesContent = AllSources;
+
+      allSourcesContent.push({
+        sourceId: source.sourceId,
+        sourceName: source.sourceName,
+        icon: `https://github.com/LNReader/lnreader-sources/blob/main/src/${getLanguageCode(
+          source.lang,
+        )}/${source.sourceName.toLowerCase()}/icon.png?raw=true`,
+        url: source.baseUrl,
+        lang: source.lang || 'English',
+      });
+
+      allSourcesContent = prettier.format(JSON.stringify(allSourcesContent), {
+        parser: 'json',
+        ...prettierConfig,
+      });
+
+      fs.writeFile(
+        path.resolve(process.cwd(), 'src/sources/sources.json'),
+        allSourcesContent,
+        error => {
+          if (error) {
+            console.log(error);
+          }
+        },
+      );
+    } else {
+      console.log('Source with same id already exists');
+    }
+  } else {
+    console.log('Template path not provided');
+  }
+} catch (e) {
+  console.log(e);
+}

scripts/stringTypes.cjs

@@ -0,0 +1,44 @@
+const fs = require('fs');
+const path = require('path');
+const prettier = require('prettier');
+const prettierConfig = require('../.prettierrc');
+
+const flatten = (obj, target, prefix) => {
+  (target = target || {}), (prefix = prefix || '');
+
+  Object.keys(obj).forEach(function (key) {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      flatten(obj[key], target, prefix + key + '.');
+    } else {
+      return (target[prefix + key] = 'string');
+    }
+  });
+
+  return target;
+};
+
+const strings = fs.readFileSync(
+  path.resolve(process.cwd(), 'strings/languages/en/strings.json'),
+  'utf8',
+);
+
+const stringTypes = `/**\n * This file is auto-generated\n */\n\n
+
+export interface StringMap ${JSON.stringify(flatten(JSON.parse(strings)))}
+
+`;
+
+const formatContent = prettier.format(stringTypes, {
+  parser: 'typescript',
+  ...prettierConfig,
+});
+
+fs.writeFile(
+  path.resolve(process.cwd(), 'strings/types/index.ts'),
+  formatContent,
+  err => {
+    if (err) {
+      console.log(err);
+    }
+  },
+);

src/components/Actionbar/Actionbar.js

@@ -1,42 +0,0 @@
-import React from "react";
-import { Dimensions, StyleSheet, View } from "react-native";
-
-import { IconButton } from "react-native-paper";
-
-export const Actionbar = ({ actions, theme }) => {
-    return (
-        <View
-            style={[
-                styles.actionbarContainer,
-                { backgroundColor: theme.colorPrimary },
-            ]}
-        >
-            {actions.map(
-                (action, index) =>
-                    action.icon && (
-                        <IconButton
-                            key={index}
-                            icon={action.icon}
-                            color={theme.textColorPrimary}
-                            onPress={action.onPress}
-                        />
-                    )
-            )}
-        </View>
-    );
-};
-
-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/Actionbar/Actionbar.tsx

@@ -0,0 +1,88 @@
+import { useTheme } from '@hooks/useTheme';
+import React from 'react';
+import {
+  Dimensions,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewProps,
+} from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import color from 'color';
+
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { overlay } from 'react-native-paper';
+
+type Action = {
+  icon: string;
+  onPress: () => void;
+};
+
+interface ActionbarProps {
+  active: boolean;
+  actions: Action[];
+  viewStyle?: StyleProp<ViewProps>;
+}
+
+export const Actionbar: React.FC<ActionbarProps> = ({
+  active,
+  actions,
+  viewStyle,
+}) => {
+  const theme = useTheme();
+
+  const { bottom } = useSafeAreaInsets();
+
+  if (active) {
+    return (
+      <View
+        style={[
+          styles.actionbarContainer,
+          {
+            backgroundColor: theme.isDark
+              ? overlay(2, theme.surface)
+              : theme.secondaryContainer,
+            minHeight: 80 + bottom,
+            paddingBottom: bottom,
+          },
+          viewStyle,
+        ]}
+      >
+        {actions.map(({ icon, onPress }, id) => (
+          <Pressable
+            key={id}
+            android_ripple={{
+              radius: 50,
+              color: color(theme.primary).alpha(0.12).string(),
+              borderless: true,
+            }}
+            onPress={onPress}
+          >
+            <MaterialCommunityIcons
+              name={icon}
+              color={theme.onSurface}
+              size={24}
+            />
+          </Pressable>
+        ))}
+      </View>
+    );
+  } else {
+    return null;
+  }
+};
+
+const styles = StyleSheet.create({
+  actionbarContainer: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    bottom: 0,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    elevation: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+});

src/components/AppErrorBoundary/AppErrorBoundary.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { StyleSheet, View, Text, StatusBar } from 'react-native';
+import ErrorBoundary from 'react-native-error-boundary';
+
+import { Button, List } from '@components';
+import { useTheme } from '@hooks';
+import { ButtonVariation } from '@components/Button/Button';
+
+interface ErrorFallbackProps {
+  error: Error;
+  resetError: () => void;
+}
+
+export const ErrorFallback: React.FC<ErrorFallbackProps> = ({
+  error,
+  resetError,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <View style={[styles.mainCtn, { backgroundColor: theme.background }]}>
+      <StatusBar translucent={true} backgroundColor="transparent" />
+      <View style={styles.errorInfoCtn}>
+        <Text style={[styles.errorTitle, { color: theme.onSurface }]}>
+          An Unexpected Error Ocurred
+        </Text>
+        <Text style={[styles.errorDesc, { color: theme.onSurface }]}>
+          The application ran into an unexpected error. We suggest you
+          screenshot this message and then share it in our support channel on
+          Discord.
+        </Text>
+        <Text
+          style={[
+            styles.errorCtn,
+            {
+              backgroundColor: theme.surfaceVariant,
+              color: theme.onSurfaceVariant,
+            },
+          ]}
+          numberOfLines={20}
+        >
+          {`${error.message}\n\n${error.stack}`}
+        </Text>
+      </View>
+      <List.Divider theme={theme} />
+      <Button
+        variation={ButtonVariation.DEFAULT}
+        onPress={resetError}
+        title={'Restart the application'}
+        style={styles.buttonCtn}
+        theme={theme}
+      />
+    </View>
+  );
+};
+
+interface AppErrorBoundaryProps {
+  children: React.ReactNode | React.ReactElement;
+}
+
+const AppErrorBoundary: React.FC<AppErrorBoundaryProps> = ({ children }) => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+  );
+};
+
+export default AppErrorBoundary;
+
+const styles = StyleSheet.create({
+  mainCtn: {
+    flex: 1,
+  },
+  errorInfoCtn: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 16,
+  },
+  buttonCtn: {
+    margin: 16,
+    marginBottom: 32,
+  },
+  errorTitle: {
+    marginBottom: 8,
+    textAlign: 'center',
+    fontSize: 20,
+  },
+  errorDesc: {
+    lineHeight: 20,
+    marginVertical: 8,
+  },
+  errorCtn: {
+    borderRadius: 8,
+    lineHeight: 20,
+    marginVertical: 16,
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+  },
+});

src/components/Appbar.js

@@ -1,24 +0,0 @@
-import React from "react";
-
-import { Appbar as MaterialAppbar } from "react-native-paper";
-
-import { useTheme } from "../hooks/reduxHooks";
-
-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>
-    );
-};

src/components/Appbar/Appbar.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StatusBar } from 'react-native';
+
+import { Appbar as PaperAppbar } from 'react-native-paper';
+import { MD3ThemeType } from '../../theme/types';
+
+interface AppbarProps {
+  title: string;
+  handleGoBack: () => void;
+  theme: MD3ThemeType;
+  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
+}
+
+const Appbar: React.FC<AppbarProps> = ({
+  title,
+  handleGoBack,
+  theme,
+  mode = 'large',
+  children,
+}) => (
+  <PaperAppbar.Header
+    style={{ backgroundColor: theme.surface }}
+    statusBarHeight={StatusBar.currentHeight}
+    mode={mode}
+  >
+    {handleGoBack && (
+      <PaperAppbar.BackAction
+        onPress={handleGoBack}
+        iconColor={theme.textColorPrimary}
+      />
+    )}
+    <PaperAppbar.Content
+      title={title}
+      titleStyle={{ color: theme.textColorPrimary }}
+    />
+    {children}
+  </PaperAppbar.Header>
+);
+
+export default Appbar;

src/components/BottomSheet/BottomSheet.tsx

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

src/components/BottomSheetHandle.js

@@ -1,17 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-
-const BottomSheetHandle = ({ theme }) => (
-    <View
-        style={{
-            backgroundColor: "rgba(255,255,255,0.4)",
-            height: 4,
-            width: 40,
-            borderRadius: 50,
-            top: 8,
-            alignSelf: "center",
-        }}
-    />
-);
-
-export default BottomSheetHandle;

src/components/Button/Button.tsx

@@ -0,0 +1,105 @@
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+import React, { useMemo } from 'react';
+import color from 'color';
+
+import { MD3ThemeType } from '../../theme/types';
+
+export enum ButtonVariation {
+  DEFAULT = 'default',
+  OUTLINED = 'outlined',
+  CLEAR = 'clear',
+}
+
+interface Props {
+  variation?: ButtonVariation;
+  title: string;
+  textColor?: string;
+  onPress?: () => void;
+  theme: MD3ThemeType;
+  style?: ViewStyle;
+  labelStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+}
+
+const Button: React.FC<Props> = ({
+  variation = ButtonVariation.DEFAULT,
+  title,
+  textColor,
+  onPress,
+  theme,
+  style,
+  disabled,
+  labelStyle,
+}) => {
+  const textStyles: StyleProp<TextStyle> = useMemo(
+    () => ({
+      color: disabled
+        ? theme.textColorHint
+        : textColor
+        ? textColor
+        : variation === ButtonVariation.OUTLINED
+        ? theme.primary
+        : variation === ButtonVariation.CLEAR
+        ? theme.primary
+        : theme.onSecondary,
+    }),
+    [],
+  );
+
+  return (
+    <View
+      style={[
+        styles.button,
+        variation === ButtonVariation.OUTLINED
+          ? {
+              ...styles.outlined,
+              borderColor: theme.textColorHint,
+            }
+          : variation !== ButtonVariation.CLEAR && {
+              backgroundColor: theme.secondary,
+            },
+        style,
+      ]}
+    >
+      <Pressable
+        style={styles.pressable}
+        onPress={onPress}
+        android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+        disabled={disabled}
+      >
+        <Text style={[textStyles, labelStyle]} numberOfLines={1}>
+          {title}
+        </Text>
+      </Pressable>
+    </View>
+  );
+};
+
+export default Button;
+
+const styles = StyleSheet.create({
+  button: {
+    minHeight: 40,
+    justifyContent: 'center',
+    borderRadius: 50,
+    overflow: 'hidden',
+  },
+  pressable: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 24,
+  },
+  outlined: {
+    borderWidth: 1,
+  },
+});

src/components/Checkbox/Checkbox.js

@@ -1,73 +0,0 @@
-import React from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-
-import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
-
-export const Checkbox = ({ label, status, onPress, theme }) => (
-    <View
-        style={[
-            styles.checkboxContainer,
-            status && { backgroundColor: theme.rippleColor },
-        ]}
-    >
-        <Pressable
-            android_ripple={{ color: theme.rippleColor }}
-            style={styles.pressable}
-            onPress={onPress}
-        >
-            <Text style={{ color: theme.textColorPrimary }}>{label}</Text>
-            {status && (
-                <MaterialCommunityIcons
-                    name="check"
-                    color={theme.colorAccent}
-                    size={21}
-                    style={styles.icon}
-                />
-            )}
-        </Pressable>
-    </View>
-);
-
-export const SortItem = ({ label, status, onPress, theme }) => (
-    <View
-        style={[
-            styles.checkboxContainer,
-            status && { backgroundColor: theme.rippleColor },
-        ]}
-    >
-        <Pressable
-            android_ripple={{ color: theme.rippleColor }}
-            style={styles.pressable}
-            onPress={onPress}
-        >
-            <Text style={{ color: theme.textColorPrimary }}>{label}</Text>
-            {status && (
-                <MaterialCommunityIcons
-                    name={status === "asc" ? "arrow-up" : "arrow-down"}
-                    color={theme.colorAccent}
-                    size={21}
-                    style={styles.icon}
-                />
-            )}
-        </Pressable>
-    </View>
-);
-
-const styles = StyleSheet.create({
-    checkboxContainer: {
-        borderRadius: 8,
-        overflow: "hidden",
-        marginVertical: 4,
-    },
-    pressable: {
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        flexDirection: "row",
-        justifyContent: "space-between",
-    },
-    icon: {
-        position: "absolute",
-        right: 16,
-        alignSelf: "center",
-    },
-});

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import { Checkbox as PaperCheckbox } from 'react-native-paper';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import color from 'color';
+
+import { MD3ThemeType } from '../../theme/types';
+
+interface CheckboxProps {
+  label: string;
+  status: boolean | 'indeterminate';
+  onPress?: () => void;
+  disabled?: boolean;
+  theme: MD3ThemeType;
+  viewStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+  status,
+  theme,
+  disabled,
+  onPress,
+  viewStyle,
+  labelStyle,
+}) => (
+  <Pressable
+    android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+    style={[styles.pressable, viewStyle]}
+    onPress={onPress}
+    disabled={disabled}
+  >
+    <PaperCheckbox
+      status={
+        status === 'indeterminate'
+          ? 'indeterminate'
+          : status
+          ? 'checked'
+          : 'unchecked'
+      }
+      onPress={onPress}
+      color={theme.primary}
+      theme={{
+        colors: { disabled: theme.textColorSecondary },
+      }}
+      uncheckedColor={theme.textColorSecondary}
+      disabled={disabled}
+    />
+    <Text style={[styles.defaultLabel, { color: theme.onSurface }, labelStyle]}>
+      {label}
+    </Text>
+  </Pressable>
+);
+
+export const SortItem = ({ label, status, onPress, theme }) => (
+  <Pressable
+    android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+    style={[styles.pressable, { paddingVertical: 16, paddingLeft: 64 }]}
+    onPress={onPress}
+  >
+    {status && (
+      <MaterialCommunityIcons
+        name={status === 'asc' ? 'arrow-up' : 'arrow-down'}
+        color={theme.primary}
+        size={21}
+        style={styles.icon}
+      />
+    )}
+    <Text style={{ color: theme.onSurface }}>{label}</Text>
+  </Pressable>
+);
+
+const styles = StyleSheet.create({
+  pressable: {
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    position: 'absolute',
+    left: 24,
+    alignSelf: 'center',
+  },
+  defaultLabel: {
+    marginLeft: 12,
+  },
+});

src/components/Chip/Chip.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import color from 'color';
+
+import { MD3ThemeType } from '../../theme/types';
+import { overlay } from 'react-native-paper';
+
+interface ChipProps {
+  label: string;
+  theme: MD3ThemeType;
+}
+
+const Chip: React.FC<ChipProps> = ({ label, theme }) => (
+  <View
+    style={[
+      styles.chipContainer,
+      {
+        backgroundColor: theme.isDark
+          ? overlay(1, theme.surface)
+          : theme.secondaryContainer,
+      },
+    ]}
+  >
+    <Pressable
+      android_ripple={{ color: color(theme.primary).alpha(0.12).string() }}
+      style={styles.pressable}
+    >
+      <Text
+        style={[
+          styles.label,
+          {
+            color: theme.isDark ? theme.onSurface : theme.onSecondaryContainer,
+          },
+        ]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  </View>
+);
+
+export default Chip;
+
+const styles = StyleSheet.create({
+  chipContainer: {
+    overflow: 'hidden',
+    borderRadius: 8,
+    height: 32,
+    marginRight: 8,
+  },
+  pressable: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  label: {
+    fontSize: 12,
+  },
+});

src/components/ColorPickerModal.js

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

src/components/ColorPickerModal/ColorPickerModal.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { Modal, overlay, Portal, TextInput } from 'react-native-paper';
+import { MD3ThemeType } from '../../theme/types';
+
+interface ColorPickerModalProps {
+  visible: boolean;
+  title: string;
+  color: string;
+  onSubmit: (val: string) => void;
+  closeModal: () => void;
+  theme: MD3ThemeType;
+  showAccentColors?: boolean;
+}
+
+const ColorPickerModal: React.FC<ColorPickerModalProps> = ({
+  theme,
+  color,
+  title,
+  onSubmit,
+  closeModal,
+  visible,
+  showAccentColors,
+}) => {
+  const [text, setText] = useState<string>(color);
+  const [error, setError] = useState<string | null>();
+
+  const onDismiss = () => {
+    closeModal();
+    if (error) {
+      setText(color);
+    }
+    setError(null);
+  };
+
+  const onChangeText = (txt: string) => setText(txt);
+
+  const onSubmitEditing = () => {
+    const re = /^#([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3})$/i;
+
+    if (text.match(re)) {
+      onSubmit(text);
+      closeModal();
+    } else {
+      setError('Enter a valid hex color code');
+    }
+  };
+
+  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={visible}
+        onDismiss={onDismiss}
+        contentContainerStyle={[
+          styles.modalContainer,
+          { backgroundColor: overlay(2, theme.surface) },
+        ]}
+      >
+        <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);
+                    closeModal();
+                  }}
+                />
+              </View>
+            )}
+          />
+        ) : null}
+        <TextInput
+          value={text}
+          defaultValue={typeof color === 'string' ? color : ''}
+          placeholder="Hex Color Code (E.g. #3399FF)"
+          onChangeText={onChangeText}
+          onSubmitEditing={onSubmitEditing}
+          mode="outlined"
+          theme={{ colors: { ...theme } }}
+          underlineColor={theme.textColorHint}
+          dense
+          error={Boolean(error)}
+        />
+        <Text style={styles.errorText}>{error}</Text>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default ColorPickerModal;
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    margin: 30,
+    padding: 24,
+    borderRadius: 28,
+  },
+  modalTitle: {
+    fontSize: 24,
+    marginBottom: 16,
+  },
+  errorText: {
+    color: '#FF0033',
+    paddingTop: 8,
+  },
+});

src/components/ColorPreferenceItem/ColorPreferenceItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { ThemeType } from '../../theme/types';
+
+interface ColorPreferenceItemProps {
+  label: string;
+  description?: string;
+  onPress: () => void;
+  theme: ThemeType;
+}
+
+const ColorPreferenceItem: React.FC<ColorPreferenceItemProps> = ({
+  label,
+  description,
+  theme,
+  onPress,
+}) => (
+  <Pressable
+    style={styles.container}
+    android_ripple={{ color: theme.rippleColor }}
+    onPress={onPress}
+  >
+    <View>
+      <Text style={[styles.label, { color: theme.textColorPrimary }]}>
+        {label}
+      </Text>
+      <Text style={{ color: theme.textColorSecondary }}>
+        {description?.toUpperCase?.()}
+      </Text>
+    </View>
+    <View style={[{ backgroundColor: description }, styles.colorPreview]} />
+  </Pressable>
+);
+
+export default ColorPreferenceItem;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: 16,
+  },
+  colorPreview: {
+    height: 24,
+    width: 24,
+    borderRadius: 50,
+    marginRight: 16,
+  },
+});

src/components/Common.js

@@ -1,21 +1,32 @@
-import React from "react";
-import { View, Text, Image, StyleSheet } from "react-native";
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-const ScreenContainer = ({ children, theme }) => (
-    <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
-        {children}
+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>
+const Row = ({ children, style = {} }) => (
+  <View style={[styles.row, style]}>{children}</View>
 );
 
 export { ScreenContainer, Row };
 
 const styles = StyleSheet.create({
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-    },
+  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

@@ -1,72 +0,0 @@
-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>
-);