Release v1.0.19

* Refactor

* Add migration

* Finish migration

* Add progress bar

App.js

@@ -1,55 +1,34 @@
-import React, { useState, useEffect } from "react";
-import { StatusBar } from "expo-status-bar";
-import { NavigationContainer } from "@react-navigation/native";
-import * as Font from "expo-font";
-import AppLoading from "expo-app-loading";
+import React, { useEffect } from "react";
+import { useFonts } from "expo-font";
+import { Provider as PaperProvider } from "react-native-paper";
+import Main from "./src/Navigators/Main";
 
-import Router from "./src/navigation/Router";
-
-// Redux
 import { Provider } from "react-redux";
 import { persistor, store } from "./src/redux/store";
 import { PersistGate } from "redux-persist/lib/integration/react";
-import { createDB, deleteDb } from "./src/database/DBHelper";
-
-const getFonts = () =>
-    Font.loadAsync({
-        "pt-sans-bold": require("./assets/fonts/PTSansNarrow-Bold.ttf"),
-        "arbutus-slab": require("./assets/fonts/ArbutusSlab-Regular.ttf"),
-        domine: require("./assets/fonts/Domine-VariableFont_wght.ttf"),
-        lato: require("./assets/fonts/Lato-Regular.ttf"),
-        "noto-sans": require("./assets/fonts/NotoSans-Regular.ttf"),
-        "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
-        "pt-serif": require("./assets/fonts/PTSerif-Regular.ttf"),
-    });
+import { createDB, deleteDb } from "./src/Database/DBHelper";
+import { fonts } from "./src/Theme/fonts";
 
 const App = () => {
-    const [fontsLoaded, setFontsLoaded] = useState(false);
+    const [loaded] = useFonts(fonts);
 
     useEffect(() => {
         createDB();
     }, []);
 
-    if (fontsLoaded) {
-        return (
-            <Provider store={store}>
-                <PersistGate loading={null} persistor={persistor}>
-                    <StatusBar />
-                    <NavigationContainer>
-                        <Router />
-                    </NavigationContainer>
-                </PersistGate>
-            </Provider>
-        );
-    } else {
-        return (
-            <AppLoading
-                startAsync={getFonts}
-                onError={() => warn(error)}
-                onFinish={() => setFontsLoaded(true)}
-            />
-        );
+    if (!loaded) {
+        return null;
     }
+
+    return (
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <PaperProvider>
+                    <Main />
+                </PaperProvider>
+            </PersistGate>
+        </Provider>
+    );
 };
 
 export default App;

app.json

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

package.json

@@ -8,49 +8,56 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.13.2",
+    "@react-native-async-storage/async-storage": "^1.13.0",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-native-community/netinfo": "^5.9.7",
-    "@react-native-community/slider": "^3.0.3",
+    "@react-native-community/netinfo": "6.0.0",
+    "@react-native-community/slider": "3.0.3",
     "@react-navigation/material-bottom-tabs": "^5.3.10",
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
-    "expo": "~40.0.0",
-    "expo-app-loading": "^1.0.1",
-    "expo-font": "^8.4.0",
-    "expo-linear-gradient": "^8.4.0",
-    "expo-sharing": "~8.5.0",
-    "expo-sqlite": "~8.5.0",
-    "expo-status-bar": "~1.0.3",
-    "expo-web-browser": "~8.6.0",
+    "expo": "^41.0.1",
+    "expo-background-fetch": "~9.1.0",
+    "expo-document-picker": "^9.1.2",
+    "expo-file-system": "~11.0.2",
+    "expo-font": "~9.1.0",
+    "expo-linear-gradient": "~9.1.0",
+    "expo-linking": "~2.2.3",
+    "expo-notifications": "~0.11.6",
+    "expo-permissions": "^12.0.1",
+    "expo-sharing": "~9.1.2",
+    "expo-speech": "~9.1.0",
+    "expo-sqlite": "~9.1.0",
+    "expo-status-bar": "~1.0.4",
+    "expo-task-manager": "~9.1.0",
+    "expo-web-browser": "~9.1.0",
     "moment": "^2.29.1",
     "qs": "^6.10.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
     "react-native-collapsible-header-views": "^1.1.2",
-    "react-native-gesture-handler": "^1.8.0",
-    "react-native-inappbrowser-reborn": "^3.5.1",
+    "react-native-easing-gradient": "^0.1.2",
+    "react-native-fit-image": "^1.5.5",
+    "react-native-gesture-handler": "~1.10.2",
     "react-native-offline": "^5.7.0",
     "react-native-paper": "^4.5.0",
-    "react-native-picker-scrollview": "^1.0.1",
-    "react-native-reanimated": "^1.13.2",
-    "react-native-safe-area-context": "3.1.9",
-    "react-native-screens": "~2.15.0",
+    "react-native-reanimated": "~2.1.0",
+    "react-native-safe-area-context": "3.2.0",
+    "react-native-screens": "~3.0.0",
+    "react-native-tab-view": "^3.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-web": "~0.13.12",
-    "react-native-webview": "11.0.0",
+    "react-native-webview": "11.2.3",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.9",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
-    "reflect-metadata": "^0.1.13",
-    "rn-sliding-up-panel": "^2.4.4"
+    "rn-sliding-up-panel": "^2.4.4",
+    "react-native-pager-view": "5.0.12"
   },
   "devDependencies": {
-    "@babel/core": "~7.9.0",
-    "@types/node": "^14.14.35"
+    "@babel/core": "~7.9.0"
   },
   "private": true
 }

src/Components/Appbar.js

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

src/Components/BottomSheetHandle.js

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

src/Components/Common.js

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

src/Components/EmptyView.js

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

src/Components/ErrorView.js

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

src/Components/List.js

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

src/Components/ListView.js

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

src/Components/NewUpdateDialog.js

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

src/Components/NovelCover.js

@@ -0,0 +1,188 @@
+import React from "react";
+import { StyleSheet, View, Text, ImageBackground, Image } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { TouchableRipple } from "react-native-paper";
+
+import { useSelector } from "react-redux";
+import { useSettings, useTheme } from "../Hooks/reduxHooks";
+import ListView from "./ListView";
+
+const NovelCover = ({ item, onPress, libraryStatus }) => {
+    const theme = useTheme();
+    const { displayMode, novelsPerRow, showDownloadBadges, showUnreadBadges } =
+        useSettings();
+
+    const height = {
+        1: 550,
+        2: 280,
+        3: 180,
+        4: 140,
+        5: 100,
+    };
+
+    const comfortableTitle = () =>
+        displayMode === 1 && (
+            <Text
+                numberOfLines={2}
+                style={[
+                    styles.title,
+                    {
+                        color: theme.textColorPrimary,
+                        padding: 4,
+                    },
+                ]}
+            >
+                {item.novelName}
+            </Text>
+        );
+
+    const compactTitle = () =>
+        displayMode === 0 && (
+            <View style={styles.titleContainer}>
+                <LinearGradient
+                    colors={["transparent", "rgba(0,0,0,0.6)"]}
+                    style={styles.linearGradient}
+                >
+                    <Text
+                        numberOfLines={2}
+                        style={[styles.title, { color: "rgba(255,255,255,1)" }]}
+                    >
+                        {item.novelName}
+                    </Text>
+                </LinearGradient>
+            </View>
+        );
+
+    const unreadBadge = () =>
+        showUnreadBadges &&
+        item.chaptersUnread && (
+            <Text
+                style={[
+                    styles.unreadBadge,
+                    !item.chaptersDownloaded && {
+                        borderTopLeftRadius: 4,
+                        borderBottomLeftRadius: 4,
+                    },
+                    !showDownloadBadges && {
+                        borderRadius: 4,
+                    },
+                ]}
+            >
+                {item.chaptersUnread}
+            </Text>
+        );
+
+    const downloadBadge = () =>
+        showDownloadBadges &&
+        item.chaptersDownloaded && (
+            <Text
+                style={[
+                    styles.downloadBadge,
+                    !item.chaptersUnread && {
+                        borderTopRightRadius: 4,
+                        borderBottomRightRadius: 4,
+                    },
+                    !showUnreadBadges && {
+                        borderRadius: 4,
+                    },
+                ]}
+            >
+                {item.chaptersDownloaded}
+            </Text>
+        );
+
+    return displayMode !== 2 ? (
+        <View style={{ flex: 1 / novelsPerRow }}>
+            <TouchableRipple
+                borderless
+                centered
+                rippleColor={theme.rippleColor}
+                style={styles.opac}
+                onPress={onPress}
+            >
+                <>
+                    <ImageBackground
+                        source={{ uri: item.novelCover }}
+                        style={{ height: height[novelsPerRow] }}
+                        imageStyle={[
+                            { borderRadius: 4 },
+                            libraryStatus && { opacity: 0.5 },
+                        ]}
+                        progressiveRenderingEnabled={true}
+                    >
+                        <View style={{ flexDirection: "row", margin: 4 }}>
+                            {downloadBadge()}
+                            {unreadBadge()}
+                        </View>
+                        {compactTitle()}
+                    </ImageBackground>
+                    {comfortableTitle()}
+                </>
+            </TouchableRipple>
+        </View>
+    ) : (
+        <ListView
+            item={item}
+            downloadBadge={downloadBadge()}
+            unreadBadge={unreadBadge()}
+            theme={theme}
+            onPress={onPress}
+        />
+    );
+};
+
+export default NovelCover;
+
+const styles = StyleSheet.create({
+    titleContainer: {
+        flex: 1,
+        justifyContent: "flex-end",
+        borderRadius: 4,
+    },
+    title: {
+        fontFamily: "pt-sans-bold",
+        fontSize: 14,
+        padding: 8,
+    },
+    linearGradient: {
+        bottom: -1,
+        borderRadius: 4,
+    },
+    opac: {
+        paddingHorizontal: 4.5,
+        paddingVertical: 4,
+        borderRadius: 4,
+    },
+    extensionIcon: {
+        width: 42,
+        height: 42,
+        borderRadius: 4,
+    },
+    listView: {
+        flex: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        borderRadius: 4,
+    },
+
+    downloadBadge: {
+        backgroundColor: "#47a84a",
+        color: "#FFFFFF",
+        borderTopLeftRadius: 4,
+        borderBottomLeftRadius: 4,
+        paddingTop: 2,
+        paddingHorizontal: 4,
+        fontSize: 12,
+    },
+    unreadBadge: {
+        backgroundColor: "#2979FF",
+        color: "#FFFFFF",
+        borderTopRightRadius: 4,
+        borderBottomRightRadius: 4,
+        paddingTop: 2,
+        paddingHorizontal: 4,
+        fontSize: 12,
+    },
+});

src/Components/NovelList.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, FlatList } from "react-native";
+
+import { useSettings } from "../Hooks/reduxHooks";
+
+const NovelList = ({
+    data,
+    renderItem,
+    refreshControl,
+    ListEmptyComponent,
+}) => {
+    const { displayMode, novelsPerRow } = useSettings();
+
+    const getNovelsPerRow = () => (displayMode === 2 ? 1 : novelsPerRow);
+
+    return (
+        <FlatList
+            contentContainerStyle={styles.flatListCont}
+            numColumns={getNovelsPerRow()}
+            key={getNovelsPerRow()}
+            data={data}
+            keyExtractor={(item) => item.novelUrl}
+            renderItem={renderItem}
+            refreshControl={refreshControl}
+            ListEmptyComponent={ListEmptyComponent}
+        />
+    );
+};
+
+export default NovelList;
+
+const styles = StyleSheet.create({
+    flatListCont: {
+        flexGrow: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+    },
+});

src/Components/RadioButton.js

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

src/Components/Searchbar.js

@@ -0,0 +1,142 @@
+import React, { useRef } from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import { TouchableRipple, IconButton } from "react-native-paper";
+import Constants from "expo-constants";
+import { useSettings } from "../Hooks/reduxHooks";
+import { useDispatch } from "react-redux";
+import { setAppSettings } from "../redux/settings/settings.actions";
+
+export const Searchbar = ({
+    theme,
+    placeholder,
+    searchText,
+    left,
+    onPressLeft,
+    right,
+    displayMenu,
+    onPressRight,
+    clearSearchbar,
+    onChangeText,
+    onSubmitEditing,
+    migrate,
+    onPressMigrate,
+    filter,
+}) => {
+    const searchRef = useRef(null);
+    const dispatch = useDispatch();
+    const { displayMode } = useSettings();
+
+    const displayMenuIcon = () => {
+        const icons = {
+            0: "view-module",
+            1: "view-list",
+            2: "view-module",
+        };
+
+        return icons[displayMode];
+    };
+
+    const getDisplayMode = () =>
+        displayMode === 0 ? 1 : displayMode === 1 ? 2 : displayMode === 2 && 0;
+
+    return (
+        <TouchableRipple
+            borderless
+            onPress={() => searchRef.current.focus()}
+            style={[
+                styles.searchAppbarContainer,
+                { backgroundColor: theme.searchBarColor },
+            ]}
+            rippleColor={theme.rippleColor}
+        >
+            <View style={styles.container}>
+                <View style={{ flex: 1, flexDirection: "row" }}>
+                    {left && (
+                        <IconButton
+                            icon={left}
+                            color={theme.textColorSecondary}
+                            style={{ marginLeft: 0 }}
+                            size={23}
+                            onPress={onPressLeft}
+                        />
+                    )}
+                    <TextInput
+                        ref={searchRef}
+                        style={{
+                            fontSize: 16,
+                            color: theme.textColorSecondary,
+                        }}
+                        placeholder={placeholder}
+                        placeholderTextColor={theme.textColorSecondary}
+                        onChangeText={onChangeText}
+                        onSubmitEditing={onSubmitEditing}
+                        defaultValue={searchText}
+                    />
+                </View>
+                {searchText !== "" && (
+                    <IconButton
+                        icon="close"
+                        color={theme.textColorSecondary}
+                        style={{ marginRight: 0 }}
+                        size={23}
+                        onPress={clearSearchbar}
+                    />
+                )}
+                {displayMenu && (
+                    <IconButton
+                        icon={displayMenuIcon()}
+                        color={theme.textColorSecondary}
+                        style={{ marginRight: 0 }}
+                        size={23}
+                        onPress={() =>
+                            dispatch(
+                                setAppSettings("displayMode", getDisplayMode())
+                            )
+                        }
+                    />
+                )}
+                {right && (
+                    <IconButton
+                        icon={right}
+                        color={
+                            !filter
+                                ? theme.textColorSecondary
+                                : theme.filterColor
+                        }
+                        style={{ marginRight: 0 }}
+                        size={23}
+                        onPress={onPressRight}
+                    />
+                )}
+                {migrate && (
+                    <IconButton
+                        icon={migrate}
+                        color={theme.textColorSecondary}
+                        style={{ marginRight: 0 }}
+                        size={23}
+                        onPress={onPressMigrate}
+                    />
+                )}
+            </View>
+        </TouchableRipple>
+    );
+};
+
+const styles = StyleSheet.create({
+    searchAppbarContainer: {
+        marginTop: Constants.statusBarHeight + 4,
+        height: 48,
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        marginBottom: 12,
+        borderRadius: 8,
+        marginHorizontal: 12,
+        elevation: 2,
+    },
+    container: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+});

src/Database/queries/ChapterQueries.js

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

src/Database/queries/HistoryQueries.js

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

src/Database/queries/LibraryQueries.js

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

src/Database/queries/NovelQueries.js

@@ -0,0 +1,159 @@
+import * as SQLite from "expo-sqlite";
+const db = SQLite.openDatabase("lnreader.db");
+
+import { fetchChapters, fetchNovel } from "../../Services/Source/source";
+import { insertChapters } from "./ChapterQueries";
+
+const insertNovelQuery = `INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+
+export const insertNovel = async (novel) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) =>
+            tx.executeSql(
+                insertNovelQuery,
+                [
+                    novel.novelUrl,
+                    novel.sourceUrl,
+                    novel.sourceId,
+                    novel.source,
+                    novel.novelName,
+                    novel.novelCover,
+                    novel.novelSummary,
+                    novel.author,
+                    novel.artist,
+                    novel.status,
+                    novel.genre,
+                ],
+                (txObj, { insertId }) => resolve(insertId),
+                (txObj, error) => console.log("Error ", error)
+            )
+        )
+    );
+};
+
+export const followNovel = async (followed, novelId) => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            "UPDATE novels SET followed = ? WHERE novelId = ?",
+            [!followed, novelId],
+            (tx, res) => {},
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};
+
+const checkNovelInCacheQuery = `SELECT * FROM novels WHERE novelUrl=? LIMIT 1`;
+
+export const checkNovelInCache = (novelUrl) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                checkNovelInCacheQuery,
+                [novelUrl],
+                (txObj, res) => {
+                    if (res.rows.length !== 0) {
+                        resolve(true);
+                    } else {
+                        resolve(false);
+                    }
+                },
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+export const getNovel = async (sourceId, novelUrl) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) => {
+            tx.executeSql(
+                `SELECT * FROM novels WHERE novelUrl = ? AND sourceId = ?`,
+                [novelUrl, sourceId],
+                (txObj, { rows }) => resolve(rows.item(0)),
+                (txObj, error) => console.log("Error ", error)
+            );
+        })
+    );
+};
+
+export const deleteNovelCache = () => {
+    db.transaction((tx) => {
+        tx.executeSql(
+            "DELETE FROM novels WHERE followed = 0",
+            null,
+            (txObj, res) => {
+                console.log("Cleared Novel Cache");
+            },
+            (txObj, error) => console.log("Error ", error)
+        );
+    });
+};
+
+const restoreFromBackupQuery = `INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre, followed, unread) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+
+export const restoreLibrary = async (novel) => {
+    return new Promise((resolve, reject) =>
+        db.transaction((tx) =>
+            tx.executeSql(
+                restoreFromBackupQuery,
+                [
+                    novel.novelUrl,
+                    novel.sourceUrl,
+                    novel.sourceId,
+                    novel.source,
+                    novel.novelName,
+                    novel.novelCover,
+                    novel.novelSummary,
+                    novel.author,
+                    novel.artist,
+                    novel.status,
+                    novel.genre,
+                    novel.followed,
+                    novel.unread,
+                ],
+                async (txObj, { insertId }) => {
+                    const chapters = await fetchChapters(
+                        novel.sourceId,
+                        novel.novelUrl
+                    );
+                    await insertChapters(insertId, chapters);
+                },
+                (txObj, error) => console.log("Error ", error)
+            )
+        )
+    );
+};
+
+const migrateNovelQuery = `INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre, followed) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+
+export const migrateNovel = async (sourceId, novelUrl) => {
+    const novel = await fetchNovel(sourceId, novelUrl);
+
+    db.transaction((tx) =>
+        tx.executeSql(
+            migrateNovelQuery,
+            [
+                novel.novelUrl,
+                novel.sourceUrl,
+                novel.sourceId,
+                novel.source,
+                novel.novelName,
+                novel.novelCover,
+                novel.novelSummary,
+                novel.author,
+                novel.artist,
+                novel.status,
+                novel.genre,
+                1,
+            ],
+            async (txObj, { insertId }) => {
+                const chapters = await fetchChapters(
+                    novel.sourceId,
+                    novel.novelUrl
+                );
+                await insertChapters(insertId, chapters);
+            },
+            (txObj, error) => console.log("Error ", error)
+        )
+    );
+};

src/Database/queries/UpdateQueries.js

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

src/Database/tables/HistoryTable.js

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

src/Hooks/githubUpdateChecker.js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+
+export const githubUpdateChecker = () => {
+    const latestReleaseUrl =
+        "https://api.github.com/repos/rajarsheechatterjee/lnreader/releases/latest";
+
+    const [checking, setChecking] = useState(true);
+    const [latestRelease, setLatestRelease] = useState();
+
+    const checkForRelease = async () => {
+        let res = await fetch(latestReleaseUrl);
+        res = await res.json();
+
+        const release = {
+            tag_name: res.tag_name,
+            body: res.body,
+            downloadUrl: res.assets[0].browser_download_url,
+        };
+
+        setLatestRelease(release);
+        setChecking(false);
+    };
+
+    const isNewVersion = (versionTag) => {
+        let currentVersion = "v1.0.19";
+        const regex = /[^\\d.]/;
+
+        let newVersion = versionTag.replace(regex, "");
+        currentVersion = currentVersion.replace(regex, "");
+
+        return newVersion !== currentVersion;
+    };
+
+    useEffect(() => {
+        checkForRelease();
+    }, []);
+
+    if (!checking) {
+        const data = {
+            latestRelease,
+            isNewVersion: isNewVersion(latestRelease.tag_name),
+        };
+
+        return data;
+    }
+};

src/Hooks/reduxHooks.js

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

src/Hooks/setStatusBarStyle.js

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

src/Hooks/showToast.js

@@ -0,0 +1,5 @@
+import { ToastAndroid } from "react-native";
+
+export const showToast = (message) => {
+    ToastAndroid.show(message, ToastAndroid.SHORT);
+};

src/Navigators/BottomNavigator.js

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

src/Navigators/Main.js

@@ -0,0 +1,79 @@
+import React from "react";
+import {
+    createStackNavigator,
+    TransitionPresets,
+} from "@react-navigation/stack";
+
+import BottomNavigator from "./BottomNavigator";
+import Novel from "../Screens/Novel/Novel";
+import Chapter from "../Screens/Chapter/Chapter";
+import Extension from "../Screens/Extension/Extension";
+import GlobalSearch from "../Screens/Browse/GlobalSearch";
+import Migration from "../Screens/Browse/Migration";
+import SourceNovels from "../Screens/Browse/SourceNovels";
+import MigrateNovel from "../Screens/Browse/MigrateNovel";
+import MoreStack from "./More";
+
+import { setStatusBarStyle } from "../Hooks/setStatusBarStyle";
+import { View } from "react-native";
+import { useTheme } from "../Hooks/reduxHooks";
+import { githubUpdateChecker } from "../Hooks/githubUpdateChecker";
+import NewUpdateDialog from "../Components/NewUpdateDialog";
+import { NavigationContainer } from "@react-navigation/native";
+
+const Stack = createStackNavigator();
+
+const stackNavigatorConfig = {
+    headerShown: false,
+};
+
+const MainNavigator = () => {
+    const theme = useTheme();
+    setStatusBarStyle();
+    const { isNewVersion, latestRelease } = githubUpdateChecker() || {};
+
+    return (
+        <NavigationContainer
+            theme={{ colors: { background: theme.colorPrimaryDark } }}
+        >
+            <View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
+                {isNewVersion && <NewUpdateDialog newVersion={latestRelease} />}
+                <Stack.Navigator screenOptions={stackNavigatorConfig}>
+                    <Stack.Screen
+                        name="BottomNavigator"
+                        component={BottomNavigator}
+                    />
+                    <Stack.Screen
+                        name="Novel"
+                        component={Novel}
+                        options={{
+                            ...TransitionPresets.RevealFromBottomAndroid,
+                        }}
+                    />
+                    <Stack.Screen
+                        name="Chapter"
+                        component={Chapter}
+                        options={{ ...TransitionPresets.SlideFromRightIOS }}
+                    />
+                    <Stack.Screen name="MoreStack" component={MoreStack} />
+                    <Stack.Screen name="Extension" component={Extension} />
+                    <Stack.Screen
+                        name="GlobalSearch"
+                        component={GlobalSearch}
+                    />
+                    <Stack.Screen name="Migration" component={Migration} />
+                    <Stack.Screen
+                        name="SourceNovels"
+                        component={SourceNovels}
+                    />
+                    <Stack.Screen
+                        name="MigrateNovel"
+                        component={MigrateNovel}
+                    />
+                </Stack.Navigator>
+            </View>
+        </NavigationContainer>
+    );
+};
+
+export default MainNavigator;

src/Navigators/More.js

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

src/Screens/Browse/Browse.js

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

src/Screens/Browse/GlobalSearch.js

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from "react";
+import {
+    StyleSheet,
+    View,
+    Text,
+    FlatList,
+    ActivityIndicator,
+} from "react-native";
+import { useLibrary, useTheme } from "../../Hooks/reduxHooks";
+import { useDispatch, useSelector } from "react-redux";
+
+import { Searchbar } from "../../Components/Searchbar";
+import NovelCover from "../../Components/NovelCover";
+import NovelList from "../../Components/NovelList";
+import EmptyView from "../../Components/EmptyView";
+import GlobalSearchNovelList from "./components/GlobalSearchNovelList";
+import { ProgressBar } from "react-native-paper";
+import { showToast } from "../../Hooks/showToast";
+
+const GlobalSearch = ({ route, navigation }) => {
+    const theme = useTheme();
+    let novelName = "";
+
+    if (route.params) {
+        novelName = route.params.novelName;
+    }
+
+    const [loading, setLoading] = useState(false);
+    const [searchText, setSearchText] = useState(novelName);
+    const [searchResults, setSearchResults] = useState("");
+    const { sources, pinned } = useSelector((state) => state.sourceReducer);
+    const [progress, setProgress] = useState(0);
+
+    const library = useLibrary();
+
+    const pinnedSources = sources.filter(
+        (source) => pinned.indexOf(source.sourceId) !== -1
+    );
+
+    useEffect(() => {
+        novelName && onSubmitEditing();
+    }, []);
+
+    const clearSearchbar = () => {
+        setSearchText("");
+    };
+
+    const onChangeText = (text) => setSearchText(text);
+
+    const onSubmitEditing = () => {
+        setSearchResults("");
+
+        const getSearchUrl = (sourceId) => {
+            if (sourceId === 1) {
+                return `https://lnreader-extensions.vercel.app/api/1/search/?s=${searchText}&?o=rating`;
+            } else {
+                return `https://lnreader-extensions.vercel.app/api/${sourceId}/search/?s=${searchText}`;
+            }
+        };
+
+        pinnedSources.map((source, index) =>
+            setTimeout(() => {
+                setLoading(true);
+                fetch(getSearchUrl(source.sourceId))
+                    .then((response) => response.json())
+                    .then((json) => {
+                        setSearchResults((searchResults) => [
+                            ...searchResults,
+                            {
+                                sourceId: source.sourceId,
+                                sourceName: source.sourceName,
+                                sourceLanguage: source.sourceLanguage,
+                                novels: json,
+                            },
+                        ]);
+                        setLoading(false);
+                    })
+                    .catch((error) => {
+                        showToast(error.message);
+                        setSearchResults((searchResults) => [
+                            ...searchResults,
+                            {
+                                sourceId: source.sourceId,
+                                sourceName: source.sourceName,
+                                sourceLanguage: source.sourceLanguage,
+                                novels: [],
+                            },
+                        ]);
+                        setLoading(false);
+                    })
+                    .finally(() =>
+                        setProgress(
+                            (progress) => progress + 1 / pinnedSources.length
+                        )
+                    );
+            }, 1000 * index)
+        );
+    };
+
+    const renderItem = ({ item }) => (
+        <>
+            <View style={{ padding: 8, paddingVertical: 16 }}>
+                <Text style={{ color: theme.textColorPrimary }}>
+                    {item.sourceName}
+                </Text>
+                <Text style={{ color: theme.textColorSecondary, fontSize: 12 }}>
+                    {item.sourceLanguage}
+                </Text>
+            </View>
+            <GlobalSearchNovelList
+                data={item.novels}
+                theme={theme}
+                library={library}
+                navigation={navigation}
+            />
+        </>
+    );
+
+    return (
+        <View
+            style={[
+                styles.container,
+                { backgroundColor: theme.colorPrimaryDark },
+            ]}
+        >
+            <Searchbar
+                theme={theme}
+                placeholder="Global Search"
+                left="arrow-left"
+                onPressLeft={() => navigation.goBack()}
+                searchText={searchText}
+                onChangeText={onChangeText}
+                onSubmitEditing={onSubmitEditing}
+                clearSearchbar={clearSearchbar}
+            />
+            {progress < 1 && progress > 0 && pinned && (
+                <ProgressBar
+                    color={
+                        progress > 0.9
+                            ? theme.colorPrimaryDark
+                            : theme.colorAccent
+                    }
+                    progress={progress}
+                />
+            )}
+            <FlatList
+                contentContainerStyle={{
+                    flexGrow: 1,
+                    padding: 4,
+                }}
+                data={searchResults}
+                keyExtractor={(item) => item.sourceId.toString()}
+                renderItem={renderItem}
+                extraData={pinned}
+                ListEmptyComponent={
+                    <>
+                        {!loading && (
+                            <EmptyView
+                                icon="__φ(．．)"
+                                description={`Search a novel in your pinned sources ${
+                                    pinned.length === 0
+                                        ? "(No sources pinned)"
+                                        : ""
+                                }`}
+                            />
+                        )}
+                    </>
+                }
+                ListFooterComponent={
+                    loading && (
+                        <View
+                            style={{
+                                flex: 1,
+                                justifyContent: "center",
+                                padding: 16,
+                            }}
+                        >
+                            <ActivityIndicator
+                                size="large"
+                                color={theme.colorAccent}
+                            />
+                        </View>
+                    )
+                }
+            />
+        </View>
+    );
+};
+
+export default GlobalSearch;
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+});

src/Screens/Browse/MigrateNovel.js

@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from "react";
+import {
+    StyleSheet,
+    View,
+    Text,
+    FlatList,
+    ActivityIndicator,
+} from "react-native";
+import { ProgressBar } from "react-native-paper";
+import { useLibrary, useTheme } from "../../Hooks/reduxHooks";
+import { useSelector } from "react-redux";
+
+import EmptyView from "../../Components/EmptyView";
+import MigrationNovelList from "./components/MigrationNovelList";
+import { Appbar } from "../../Components/Appbar";
+import { showToast } from "../../Hooks/showToast";
+
+const GlobalSearch = ({ navigation, route }) => {
+    const { sourceId, novelName } = route.params;
+    const theme = useTheme();
+
+    const [progress, setProgress] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [searchResults, setSearchResults] = useState("");
+    const { sources, pinned } = useSelector((state) => state.sourceReducer);
+
+    const library = useLibrary();
+
+    const pinnedSources = sources.filter(
+        (source) =>
+            pinned.indexOf(source.sourceId) !== -1 &&
+            source.sourceId !== sourceId
+    );
+
+    const getSearchResults = () => {
+        const getSearchUrl = (sourceId) => {
+            if (sourceId === 1) {
+                return `https://lnreader-extensions.vercel.app/api/1/search/?s=${novelName}&?o=rating`;
+            } else {
+                return `https://lnreader-extensions.vercel.app/api/${sourceId}/search/?s=${novelName}`;
+            }
+        };
+
+        pinnedSources.map((source, index) =>
+            setTimeout(() => {
+                setLoading(true);
+                fetch(getSearchUrl(source.sourceId))
+                    .then((response) => response.json())
+                    .then((json) => {
+                        setSearchResults((searchResults) => [
+                            ...searchResults,
+                            {
+                                sourceId: source.sourceId,
+                                sourceName: source.sourceName,
+                                sourceLanguage: source.sourceLanguage,
+                                novels: json,
+                            },
+                        ]);
+                        setLoading(false);
+                    })
+                    .catch((error) => {
+                        showToast(error.message);
+                        setSearchResults((searchResults) => [
+                            ...searchResults,
+                            {
+                                sourceId: source.sourceId,
+                                sourceName: source.sourceName,
+                                sourceLanguage: source.sourceLanguage,
+                                novels: [],
+                            },
+                        ]);
+                        setLoading(false);
+                    })
+                    .finally(() =>
+                        setProgress(
+                            (progress) => progress + 1 / pinnedSources.length
+                        )
+                    );
+            }, 1000 * index)
+        );
+    };
+
+    useEffect(() => {
+        getSearchResults();
+    }, []);
+
+    const renderItem = ({ item }) => (
+        <>
+            <View style={{ padding: 8, paddingVertical: 16 }}>
+                <Text style={{ color: theme.textColorPrimary }}>
+                    {item.sourceName}
+                </Text>
+                <Text style={{ color: theme.textColorSecondary, fontSize: 12 }}>
+                    {item.sourceLanguage}
+                </Text>
+            </View>
+            <MigrationNovelList
+                data={item.novels}
+                theme={theme}
+                library={library}
+                navigation={navigation}
+            />
+        </>
+    );
+
+    return (
+        <View
+            style={[
+                styles.container,
+                { backgroundColor: theme.colorPrimaryDark },
+            ]}
+        >
+            <Appbar
+                title={novelName}
+                onBackAction={() => navigation.goBack()}
+            />
+            {progress < 1 && pinned && (
+                <ProgressBar color={theme.colorAccent} progress={progress} />
+            )}
+            <FlatList
+                contentContainerStyle={{
+                    flexGrow: 1,
+                    padding: 4,
+                }}
+                data={searchResults}
+                keyExtractor={(item) => item.sourceId.toString()}
+                renderItem={renderItem}
+                extraData={pinned}
+                ListEmptyComponent={
+                    <>
+                        {!loading && (
+                            <EmptyView
+                                icon="__φ(．．)"
+                                description={`Search a novel in your pinned sources ${
+                                    pinned.length === 0
+                                        ? "(No sources pinned)"
+                                        : ""
+                                }`}
+                            />
+                        )}
+                    </>
+                }
+                ListFooterComponent={
+                    loading && (
+                        <View
+                            style={{
+                                flex: 1,
+                                justifyContent: "center",
+                                padding: 16,
+                            }}
+                        >
+                            <ActivityIndicator
+                                size="large"
+                                color={theme.colorAccent}
+                            />
+                        </View>
+                    )
+                }
+            />
+        </View>
+    );
+};
+
+export default GlobalSearch;
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+});

src/Screens/Browse/Migration.js

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

src/Screens/Browse/SourceNovels.js

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

src/Screens/Browse/components/GlobalSearchNovelCover.js

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

src/Screens/Browse/components/GlobalSearchNovelList.js

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

src/Screens/Browse/components/MigrationNovelList.js

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import { StyleSheet, FlatList, Text, View } from "react-native";
+import { Portal, Modal, Button } from "react-native-paper";
+import { migrateNovel } from "../../../Database/queries/NovelQueries";
+import { showToast } from "../../../Hooks/showToast";
+import GlobalSearchNovelCover from "./GlobalSearchNovelCover";
+
+const MigrationNovelList = ({ data, theme, library, navigation }) => {
+    const [selectedNovel, setSelectedNovel] = useState(false);
+
+    const [migrateNovelDialog, setMigrateNovelDialog] = useState(false);
+    const showMigrateNovelDialog = () => setMigrateNovelDialog(true);
+    const hideMigrateNovelDialog = () => setMigrateNovelDialog(false);
+
+    const checkIFInLibrary = (sourceId, novelUrl) => {
+        return library.some(
+            (obj) => obj.novelUrl === novelUrl && obj.sourceId === sourceId
+        );
+    };
+
+    const renderItem = ({ item }) => (
+        <GlobalSearchNovelCover
+            item={item}
+            onPress={() =>
+                showModal(item.extensionId, item.novelUrl, item.novelName)
+            }
+            libraryStatus={checkIFInLibrary(item.extensionId, item.novelUrl)}
+        />
+    );
+
+    const showModal = (sourceId, novelUrl, novelName) => {
+        if (checkIFInLibrary(sourceId, novelUrl)) {
+            showToast("Novel already in library");
+        } else {
+            setSelectedNovel({ sourceId, novelUrl, novelName });
+            showMigrateNovelDialog();
+        }
+    };
+
+    return (
+        <>
+            <FlatList
+                contentContainerStyle={styles.flatListCont}
+                horizontal={true}
+                data={data}
+                keyExtractor={(item) => item.novelUrl}
+                renderItem={renderItem}
+                ListEmptyComponent={
+                    <Text
+                        style={{
+                            color: theme.textColorSecondary,
+                            padding: 8,
+                            paddingVertical: 4,
+                        }}
+                    >
+                        No results found
+                    </Text>
+                }
+            />
+            <Portal>
+                <Modal
+                    visible={migrateNovelDialog}
+                    onDismiss={hideMigrateNovelDialog}
+                    contentContainerStyle={{
+                        padding: 20,
+                        margin: 20,
+                        borderRadius: 6,
+                        backgroundColor: theme.colorPrimaryDark,
+                    }}
+                >
+                    <Text
+                        style={{
+                            color: theme.textColorPrimary,
+                            fontSize: 18,
+                        }}
+                    >
+                        {`Migrate ${selectedNovel.novelName}?`}
+                    </Text>
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            justifyContent: "flex-end",
+                        }}
+                    >
+                        <Button
+                            style={{ marginTop: 30 }}
+                            labelStyle={{
+                                color: theme.colorAccent,
+                                letterSpacing: 0,
+                                textTransform: "none",
+                            }}
+                            onPress={hideMigrateNovelDialog}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            style={{ marginTop: 30 }}
+                            labelStyle={{
+                                color: theme.colorAccent,
+                                letterSpacing: 0,
+                                textTransform: "none",
+                            }}
+                            theme={{ colors: { primary: theme.colorAccent } }}
+                            onPress={() => {
+                                migrateNovel(
+                                    selectedNovel.sourceId,
+                                    selectedNovel.novelUrl
+                                );
+                                hideMigrateNovelDialog();
+                                showToast(
+                                    `${selectedNovel.novelName} migrated to new source.`
+                                );
+                            }}
+                        >
+                            Migrate
+                        </Button>
+                    </View>
+                </Modal>
+            </Portal>
+        </>
+    );
+};
+
+export default MigrationNovelList;
+
+const styles = StyleSheet.create({
+    flatListCont: {
+        flexGrow: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+    },
+});

src/Screens/Browse/components/MigrationSourceCard.js

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

src/Screens/Browse/components/SourceCard.js

@@ -1,29 +1,28 @@
 import React from "react";
 import { View, Text, Image, StyleSheet } from "react-native";
-import { TouchableRipple, Button } from "react-native-paper";
-
+import { TouchableRipple, Button, IconButton } from "react-native-paper";
 import { useNavigation } from "@react-navigation/native";
-import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { pinSourceAction } from "../../../redux/source/source.actions";
 
-const ExtensionCard = ({ item }) => {
-    const { sourceName, sourceCover, sourceLanguage, status } = item;
+const ExtensionCard = ({ item, theme, isPinned }) => {
+    const { sourceId, sourceName, sourceCover, sourceLanguage, status } = item;
 
     const navigation = useNavigation();
+    const dispatch = useDispatch();
 
-    const theme = useSelector((state) => state.themeReducer.theme);
+    const navigateToExtension = () =>
+        navigation.navigate("Extension", {
+            sourceId: item.sourceId,
+            sourceName: item.sourceName,
+            sourceUrl: item.sourceUrl,
+        });
 
     return (
         <TouchableRipple
             style={styles.extensionCard}
-            onPress={() =>
-                navigation.navigate("Extension", {
-                    sourceId: item.sourceId,
-                    sourceName: item.sourceName,
-                    sourceUrl: item.sourceUrl,
-                })
-            }
+            onPress={navigateToExtension}
             rippleColor={theme.rippleColor}
-            borderless
         >
             <>
                 <Image
@@ -50,34 +49,34 @@ const ExtensionCard = ({ item }) => {
                             >
                                 {sourceLanguage}
                             </Text>
-                            <Text
-                                style={{
-                                    color: "#D63B2F",
-                                    fontSize: 12,
-                                    marginLeft: 5,
-                                }}
-                            >
-                                {status === 0 && "(Not Working)"}
+                            <Text style={styles.sourceStatus}>
+                                {status === 0 && "• Down"}
                             </Text>
                         </View>
                     </View>
-                    <View>
+                    <View
+                        style={{ flexDirection: "row", alignItems: "center" }}
+                    >
                         <Button
-                            labelStyle={{
-                                letterSpacing: 0,
-                            }}
+                            labelStyle={{ letterSpacing: 0 }}
                             uppercase={false}
-                            color={theme.colorAccentDark}
-                            onPress={() =>
-                                navigation.navigate("Extension", {
-                                    sourceId: item.sourceId,
-                                    sourceName: item.sourceName,
-                                    sourceUrl: item.sourceUrl,
-                                })
-                            }
+                            color={theme.colorAccent}
+                            onPress={navigateToExtension}
                         >
                             Browse
                         </Button>
+                        <IconButton
+                            icon={isPinned ? "pin" : "pin-outline"}
+                            animated
+                            size={21}
+                            onPress={() => dispatch(pinSourceAction(sourceId))}
+                            color={
+                                isPinned
+                                    ? theme.colorAccent
+                                    : theme.textColorSecondary
+                            }
+                            style={{ margin: 2 }}
+                        />
                     </View>
                 </View>
             </>
@@ -107,4 +106,9 @@ const styles = StyleSheet.create({
         alignItems: "center",
         marginLeft: 16,
     },
+    sourceStatus: {
+        color: "#C14033",
+        fontSize: 12,
+        marginLeft: 5,
+    },
 });

src/Screens/Chapter/Chapter.js

@@ -0,0 +1,301 @@
+import React, { useState, useEffect, useRef } from "react";
+import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
+
+import { useDispatch } from "react-redux";
+import Constants from "expo-constants";
+import { IconButton, Portal } from "react-native-paper";
+import { CollapsibleHeaderScrollView } from "react-native-collapsible-header-views";
+
+import { getChapterFromDB } from "../../Database/queries/ChapterQueries";
+import { fetchChapter } from "../../Services/Source/source";
+import { showToast } from "../../Hooks/showToast";
+import {
+    usePosition,
+    useReaderSettings,
+    useTheme,
+    useTrackingStatus,
+} from "../../Hooks/reduxHooks";
+import { updateChaptersRead } from "../../redux/tracker/tracker.actions";
+import { insertHistoryAction } from "../../redux/history/history.actions";
+import {
+    errorTextColor,
+    readerBackground,
+    readerLineHeight,
+    readerTextColor,
+} from "./readerStyleController";
+import { markChapterReadAction } from "../../redux/novel/novel.actions";
+import { saveScrollPosition } from "../../redux/preferences/preference.actions";
+import { parseChapterNumber } from "../../Services/updates";
+
+import ChapterAppbar from "./components/ChapterAppbar";
+import ReaderSheet from "./components/ReaderSheet";
+import EmptyView from "../../Components/EmptyView";
+import FitImage from "react-native-fit-image";
+
+const Chapter = ({ route, navigation }) => {
+    const {
+        sourceId,
+        chapterId,
+        chapterUrl,
+        novelId,
+        novelUrl,
+        novelName,
+        chapterName,
+    } = route.params;
+    let scrollViewRef;
+    let readerSheetRef = useRef(null);
+
+    const theme = useTheme();
+    const dispatch = useDispatch();
+    const reader = useReaderSettings();
+    const { tracker, trackedNovels } = useTrackingStatus();
+    const position = usePosition(novelId, chapterId);
+
+    const isTracked = trackedNovels.find((obj) => obj.novelId === novelId);
+
+    const [chapter, setChapter] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState();
+
+    const [scrollPercentage, setScrollPercentage] = useState(0);
+    const [firstLayout, setFirstLayout] = useState(true);
+    const [selectText, setSelectText] = useState(false);
+
+    const [images, setImages] = useState([]);
+
+    const getChapter = async (chapterId) => {
+        try {
+            if (chapterId) {
+                const chapterDownloaded = await getChapterFromDB(chapterId);
+
+                if (chapterDownloaded) {
+                    setChapter(chapterDownloaded);
+                    parseImages(chapterDownloaded.chapterText);
+                } else {
+                    const res = await fetchChapter(
+                        sourceId,
+                        novelUrl,
+                        chapterUrl
+                    );
+                    parseImages(res.chapterText);
+                    setChapter(res);
+                }
+            } else {
+                const res = await fetchChapter(sourceId, novelUrl, chapterUrl);
+                parseImages(res.chapterText);
+                setChapter(res);
+            }
+
+            setLoading(false);
+        } catch (error) {
+            setError(error.message);
+            setLoading(false);
+            showToast(error.message);
+        }
+    };
+
+    const parseImages = (chapterText) => {
+        let imageLinks = chapterText.match(/\[https.*?\]/g, "");
+        let chapterTextWithoutLinks;
+
+        if (imageLinks) {
+            imageLinks = imageLinks.map((link) => link.slice(1, -1));
+
+            setImages(imageLinks);
+        }
+    };
+
+    useEffect(() => {
+        getChapter(chapterId);
+        dispatch(insertHistoryAction(novelId, chapterId));
+    }, []);
+
+    const isCloseToBottom = ({
+        layoutMeasurement,
+        contentOffset,
+        contentSize,
+    }) => {
+        const paddingToBottom = 40;
+        return (
+            layoutMeasurement.height + contentOffset.y >=
+            contentSize.height - paddingToBottom
+        );
+    };
+
+    const updateTracker = () => {
+        const chapterNumber = parseChapterNumber(chapterName);
+
+        isTracked &&
+            chapterNumber &&
+            Number.isInteger(chapterNumber) &&
+            chapterNumber > isTracked.my_list_status.num_chapters_read &&
+            dispatch(
+                updateChaptersRead(
+                    isTracked.id,
+                    tracker.access_token,
+                    chapterNumber
+                )
+            );
+    };
+
+    const onScroll = ({ nativeEvent }) => {
+        const offsetY = nativeEvent.contentOffset.y;
+        const position =
+            nativeEvent.contentOffset.y + nativeEvent.layoutMeasurement.height;
+
+        const percentage = Math.round(
+            (position / nativeEvent.contentSize.height) * 100
+        );
+
+        setScrollPercentage(percentage);
+        dispatch(saveScrollPosition(offsetY, percentage, chapterId, novelId));
+
+        if (isCloseToBottom(nativeEvent)) {
+            dispatch(markChapterReadAction(chapterId, novelId));
+            updateTracker();
+        }
+    };
+
+    const scrollToSavedProgress = () => {
+        if (position && firstLayout) {
+            position.percentage < 100 &&
+                scrollViewRef.getNode().scrollTo({
+                    x: 0,
+                    y: position.position,
+                    animated: false,
+                });
+            setFirstLayout(false);
+        }
+    };
+
+    const readerStyles = [
+        {
+            paddingVertical: 16,
+            paddingBottom: 32,
+            fontSize: reader.textSize,
+            color: readerTextColor(reader.theme),
+            lineHeight: readerLineHeight(reader.textSize, reader.lineHeight),
+            textAlign: reader.textAlign,
+            paddingHorizontal: `${reader.padding}%`,
+        },
+        reader.fontFamily && {
+            fontFamily: reader.fontFamily,
+        },
+    ];
+
+    return (
+        <>
+            <CollapsibleHeaderScrollView
+                headerContainerBackgroundColor="rgba(0,0,0,0.5)"
+                ref={(ref) => (scrollViewRef = ref)}
+                CollapsibleHeaderComponent={
+                    <ChapterAppbar
+                        navigation={navigation}
+                        sourceId={sourceId}
+                        novelId={novelId}
+                        novelUrl={novelUrl}
+                        novelName={novelName}
+                        chapterName={chapterName}
+                        chapterId={chapterId}
+                        chapter={chapter}
+                        theme={theme}
+                        readerSheetRef={readerSheetRef}
+                    />
+                }
+                headerHeight={Constants.statusBarHeight + 56}
+                contentContainerStyle={[
+                    styles.screenContainer,
+                    { backgroundColor: readerBackground(reader.theme) },
+                ]}
+                onScroll={onScroll}
+                showsVerticalScrollIndicator={false}
+            >
+                {error ? (
+                    <View style={{ flex: 1, justifyContent: "center" }}>
+                        <EmptyView
+                            icon="(-_-;)・・・"
+                            description={error}
+                            style={{ color: errorTextColor(reader.theme) }}
+                        >
+                            <IconButton
+                                icon="reload"
+                                size={25}
+                                style={{ margin: 0, marginTop: 16 }}
+                                color={errorTextColor(reader.theme)}
+                                onPress={() => {
+                                    getChapter(chapterId);
+                                    setLoading(true);
+                                    setError();
+                                }}
+                            />
+                            <Text
+                                style={{ color: errorTextColor(reader.theme) }}
+                            >
+                                Retry
+                            </Text>
+                        </EmptyView>
+                    </View>
+                ) : loading ? (
+                    <View style={{ flex: 1, justifyContent: "center" }}>
+                        <ActivityIndicator
+                            size={50}
+                            color={theme.colorAccent}
+                        />
+                    </View>
+                ) : (
+                    <View style={{ flex: 1 }}>
+                        {images.length > 0 &&
+                            images.map((image, index) => (
+                                <FitImage source={{ uri: image }} />
+                            ))}
+
+                        <Text
+                            style={readerStyles}
+                            onLayout={scrollToSavedProgress}
+                            selectable={selectText}
+                        >
+                            {chapter.chapterText
+                                .trim()
+                                .replace(/\[https.*?\]/g, "")}
+                        </Text>
+                    </View>
+                )}
+                <Portal>
+                    <ReaderSheet
+                        theme={theme}
+                        reader={reader}
+                        dispatch={dispatch}
+                        bottomSheetRef={readerSheetRef}
+                        selectText={selectText}
+                        setSelectText={setSelectText}
+                    />
+                </Portal>
+            </CollapsibleHeaderScrollView>
+            <Text
+                style={[
+                    styles.scrollPercentage,
+                    { color: readerTextColor(reader.theme) },
+                ]}
+            >
+                {scrollPercentage + "%"}
+            </Text>
+        </>
+    );
+};
+
+export default Chapter;
+
+const styles = StyleSheet.create({
+    screenContainer: {
+        flexGrow: 1,
+        paddingVertical: 10,
+    },
+    scrollPercentage: {
+        position: "absolute",
+        bottom: 12,
+        alignSelf: "center",
+        fontFamily: "noto-sans",
+        fontWeight: "bold",
+        zIndex: 1,
+    },
+});

src/Screens/Chapter/components/ChapterAppbar.js

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+
+import { Appbar } from "react-native-paper";
+import {
+    getNextChapterFromDB,
+    getPrevChapterFromDB,
+} from "../../../Database/queries/ChapterQueries";
+
+const ChapterAppbar = ({
+    navigation,
+    sourceId,
+    novelId,
+    novelName,
+    novelUrl,
+    chapterId,
+    chapterName,
+    theme,
+    readerSheetRef,
+}) => {
+    const [nextChapter, setNextChapter] = useState({});
+    const [prevChapter, setPrevChapter] = useState({});
+
+    const setPrevAndNextChap = async () => {
+        const nextChap = await getNextChapterFromDB(novelId, chapterId);
+        const prevChap = await getPrevChapterFromDB(novelId, chapterId);
+
+        setNextChapter(nextChap);
+        setPrevChapter(prevChap);
+    };
+
+    useEffect(() => {
+        setPrevAndNextChap();
+    }, []);
+
+    const navigateToPrevChapter = () =>
+        navigation.replace("Chapter", {
+            chapterUrl: prevChapter.chapterUrl,
+            chapterId: prevChapter.chapterId,
+            sourceId,
+            novelUrl,
+            novelId,
+            chapterName: prevChapter.chapterName,
+            novelName,
+        });
+
+    const navigateToNextChapter = () =>
+        navigation.replace("Chapter", {
+            chapterUrl: nextChapter.chapterUrl,
+            sourceId,
+            novelUrl,
+            novelId,
+            chapterId: nextChapter.chapterId,
+            chapterName: nextChapter.chapterName,
+            novelName,
+        });
+
+    return (
+        <Appbar.Header style={{ backgroundColor: "transparent", elevation: 0 }}>
+            <Appbar.BackAction
+                onPress={() => navigation.goBack()}
+                color="#FFFFFF"
+                size={26}
+                style={{ marginRight: 0 }}
+            />
+            <Appbar.Content
+                title={novelName}
+                titleStyle={{ color: "#FFFFFF" }}
+                subtitle={chapterName}
+                subtitleStyle={{ color: "rgba(255, 255, 255, 0.7)" }}
+            />
+            <Appbar.Action
+                icon="chevron-left"
+                size={26}
+                disabled={!prevChapter}
+                onPress={navigateToPrevChapter}
+                color="#FFFFFF"
+            />
+            <Appbar.Action
+                icon="chevron-right"
+                size={26}
+                disabled={!nextChapter}
+                onPress={navigateToNextChapter}
+                color="#FFFFFF"
+            />
+            <Appbar.Action
+                icon="dots-vertical"
+                size={26}
+                onPress={() => readerSheetRef.current.show()}
+                color="#FFFFFF"
+            />
+        </Appbar.Header>
+    );
+};
+
+export default ChapterAppbar;

src/Screens/Chapter/components/ReaderSheet.js

@@ -0,0 +1,403 @@
+import React, { useState } from "react";
+import { StyleSheet, View, Text, Dimensions } from "react-native";
+import { ToggleButton, IconButton, Menu, Switch } from "react-native-paper";
+import Slider from "@react-native-community/slider";
+import Bottomsheet from "rn-sliding-up-panel";
+import { fonts } from "../../../Services/utils/constants";
+
+import { setReaderSettings } from "../../../redux/settings/settings.actions";
+import BottomSheetHandle from "../../../Components/BottomSheetHandle";
+import { Row } from "../../../Components/Common";
+
+const ReaderSheet = ({
+    theme,
+    reader,
+    dispatch,
+    bottomSheetRef,
+    selectText,
+    setSelectText,
+}) => {
+    const [fontMenu, setFontMenu] = useState(false);
+    const openFontMenu = () => setFontMenu(true);
+    const closeFontMenu = () => setFontMenu(false);
+
+    const ReaderSettingTitle = ({ title }) => (
+        <Text style={styles.title}>{title}</Text>
+    );
+
+    return (
+        <Bottomsheet
+            ref={bottomSheetRef}
+            draggableRange={{ top: 420, bottom: 0 }}
+            snappingPoints={[0, 420]}
+            showBackdrop={true}
+            backdropOpacity={0}
+        >
+            <View style={styles.contentContainer}>
+                <BottomSheetHandle theme={theme} />
+                <View style={styles.readerSettingsContainer}>
+                    <ReaderSettingTitle title="Text Size" />
+                    <Slider
+                        style={{
+                            width: Dimensions.get("window").width,
+                            height: 40,
+                        }}
+                        value={reader.textSize}
+                        minimumValue={12}
+                        maximumValue={20}
+                        step={2}
+                        minimumTrackTintColor={theme.colorAccent}
+                        maximumTrackTintColor="#000000"
+                        thumbTintColor={theme.colorAccent}
+                        onValueChange={(value) =>
+                            dispatch(setReaderSettings("textSize", value))
+                        }
+                    />
+                    <Row
+                        style={{
+                            justifyContent: "space-between",
+                            width: "100%",
+                            paddingHorizontal: 16,
+                        }}
+                    >
+                        <ReaderSettingTitle title="Reader Theme" />
+                        <Row>
+                            <ToggleButton.Row
+                                onValueChange={(value) => {
+                                    dispatch(
+                                        setReaderSettings(
+                                            "theme",
+                                            value ?? reader.theme
+                                        )
+                                    );
+                                }}
+                                value={reader.theme}
+                            >
+                                <ToggleButton
+                                    icon={reader.theme === 1 && "check"}
+                                    color="#FFFFFF"
+                                    value={1}
+                                    style={{
+                                        backgroundColor: "#000000",
+                                        marginHorizontal: 10,
+                                        borderRadius: 50,
+                                        borderTopRightRadius: 50,
+                                        borderBottomRightRadius: 50,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon={reader.theme === 4 && "check"}
+                                    color="#FFFFFF"
+                                    value={4}
+                                    style={{
+                                        backgroundColor: "#444444",
+                                        marginHorizontal: 10,
+                                        borderWidth: 0,
+                                        borderRadius: 50,
+                                        borderTopRightRadius: 50,
+                                        borderBottomRightRadius: 50,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon={reader.theme === 2 && "check"}
+                                    color="#000000"
+                                    value={2}
+                                    style={{
+                                        backgroundColor: "#FFFFFF",
+                                        marginHorizontal: 10,
+                                        borderRadius: 50,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon={reader.theme === 3 && "check"}
+                                    color="#000000"
+                                    value={3}
+                                    style={{
+                                        backgroundColor: "#F4ECD8",
+                                        marginHorizontal: 10,
+                                        borderRadius: 50,
+                                        borderTopLeftRadius: 50,
+                                        borderBottomLeftRadius: 50,
+                                    }}
+                                />
+                            </ToggleButton.Row>
+                        </Row>
+                    </Row>
+                    <Row
+                        style={{
+                            justifyContent: "space-between",
+                            width: "100%",
+                            paddingHorizontal: 16,
+                            marginTop: 16,
+                        }}
+                    >
+                        <ReaderSettingTitle title="Text Align" />
+                        <Row>
+                            <ToggleButton.Row
+                                onValueChange={(value) =>
+                                    dispatch(
+                                        setReaderSettings(
+                                            "textAlign",
+                                            value ?? reader.textAlign
+                                        )
+                                    )
+                                }
+                                value={reader.textAlign}
+                            >
+                                <ToggleButton
+                                    icon="format-align-left"
+                                    color={
+                                        reader.textAlign === "left"
+                                            ? theme.colorAccent
+                                            : "#FFFFFF"
+                                    }
+                                    value="left"
+                                    style={{
+                                        backgroundColor: "transparent",
+                                        marginHorizontal: 10,
+                                        borderWidth: 0,
+                                        borderTopRightRadius: 4,
+                                        borderBottomRightRadius: 4,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon="format-align-justify"
+                                    color={
+                                        reader.textAlign === "justify"
+                                            ? theme.colorAccent
+                                            : "#FFFFFF"
+                                    }
+                                    value="justify"
+                                    style={{
+                                        backgroundColor: "transparent",
+                                        marginHorizontal: 10,
+                                        borderWidth: 0,
+                                        borderRadius: 4,
+                                    }}
+                                />
+                                <ToggleButton
+                                    icon="format-align-right"
+                                    color={
+                                        reader.textAlign === "right"
+                                            ? theme.colorAccent
+                                            : "#FFFFFF"
+                                    }
+                                    value="right"
+                                    style={{
+                                        backgroundColor: "transparent",
+                                        marginHorizontal: 10,
+                                        borderWidth: 0,
+                                        borderTopLeftRadius: 4,
+                                        borderBottomLeftRadius: 4,
+                                    }}
+                                />
+                            </ToggleButton.Row>
+                        </Row>
+                    </Row>
+                    <Row
+                        style={{
+                            justifyContent: "space-between",
+                            width: "100%",
+                            paddingHorizontal: 16,
+                            marginTop: 16,
+                        }}
+                    >
+                        <ReaderSettingTitle title="Padding" />
+                        <Row>
+                            <IconButton
+                                icon="minus"
+                                color={theme.colorAccent}
+                                size={26}
+                                disabled={reader.padding <= 0 ? true : false}
+                                onPress={() =>
+                                    dispatch(
+                                        setReaderSettings(
+                                            "padding",
+                                            reader.padding - 1
+                                        )
+                                    )
+                                }
+                                style={{ marginVertical: 0 }}
+                            />
+                            <Text
+                                style={{
+                                    color: "#FFFFFF",
+                                    paddingHorizontal: 24,
+                                }}
+                            >
+                                {`${reader.padding}%`}
+                            </Text>
+                            <IconButton
+                                icon="plus"
+                                color={theme.colorAccent}
+                                size={26}
+                                disabled={reader.padding >= 10 ? true : false}
+                                onPress={() =>
+                                    dispatch(
+                                        setReaderSettings(
+                                            "padding",
+                                            reader.padding + 1
+                                        )
+                                    )
+                                }
+                                style={{ marginVertical: 0 }}
+                            />
+                        </Row>
+                    </Row>
+                    <Row
+                        style={{
+                            justifyContent: "space-between",
+                            width: "100%",
+                            paddingHorizontal: 16,
+                            marginTop: 16,
+                        }}
+                    >
+                        <ReaderSettingTitle title="Line Height" />
+                        <Row>
+                            <IconButton
+                                icon="minus"
+                                color={theme.colorAccent}
+                                size={26}
+                                disabled={
+                                    reader.lineHeight <= 1.3 ? true : false
+                                }
+                                onPress={() =>
+                                    dispatch(
+                                        setReaderSettings(
+                                            "lineHeight",
+                                            reader.lineHeight - 0.1
+                                        )
+                                    )
+                                }
+                                style={{ marginVertical: 0 }}
+                            />
+                            <Text
+                                style={{
+                                    color: "#FFFFFF",
+                                    paddingHorizontal: 24,
+                                }}
+                            >
+                                {`${Math.round(reader.lineHeight * 10) / 10}%`}
+                            </Text>
+                            <IconButton
+                                icon="plus"
+                                color={theme.colorAccent}
+                                size={26}
+                                disabled={reader.lineHeight >= 2 ? true : false}
+                                onPress={() =>
+                                    dispatch(
+                                        setReaderSettings(
+                                            "lineHeight",
+                                            reader.lineHeight + 0.1
+                                        )
+                                    )
+                                }
+                                style={{ marginVertical: 0 }}
+                            />
+                        </Row>
+                    </Row>
+                    <Row
+                        style={{
+                            justifyContent: "space-between",
+                            width: "100%",
+                            paddingHorizontal: 16,
+                            marginTop: 16,
+                        }}
+                    >
+                        <ReaderSettingTitle title="Font Style" />
+                        <Menu
+                            visible={fontMenu}
+                            onDismiss={closeFontMenu}
+                            contentStyle={{ backgroundColor: theme.menuColor }}
+                            anchor={
+                                <Text
+                                    onPress={openFontMenu}
+                                    style={{
+                                        color: "white",
+                                        paddingHorizontal: 16,
+                                        fontSize: 16,
+                                        fontFamily: reader.fontFamily,
+                                    }}
+                                >
+                                    {fonts.find(
+                                        (font) =>
+                                            font.fontFamily ===
+                                            reader.fontFamily
+                                    ).name || "Default"}
+                                </Text>
+                            }
+                        >
+                            {fonts.map((font) => (
+                                <Menu.Item
+                                    key={font.fontFamily}
+                                    onPress={() =>
+                                        dispatch(
+                                            setReaderSettings(
+                                                "fontFamily",
+                                                font.fontFamily
+                                            )
+                                        )
+                                    }
+                                    icon={
+                                        font.fontFamily === reader.fontFamily &&
+                                        "check"
+                                    }
+                                    title={font.name}
+                                    style={{ backgroundColor: theme.menuColor }}
+                                    titleStyle={{
+                                        color: theme.textColorPrimary,
+                                    }}
+                                />
+                            ))}
+                        </Menu>
+                    </Row>
+                    <Row
+                        style={{
+                            justifyContent: "space-between",
+                            width: "100%",
+                            paddingHorizontal: 16,
+                            marginTop: 16,
+                        }}
+                    >
+                        <View>
+                            <ReaderSettingTitle title="Select Text " />
+                            <Text
+                                style={{
+                                    fontSize: 14,
+                                    color: "white",
+                                }}
+                            >
+                                (Justify does not work with selectable text)
+                            </Text>
+                        </View>
+                        <Switch
+                            value={selectText}
+                            onValueChange={setSelectText}
+                            color={theme.colorAccent}
+                        />
+                    </Row>
+                </View>
+            </View>
+        </Bottomsheet>
+    );
+};
+
+export default ReaderSheet;
+
+const styles = StyleSheet.create({
+    contentContainer: {
+        flex: 1,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        backgroundColor: "rgba(0,0,0,0.5)",
+    },
+    readerSettingsContainer: {
+        flex: 1,
+        alignItems: "center",
+        paddingTop: 30,
+    },
+    title: {
+        color: "#FFFFFF",
+        fontWeight: "bold",
+    },
+});

src/Screens/Chapter/readerStyleController.js

@@ -0,0 +1,31 @@
+export const readerBackground = (val) => {
+    const backgroundColor = {
+        1: "#000000",
+        2: "#FFFFFF",
+        3: "#F4ECD8",
+        4: "#444444",
+    };
+
+    return backgroundColor[val] ?? "#FFFFFF";
+};
+
+export const readerTextColor = (val) => {
+    const textColor =
+        val === 1 ? "rgba(255,255,255,0.7)" : val === 4 ? "#FFFFFF" : "#000000";
+
+    return textColor;
+};
+
+export const readerLineHeight = (fontSize, lineHeightMultiplier) => {
+    let lineHeight = fontSize * lineHeightMultiplier;
+
+    lineHeight = Math.round(lineHeight);
+
+    return lineHeight;
+};
+
+export const errorTextColor = (val) => {
+    const textColor = val === 1 ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.54)";
+
+    return textColor;
+};

src/Screens/Extension/Extension.js

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View, ActivityIndicator } from "react-native";
+import * as WebBrowser from "expo-web-browser";
+
+import NovelCover from "../../Components/NovelCover";
+import EmptyView from "../../Components/EmptyView";
+
+import { Searchbar } from "../../Components/Searchbar";
+import { useTheme, useLibrary } from "../../Hooks/reduxHooks";
+import NovelList from "../../Components/NovelList";
+import { showToast } from "../../Hooks/showToast";
+import ErrorView from "../../Components/ErrorView";
+
+const Extension = ({ navigation, route }) => {
+    const { sourceId, sourceName, sourceUrl } = route.params;
+
+    const theme = useTheme();
+    const library = useLibrary();
+
+    const [loading, setLoading] = useState(true);
+    const [novels, setNovels] = useState();
+    const [error, setError] = useState();
+
+    const [searchText, setSearchText] = useState("");
+
+    const getSourceUrl = () => {
+        if (sourceId === 1) {
+            return `https://lnreader-extensions.vercel.app/api/1/novels/1/?o=rating`;
+        } else {
+            return `https://lnreader-extensions.vercel.app/api/${sourceId}/novels/`;
+        }
+    };
+
+    const getSearchUrl = () => {
+        if (sourceId === 1) {
+            return `https://lnreader-extensions.vercel.app/api/1/search/?s=${searchText}&?o=rating`;
+        } else {
+            return `https://lnreader-extensions.vercel.app/api/${sourceId}/search/?s=${searchText}`;
+        }
+    };
+
+    const getNovels = async () => {
+        try {
+            const url = getSourceUrl();
+
+            const res = await fetch(url);
+            const data = await res.json();
+
+            setNovels(data);
+            setLoading(false);
+        } catch (error) {
+            setError(error.message);
+            setNovels([]);
+            setLoading(false);
+            showToast(error.message);
+        }
+    };
+
+    const clearSearchbar = () => {
+        getNovels();
+        setLoading(true);
+        setSearchText("");
+    };
+
+    const getSearchResults = () => {
+        setLoading(true);
+        fetch(getSearchUrl())
+            .then((response) => response.json())
+            .then((json) => {
+                setNovels(json);
+                setLoading(false);
+            })
+            .catch((error) => {
+                setNovels([]);
+                setLoading(false);
+                showToast(error.message);
+            });
+    };
+
+    const checkIFInLibrary = (sourceId, novelUrl) => {
+        return library.some(
+            (obj) => obj.novelUrl === novelUrl && obj.sourceId === sourceId
+        );
+    };
+
+    useEffect(() => {
+        getNovels();
+    }, []);
+
+    const renderItem = ({ item }) => (
+        <NovelCover
+            item={item}
+            onPress={() =>
+                navigation.navigate("Novel", {
+                    novelName: item.novelName,
+                    novelCover: item.novelCover,
+                    novelUrl: item.novelUrl,
+                    sourceId: item.extensionId,
+                })
+            }
+            libraryStatus={checkIFInLibrary(item.extensionId, item.novelUrl)}
+        />
+    );
+
+    const listEmptyComponent = () => (
+        <ErrorView
+            error={error || "No results found"}
+            onRetry={() => {
+                getNovels();
+                setLoading(true);
+                setError();
+            }}
+            openWebView={() => WebBrowser.openBrowserAsync(sourceUrl)}
+            theme={theme}
+        />
+    );
+
+    return (
+        <View
+            style={[
+                styles.container,
+                { backgroundColor: theme.colorPrimaryDark },
+            ]}
+        >
+            <Searchbar
+                theme={theme}
+                placeholder={`Search ${sourceName}`}
+                left="arrow-left"
+                onPressLeft={() => navigation.goBack()}
+                searchText={searchText}
+                onChangeText={(text) => setSearchText(text)}
+                onSubmitEditing={getSearchResults}
+                clearSearchbar={clearSearchbar}
+                right="earth"
+                displayMenu={true}
+                onPressRight={() => WebBrowser.openBrowserAsync(sourceUrl)}
+            />
+
+            {loading ? (
+                <View style={{ flex: 1, justifyContent: "center" }}>
+                    <ActivityIndicator size={60} color={theme.colorAccent} />
+                </View>
+            ) : (
+                <NovelList
+                    data={novels}
+                    renderItem={renderItem}
+                    ListEmptyComponent={listEmptyComponent()}
+                />
+            )}
+        </View>
+    );
+};
+
+export default Extension;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    contentContainer: {
+        flex: 1,
+    },
+});

src/Screens/History/History.js

@@ -0,0 +1,171 @@
+import React, { useState, useEffect } from "react";
+import { StyleSheet, FlatList, ActivityIndicator, Text } from "react-native";
+
+import HistoryCard from "./components/HistoryCard";
+
+import { useDispatch, useSelector } from "react-redux";
+import EmptyView from "../../Components/EmptyView";
+
+import {
+    getHistoryAction,
+    clearAllHistoryAction,
+} from "../../redux/history/history.actions";
+
+import moment from "moment";
+import { dateFormat } from "../../Services/utils/constants";
+import { ScreenContainer } from "../../Components/Common";
+import { Searchbar } from "../../Components/Searchbar";
+import { useTheme } from "../../Hooks/reduxHooks";
+import { Button, Dialog, Portal } from "react-native-paper";
+
+const History = ({ navigation }) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+    const { history, loading } = useSelector((state) => state.historyReducer);
+
+    const [searchText, setSearchText] = useState("");
+    const [searchResults, setSearchResults] = useState([]);
+
+    /**
+     * Confirm Clear History Dialog
+     */
+    const [visible, setVisible] = useState(false);
+    const showDialog = () => setVisible(true);
+    const hideDialog = () => setVisible(false);
+
+    useEffect(() => {
+        dispatch(getHistoryAction());
+    }, [getHistoryAction]);
+
+    const renderHistoryCard = ({ item }) => (
+        <HistoryCard
+            dispatch={dispatch}
+            item={item}
+            theme={theme}
+            navigation={navigation}
+        />
+    );
+
+    const clearSearchbar = () => setSearchText("");
+
+    const onChangeText = (text) => {
+        setSearchText(text);
+        let results = [];
+
+        text !== "" &&
+            history.map((item) => {
+                const date = item.date;
+                const novels = item.novels.filter((novel) =>
+                    novel.novelName.toLowerCase().includes(text.toLowerCase())
+                );
+
+                if (novels.length > 0) {
+                    results.push({
+                        date,
+                        novels,
+                    });
+                }
+            });
+
+        setSearchResults(results);
+    };
+
+    return (
+        <ScreenContainer theme={theme}>
+            <Searchbar
+                placeholder="Search History"
+                searchText={searchText}
+                clearSearchbar={clearSearchbar}
+                onChangeText={onChangeText}
+                left="magnify"
+                theme={theme}
+                right="trash-can-outline"
+                onPressRight={showDialog}
+            />
+            <FlatList
+                contentContainerStyle={{
+                    flexGrow: 1,
+                    paddingVertical: 8,
+                    paddingHorizontal: 16,
+                }}
+                data={searchText ? searchResults : history}
+                keyExtractor={(index) => index.toString()}
+                renderItem={({ item }) => (
+                    <FlatList
+                        keyExtractor={(item, index) => index.toString()}
+                        data={item.novels}
+                        renderItem={renderHistoryCard}
+                        ListHeaderComponent={
+                            <Text
+                                style={{
+                                    textTransform: "uppercase",
+                                    paddingVertical: 8,
+                                    color: theme.textColorSecondary,
+                                }}
+                            >
+                                {moment(item.date).calendar(null, dateFormat)}
+                            </Text>
+                        }
+                    />
+                )}
+                ListFooterComponent={
+                    loading && (
+                        <ActivityIndicator
+                            size="small"
+                            color={theme.colorAccent}
+                        />
+                    )
+                }
+                ListEmptyComponent={
+                    <EmptyView
+                        icon="(˘･_･˘)"
+                        description="Nothing read recently"
+                    />
+                }
+            />
+            <Portal>
+                <Dialog
+                    visible={visible}
+                    onDismiss={hideDialog}
+                    style={{
+                        borderRadius: 6,
+                        backgroundColor: theme.colorPrimary,
+                    }}
+                >
+                    <Dialog.Title
+                        style={{
+                            letterSpacing: 0,
+                            fontSize: 16,
+                            color: theme.textColorPrimary,
+                        }}
+                    >
+                        Are you sure? All history will be lost.
+                    </Dialog.Title>
+                    <Dialog.Actions>
+                        <Button
+                            uppercase={false}
+                            theme={{ colors: { primary: theme.colorAccent } }}
+                            onPress={hideDialog}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            uppercase={false}
+                            theme={{ colors: { primary: theme.colorAccent } }}
+                            onPress={() => {
+                                dispatch(clearAllHistoryAction());
+                                hideDialog();
+                            }}
+                        >
+                            Ok
+                        </Button>
+                    </Dialog.Actions>
+                </Dialog>
+            </Portal>
+        </ScreenContainer>
+    );
+};
+
+export default History;
+
+const styles = StyleSheet.create({});

src/Screens/History/components/HistoryCard.js

@@ -5,24 +5,21 @@ import { TouchableRipple, IconButton } from "react-native-paper";
 
 import moment from "moment";
 
-import { useSelector } from "react-redux";
-
-const HistoryCard = ({ item, deleteHistoryAction, navigation }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
+import { useDispatch } from "react-redux";
+import { setNovel } from "../../../redux/novel/novel.actions";
+import { parseChapterNumber } from "../../../Services/utils/helpers";
+import { deleteHistoryAction } from "../../../redux/history/history.actions";
 
+const HistoryCard = ({ item, navigation, theme, dispatch }) => {
     return (
         <TouchableRipple
             style={styles.historyCard}
             rippleColor={theme.rippleColor}
             borderless
-            onPress={() =>
-                navigation.navigate("NovelItem", {
-                    novelName: item.novelName,
-                    novelCover: item.novelCover,
-                    extensionId: item.extensionId,
-                    novelUrl: item.novelUrl,
-                })
-            }
+            onPress={() => {
+                navigation.navigate("Novel", item);
+                dispatch(setNovel(item));
+            }}
         >
             <>
                 <Image
@@ -48,9 +45,11 @@ const HistoryCard = ({ item, deleteHistoryAction, navigation }) => {
                             }}
                             numberOfLines={1}
                         >
-                            {`${item.chapterName} - ${moment(
-                                item.historyTimeRead
-                            ).calendar()}`}
+                            {`Ch. ${parseChapterNumber(
+                                item.chapterName
+                            )} - ${moment(item.historyTimeRead)
+                                .format("h:mm a")
+                                .toUpperCase()}`}
                         </Text>
                     </View>
                     <View
@@ -66,21 +65,24 @@ const HistoryCard = ({ item, deleteHistoryAction, navigation }) => {
                             style={{
                                 marginRight: 0,
                             }}
-                            onPress={() => deleteHistoryAction(item.novelId)}
+                            onPress={() =>
+                                dispatch(deleteHistoryAction(item.historyId))
+                            }
                         />
                         <IconButton
                             icon="play"
                             size={24}
                             color={theme.textColorPrimary}
-                            style={{ marginRight: 10 }}
+                            style={{ marginRight: 0 }}
                             onPress={() =>
-                                navigation.navigate("ChapterItem", {
+                                navigation.navigate("Chapter", {
                                     chapterId: item.historyChapterId,
                                     chapterUrl: item.chapterUrl,
-                                    extensionId: item.sourceId,
+                                    sourceId: item.sourceId,
                                     novelUrl: item.novelUrl,
                                     novelId: item.novelId,
                                     chapterName: item.chapterName,
+                                    novelName: item.novelName,
                                 })
                             }
                         />
@@ -95,7 +97,7 @@ export default HistoryCard;
 
 const styles = StyleSheet.create({
     historyCard: {
-        marginBottom: 15,
+        marginVertical: 8,
         borderRadius: 4,
         flexDirection: "row",
         alignItems: "center",

src/Screens/Library/Library.js

@@ -0,0 +1,172 @@
+import React, { useState, useCallback, useRef } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    RefreshControl,
+    ActivityIndicator,
+    TouchableOpacity,
+} from "react-native";
+import { useFocusEffect } from "@react-navigation/native";
+import { useSelector, useDispatch } from "react-redux";
+
+import { Searchbar } from "../../Components/Searchbar";
+import NovelList from "../../Components/NovelList";
+import NovelCover from "../../Components/NovelCover";
+import EmptyView from "../../Components/EmptyView";
+
+import {
+    getLibraryAction,
+    searchLibraryAction,
+} from "../../redux/library/library.actions";
+import { updateLibraryAction } from "../../redux/updates/updates.actions";
+import { useSettings, useTheme } from "../../Hooks/reduxHooks";
+import { setNovel } from "../../redux/novel/novel.actions";
+import { Portal, TouchableRipple } from "react-native-paper";
+import LibraryFilterSheet from "./components/LibraryFilterSheet";
+
+const LibraryScreen = ({ navigation }) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+    const { showNumberOfNovels } = useSettings();
+
+    const libraryFilterSheetRef = useRef(null);
+
+    const {
+        loading,
+        novels,
+        filters: { sort, filter },
+    } = useSelector((state) => state.libraryReducer);
+
+    const [refreshing, setRefreshing] = useState(false);
+    const [searchText, setSearchText] = useState("");
+
+    useFocusEffect(
+        useCallback(() => {
+            setSearchText("");
+            dispatch(getLibraryAction(sort, filter));
+        }, [getLibraryAction, sort, filter])
+    );
+
+    const onRefresh = () => {
+        setRefreshing(true);
+        dispatch(updateLibraryAction());
+        setRefreshing(false);
+    };
+
+    const clearSearchbar = () => {
+        dispatch(getLibraryAction(sort, filter));
+        setSearchText("");
+    };
+
+    const onChangeText = (text) => {
+        setSearchText(text);
+        dispatch(searchLibraryAction(text, sort, filter));
+    };
+
+    const renderItem = ({ item }) => (
+        <NovelCover
+            item={item}
+            onPress={() => {
+                navigation.navigate("Novel", item);
+                dispatch(setNovel(item));
+            }}
+        />
+    );
+
+    const refreshControl = () => (
+        <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            colors={["white"]}
+            progressBackgroundColor={theme.colorAccent}
+        />
+    );
+
+    // if (!loading) {
+    //     console.log(novels);
+    // }
+
+    const listEmptyComponent = () =>
+        searchText === "" && (
+            <EmptyView
+                icon="Σ(ಠ_ಠ)"
+                description="Your library is empty. Add series to your library from Browse."
+            />
+        );
+
+    return (
+        <>
+            <View
+                style={[
+                    styles.container,
+                    { backgroundColor: theme.colorPrimaryDark },
+                ]}
+            >
+                <Searchbar
+                    placeholder={`Search Library ${
+                        showNumberOfNovels ? "(" + novels.length + ")" : ""
+                    }`}
+                    searchText={searchText}
+                    clearSearchbar={clearSearchbar}
+                    onChangeText={onChangeText}
+                    left="magnify"
+                    right="filter-variant"
+                    filter={filter}
+                    onPressRight={() => libraryFilterSheetRef.current.show()}
+                    theme={theme}
+                />
+                {loading ? (
+                    <ActivityIndicator size="small" color={theme.colorAccent} />
+                ) : (
+                    <>
+                        {searchText !== "" && (
+                            <TouchableRipple
+                                onPress={() =>
+                                    navigation.navigate("GlobalSearch", {
+                                        novelName: searchText,
+                                    })
+                                }
+                                borderless
+                                rippleColor={theme.colorAccent}
+                                style={styles.emptySearch}
+                            >
+                                <Text style={{ color: theme.colorAccent }}>
+                                    {`Search for "${searchText}" globally`}
+                                </Text>
+                            </TouchableRipple>
+                        )}
+                        <NovelList
+                            data={novels}
+                            renderItem={renderItem}
+                            refreshControl={refreshControl()}
+                            ListEmptyComponent={listEmptyComponent}
+                        />
+                        <Portal>
+                            <LibraryFilterSheet
+                                bottomSheetRef={libraryFilterSheetRef}
+                                theme={theme}
+                                dispatch={dispatch}
+                                sort={sort}
+                                filter={filter}
+                            />
+                        </Portal>
+                    </>
+                )}
+            </View>
+        </>
+    );
+};
+
+export default LibraryScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    emptySearch: {
+        alignItems: "center",
+        paddingVertical: 8,
+        borderRadius: 4,
+    },
+});

src/Screens/Library/components/LibraryFilterSheet.js

@@ -0,0 +1,362 @@
+import React, { useState } from "react";
+import {
+    StyleSheet,
+    View,
+    Text,
+    Animated,
+    useWindowDimensions,
+} from "react-native";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";
+
+import { Checkbox } from "react-native-paper";
+
+import Bottomsheet from "rn-sliding-up-panel";
+import { ListItem } from "../../../Components/List";
+import { filterLibrary } from "../../../redux/library/library.actions";
+import { useSettings } from "../../../Hooks/reduxHooks";
+import { setAppSettings } from "../../../redux/settings/settings.actions";
+
+const LibraryFilterSheet = ({
+    bottomSheetRef,
+    dispatch,
+    sort,
+    filter,
+    theme,
+}) => {
+    const [animatedValue] = useState(new Animated.Value(0));
+
+    const FirstRoute = () => (
+        <View style={{ flex: 1 }}>
+            <Checkbox.Item
+                label="Downloaded"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={
+                    filter === "chaptersDownloaded > 0"
+                        ? "checked"
+                        : "unchecked"
+                }
+                onPress={() =>
+                    filter === "chaptersDownloaded > 0"
+                        ? dispatch(filterLibrary(sort, ""))
+                        : dispatch(
+                              filterLibrary(sort, "chaptersDownloaded > 0")
+                          )
+                }
+            />
+            <Checkbox.Item
+                label="Unread"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={filter === "unread = 1" ? "checked" : "unchecked"}
+                onPress={() =>
+                    filter === "unread = 1"
+                        ? dispatch(filterLibrary(sort, ""))
+                        : dispatch(filterLibrary(sort, "unread = 1"))
+                }
+            />
+            <Checkbox.Item
+                label="Completed"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={
+                    filter === "chaptersUnread IS NULL"
+                        ? "checked"
+                        : "unchecked"
+                }
+                onPress={() =>
+                    filter === "chaptersUnread IS NULL"
+                        ? dispatch(filterLibrary(sort, ""))
+                        : dispatch(
+                              filterLibrary(sort, "chaptersUnread IS NULL")
+                          )
+                }
+            />
+        </View>
+    );
+
+    const SecondRoute = () => (
+        <View style={{ flex: 1 }}>
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Date Added"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "novels.novelId ASC"
+                        ? "arrow-up"
+                        : sort === "novels.novelId DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "novels.novelId ASC"
+                        ? dispatch(filterLibrary("novels.novelId DESC", filter))
+                        : dispatch(filterLibrary("novels.novelId ASC", filter))
+                }
+            />
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Alphabetically"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "novels.novelName ASC"
+                        ? "arrow-up"
+                        : sort === "novels.novelName DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "novels.novelName ASC"
+                        ? dispatch(
+                              filterLibrary("novels.novelName DESC", filter)
+                          )
+                        : dispatch(
+                              filterLibrary("novels.novelName ASC", filter)
+                          )
+                }
+            />
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Unread"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "novels.unread ASC"
+                        ? "arrow-up"
+                        : sort === "novels.unread DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "novels.unread ASC"
+                        ? dispatch(filterLibrary("novels.unread DESC", filter))
+                        : dispatch(filterLibrary("novels.unread ASC", filter))
+                }
+            />
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Downloaded"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "chaptersDownloaded ASC"
+                        ? "arrow-up"
+                        : sort === "chaptersDownloaded DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "chaptersDownloaded ASC"
+                        ? dispatch(
+                              filterLibrary("chaptersDownloaded DESC", filter)
+                          )
+                        : dispatch(
+                              filterLibrary("chaptersDownloaded ASC", filter)
+                          )
+                }
+            />
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="Total Chapters"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "chaptersUnread ASC"
+                        ? "arrow-up"
+                        : sort === "chaptersUnread DESC"
+                        ? "arrow-down"
+                        : null
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "chaptersUnread ASC"
+                        ? dispatch(filterLibrary("chaptersUnread DESC", filter))
+                        : dispatch(filterLibrary("chaptersUnread ASC", filter))
+                }
+            />
+        </View>
+    );
+
+    const displayModes = [
+        { displayMode: 0, label: "Compact Grid" },
+        { displayMode: 1, label: "Comfortable Grid" },
+        { displayMode: 2, label: "List" },
+    ];
+
+    const {
+        displayMode,
+        showDownloadBadges,
+        showUnreadBadges,
+        showNumberOfNovels,
+    } = useSettings();
+
+    const renderCheckboxes = () => {
+        return displayModes.map((mode) => (
+            <Checkbox.Item
+                key={mode.displayMode}
+                label={mode.label}
+                labelStyle={{ color: theme.textColorPrimary, fontSize: 14 }}
+                status={
+                    displayMode === mode.displayMode ? "checked" : "unchecked"
+                }
+                // mode="ios"
+                uncheckedColor={theme.textColorSecondary}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(setAppSettings("displayMode", mode.displayMode))
+                }
+            />
+        ));
+    };
+
+    const ThirdRoute = () => (
+        <View style={{ flex: 1 }}>
+            <Text
+                style={{
+                    color: theme.textColorSecondary,
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    textTransform: "uppercase",
+                }}
+            >
+                Display Mode
+            </Text>
+            {renderCheckboxes()}
+
+            <Text
+                style={{
+                    color: theme.textColorSecondary,
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    textTransform: "uppercase",
+                }}
+            >
+                Badges
+            </Text>
+            <Checkbox.Item
+                label="Download Badges"
+                labelStyle={{ color: theme.textColorPrimary, fontSize: 14 }}
+                status={showDownloadBadges ? "checked" : "unchecked"}
+                uncheckedColor={theme.textColorSecondary}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(
+                        setAppSettings(
+                            "showDownloadBadges",
+                            !showDownloadBadges
+                        )
+                    )
+                }
+            />
+            <Checkbox.Item
+                label="Unread Badges"
+                labelStyle={{ color: theme.textColorPrimary, fontSize: 14 }}
+                status={showUnreadBadges ? "checked" : "unchecked"}
+                uncheckedColor={theme.textColorSecondary}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(
+                        setAppSettings("showUnreadBadges", !showUnreadBadges)
+                    )
+                }
+            />
+            <Checkbox.Item
+                label="Show number of items"
+                labelStyle={{ color: theme.textColorPrimary, fontSize: 14 }}
+                status={showNumberOfNovels ? "checked" : "unchecked"}
+                uncheckedColor={theme.textColorSecondary}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(
+                        setAppSettings(
+                            "showNumberOfNovels",
+                            !showNumberOfNovels
+                        )
+                    )
+                }
+            />
+        </View>
+    );
+
+    const renderScene = SceneMap({
+        first: FirstRoute,
+        second: SecondRoute,
+        third: ThirdRoute,
+    });
+
+    const layout = useWindowDimensions();
+
+    const [index, setIndex] = useState(0);
+    const [routes] = useState([
+        { key: "first", title: "Filter" },
+        { key: "second", title: "Sort" },
+        { key: "third", title: "Display" },
+    ]);
+
+    const renderTabBar = (props) => (
+        <TabBar
+            {...props}
+            indicatorStyle={{ backgroundColor: theme.colorAccent }}
+            style={{ backgroundColor: theme.colorPrimary }}
+            renderLabel={({ route, focused, color }) => (
+                <Text style={{ color, margin: 8 }}>{route.title}</Text>
+            )}
+            inactiveColor={theme.textColorSecondary}
+            activeColor={theme.colorAccent}
+            pressColor={theme.rippleColor}
+        />
+    );
+
+    return (
+        <Bottomsheet
+            animatedValue={animatedValue}
+            ref={bottomSheetRef}
+            draggableRange={{ top: 470, bottom: 0 }}
+            snappingPoints={[0, 470]}
+        >
+            <View
+                style={[
+                    styles.contentContainer,
+                    { backgroundColor: theme.colorPrimaryDark },
+                ]}
+            >
+                <TabView
+                    navigationState={{ index, routes }}
+                    renderTabBar={renderTabBar}
+                    renderScene={renderScene}
+                    onIndexChange={setIndex}
+                    initialLayout={{ width: layout.width }}
+                    style={{ borderTopRightRadius: 8, borderTopLeftRadius: 8 }}
+                />
+            </View>
+        </Bottomsheet>
+    );
+};
+
+export default LibraryFilterSheet;
+
+const styles = StyleSheet.create({
+    contentContainer: {
+        flex: 1,
+        borderTopRightRadius: 8,
+        borderTopLeftRadius: 8,
+    },
+});

src/Screens/More/About.js

@@ -2,13 +2,13 @@ import React from "react";
 import { View } from "react-native";
 import * as Linking from "expo-linking";
 
-import { Appbar } from "../../components/Appbar";
+import { Appbar } from "../../Components/Appbar";
 
 import { useSelector } from "react-redux";
-import { Divider, ListItem, ListSection } from "../../components/List";
+import { Divider, ListItem, ListSection } from "../../Components/List";
 
 const AboutScreen = ({ navigation }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
+    const theme = useSelector((state) => state.settingsReducer.theme);
 
     return (
         <>
@@ -17,12 +17,12 @@ const AboutScreen = ({ navigation }) => {
                 <ListSection>
                     <ListItem
                         title="Version"
-                        description="Stable 1.0.15"
+                        description="Stable 1.0.19"
                         theme={theme}
                     />
                     <ListItem
                         title="Build Time"
-                        description="30-04-21 11:00 AM"
+                        description="31-05-21 21:30 PM"
                         theme={theme}
                     />
                     <ListItem
@@ -54,11 +54,11 @@ const AboutScreen = ({ navigation }) => {
                         theme={theme}
                     />
                     <ListItem
-                        title="Extensions"
-                        description="https://github.com/rajarsheechatterjee/lnreader-extensions"
+                        title="Sources"
+                        description="https://github.com/rajarsheechatterjee/lnreader-sources"
                         onPress={() =>
                             Linking.openURL(
-                                "https://github.com/rajarsheechatterjee/lnreader-extensions"
+                                "https://github.com/rajarsheechatterjee/lnreader-sources"
                             )
                         }
                         theme={theme}

src/Screens/More/AdvancedSettings.js

@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { Appbar } from "../../Components/Appbar";
+import { ScreenContainer } from "../../Components/Common";
+import { ListItem, ListSection, ListSubHeader } from "../../Components/List";
+
+import { useTheme } from "../../Hooks/reduxHooks";
+
+import { clearAllHistoryAction } from "../../redux/history/history.actions";
+import { deleteNovelCache } from "../../Database/queries/NovelQueries";
+import { Button, Dialog, Portal } from "react-native-paper";
+
+const AdvancedSettings = ({ navigation }) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+
+    const [visible, setVisible] = useState(false);
+    const showDialog = () => setVisible(true);
+    const hideDialog = () => setVisible(false);
+
+    /**
+     * Confirm Clear Database Dialog
+     */
+    const [clearDatabaseDialog, setClearDatabaseDialog] = useState(false);
+    const showClearDatabaseDialog = () => setClearDatabaseDialog(true);
+    const hideClearDatabaseDialog = () => setClearDatabaseDialog(false);
+
+    return (
+        <ScreenContainer theme={theme}>
+            <Appbar title="Advanced" onBackAction={() => navigation.goBack()} />
+            <ListSection>
+                <ListSubHeader theme={theme}>Data</ListSubHeader>
+                <ListItem
+                    title="Clear database"
+                    description="Delete history for novels not in your library"
+                    onPress={showClearDatabaseDialog}
+                    theme={theme}
+                />
+                <ListItem
+                    title="Clear history"
+                    description="Delete reading history for all novels"
+                    onPress={showDialog}
+                    theme={theme}
+                />
+            </ListSection>
+            <Portal>
+                <Dialog
+                    visible={visible}
+                    onDismiss={hideDialog}
+                    style={{
+                        borderRadius: 6,
+                        backgroundColor: theme.colorPrimary,
+                    }}
+                >
+                    <Dialog.Title
+                        style={{
+                            letterSpacing: 0,
+                            fontSize: 16,
+                            color: theme.textColorPrimary,
+                        }}
+                    >
+                        Are you sure? All history will be lost.
+                    </Dialog.Title>
+                    <Dialog.Actions>
+                        <Button
+                            uppercase={false}
+                            theme={{ colors: { primary: theme.colorAccent } }}
+                            onPress={hideDialog}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            uppercase={false}
+                            theme={{ colors: { primary: theme.colorAccent } }}
+                            onPress={() => {
+                                dispatch(clearAllHistoryAction());
+                                hideDialog();
+                            }}
+                        >
+                            Ok
+                        </Button>
+                    </Dialog.Actions>
+                </Dialog>
+                <Dialog
+                    visible={clearDatabaseDialog}
+                    onDismiss={hideClearDatabaseDialog}
+                    style={{
+                        borderRadius: 6,
+                        backgroundColor: theme.colorPrimary,
+                    }}
+                >
+                    <Dialog.Title
+                        style={{
+                            letterSpacing: 0,
+                            fontSize: 16,
+                            lineHeight: 16 * 1.5,
+                            color: theme.textColorPrimary,
+                        }}
+                    >
+                        Are you sure? Read chapters and progress of non-library
+                        novels will be lost.
+                    </Dialog.Title>
+                    <Dialog.Actions>
+                        <Button
+                            uppercase={false}
+                            theme={{ colors: { primary: theme.colorAccent } }}
+                            onPress={hideClearDatabaseDialog}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            uppercase={false}
+                            theme={{ colors: { primary: theme.colorAccent } }}
+                            onPress={() => {
+                                deleteNovelCache();
+                                hideClearDatabaseDialog();
+                            }}
+                        >
+                            Ok
+                        </Button>
+                    </Dialog.Actions>
+                </Dialog>
+            </Portal>
+        </ScreenContainer>
+    );
+};
+
+export default AdvancedSettings;

src/Screens/More/BackupSettings.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+
+import { Appbar } from "../../Components/Appbar";
+import {
+    InfoItem,
+    ListItem,
+    ListSection,
+    ListSubHeader,
+} from "../../Components/List";
+import { ScreenContainer } from "../../Components/Common";
+
+import { useTheme } from "../../Hooks/reduxHooks";
+import { restoreLibraryAction } from "../../redux/library/library.actions";
+import { createBackup } from "../../Services/backup";
+
+const BackupSettings = ({ navigation }) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+
+    return (
+        <>
+            <ScreenContainer theme={theme}>
+                <Appbar
+                    title="Backup"
+                    onBackAction={() => navigation.goBack()}
+                />
+                <ListSection>
+                    <ListSubHeader theme={theme}>Backup</ListSubHeader>
+                    <ListItem
+                        title="Create backup"
+                        description="Can be used to restore current library"
+                        onPress={createBackup}
+                        theme={theme}
+                    />
+                    <ListItem
+                        title="Restore backup"
+                        description="Restore library from backup file"
+                        onPress={() => dispatch(restoreLibraryAction())}
+                        theme={theme}
+                    />
+                    <InfoItem
+                        title="Create backup may not work on devices with Android 9 or lower."
+                        icon="information-outline"
+                        description="Restore library from backup file"
+                        theme={theme}
+                    />
+                </ListSection>
+            </ScreenContainer>
+        </>
+    );
+};
+
+export default BackupSettings;

src/Screens/More/GeneralSettings.js

@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { Appbar } from "../../Components/Appbar";
+import {
+    Divider,
+    ListItem,
+    ListSection,
+    ListSubHeader,
+} from "../../Components/List";
+import { ScreenContainer } from "../../Components/Common";
+
+import { useTheme } from "../../Hooks/reduxHooks";
+import DisplayModeModal from "./components/DisplayModeModal";
+import GridSizeModal from "./components/GridSizeModal";
+import ThemeModal from "./components/ThemeModal";
+import AccentColorModal from "./components/AccentColorModal";
+
+const GenralSettings = ({ navigation }) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+
+    const { displayMode, novelsPerRow } = useSelector(
+        (state) => state.settingsReducer
+    );
+
+    const displayModeLabel = (displayMode) => {
+        const label = {
+            0: "Compact Grid",
+            1: "Comfortable Grid",
+            2: "List",
+        };
+
+        return label[displayMode] ?? "Compact Grid";
+    };
+
+    /**
+     * Display Mode Modal
+     */
+    const [displayModalVisible, setDisplayModalVisible] = useState(false);
+    const showDisplayModal = () => setDisplayModalVisible(true);
+    const hideDisplayModal = () => setDisplayModalVisible(false);
+
+    /**
+     * Theme Modal
+     */
+    const [themeModalVisible, setthemeModalVisible] = useState(false);
+    const showthemeModal = () => setthemeModalVisible(true);
+    const hidethemeModal = () => setthemeModalVisible(false);
+
+    /**
+     * Grid Size Modal
+     */
+    const [gridSizeModalVisible, setGridSizeModalVisible] = useState(false);
+    const showGridSizeModal = () => setGridSizeModalVisible(true);
+    const hideGridSizeModal = () => setGridSizeModalVisible(false);
+
+    /**
+     * Accent Color Modal
+     */
+    const [accentColorModal, setAccentColorModal] = useState(false);
+    const showAccentColorModal = () => setAccentColorModal(true);
+    const hideAccentColorModal = () => setAccentColorModal(false);
+
+    return (
+        <ScreenContainer theme={theme}>
+            <Appbar title="General" onBackAction={() => navigation.goBack()} />
+            <ListSection>
+                <ListSubHeader theme={theme}>Display</ListSubHeader>
+                <ListItem
+                    title="Display Mode"
+                    description={displayModeLabel(displayMode)}
+                    onPress={showDisplayModal}
+                    theme={theme}
+                />
+                <ListItem
+                    title="Items per row in library"
+                    description={`${novelsPerRow} items per row`}
+                    onPress={showGridSizeModal}
+                    theme={theme}
+                />
+                <Divider theme={theme} />
+                <ListSubHeader theme={theme}>Theme</ListSubHeader>
+                <ListItem
+                    title="Theme"
+                    description={theme.name}
+                    onPress={showthemeModal}
+                    theme={theme}
+                />
+                <ListItem
+                    title="Accent Color"
+                    description={theme.colorAccent}
+                    onPress={showAccentColorModal}
+                    theme={theme}
+                    iconColor={theme.colorAccent}
+                    right="circle"
+                />
+            </ListSection>
+            <DisplayModeModal
+                displayMode={displayMode}
+                displayModalVisible={displayModalVisible}
+                hideDisplayModal={hideDisplayModal}
+                dispatch={dispatch}
+                theme={theme}
+            />
+            <GridSizeModal
+                dispatch={dispatch}
+                novelsPerRow={novelsPerRow}
+                gridSizeModalVisible={gridSizeModalVisible}
+                hideGridSizeModal={hideGridSizeModal}
+                theme={theme}
+            />
+            <ThemeModal
+                dispatch={dispatch}
+                themeModalVisible={themeModalVisible}
+                hidethemeModal={hidethemeModal}
+                theme={theme}
+            />
+            <AccentColorModal
+                dispatch={dispatch}
+                accentColorModal={accentColorModal}
+                hideAccentColorModal={hideAccentColorModal}
+                theme={theme}
+            />
+        </ScreenContainer>
+    );
+};
+
+export default GenralSettings;

src/Screens/More/More.js

@@ -1,12 +1,13 @@
 import React from "react";
 import { StyleSheet, View, Image } from "react-native";
-import { useSelector } from "react-redux";
 
-import { Appbar } from "../../components/Appbar";
-import { ListItem, ListSection } from "../../components/List";
+import { Appbar } from "../../Components/Appbar";
+import { ListItem, ListSection } from "../../Components/List";
+
+import { useTheme } from "../../Hooks/reduxHooks";
 
 const MoreScreen = ({ navigation }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
+    const theme = useTheme();
 
     return (
         <>
@@ -15,8 +16,8 @@ const MoreScreen = ({ navigation }) => {
                 <View style={{ overflow: "hidden", paddingBottom: 4 }}>
                     <View
                         style={{
-                            paddingTop: 20,
-                            paddingBottom: 30,
+                            paddingTop: 10,
+                            paddingBottom: 25,
                             alignItems: "center",
                             backgroundColor: theme.colorPrimary,
                             elevation: 4,
@@ -25,8 +26,8 @@ const MoreScreen = ({ navigation }) => {
                         <Image
                             source={require("../../../assets/logo.png")}
                             style={{
-                                height: 60,
-                                width: 60,
+                                height: 80,
+                                width: 80,
                                 tintColor: theme.textColorPrimary,
                             }}
                         />
@@ -37,27 +38,18 @@ const MoreScreen = ({ navigation }) => {
                         title="Settings"
                         icon="cog-outline"
                         onPress={() =>
-                            navigation.navigate("SettingsStack", {
-                                screen: "Settings",
-                            })
-                        }
-                        theme={theme}
-                    />
-                    <ListItem
-                        title="Tracking"
-                        icon="sync"
-                        onPress={() =>
-                            navigation.navigate("SettingsStack", {
-                                screen: "Trackers",
+                            navigation.navigate("MoreStack", {
+                                screen: "SettingsStack",
                             })
                         }
                         theme={theme}
                     />
+
                     <ListItem
                         title="About"
                         icon="information-outline"
                         onPress={() =>
-                            navigation.navigate("SettingsStack", {
+                            navigation.navigate("MoreStack", {
                                 screen: "About",
                             })
                         }

src/Screens/More/ReaderSettings.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+
+import { Appbar } from "../../Components/Appbar";
+import { ScreenContainer } from "../../Components/Common";
+
+import { useTheme } from "../../Hooks/reduxHooks";
+
+const ReaderSettings = ({ navigation }) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+
+    return (
+        <ScreenContainer theme={theme}>
+            <Appbar title="Reader" onBackAction={() => navigation.goBack()} />
+        </ScreenContainer>
+    );
+};
+
+export default ReaderSettings;

src/Screens/More/Settings.js

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { connect, useDispatch } from "react-redux";
+
+import { setAppTheme } from "../../redux/settings/settings.actions";
+import {
+    setAppSettings,
+    setItemsPerRow,
+} from "../../redux/settings/settings.actions";
+import { deleteNovelCache } from "../../Database/queries/NovelQueries";
+
+import { Appbar } from "../../Components/Appbar";
+import {
+    Divider,
+    ListItem,
+    ListSection,
+    ListSubHeader,
+} from "../../Components/List";
+import { useTheme } from "../../Hooks/reduxHooks";
+import { clearAllHistoryAction } from "../../redux/history/history.actions";
+
+const SettingsScreen = ({ navigation }) => {
+    const theme = useTheme();
+
+    const dispatch = useDispatch();
+
+    return (
+        <>
+            <Appbar title="Settings" onBackAction={() => navigation.goBack()} />
+            <View
+                style={{
+                    flex: 1,
+                    backgroundColor: theme.colorPrimaryDark,
+                }}
+            >
+                <ListItem
+                    title="General"
+                    icon="tune"
+                    onPress={() =>
+                        navigation.navigate("SettingsStack", {
+                            screen: "GeneralSettings",
+                        })
+                    }
+                    theme={theme}
+                />
+                {/* <ListItem
+                    title="Reader"
+                    icon="book-open-outline"
+                    onPress={() =>
+                        navigation.navigate("SettingsStack", {
+                            screen: "ReaderSettings",
+                        })
+                    }
+                    theme={theme}
+                /> */}
+                <ListItem
+                    title="Tracking"
+                    icon="sync"
+                    onPress={() =>
+                        navigation.navigate("SettingsStack", {
+                            screen: "TrackerSettings",
+                        })
+                    }
+                    theme={theme}
+                />
+                <ListItem
+                    title="Backup"
+                    icon="cloud-upload-outline"
+                    onPress={() =>
+                        navigation.navigate("SettingsStack", {
+                            screen: "BackupSettings",
+                        })
+                    }
+                    theme={theme}
+                />
+                <ListItem
+                    title="Advanced"
+                    icon="code-tags"
+                    onPress={() =>
+                        navigation.navigate("SettingsStack", {
+                            screen: "AdvancedSettings",
+                        })
+                    }
+                    theme={theme}
+                />
+            </View>
+        </>
+    );
+};
+
+export default SettingsScreen;

src/Screens/More/TrackerSettings.js

@@ -7,8 +7,8 @@ import {
     myAnimeListConfig,
     getAccessToken,
     malTokenWatcher,
-} from "../../trackers/MyAnimeList";
-import { Appbar } from "../../components/Appbar";
+} from "../../Services/Trackers/myAnimeList";
+import { Appbar } from "../../Components/Appbar";
 
 import { useSelector, useDispatch } from "react-redux";
 import {
@@ -16,11 +16,11 @@ import {
     ListItem,
     ListSection,
     ListSubHeader,
-} from "../../components/List";
+} from "../../Components/List";
 import { removeTracker, setTracker } from "../../redux/tracker/tracker.actions";
 
 const TrackerScreen = ({ navigation }) => {
-    const theme = useSelector((state) => state.themeReducer.theme);
+    const theme = useSelector((state) => state.settingsReducer.theme);
     const tracker = useSelector((state) => state.trackerReducer.tracker);
     const dispatch = useDispatch();
 
@@ -125,7 +125,7 @@ const TrackerScreen = ({ navigation }) => {
                             <Button
                                 style={{ marginTop: 30 }}
                                 labelStyle={{
-                                    color: theme.colorAccentDark,
+                                    color: theme.colorAccent,
                                     letterSpacing: 0,
                                     textTransform: "none",
                                 }}
@@ -136,7 +136,7 @@ const TrackerScreen = ({ navigation }) => {
                             <Button
                                 style={{ marginTop: 30 }}
                                 labelStyle={{
-                                    color: theme.colorAccentDark,
+                                    color: theme.colorAccent,
                                     letterSpacing: 0,
                                     textTransform: "none",
                                 }}

src/Screens/More/components/AccentColorModal.js

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { StyleSheet, Text } from "react-native";
+import { Modal, Portal, TextInput } from "react-native-paper";
+import { setAccentColor } from "../../../redux/settings/settings.actions";
+
+const AccentColorModal = ({
+    dispatch,
+    accentColorModal,
+    hideAccentColorModal,
+    theme,
+}) => {
+    const [text, setText] = useState(theme.colorAccent);
+    const [error, setError] = useState();
+
+    return (
+        <Portal>
+            <Modal
+                visible={accentColorModal}
+                onDismiss={() => {
+                    hideAccentColorModal();
+                    setText();
+                    setError();
+                }}
+                contentContainerStyle={[
+                    styles.containerStyle,
+                    { backgroundColor: theme.colorPrimary },
+                ]}
+            >
+                <Text
+                    style={[
+                        styles.dialogTitle,
+                        { color: theme.textColorPrimary },
+                    ]}
+                >
+                    Hex Color Code
+                </Text>
+                <TextInput
+                    value={text}
+                    defaultValue={theme.colorAccent}
+                    onChangeText={(text) => setText(text)}
+                    onSubmitEditing={() => {
+                        if (text.match(/^#[0-9a-f]{3,6}$/i)) {
+                            dispatch(setAccentColor(text));
+                            hideAccentColorModal();
+                        } else {
+                            setError("Enter a valid hex color code");
+                        }
+                    }}
+                    mode="outlined"
+                    theme={{
+                        colors: {
+                            primary: theme.colorAccent,
+                            placeholder: theme.textColorHint,
+                            text: theme.textColorPrimary,
+                            background: "transparent",
+                        },
+                    }}
+                    underlineColor={theme.textColorHint}
+                    dense
+                    error={error}
+                />
+                <Text style={{ color: "#FF0033", paddingTop: 8 }}>{error}</Text>
+            </Modal>
+        </Portal>
+    );
+};
+
+export default AccentColorModal;
+
+const styles = StyleSheet.create({
+    containerStyle: {
+        margin: 30,
+        padding: 20,
+        borderRadius: 8,
+    },
+    dialogTitle: {
+        fontSize: 18,
+        marginBottom: 16,
+    },
+});

src/Screens/More/components/DisplayModeModal.js

@@ -1,13 +1,14 @@
 import React from "react";
 import { StyleSheet } from "react-native";
 import { Portal, Modal, Checkbox } from "react-native-paper";
+import { setAppSettings } from "../../../redux/settings/settings.actions";
 
 const DisplayModeModal = ({
-    displayMode,
-    displayModalVisible,
-    setDisplayMode,
-    hideDisplayModal,
     theme,
+    dispatch,
+    displayMode,
+    hideDisplayModal,
+    displayModalVisible,
 }) => {
     const displayModes = [
         { displayMode: 0, label: "Compact Grid" },
@@ -26,8 +27,10 @@ const DisplayModeModal = ({
                 }
                 mode="ios"
                 uncheckedColor={theme.textColorSecondary}
-                color={theme.colorAccentDark}
-                onPress={() => setDisplayMode(mode.displayMode)}
+                color={theme.colorAccent}
+                onPress={() =>
+                    dispatch(setAppSettings("displayMode", mode.displayMode))
+                }
             />
         ));
     };

src/Screens/More/components/GridSizeModal.js

@@ -2,21 +2,22 @@ import React from "react";
 import { Text, StyleSheet } from "react-native";
 import { Portal, Modal } from "react-native-paper";
 import Slider from "@react-native-community/slider";
-import { RadioButton, RadioButtonGroup } from "../../../components/RadioButton";
+import { RadioButton, RadioButtonGroup } from "../../../Components/RadioButton";
+import { setNovelsPerRow } from "../../../redux/settings/settings.actions";
 
 const GridSizeModal = ({
-    itemsPerRow,
+    dispatch,
+    novelsPerRow,
     gridSizeModalVisible,
     hideGridSizeModal,
-    setItemsPerRow,
     theme,
 }) => {
     const gridSizes = {
-        1: "XS",
-        2: "S",
+        5: "XS",
+        4: "S",
         3: "M",
-        4: "L",
-        5: "XL",
+        2: "L",
+        1: "XL",
     };
 
     return (
@@ -43,22 +44,22 @@ const GridSizeModal = ({
                         { color: theme.textColorSecondary },
                     ]}
                 >
-                    {`${itemsPerRow} per row`}
+                    {`${novelsPerRow} per row`}
                 </Text>
-                <Slider
+                {/* <Slider
                     style={styles.slider}
-                    value={itemsPerRow}
+                    value={novelsPerRow}
                     minimumValue={1}
                     maximumValue={5}
                     step={1}
-                    minimumTrackTintColor={theme.colorAccentDark}
+                    minimumTrackTintColor={theme.colorAccent}
                     maximumTrackTintColor="#000000"
-                    thumbTintColor={theme.colorAccentDark}
-                    onValueChange={(value) => setItemsPerRow(value)}
-                />
-                {/* <RadioButtonGroup
-                    onValueChange={(value) => setItemsPerRow(value)}
-                    value={itemsPerRow}
+                    thumbTintColor={theme.colorAccent}
+                    onValueChange={(value) => dispatch(setNovelsPerRow(value))}
+                /> */}
+                <RadioButtonGroup
+                    onValueChange={(value) => dispatch(setNovelsPerRow(value))}
+                    value={novelsPerRow}
                 >
                     {Object.keys(gridSizes).map((item) => (
                         <RadioButton
@@ -68,7 +69,7 @@ const GridSizeModal = ({
                             theme={theme}
                         />
                     ))}
-                </RadioButtonGroup> */}
+                </RadioButtonGroup>
             </Modal>
         </Portal>
     );

src/Screens/More/components/ThemeModal.js

@@ -3,18 +3,16 @@ import { StyleSheet } from "react-native";
 import { Portal, Modal, Checkbox } from "react-native-paper";
 
 import { setStatusBarStyle } from "expo-status-bar";
+import { setAppTheme } from "../../../redux/settings/settings.actions";
 
-const ThemeModal = ({
-    themeModalVisible,
-    hidethemeModal,
-    switchTheme,
-    theme,
-}) => {
+const ThemeModal = ({ themeModalVisible, hidethemeModal, dispatch, theme }) => {
     const themes = [
         { id: 0, name: "AMOLED Dark", statusBar: "light" },
         { id: 1, name: "Light", statusBar: "dark" },
         { id: 2, name: "Dark", statusBar: "light" },
         { id: 3, name: "Midnight Dusk", statusBar: "light" },
+        { id: 4, name: "Lime", statusBar: "light" },
+        { id: 5, name: "Iris Blue", statusBar: "light" },
     ];
 
     const renderThemeCheckboxes = () =>
@@ -25,9 +23,9 @@ const ThemeModal = ({
                 labelStyle={{ color: theme.textColorPrimary }}
                 status={theme.id === item.id ? "checked" : "unchecked"}
                 mode="ios"
-                color={theme.colorAccentDark}
+                color={theme.colorAccent}
                 onPress={() => {
-                    switchTheme(item.id);
+                    dispatch(setAppTheme(item.id));
                     setStatusBarStyle(item.statusBar);
                 }}
             />

src/Screens/Novel/Novel.js

@@ -0,0 +1,386 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+    StyleSheet,
+    View,
+    FlatList,
+    RefreshControl,
+    StatusBar,
+    Dimensions,
+    Share,
+} from "react-native";
+
+import { Provider, Portal, Appbar, IconButton, Menu } from "react-native-paper";
+import { useDispatch } from "react-redux";
+
+import {
+    bookmarkChapterAction,
+    deleteAllChaptersAction,
+    downloadAllChaptersAction,
+    getNovelAction,
+    markChapterReadAction,
+    markChaptersRead,
+    markChapterUnreadAction,
+    markPreviousChaptersReadAction,
+    sortAndFilterChapters,
+    updateNovelAction,
+} from "../../redux/novel/novel.actions";
+import {
+    useContinueReading,
+    useNovel,
+    usePreferences,
+    useTheme,
+} from "../../Hooks/reduxHooks";
+import { showToast } from "../../Hooks/showToast";
+
+import ChapterItem from "./components/ChapterItem";
+import NovelInfoHeader from "./components/NovelHeader";
+import ChaptersSettingsSheet from "./components/ChaptersSettingsSheet";
+import TrackSheet from "./components/Tracker/TrackSheet";
+import ChapterActionsSheet from "./components/ChapterActionsSheet";
+import { Row } from "../../Components/Common";
+
+const Novel = ({ route, navigation }) => {
+    const item = route.params;
+    const { sourceId, novelUrl, novelName, followed, novelId } = item;
+
+    const theme = useTheme();
+    const dispatch = useDispatch();
+    const { novel, chapters, loading, updating, downloading } = useNovel();
+
+    const [selected, setSelected] = useState([]);
+    const [downloadMenu, showDownloadMenu] = useState(false);
+
+    let chaptersSettingsSheetRef = useRef(null);
+    let trackerSheetRef = useRef(null);
+    let chapterActionsSheetRef = useRef(null);
+
+    const {
+        sort = "ORDER BY chapterId ASC",
+        filter = "",
+        showChapterTitles = false,
+    } = usePreferences(novel.novelId);
+
+    let { lastReadChapter, position } = useContinueReading(
+        chapters,
+        novel.novelId
+    );
+
+    useEffect(() => {
+        dispatch(
+            getNovelAction(followed, sourceId, novelUrl, novelId, sort, filter)
+        );
+    }, [getNovelAction]);
+
+    const onRefresh = () => {
+        dispatch(updateNovelAction(sourceId, novelUrl, novelId, sort, filter));
+        showToast(`Updated ${novelName}`);
+    };
+
+    const refreshControl = () => (
+        <RefreshControl
+            onRefresh={onRefresh}
+            refreshing={updating}
+            colors={[theme.textColorPrimary]}
+            progressBackgroundColor={theme.colorPrimary}
+        />
+    );
+
+    const renderItem = ({ item, index }) => (
+        <ChapterItem
+            theme={theme}
+            chapter={item}
+            index={index}
+            novelUrl={novelUrl}
+            dispatch={dispatch}
+            sourceId={sourceId}
+            navigation={navigation}
+            lastReadChapter={lastReadChapter}
+            position={position}
+            downloading={downloading}
+            selected={selected}
+            novelName={novelName}
+            selected={selected}
+            setSelected={setSelected}
+            showChapterTitles={showChapterTitles}
+            chapterActionsSheetRef={chapterActionsSheetRef}
+        />
+    );
+
+    return (
+        <Provider>
+            <View
+                style={[
+                    styles.container,
+                    { backgroundColor: theme.colorPrimaryDark },
+                ]}
+            >
+                {selected.length > 0 ? (
+                    <View
+                        style={{
+                            backgroundColor: theme.colorPrimary,
+                            position: "absolute",
+                            zIndex: 1,
+                            width: Dimensions.get("window").width,
+                            flexDirection: "row",
+                            alignItems: "center",
+                            paddingTop: StatusBar.currentHeight,
+                            paddingBottom: 8,
+                        }}
+                    >
+                        <Appbar.Action
+                            icon="close"
+                            color={theme.textColorPrimary}
+                            onPress={() => {
+                                setSelected([]);
+                            }}
+                        />
+                        <Appbar.Content
+                            title={selected.length}
+                            titleStyle={{ color: theme.textColorPrimary }}
+                        />
+                        <Appbar.Action
+                            icon="bookmark-outline"
+                            color={theme.textColorPrimary}
+                            onPress={() => {
+                                dispatch(bookmarkChapterAction(selected));
+                                setSelected([]);
+                            }}
+                        />
+
+                        {selected.some((obj) => obj.read === 0) && (
+                            <Appbar.Action
+                                icon="check"
+                                color={theme.textColorPrimary}
+                                onPress={() => {
+                                    dispatch(
+                                        markChaptersRead(
+                                            selected,
+                                            novel.novelId
+                                        )
+                                    );
+                                    setSelected([]);
+                                }}
+                            />
+                        )}
+                        {selected.some((obj) => obj.read === 1) && (
+                            <Appbar.Action
+                                icon="check-outline"
+                                color={theme.textColorPrimary}
+                                onPress={() => {
+                                    dispatch(
+                                        markChapterUnreadAction(
+                                            selected,
+                                            novel.novelId
+                                        )
+                                    );
+                                    setSelected([]);
+                                }}
+                            />
+                        )}
+                        {selected.length === 1 && (
+                            <Appbar.Action
+                                icon="playlist-check"
+                                color={theme.textColorPrimary}
+                                onPress={() => {
+                                    dispatch(
+                                        markPreviousChaptersReadAction(
+                                            selected[0].chapterId,
+                                            selected[0].novelId
+                                        )
+                                    );
+                                    setSelected([]);
+                                }}
+                            />
+                        )}
+                        {selected.some((obj) => obj.downloaded === 1) && (
+                            <Appbar.Action
+                                icon="trash-can-outline"
+                                color={theme.textColorPrimary}
+                                onPress={() => {
+                                    dispatch(deleteAllChaptersAction(selected));
+                                    setSelected([]);
+                                }}
+                            />
+                        )}
+
+                        {selected.some((obj) => obj.downloaded === 0) && (
+                            <Appbar.Action
+                                icon="download-outline"
+                                color={theme.textColorPrimary}
+                                onPress={() => {
+                                    dispatch(
+                                        downloadAllChaptersAction(
+                                            novel.sourceId,
+                                            novel.novelUrl,
+                                            selected
+                                        )
+                                    );
+                                    setSelected([]);
+                                }}
+                            />
+                        )}
+                        <Appbar.Action
+                            icon="select-all"
+                            color={theme.textColorPrimary}
+                            onPress={() => {
+                                setSelected(chapters);
+                            }}
+                        />
+                    </View>
+                ) : (
+                    <View
+                        style={{
+                            position: "absolute",
+                            zIndex: 1,
+                            height: StatusBar.currentHeight + 54,
+                            width: "100%",
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                        }}
+                    >
+                        <IconButton
+                            icon="arrow-left"
+                            color="white"
+                            size={24}
+                            style={{ marginTop: StatusBar.currentHeight + 8 }}
+                            onPress={() => navigation.goBack()}
+                        />
+                        <Row>
+                            <Menu
+                                visible={downloadMenu}
+                                onDismiss={() => showDownloadMenu(false)}
+                                anchor={
+                                    <IconButton
+                                        icon="download"
+                                        color="white"
+                                        size={24}
+                                        style={{
+                                            marginTop:
+                                                StatusBar.currentHeight + 8,
+                                        }}
+                                        onPress={() => showDownloadMenu(true)}
+                                    />
+                                }
+                                contentStyle={{
+                                    backgroundColor: theme.menuColor,
+                                }}
+                            >
+                                <Menu.Item
+                                    title="Download all"
+                                    style={{ backgroundColor: theme.menuColor }}
+                                    titleStyle={{
+                                        color: theme.textColorPrimary,
+                                    }}
+                                    onPress={() =>
+                                        dispatch(
+                                            downloadAllChaptersAction(
+                                                novel.sourceId,
+                                                novel.novelUrl,
+                                                chapters
+                                            )
+                                        )
+                                    }
+                                />
+                                <Menu.Item
+                                    title="Delete downloads"
+                                    style={{ backgroundColor: theme.menuColor }}
+                                    titleStyle={{
+                                        color: theme.textColorPrimary,
+                                    }}
+                                    onPress={() =>
+                                        dispatch(
+                                            deleteAllChaptersAction(chapters)
+                                        )
+                                    }
+                                />
+                            </Menu>
+                            <IconButton
+                                icon="share-variant"
+                                color="white"
+                                size={21}
+                                style={{
+                                    marginTop: StatusBar.currentHeight + 8,
+                                    marginRight: 16,
+                                }}
+                                onPress={() =>
+                                    Share.share({
+                                        message: novel.sourceUrl,
+                                    })
+                                }
+                            />
+                        </Row>
+                    </View>
+                )}
+                <FlatList
+                    data={!loading && chapters}
+                    keyExtractor={(item) => item.chapterId.toString()}
+                    removeClippedSubviews={true}
+                    maxToRenderPerBatch={5}
+                    windowSize={15}
+                    initialNumToRender={7}
+                    renderItem={renderItem}
+                    ListHeaderComponent={
+                        <NovelInfoHeader
+                            item={item}
+                            novel={novel}
+                            theme={theme}
+                            filter={filter}
+                            loading={loading}
+                            lastRead={lastReadChapter}
+                            dispatch={dispatch}
+                            chapters={chapters}
+                            navigation={navigation}
+                            trackerSheetRef={trackerSheetRef}
+                            chaptersSettingsSheetRef={chaptersSettingsSheetRef}
+                        />
+                    }
+                    refreshControl={refreshControl()}
+                />
+                {!loading && (
+                    <Portal>
+                        <ChaptersSettingsSheet
+                            novelUrl={novelUrl}
+                            bottomSheetRef={chaptersSettingsSheetRef}
+                            dispatch={dispatch}
+                            sortAndFilterChapters={sortAndFilterChapters}
+                            novelId={novel.novelId}
+                            sort={sort}
+                            theme={theme}
+                            filter={filter}
+                            showChapterTitles={showChapterTitles}
+                        />
+                        <TrackSheet
+                            bottomSheetRef={trackerSheetRef}
+                            novelId={novel.novelId}
+                            novelName={novel.novelName}
+                            theme={theme}
+                        />
+                        {/* <ChapterActionsSheet
+                            theme={theme}
+                            selected={selected}
+                            chapters={chapters}
+                            dispatch={dispatch}
+                            setSelected={setSelected}
+                            bottomSheetRef={chapterActionsSheetRef}
+                            markChapterReadAction={markChapterReadAction}
+                            markChapterUnreadAction={markChapterUnreadAction}
+                            bookmarkChapterAction={bookmarkChapterAction}
+                        /> */}
+                    </Portal>
+                )}
+            </View>
+        </Provider>
+    );
+};
+
+export default Novel;
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    rowBack: {
+        alignItems: "center",
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+});

src/Screens/Novel/components/ChapterActionsSheet.js

@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+import { StyleSheet, View, Text, Animated } from "react-native";
+import { List } from "react-native-paper";
+
+import Bottomsheet from "rn-sliding-up-panel";
+import BottomSheetHandle from "../../../Components/BottomSheetHandle";
+import { ListItem } from "../../../Components/List";
+import {
+    markPreviousChaptersReadAction,
+    markPreviousChaptersUnreadAction,
+} from "../../../redux/novel/novel.actions";
+
+const ChapterActionsSheet = ({
+    bottomSheetRef,
+    selected,
+    theme,
+    markChapterReadAction,
+    markChapterUnreadAction,
+    dispatch,
+    bookmarkChapterAction,
+    setSelected,
+}) => {
+    const [animatedValue] = useState(new Animated.Value(0));
+
+    return (
+        <Bottomsheet
+            animatedValue={animatedValue}
+            ref={bottomSheetRef}
+            draggableRange={{ top: 270, bottom: 0 }}
+            snappingPoints={[0, 270]}
+        >
+            <View
+                style={[
+                    styles.contentContainer,
+                    { backgroundColor: theme.colorPrimary },
+                ]}
+            >
+                <Text
+                    style={{
+                        color: theme.textColorPrimary,
+                        textAlign: "center",
+                        paddingTop: 16,
+                        paddingBottom: 8,
+                        fontSize: 16,
+                    }}
+                    numberOfLines={1}
+                >
+                    {selected?.chapterName}
+                </Text>
+                <List.Item
+                    title="Mark previous chapters as read"
+                    titleStyle={{ color: theme.textColorPrimary, fontSize: 15 }}
+                    left={() => (
+                        <List.Icon
+                            color={theme.textColorPrimary}
+                            icon="eye-check"
+                            style={{ marginVertical: 0 }}
+                        />
+                    )}
+                    onPress={() => {
+                        dispatch(
+                            markPreviousChaptersReadAction(
+                                selected?.chapterId,
+                                selected?.novelId
+                            )
+                        );
+                        // bottomSheetRef.current.hide();
+                    }}
+                    rippleColor={theme.rippleColor}
+                />
+                <List.Item
+                    title="Mark previous chapters as unread"
+                    titleStyle={{ color: theme.textColorPrimary, fontSize: 15 }}
+                    left={() => (
+                        <List.Icon
+                            color={theme.textColorPrimary}
+                            icon="eye-off"
+                            style={{ marginVertical: 0 }}
+                        />
+                    )}
+                    onPress={() => {
+                        dispatch(
+                            markPreviousChaptersUnreadAction(
+                                selected?.chapterId,
+                                selected?.novelId
+                            )
+                        );
+                        // bottomSheetRef.current.hide();
+                    }}
+                    rippleColor={theme.rippleColor}
+                />
+                <List.Item
+                    title={
+                        selected?.read
+                            ? "Mark chapter as unread"
+                            : "Mark chapter as read"
+                    }
+                    titleStyle={{ color: theme.textColorPrimary, fontSize: 15 }}
+                    left={() => (
+                        <List.Icon
+                            color={theme.textColorPrimary}
+                            icon={selected?.read ? "eye-off" : "eye"}
+                            style={{ marginVertical: 0 }}
+                        />
+                    )}
+                    onPress={() => {
+                        if (selected?.read) {
+                            dispatch(
+                                markChapterUnreadAction(selected?.chapterId)
+                            );
+                            setSelected((selected) => ({
+                                ...selected,
+                                read: 0,
+                            }));
+                        } else {
+                            dispatch(
+                                markChapterReadAction(
+                                    selected?.chapterId,
+                                    selected?.novelId
+                                )
+                            );
+                            setSelected((selected) => ({
+                                ...selected,
+                                read: 1,
+                            }));
+                        }
+                        // bottomSheetRef.current.hide();
+                    }}
+                    rippleColor={theme.rippleColor}
+                />
+                <List.Item
+                    title={
+                        selected?.bookmark
+                            ? "Remove bookmark"
+                            : "Bookmark chapter"
+                    }
+                    titleStyle={{ color: theme.textColorPrimary, fontSize: 15 }}
+                    left={() => (
+                        <List.Icon
+                            color={theme.textColorPrimary}
+                            icon={
+                                selected?.bookmark ? "bookmark-off" : "bookmark"
+                            }
+                            style={{ marginVertical: 0 }}
+                        />
+                    )}
+                    onPress={() => {
+                        dispatch(
+                            bookmarkChapterAction(
+                                selected?.bookmark,
+                                selected?.chapterId
+                            )
+                        );
+                        setSelected((selected) => ({
+                            ...selected,
+                            bookmark: !selected.bookmark,
+                        }));
+
+                        // bottomSheetRef.current.hide();
+                    }}
+                    rippleColor={theme.rippleColor}
+                />
+            </View>
+        </Bottomsheet>
+    );
+};
+
+export default ChapterActionsSheet;
+
+const styles = StyleSheet.create({
+    contentContainer: {
+        flex: 1,
+        borderTopRightRadius: 8,
+        borderTopLeftRadius: 8,
+    },
+});

src/Screens/Novel/components/ChapterItem.js

@@ -0,0 +1,258 @@
+import React, { useState } from "react";
+import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
+
+import { TouchableRipple, IconButton, Menu } from "react-native-paper";
+
+import {
+    deleteChapterAction,
+    downloadChapterAction,
+} from "../../../redux/novel/novel.actions";
+import { parseChapterNumber } from "../../../Services/utils/helpers";
+
+const ChapterItem = ({
+    novelUrl,
+    novelName,
+    chapter,
+    sourceId,
+    dispatch,
+    theme,
+    navigation,
+    downloading,
+    index,
+    position,
+    selected,
+    setSelected,
+    showChapterTitles,
+    chapterActionsSheetRef,
+}) => {
+    const [deleteChapterMenu, setDeleteChapterMenu] = useState(false);
+    const showDeleteChapterMenu = () => setDeleteChapterMenu(true);
+    const hideDeleteChapterMenu = () => setDeleteChapterMenu(false);
+
+    const navigateToChapter = () =>
+        navigation.navigate("Chapter", {
+            sourceId,
+            novelUrl,
+            novelId: chapter.novelId,
+            chapterId: chapter.chapterId,
+            chapterUrl: chapter.chapterUrl,
+            chapterName: chapter.chapterName,
+            novelName: novelName,
+        });
+
+    const displayDownloadButton = () => {
+        if (downloading.indexOf(chapter.chapterId) !== -1) {
+            return (
+                <ActivityIndicator
+                    color={theme.textColorHint}
+                    size={25}
+                    style={{ margin: 3.5, padding: 5 }}
+                />
+            );
+        } else if (chapter.downloaded === 1) {
+            return (
+                <Menu
+                    visible={deleteChapterMenu}
+                    onDismiss={hideDeleteChapterMenu}
+                    anchor={
+                        <IconButton
+                            icon="check-circle"
+                            animated
+                            color={theme.textColorPrimary}
+                            size={25}
+                            onPress={showDeleteChapterMenu}
+                            style={{ margin: 2 }}
+                        />
+                    }
+                    contentStyle={{ backgroundColor: theme.menuColor }}
+                >
+                    <Menu.Item
+                        onPress={() =>
+                            dispatch(
+                                deleteChapterAction(
+                                    chapter.chapterId,
+                                    chapter.chapterName
+                                )
+                            )
+                        }
+                        title="Delete"
+                        titleStyle={{ color: theme.textColorPrimary }}
+                    />
+                </Menu>
+            );
+        } else {
+            return (
+                <IconButton
+                    icon="arrow-down-circle-outline"
+                    animated
+                    color={theme.textColorHint}
+                    size={25}
+                    onPress={() =>
+                        dispatch(
+                            downloadChapterAction(
+                                sourceId,
+                                novelUrl,
+                                chapter.chapterUrl,
+                                chapter.chapterName,
+                                chapter.chapterId
+                            )
+                        )
+                    }
+                    style={{ margin: 2 }}
+                />
+            );
+        }
+    };
+
+    const bookmarkButton = () => {
+        if (chapter.bookmark) {
+            return (
+                <IconButton
+                    icon="bookmark"
+                    color={theme.colorAccent}
+                    size={18}
+                    style={{ marginLeft: 2 }}
+                />
+            );
+        }
+    };
+
+    const isSelected = (chapterId) => {
+        return selected.some((obj) => obj.chapterId === chapterId);
+    };
+
+    return (
+        <TouchableRipple
+            style={[
+                styles.chapterCardContainer,
+                isSelected(chapter.chapterId) && {
+                    backgroundColor: theme.rippleColor,
+                },
+            ]}
+            onPress={() => {
+                if (selected.length === 0) {
+                    navigateToChapter();
+                } else {
+                    if (isSelected(chapter.chapterId)) {
+                        setSelected((selected) =>
+                            selected.filter(
+                                (item) => item.chapterId !== chapter.chapterId
+                            )
+                        );
+                    } else {
+                        setSelected((selected) => [...selected, chapter]);
+                    }
+                }
+            }}
+            onLongPress={() => {
+                if (isSelected(chapter.chapterId)) {
+                    setSelected((selected) =>
+                        selected.filter(
+                            (item) => item.chapterId !== chapter.chapterId
+                        )
+                    );
+                } else {
+                    setSelected((selected) => [...selected, chapter]);
+                }
+                // chapterActionsSheetRef.current.show();
+            }}
+            rippleColor={theme.rippleColor}
+        >
+            <>
+                <View>
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            alignItems: "center",
+                        }}
+                    >
+                        {bookmarkButton()}
+                        <View>
+                            <Text
+                                style={[
+                                    { color: theme.textColorPrimary },
+                                    chapter.read && {
+                                        color: theme.textColorHint,
+                                    },
+                                ]}
+                                numberOfLines={1}
+                            >
+                                {showChapterTitles
+                                    ? parseChapterNumber(chapter.chapterName)
+                                        ? "Chapter " +
+                                          parseChapterNumber(
+                                              chapter.chapterName
+                                          )
+                                        : "Chapter " + index
+                                    : chapter.chapterName.substring(0, 50)}
+                            </Text>
+                            <View
+                                style={{
+                                    flexDirection: "row",
+                                    marginTop: 5,
+                                }}
+                            >
+                                {chapter.releaseDate && (
+                                    <Text
+                                        style={[
+                                            {
+                                                color: theme.textColorSecondary,
+                                                fontSize: 12,
+                                            },
+                                            chapter.read && {
+                                                color: theme.textColorHint,
+                                            },
+                                        ]}
+                                        numberOfLines={1}
+                                    >
+                                        {chapter.releaseDate}
+                                    </Text>
+                                )}
+                                {position &&
+                                    !chapter.read &&
+                                    position[chapter.chapterId] &&
+                                    position[chapter.chapterId].percentage <
+                                        100 &&
+                                    position[chapter.chapterId].percentage >
+                                        0 && (
+                                        <Text
+                                            style={[
+                                                {
+                                                    color: theme.textColorHint,
+                                                    fontSize: 12,
+                                                    marginLeft: 0,
+                                                },
+                                                chapter.releaseDate && {
+                                                    marginLeft: 5,
+                                                },
+                                            ]}
+                                            numberOfLines={1}
+                                        >
+                                            {chapter.releaseDate && "• "}
+                                            {"Progress " +
+                                                position[chapter.chapterId]
+                                                    .percentage +
+                                                "%"}
+                                        </Text>
+                                    )}
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                <View>{displayDownloadButton()}</View>
+            </>
+        </TouchableRipple>
+    );
+};
+
+export default ChapterItem;
+
+const styles = StyleSheet.create({
+    chapterCardContainer: {
+        paddingHorizontal: 15,
+        paddingVertical: 7,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+});

src/Screens/Novel/components/ChaptersSettingsSheet.js

@@ -0,0 +1,213 @@
+import React, { useState } from "react";
+import {
+    StyleSheet,
+    View,
+    Text,
+    Animated,
+    useWindowDimensions,
+} from "react-native";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";
+
+import Bottomsheet from "rn-sliding-up-panel";
+import BottomSheetHandle from "../../../Components/BottomSheetHandle";
+import { showChapterTitlesAction } from "../../../redux/novel/novel.actions";
+import { ListItem } from "../../../Components/List";
+import { RadioButton, RadioButtonGroup } from "../../../Components/RadioButton";
+import { Checkbox } from "react-native-paper";
+
+const ChaptersSettingsSheet = ({
+    bottomSheetRef,
+    novelId,
+    sortAndFilterChapters,
+    dispatch,
+    sort,
+    filter,
+    theme,
+    showChapterTitles,
+}) => {
+    const sortChapters = (val) =>
+        dispatch(sortAndFilterChapters(novelId, val, filter));
+
+    const filterChapters = (val) =>
+        dispatch(sortAndFilterChapters(novelId, sort, val));
+
+    const [animatedValue] = useState(new Animated.Value(0));
+
+    const FirstRoute = () => (
+        <View style={{ flex: 1 }}>
+            <Checkbox.Item
+                label="Downloaded"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={
+                    filter.match("AND downloaded=1") ? "checked" : "unchecked"
+                }
+                onPress={() =>
+                    filter.match("AND downloaded=1")
+                        ? filterChapters(
+                              filter.replace(" AND downloaded=1", "")
+                          )
+                        : filterChapters(filter + " AND downloaded=1")
+                }
+            />
+            <Checkbox.Item
+                label="Unread"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={
+                    filter.match("AND `read`=0")
+                        ? "checked"
+                        : filter.match("AND `read`=1")
+                        ? "indeterminate"
+                        : "unchecked"
+                }
+                onPress={() => {
+                    if (filter.match("AND `read`=0")) {
+                        filterChapters(
+                            filter.replace(" AND `read`=0", " AND `read`=1")
+                        );
+                    } else if (filter.match("AND `read`=1")) {
+                        filterChapters(filter.replace(" AND `read`=1", ""));
+                    } else {
+                        filterChapters(filter + " AND `read`=0");
+                    }
+                }}
+            />
+            <Checkbox.Item
+                label="Bookmarked"
+                labelStyle={{
+                    fontSize: 14,
+                    color: theme.textColorPrimary,
+                }}
+                color={theme.colorAccent}
+                uncheckedColor={theme.textColorHint}
+                status={
+                    filter.match("AND bookmark=1") ? "checked" : "unchecked"
+                }
+                onPress={() => {
+                    filter.match("AND bookmark=1")
+                        ? filterChapters(filter.replace(" AND bookmark=1", ""))
+                        : filterChapters(filter + " AND bookmark=1");
+                }}
+            />
+        </View>
+    );
+
+    const SecondRoute = () => (
+        <View style={{ flex: 1 }}>
+            <ListItem
+                style={{ paddingVertical: 10 }}
+                title="By source"
+                titleStyle={{ fontSize: 14 }}
+                theme={theme}
+                right={
+                    sort === "ORDER BY chapterId ASC"
+                        ? "arrow-up"
+                        : "arrow-down"
+                }
+                iconColor={theme.colorAccent}
+                onPress={() =>
+                    sort === "ORDER BY chapterId ASC"
+                        ? sortChapters("ORDER BY chapterId DESC")
+                        : sortChapters("ORDER BY chapterId ASC")
+                }
+            />
+        </View>
+    );
+
+    const ThirdRoute = () => (
+        <View style={{ flex: 1, padding: 8 }}>
+            <RadioButtonGroup
+                onValueChange={(value) =>
+                    dispatch(showChapterTitlesAction(novelId, value))
+                }
+                value={showChapterTitles}
+            >
+                <RadioButton
+                    value={false}
+                    label="Source title"
+                    theme={theme}
+                    labelStyle={{ fontSize: 14 }}
+                />
+                <RadioButton
+                    value={true}
+                    label="Chapter number"
+                    theme={theme}
+                    labelStyle={{ fontSize: 14 }}
+                />
+            </RadioButtonGroup>
+        </View>
+    );
+
+    const renderScene = SceneMap({
+        first: FirstRoute,
+        second: SecondRoute,
+        third: ThirdRoute,
+    });
+
+    const layout = useWindowDimensions();
+
+    const [index, setIndex] = useState(0);
+    const [routes] = useState([
+        { key: "first", title: "Filter" },
+        { key: "second", title: "Sort" },
+        { key: "third", title: "Display" },
+    ]);
+
+    const renderTabBar = (props) => (
+        <TabBar
+            {...props}
+            indicatorStyle={{ backgroundColor: theme.colorAccent }}
+            style={{ backgroundColor: theme.colorPrimary }}
+            renderLabel={({ route, focused, color }) => (
+                <Text style={{ color, margin: 8 }}>{route.title}</Text>
+            )}
+            inactiveColor={theme.textColorSecondary}
+            activeColor={theme.colorAccent}
+            pressColor={theme.rippleColor}
+        />
+    );
+
+    return (
+        <Bottomsheet
+            animatedValue={animatedValue}
+            ref={bottomSheetRef}
+            draggableRange={{ top: 220, bottom: 0 }}
+            snappingPoints={[0, 220]}
+        >
+            <View
+                style={[
+                    styles.contentContainer,
+                    { backgroundColor: theme.colorPrimary },
+                ]}
+            >
+                <TabView
+                    navigationState={{ index, routes }}
+                    renderTabBar={renderTabBar}
+                    renderScene={renderScene}
+                    onIndexChange={setIndex}
+                    initialLayout={{ width: layout.width }}
+                    style={{ borderTopRightRadius: 8, borderTopLeftRadius: 8 }}
+                />
+            </View>
+        </Bottomsheet>
+    );
+};
+
+export default ChaptersSettingsSheet;
+
+const styles = StyleSheet.create({
+    contentContainer: {
+        flex: 1,
+        borderTopRightRadius: 8,
+        borderTopLeftRadius: 8,
+    },
+});

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

@@ -6,8 +6,8 @@ export const GenreChip = ({ children, theme }) => (
         style={[
             styles.genreChip,
             {
-                color: theme.colorAccentDark,
-                borderColor: theme.colorAccentDark,
+                color: theme.colorAccent,
+                borderColor: theme.colorAccent,
                 backgroundColor: theme.colorPrimary,
             },
         ]}

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

@@ -0,0 +1,216 @@
+import React from "react";
+import {
+    FlatList,
+    Image,
+    ImageBackground,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+
+import { Chip, IconButton } from "react-native-paper";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { LinearGradient } from "expo-linear-gradient";
+import easeGradient from "react-native-easing-gradient";
+
+const NovelInfoContainer = ({ children }) => (
+    <View style={styles.novelInfoContainer}>{children}</View>
+);
+
+const CoverImage = ({ children, source, theme }) => {
+    const { colors, locations } = easeGradient({
+        colorStops: {
+            0: { color: "rgba(0,0,0,0.2)" },
+            1: { color: theme.colorPrimaryDark },
+        },
+    });
+
+    return (
+        <ImageBackground source={source} style={styles.coverImage}>
+            <LinearGradient
+                colors={colors}
+                locations={locations}
+                style={styles.linearGradient}
+            >
+                {children}
+            </LinearGradient>
+        </ImageBackground>
+    );
+};
+
+const NovelThumbnail = ({ source }) => (
+    <Image source={source} style={styles.novelThumbnail} />
+);
+
+const NovelTitle = ({ theme, children, onLongPress, onPress }) => (
+    <Text
+        onLongPress={onLongPress}
+        onPress={onPress}
+        numberOfLines={2}
+        style={[styles.novelTitle, { color: theme.textColorPrimary }]}
+    >
+        {children}
+    </Text>
+);
+
+const NovelAuthor = ({ theme, children }) => (
+    <Text
+        style={[styles.novelAuthor, { color: theme.textColorSecondary }]}
+        numberOfLines={2}
+    >
+        {children}
+    </Text>
+);
+
+const NovelInfo = ({ theme, children }) => (
+    <Text
+        style={[styles.novelInfo, { color: theme.textColorSecondary }]}
+        numberOfLines={1}
+    >
+        {children}
+    </Text>
+);
+
+const FollowButton = ({ theme, onPress, followed }) => (
+    <View style={{ alignItems: "center", flex: 1 }}>
+        <IconButton
+            icon={followed ? "heart" : "heart-outline"}
+            color={followed ? theme.colorAccent : theme.textColorSecondary}
+            size={24}
+            style={{ margin: 0 }}
+            onPress={onPress}
+        />
+        <Text
+            style={{
+                fontSize: 12,
+                color: followed ? theme.colorAccent : theme.textColorSecondary,
+            }}
+        >
+            {followed ? "In Library" : "Add to library"}
+        </Text>
+    </View>
+);
+
+const TrackerButton = ({ theme, isTracked, onPress }) => (
+    <View style={{ alignItems: "center", flex: 1 }}>
+        <IconButton
+            icon={isTracked ? "check" : "sync"}
+            color={isTracked ? theme.colorAccent : theme.textColorSecondary}
+            size={24}
+            style={{ margin: 0 }}
+            onPress={onPress}
+        />
+        <Text
+            style={{
+                fontSize: 12,
+                color: isTracked ? theme.colorAccent : theme.textColorSecondary,
+            }}
+        >
+            {isTracked ? "Tracked" : "Tracking"}
+        </Text>
+    </View>
+);
+
+const GenreChip = ({ children, theme }) => (
+    <Text
+        style={[
+            styles.genreChip,
+            {
+                color: theme.colorAccent,
+                borderColor: theme.colorAccent,
+                backgroundColor: theme.colorPrimary,
+            },
+        ]}
+    >
+        {children}
+    </Text>
+);
+
+const NovelGenres = ({ theme, genre }) => {
+    const data = genre.split(",");
+
+    const renderItem = ({ item }) => (
+        <GenreChip theme={theme}>{item}</GenreChip>
+    );
+
+    return (
+        <FlatList
+            contentContainerStyle={styles.novelGenres}
+            horizontal
+            data={data}
+            keyExtractor={(item) => item}
+            renderItem={renderItem}
+            showsHorizontalScrollIndicator={false}
+        />
+    );
+};
+
+export {
+    NovelInfoContainer,
+    CoverImage,
+    NovelThumbnail,
+    NovelTitle,
+    NovelAuthor,
+    NovelInfo,
+    FollowButton,
+    TrackerButton,
+    NovelGenres,
+};
+
+const styles = StyleSheet.create({
+    novelInfoContainer: {
+        flex: 1,
+        flexDirection: "row",
+        margin: 16,
+        paddingTop: 90,
+    },
+    coverImage: {
+        height: 285,
+    },
+    linearGradient: {
+        height: 286,
+    },
+    novelThumbnail: {
+        height: 160,
+        width: 110,
+        margin: 3.2,
+        borderRadius: 6,
+    },
+    novelTitle: {
+        fontWeight: "bold",
+        fontSize: 18,
+    },
+    novelAuthor: {
+        marginVertical: 3,
+        fontSize: 14,
+        fontWeight: "bold",
+    },
+    novelInfo: {
+        marginVertical: 3,
+        fontSize: 14,
+    },
+    followButton: {
+        height: 32,
+        justifyContent: "center",
+        alignItems: "center",
+        marginLeft: 16,
+        paddingLeft: 4,
+        borderWidth: 0,
+        elevation: 0,
+    },
+    novelGenres: {
+        // marginTop: 12,
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+    },
+    genreChip: {
+        flex: 1,
+        justifyContent: "center",
+        paddingVertical: 2,
+        paddingHorizontal: 10,
+        marginHorizontal: 2,
+        fontSize: 13,
+        borderWidth: 1,
+        borderRadius: 50,
+    },
+});

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

@@ -5,16 +5,8 @@ const NovelSummary = ({ summary, followed, theme }) => {
     const [more, showMore] = useState(!followed);
 
     return (
-        summary !== "" && (
+        summary && (
             <View style={styles.summaryContainer}>
-                <Text
-                    style={[
-                        { color: theme.textColorPrimary },
-                        styles.summaryHeader,
-                    ]}
-                >
-                    About
-                </Text>
                 <Text
                     style={{
                         color: theme.textColorSecondary,
@@ -29,7 +21,7 @@ const NovelSummary = ({ summary, followed, theme }) => {
                 <Text
                     style={[
                         {
-                            color: theme.colorAccentDark,
+                            color: theme.colorAccent,
                             backgroundColor: theme.colorPrimaryDark,
                         },
                         styles.showMoreButton,
@@ -48,14 +40,14 @@ export default NovelSummary;
 const styles = StyleSheet.create({
     summaryContainer: {
         paddingHorizontal: 16,
-        marginBottom: 8,
-    },
-    summaryHeader: {
-        marginTop: 5,
-        paddingVertical: 5,
-        fontSize: 15,
-        fontWeight: "bold",
+        marginVertical: 16,
     },
+    // summaryHeader: {
+    //     marginTop: 5,
+    //     paddingVertical: 5,
+    //     fontSize: 15,
+    //     fontWeight: "bold",
+    // },
     showMoreButton: {
         fontWeight: "bold",
         position: "absolute",

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

@@ -1,29 +1,29 @@
 import React from "react";
 import { StyleSheet } from "react-native";
+
 import { Button } from "react-native-paper";
 
-const ReadButton = ({ navigation, novel, chapters, theme }) => {
-    const lastRead = chapters.find((obj) => obj.read === 0);
-
+const ReadButton = ({ navigation, novel, chapters, theme, lastRead }) => {
     return (
         chapters.length > 0 &&
         (lastRead ? (
             <Button
                 color="white"
                 style={[
-                    { backgroundColor: theme.colorAccentDark },
+                    { backgroundColor: theme.colorAccent },
                     styles.startButton,
                 ]}
                 uppercase={false}
-                labelStyle={{ letterSpacing: 0 }}
+                labelStyle={{ letterSpacing: 0, color: theme.colorButtonText }}
                 onPress={() => {
-                    navigation.navigate("ChapterItem", {
+                    navigation.navigate("Chapter", {
                         chapterId: lastRead.chapterId,
                         chapterUrl: lastRead.chapterUrl,
                         novelUrl: novel.novelUrl,
                         novelId: lastRead.novelId,
-                        extensionId: novel.sourceId,
+                        sourceId: novel.sourceId,
                         chapterName: lastRead.chapterName,
+                        novelName: novel.novelName,
                     });
                 }}
             >
@@ -32,7 +32,7 @@ const ReadButton = ({ navigation, novel, chapters, theme }) => {
             </Button>
         ) : (
             <Button
-                color={theme.textColorHintDark}
+                color={theme.textColorHint}
                 style={[
                     styles.startButton,
                     { backgroundColor: theme.colorDisabled },

src/Screens/Novel/components/NovelHeader.js

@@ -0,0 +1,212 @@
+import React from "react";
+import { View, Text, StyleSheet, Clipboard } from "react-native";
+
+import * as WebBrowser from "expo-web-browser";
+import { TouchableRipple, IconButton } from "react-native-paper";
+
+import { followNovelAction } from "../../../redux/novel/novel.actions";
+import { useTrackingStatus } from "../../../Hooks/reduxHooks";
+
+import {
+    CoverImage,
+    NovelAuthor,
+    NovelInfo,
+    NovelInfoContainer,
+    NovelThumbnail,
+    NovelTitle,
+    FollowButton,
+    TrackerButton,
+    NovelGenres,
+} from "./Info/NovelDetailsComponents";
+import { Row } from "../../../Components/Common";
+import NovelSummary from "./Info/NovelSummary";
+import ReadButton from "./Info/ReadButton";
+import { showToast } from "../../../Hooks/showToast";
+
+const NovelInfoHeader = ({
+    item,
+    novel,
+    theme,
+    filter,
+    loading,
+    dispatch,
+    chapters,
+    lastRead,
+    navigation,
+    trackerSheetRef,
+    chaptersSettingsSheetRef,
+}) => {
+    const { tracker, trackedNovels } = useTrackingStatus();
+
+    let isTracked = false;
+
+    if (!loading) {
+        isTracked = trackedNovels.find((obj) => obj.novelId === novel.novelId);
+    }
+
+    return (
+        <View>
+            <CoverImage source={{ uri: item.novelCover }} theme={theme}>
+                <NovelInfoContainer>
+                    <NovelThumbnail source={{ uri: item.novelCover }} />
+                    <View style={styles.novelDetails}>
+                        <NovelTitle
+                            theme={theme}
+                            onPress={() =>
+                                navigation.navigate("GlobalSearch", {
+                                    novelName: item.novelName,
+                                })
+                            }
+                            onLongPress={() => {
+                                Clipboard.setString(item.novelName);
+                                showToast(
+                                    "Copied to clipboard: " + item.novelName
+                                );
+                            }}
+                        >
+                            {item.novelName}
+                        </NovelTitle>
+                        {!loading && (
+                            <>
+                                <NovelAuthor theme={theme}>
+                                    {novel.author}
+                                </NovelAuthor>
+                                <NovelInfo theme={theme}>
+                                    {novel.status}
+                                </NovelInfo>
+                                <NovelInfo theme={theme}>
+                                    {novel.source}
+                                </NovelInfo>
+                            </>
+                        )}
+                    </View>
+                </NovelInfoContainer>
+            </CoverImage>
+            {!loading && (
+                <>
+                    <Row
+                        style={{
+                            justifyContent: "space-around",
+                            paddingHorizontal: 16,
+                            flex: 1,
+                        }}
+                    >
+                        <FollowButton
+                            theme={theme}
+                            followed={novel.followed}
+                            onPress={() => dispatch(followNovelAction(novel))}
+                        />
+                        {tracker && (
+                            <TrackerButton
+                                theme={theme}
+                                isTracked={isTracked}
+                                onPress={() => trackerSheetRef.current.show()}
+                            />
+                        )}
+                        <View style={{ alignItems: "center", flex: 1 }}>
+                            <IconButton
+                                icon="swap-vertical-variant"
+                                color={theme.textColorSecondary}
+                                size={24}
+                                style={{ margin: 0 }}
+                                onPress={() =>
+                                    navigation.navigate("MigrateNovel", {
+                                        sourceId: novel.sourceId,
+                                        novelName: novel.novelName,
+                                    })
+                                }
+                            />
+                            <Text
+                                style={{
+                                    fontSize: 12,
+                                    color: theme.textColorSecondary,
+                                }}
+                            >
+                                Migrate
+                            </Text>
+                        </View>
+                        <View style={{ alignItems: "center", flex: 1 }}>
+                            <IconButton
+                                icon="earth"
+                                color={theme.textColorSecondary}
+                                size={24}
+                                style={{ margin: 0 }}
+                                onPress={() =>
+                                    WebBrowser.openBrowserAsync(novel.sourceUrl)
+                                }
+                            />
+                            <Text
+                                style={{
+                                    fontSize: 12,
+                                    color: theme.textColorSecondary,
+                                }}
+                            >
+                                WebView
+                            </Text>
+                        </View>
+                    </Row>
+                    <NovelSummary
+                        summary={novel.novelSummary}
+                        followed={novel.followed}
+                        theme={theme}
+                    />
+                    <NovelGenres theme={theme} genre={novel.genre} />
+                    <ReadButton
+                        novel={novel}
+                        chapters={chapters}
+                        navigation={navigation}
+                        theme={theme}
+                        lastRead={lastRead}
+                    />
+                    <TouchableRipple
+                        style={styles.bottomsheet}
+                        onPress={() => chaptersSettingsSheetRef.current.show()}
+                        rippleColor={theme.rippleColor}
+                    >
+                        <>
+                            <Text
+                                style={[
+                                    { color: theme.textColorPrimary },
+                                    styles.chapters,
+                                ]}
+                            >
+                                {`${chapters.length} Chapters`}
+                            </Text>
+                            <IconButton
+                                icon="filter-variant"
+                                color={
+                                    filter
+                                        ? theme.filterColor
+                                        : theme.textColorPrimary
+                                }
+                                size={24}
+                            />
+                        </>
+                    </TouchableRipple>
+                </>
+            )}
+        </View>
+    );
+};
+
+export default NovelInfoHeader;
+
+const styles = StyleSheet.create({
+    novelDetails: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 8,
+    },
+    chapters: {
+        paddingHorizontal: 16,
+        paddingVertical: 4,
+        fontSize: 16,
+        fontWeight: "bold",
+    },
+    bottomsheet: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingRight: 12,
+    },
+});

src/Screens/Novel/components/Tracker/MyAnimeListCards.js

@@ -19,13 +19,13 @@ export const AddMalTrackingCard = ({ theme, setTrackSearchDialog }) => (
             style={styles.rippleContainer}
             borderless
             onPress={() => setTrackSearchDialog(true)}
-            rippleColor={theme.colorAccentDark}
+            rippleColor={theme.colorAccent}
         >
             <Text
                 style={{
                     flex: 1,
                     textAlignVertical: "center",
-                    color: theme.colorAccentDark,
+                    color: theme.colorAccent,
                 }}
             >
                 Add Tracking

src/Screens/Novel/components/Tracker/SetTrackChaptersDialog.js

@@ -4,7 +4,7 @@ import { Modal, TextInput } from "react-native-paper";
 import {
     RadioButton,
     RadioButtonGroup,
-} from "../../../../components/RadioButton";
+} from "../../../../Components/RadioButton";
 
 const SetTrackChaptersDialog = ({
     trackItem,
@@ -39,13 +39,13 @@ const SetTrackChaptersDialog = ({
                 keyboardType="numeric"
                 theme={{
                     colors: {
-                        primary: theme.colorAccentDark,
-                        placeholder: theme.textColorHintDark,
+                        primary: theme.colorAccent,
+                        placeholder: theme.textColorHint,
                         text: theme.textColorPrimary,
                         background: "transparent",
                     },
                 }}
-                underlineColor={theme.textColorHintDark}
+                underlineColor={theme.textColorHint}
                 dense
             />
         </Modal>

src/Screens/Novel/components/Tracker/SetTrackScoreDialog.js

@@ -4,7 +4,7 @@ import { Modal } from "react-native-paper";
 import {
     RadioButton,
     RadioButtonGroup,
-} from "../../../../components/RadioButton";
+} from "../../../../Components/RadioButton";
 
 const SetTrackScoreDialog = ({
     trackItem,

src/Screens/Novel/components/Tracker/SetTrackStatusDialog.js

@@ -4,7 +4,7 @@ import { Modal } from "react-native-paper";
 import {
     RadioButton,
     RadioButtonGroup,
-} from "../../../../components/RadioButton";
+} from "../../../../Components/RadioButton";
 
 const SetTrackStatusDialog = ({
     trackItem,

src/Screens/Novel/components/Tracker/TrackSearchDialog.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { StyleSheet, Text, View, Image, ActivityIndicator } from "react-native";
 import { Button, Modal, TextInput, TouchableRipple } from "react-native-paper";
-import { searchNovels } from "../../../../trackers/MyAnimeList";
+import { searchNovels } from "../../../../Services/Trackers/myAnimeList";
 import { useSelector, useDispatch } from "react-redux";
 import { ScrollView } from "react-native-gesture-handler";
 import { trackNovel } from "../../../../redux/tracker/tracker.actions";
@@ -85,12 +85,12 @@ const TrackSearchDialog = ({
                 onSubmitEditing={getSearchresults}
                 theme={{
                     colors: {
-                        primary: theme.colorAccentDark,
+                        primary: theme.colorAccent,
                         text: theme.textColorPrimary,
                         background: "transparent",
                     },
                 }}
-                underlineColor={theme.textColorHintDark}
+                underlineColor={theme.textColorHint}
                 right={
                     <TextInput.Icon
                         color={theme.textColorSecondary}
@@ -104,7 +104,7 @@ const TrackSearchDialog = ({
             >
                 {loading ? (
                     <ActivityIndicator
-                        color={theme.colorAccentDark}
+                        color={theme.colorAccent}
                         size={45}
                         style={{ margin: 16 }}
                     />
@@ -125,11 +125,11 @@ const TrackSearchDialog = ({
             >
                 <Button
                     labelStyle={{
-                        color: theme.colorAccentDark,
+                        color: theme.colorAccent,
                         letterSpacing: 0,
                         textTransform: "none",
                     }}
-                    theme={{ colors: { primary: theme.colorAccentDark } }}
+                    theme={{ colors: { primary: theme.colorAccent } }}
                     onPress={() => setSelectedNovel(null)}
                 >
                     Remove
@@ -137,22 +137,22 @@ const TrackSearchDialog = ({
                 <View style={{ flexDirection: "row" }}>
                     <Button
                         labelStyle={{
-                            color: theme.colorAccentDark,
+                            color: theme.colorAccent,
                             letterSpacing: 0,
                             textTransform: "none",
                         }}
-                        theme={{ colors: { primary: theme.colorAccentDark } }}
+                        theme={{ colors: { primary: theme.colorAccent } }}
                         onPress={() => setTrackSearchDialog(false)}
                     >
                         Cancel
                     </Button>
                     <Button
                         labelStyle={{
-                            color: theme.colorAccentDark,
+                            color: theme.colorAccent,
                             letterSpacing: 0,
                             textTransform: "none",
                         }}
-                        theme={{ colors: { primary: theme.colorAccentDark } }}
+                        theme={{ colors: { primary: theme.colorAccent } }}
                         onPress={() => {
                             if (selectedNovel) {
                                 dispatch(

src/Screens/Updates/Updates.js

@@ -0,0 +1,158 @@
+import React, { useState, useEffect, useCallback } from "react";
+import {
+    StyleSheet,
+    View,
+    FlatList,
+    ActivityIndicator,
+    RefreshControl,
+    Button,
+    Text,
+} from "react-native";
+import { useFocusEffect } from "@react-navigation/native";
+import { useDispatch, useSelector } from "react-redux";
+import EmptyView from "../../Components/EmptyView";
+import {
+    getUpdatesAction,
+    updateLibraryAction,
+} from "../../redux/updates/updates.actions";
+import { Appbar } from "./components/Appbar";
+import UpdatesItem from "./components/UpdatesItem";
+import { useTheme } from "../../Hooks/reduxHooks";
+import { Searchbar } from "../../Components/Searchbar";
+
+import moment from "moment";
+import { dateFormat } from "../../Services/utils/constants";
+
+const Updates = ({ navigation }) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+    const { updates, loading } = useSelector((state) => state.updatesReducer);
+
+    const [searchText, setSearchText] = useState("");
+    const [searchResults, setSearchResults] = useState([]);
+    const [refreshing, setRefreshing] = useState(false);
+
+    useFocusEffect(
+        useCallback(() => {
+            dispatch(getUpdatesAction());
+        }, [getUpdatesAction])
+    );
+
+    const onRefresh = async () => {
+        setRefreshing(true);
+        dispatch(updateLibraryAction());
+        setRefreshing(false);
+    };
+
+    const onPress = (item) =>
+        navigation.navigate("Chapter", {
+            chapterId: item.chapterId,
+            chapterUrl: item.chapterUrl,
+            sourceId: item.sourceId,
+            novelUrl: item.novelUrl,
+            chapterName: item.chapterName,
+            novelId: item.novelId,
+            novelName: item.novelName,
+        });
+
+    const renderItem = ({ item }) => (
+        <UpdatesItem item={item} theme={theme} onPress={() => onPress(item)} />
+    );
+
+    const ListFooterComponent = () =>
+        loading && <ActivityIndicator size="small" color={theme.colorAccent} />;
+
+    const ListEmptyComponent = () =>
+        !loading && (
+            <EmptyView icon="(˘･_･˘)" description="No recent updates" />
+        );
+
+    const refreshControl = () => (
+        <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            colors={["white"]}
+            progressBackgroundColor={theme.colorAccent}
+        />
+    );
+
+    const clearSearchbar = () => {
+        setSearchText("");
+    };
+
+    const onChangeText = (text) => {
+        setSearchText(text);
+        let results = [];
+
+        text !== "" &&
+            updates.map((item) => {
+                const date = item.date;
+                const chapters = item.chapters.filter((chapter) =>
+                    chapter.novelName.toLowerCase().includes(text.toLowerCase())
+                );
+
+                if (chapters.length > 0) {
+                    results.push({
+                        date,
+                        chapters,
+                    });
+                }
+            });
+
+        setSearchResults(results);
+    };
+
+    return (
+        <View
+            style={[
+                styles.container,
+                { backgroundColor: theme.colorPrimaryDark },
+            ]}
+        >
+            <Searchbar
+                placeholder="Search Updates"
+                searchText={searchText}
+                clearSearchbar={clearSearchbar}
+                onChangeText={onChangeText}
+                left="magnify"
+                theme={theme}
+                right="reload"
+                onPressRight={() => dispatch(updateLibraryAction())}
+            />
+            <FlatList
+                contentContainerStyle={styles.flatList}
+                data={searchText ? searchResults : updates}
+                keyExtractor={(item, index) => index.toString()}
+                renderItem={({ item }) => (
+                    <FlatList
+                        ListHeaderComponent={
+                            <Text
+                                style={{
+                                    paddingHorizontal: 16,
+                                    textTransform: "uppercase",
+                                    paddingVertical: 8,
+                                    color: theme.textColorSecondary,
+                                }}
+                            >
+                                {moment(item.date).calendar(null, dateFormat)}
+                            </Text>
+                        }
+                        data={item.chapters}
+                        keyExtractor={(item) => item.updateId.toString()}
+                        renderItem={renderItem}
+                    />
+                )}
+                ListFooterComponent={ListFooterComponent()}
+                ListEmptyComponent={ListEmptyComponent()}
+                refreshControl={refreshControl()}
+            />
+        </View>
+    );
+};
+
+export default Updates;
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    flatList: { flexGrow: 1, paddingVertical: 8 },
+});

src/Screens/Updates/components/Appbar.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Appbar as MaterialAppbar } from "react-native-paper";
+
+import { updateLibraryAction } from "../../../redux/updates/updates.actions";
+
+export const Appbar = ({ theme, dispatch }) => (
+    <MaterialAppbar.Header style={{ backgroundColor: theme.colorPrimary }}>
+        <MaterialAppbar.Content
+            title="Updates"
+            titleStyle={{ color: theme.textColorPrimary }}
+        />
+        <MaterialAppbar.Action
+            icon="reload"
+            onPress={() => dispatch(updateLibraryAction())}
+        />
+    </MaterialAppbar.Header>
+);

src/Screens/Updates/components/UpdatesItem.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+import { TouchableRipple } from "react-native-paper";
+
+const UpdateCard = ({ item, theme, onPress }) => {
+    return (
+        <TouchableRipple
+            style={styles.updateCard}
+            onPress={onPress}
+            rippleColor={theme.rippleColor}
+            borderless
+        >
+            <>
+                <Image
+                    source={{ uri: item.novelCover }}
+                    style={styles.updateIcon}
+                />
+                <View style={styles.chapterDetails}>
+                    <Text
+                        style={[
+                            { color: theme.textColorPrimary, fontSize: 14 },
+                            item.read && {
+                                color: theme.textColorHint,
+                            },
+                        ]}
+                        numberOfLines={1}
+                    >
+                        {item.novelName}
+                    </Text>
+                    <Text
+                        style={[
+                            { color: theme.textColorPrimary, fontSize: 12 },
+                            item.read && {
+                                color: theme.textColorHint,
+                            },
+                        ]}
+                        numberOfLines={1}
+                    >
+                        {item.chapterName}
+                    </Text>
+                </View>
+            </>
+        </TouchableRipple>
+    );
+};
+
+export default UpdateCard;
+
+const styles = StyleSheet.create({
+    updateCard: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+    },
+    updateIcon: {
+        width: 42,
+        height: 42,
+        borderRadius: 4,
+    },
+    chapterDetails: {
+        flex: 1,
+        marginLeft: 16,
+    },
+});

src/Services/Source/source.js

@@ -1,3 +1,5 @@
+import { showToast } from "../../Hooks/showToast";
+
 export const fetchSources = async () => {
     const url = `https://lnreader-extensions.vercel.app/api/`;
 
@@ -35,8 +37,6 @@ export const fetchNovel = async (sourceId, novelUrl) => {
 export const fetchChapter = async (sourceId, novelUrl, chapterUrl) => {
     const url = `https://lnreader-extensions.vercel.app/api/${sourceId}/novel/${novelUrl}${chapterUrl}`;
 
-    // console.log(url);
-
     let res = await fetch(url);
     let chapter = await res.json();
 

src/Services/backup.js

@@ -0,0 +1,76 @@
+import * as DocumentPicker from "expo-document-picker";
+import { StorageAccessFramework } from "expo-file-system";
+
+import { getLibrary } from "../Database/queries/LibraryQueries";
+import { restoreLibrary } from "../Database/queries/NovelQueries";
+import { showToast } from "../Hooks/showToast";
+
+import * as Notifications from "expo-notifications";
+
+Notifications.setNotificationHandler({
+    handleNotification: async () => {
+        return {
+            shouldShowAlert: true,
+            shouldPlaySound: true,
+            shouldSetBadge: true,
+        };
+    },
+});
+
+export const createBackup = async () => {
+    const novels = await getLibrary();
+
+    const permissions =
+        await StorageAccessFramework.requestDirectoryPermissionsAsync();
+
+    if (!permissions.granted) {
+        return;
+    }
+
+    const uri = permissions.directoryUri;
+
+    if (uri) {
+        const fileUri = await StorageAccessFramework.createFileAsync(
+            uri,
+            "backup",
+            "application/json"
+        );
+
+        await StorageAccessFramework.writeAsStringAsync(
+            fileUri,
+            JSON.stringify(novels)
+        );
+
+        showToast("Backup created");
+    }
+};
+
+export const restoreBackup = async () => {
+    const backup = await DocumentPicker.getDocumentAsync();
+
+    Notifications.scheduleNotificationAsync({
+        content: { title: "Restoring backup" },
+        trigger: null,
+    });
+
+    if (backup.uri) {
+        let novels = await StorageAccessFramework.readAsStringAsync(backup.uri);
+        novels = await JSON.parse(novels);
+
+        novels.map((novel, index) => {
+            setTimeout(async () => {
+                if (index + 1 === novels.length) {
+                    Notifications.scheduleNotificationAsync({
+                        content: {
+                            title: "Library Restored",
+                            body: novels.length + " novels restored",
+                        },
+                        trigger: null,
+                    });
+                }
+
+                await restoreLibrary(novel);
+            }, 1000 * index);
+        });
+    }
+};

src/Services/updates.js

@@ -1,8 +1,19 @@
 import * as SQLite from "expo-sqlite";
-import { getLibrary } from "../database/queries/LibraryQueries";
-import { fetchChapters, fetchNovel } from "../source/Source";
 const db = SQLite.openDatabase("lnreader.db");
-import { ToastAndroid } from "react-native";
+
+import { getLibrary } from "../Database/queries/LibraryQueries";
+import { fetchChapters, fetchNovel } from "../Services/Source/source";
+import * as Notifications from "expo-notifications";
+
+Notifications.setNotificationHandler({
+    handleNotification: async () => {
+        return {
+            shouldShowAlert: true,
+            shouldPlaySound: true,
+            shouldSetBadge: true,
+        };
+    },
+});
 
 const updateNovelDetails = async (novel, novelId) => {
     db.transaction((tx) => {
@@ -26,7 +37,7 @@ const updateNovelDetails = async (novel, novelId) => {
 
 export const updateNovel = async (extensionId, novelUrl, novelId) => {
     let novel = await fetchNovel(extensionId, novelUrl);
-    // console.log(novel);
+
     await updateNovelDetails(novel, novelId);
 
     db.transaction((tx) => {
@@ -88,14 +99,7 @@ export const updateNovelChapters = async (extensionId, novelUrl, novelId) => {
                         tx.executeSql(
                             "INSERT OR IGNORE INTO updates (chapterId, novelId, updateTime) values (?, ?, (datetime('now','localtime')))",
                             [insertId, novelId],
-                            (txObj, res) => {
-                                // console.log(
-                                //     "Inserted Chapter Id -> " +
-                                //         insertId +
-                                //         " Novel Id " +
-                                //         novelId
-                                // );
-                            },
+                            (txObj, res) => {},
                             (txObj, error) => console.log("Error ", error)
                         );
                     }
@@ -107,14 +111,32 @@ export const updateNovelChapters = async (extensionId, novelUrl, novelId) => {
 };
 
 export const updateAllNovels = async () => {
-    ToastAndroid.show("Updating library", ToastAndroid.SHORT);
-
     const libraryNovels = await getLibrary();
 
+    Notifications.scheduleNotificationAsync({
+        identifier: "updatingNotif",
+        content: { title: "Updating library" },
+        trigger: null,
+    });
+
     libraryNovels.map((novel, index) =>
         setTimeout(async () => {
-            updateNovelChapters(novel.sourceId, novel.novelUrl, novel.novelId);
+            await updateNovelChapters(
+                novel.sourceId,
+                novel.novelUrl,
+                novel.novelId
+            );
             console.log(novel.novelName + " Updated");
+
+            if (index + 1 === libraryNovels.length) {
+                Notifications.scheduleNotificationAsync({
+                    content: {
+                        title: "Library Updated",
+                        body: libraryNovels.length + " novels updated",
+                    },
+                    trigger: null,
+                });
+            }
         }, 3000 * index)
     );
 };

src/Services/utils/constants.js

@@ -1,4 +1,4 @@
-const fonts = [
+export const fonts = [
     { fontFamily: "", name: "Original" },
     { fontFamily: "arbutus-slab", name: "Arbutus Slab" },
     { fontFamily: "domine", name: "Domine" },
@@ -8,4 +8,11 @@ const fonts = [
     { fontFamily: "pt-serif", name: "PT Serif" },
 ];
 
-export { fonts };
+export const dateFormat = {
+    sameDay: "[Today]",
+    nextDay: "[Tomorrow]",
+    nextWeek: "dddd",
+    lastDay: "[Yesterday]",
+    lastWeek: "[Last] dddd",
+    sameElse: "DD/MM/YYYY",
+};

src/Services/utils/helpers.js

@@ -0,0 +1,15 @@
+export const parseChapterNumber = (chapterName) => {
+    chapterName = chapterName.toLowerCase();
+    chapterName = chapterName.replace(/volume (\d+)/, "");
+
+    const basic = chapterName.match(/[ch]i (\d+)/);
+    const occurrence = chapterName.match(/\d+/);
+
+    if (basic) {
+        return basic[0];
+    } else if (occurrence) {
+        return occurrence[0];
+    } else {
+        return 0;
+    }
+};

src/Theme/fonts.js

@@ -0,0 +1,14 @@
+/**
+ * Reader fonts
+ */
+
+export const fonts = {
+    "pt-sans-bold": require("../../assets/fonts/PTSansNarrow-Bold.ttf"),
+    "arbutus-slab": require("../../assets/fonts/ArbutusSlab-Regular.ttf"),
+    domine: require("../../assets/fonts/Domine-VariableFont_wght.ttf"),
+    lato: require("../../assets/fonts/Lato-Regular.ttf"),
+    "noto-sans": require("../../assets/fonts/NotoSans-Regular.ttf"),
+    "noto-sans-bold": require("../../assets/fonts/NotoSans-Bold.ttf"),
+    "open-sans": require("../../assets/fonts/OpenSans-Regular.ttf"),
+    "pt-serif": require("../../assets/fonts/PTSerif-Regular.ttf"),
+};

src/Theme/theme.js

@@ -0,0 +1,142 @@
+/**
+ * Application Colors
+ */
+export const theme = {
+    colorPrimary: "#000000",
+    colorPrimaryDark: "#000000",
+    colorAccent: "#3399FF",
+    textColorPrimary: "#FFFFFF",
+    textColorSecondary: "rgba(255,255,255,0.7)",
+    textColorHint: "rgba(255,255,255,0.5)",
+    rippleColor: "rgba(255,255,255,0.06)",
+};
+
+/**
+ * Light
+ */
+export const lightTheme = {
+    id: 1,
+    name: "Light",
+    colorPrimary: "#FFFFFF",
+    colorPrimaryDark: "#FAFAFA",
+    colorAccent: "#2979FF",
+    textColorPrimary: "#000000",
+    textColorSecondary: "rgba(0,0,0,0.54)",
+    textColorHint: "rgba(0,0,0,0.38)",
+    rippleColor: "rgba(0,0,0,0.06)",
+    searchBarColor: "#FFFFFF",
+    menuColor: "#FFFFFF",
+    dividerColor: "rgba(0,0,0,0.1)",
+    filterColor: "#FFC107",
+    colorDisabled: "rgba(220,220,220,255)",
+    colorButtonText: "#FFFFFF",
+    statusBar: "dark",
+};
+
+/**
+ * Dark
+ */
+export const darkTheme = {
+    id: 2,
+    name: "Dark",
+    colorPrimary: "#242529",
+    colorPrimaryDark: "#202125",
+    colorAccent: "#3399FF",
+    textColorPrimary: "#FFFFFF",
+    textColorSecondary: "rgba(255,255,255,0.7)",
+    textColorHint: "rgba(255,255,255,0.5)",
+    rippleColor: "rgba(255,255,255,0.06)",
+    searchBarColor: "#303135",
+    menuColor: "#242529",
+    filterColor: "#FFEB3B",
+    dividerColor: "rgba(255,255,255,0.1)",
+    colorDisabled: "rgba(57,57,57,255)",
+    colorButtonText: "#FFFFFF",
+    statusBar: "light",
+};
+
+/**
+ * Amoled Dark
+ */
+export const amoledDarkTheme = {
+    id: 0,
+    name: "AMOLED Dark",
+    colorPrimary: "#000000",
+    colorPrimaryDark: "#000000",
+    colorAccent: "#3399FF",
+    textColorPrimary: "#FFFFFF",
+    textColorSecondary: "rgba(255,255,255,0.7)",
+    textColorHint: "rgba(255,255,255,0.5)",
+    rippleColor: "rgba(255,255,255,0.12)",
+    searchBarColor: "#1F1F1F",
+    menuColor: "#242529",
+    filterColor: "#FFEB3B",
+    dividerColor: "rgba(255,255,255,0.15)",
+    colorDisabled: "rgba(33,33,33,255)",
+    colorButtonText: "#FFFFFF",
+    statusBar: "light",
+};
+
+/**
+ * Midnight Dusk
+ */
+export const midnightDuskTheme = {
+    id: 3,
+    name: "Midnight Dusk",
+    colorPrimary: "#201F27",
+    colorPrimaryDark: "#16151D",
+    colorAccent: "#F02475",
+    textColorPrimary: "#FFFFFF",
+    textColorSecondary: "rgba(255,255,255,0.7)",
+    textColorHint: "rgba(255,255,255,0.5)",
+    rippleColor: "rgba(255,255,255,0.06)",
+    searchBarColor: "#201F27",
+    menuColor: "#201F27",
+    filterColor: "#FFEB3B",
+    dividerColor: "rgba(255,255,255,0.1)",
+    colorDisabled: "rgba(57,57,57,255)",
+    colorButtonText: "#FFFFFF",
+    statusBar: "light",
+};
+
+/**
+ * Lime
+ */
+
+export const limeTheme = {
+    id: 4,
+    name: "Lime",
+    colorPrimary: "#201F27",
+    colorPrimaryDark: "#16151D",
+    colorAccent: "#4AF88A",
+    textColorPrimary: "#FFFFFF",
+    textColorSecondary: "rgba(255,255,255,0.7)",
+    textColorHint: "rgba(255,255,255,0.5)",
+    rippleColor: "rgba(255,255,255,0.06)",
+    searchBarColor: "#201F27",
+    menuColor: "#201F27",
+    filterColor: "#FFEB3B",
+    dividerColor: "rgba(255,255,255,0.1)",
+    colorDisabled: "rgba(57,57,57,255)",
+    colorButtonText: "#16151D",
+    statusBar: "light",
+};
+
+export const irisBlueTheme = {
+    id: 5,
+    name: "Iris Blue",
+    colorPrimary: "#393e46",
+    colorPrimaryDark: "#222831",
+    colorAccent: "#00adb5",
+    textColorPrimary: "#FFFFFF",
+    textColorSecondary: "rgba(255,255,255,0.7)",
+    textColorHint: "rgba(255,255,255,0.5)",
+    rippleColor: "rgba(255,255,255,0.06)",
+    searchBarColor: "#393e46",
+    menuColor: "#393e46",
+    filterColor: "#FFEB3B",
+    dividerColor: "rgba(255,255,255,0.1)",
+    colorDisabled: "#393e46",
+    colorButtonText: "#16151D",
+    statusBar: "light",
+};

src/components/BottomSheetHandle.js

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

src/components/NovelCover.js

@@ -1,274 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Text, ImageBackground, Image } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { TouchableRipple } from "react-native-paper";
-
-import { useSelector } from "react-redux";
-
-const NovelCover = ({ item, onPress, libraryStatus }) => {
-    const displayMode = useSelector(
-        (state) => state.settingsReducer.displayMode
-    );
-
-    const theme = useSelector((state) => state.themeReducer.theme);
-
-    const itemsPerRow = useSelector(
-        (state) => state.settingsReducer.itemsPerRow
-    );
-
-    const height = {
-        1: 550,
-        2: 280,
-        3: 180,
-        4: 140,
-        5: 100,
-        6: 80,
-        7: 70,
-        8: 58,
-        9: 55,
-        10: 50,
-    };
-
-    return displayMode !== 2 ? (
-        <View style={{ flex: 1 / itemsPerRow }}>
-            <TouchableRipple
-                borderless
-                centered
-                rippleColor={theme.rippleColor}
-                style={styles.opac}
-                onPress={onPress}
-            >
-                <>
-                    {item.novelCover && (
-                        <ImageBackground
-                            source={{ uri: item.novelCover }}
-                            style={{ height: height[itemsPerRow] }}
-                            imageStyle={[
-                                { borderRadius: 4 },
-                                libraryStatus && { opacity: 0.5 },
-                            ]}
-                            progressiveRenderingEnabled={true}
-                        >
-                            <View style={{ flexDirection: "row", margin: 4 }}>
-                                {item.chaptersDownloaded && (
-                                    <Text
-                                        style={[
-                                            {
-                                                flex: 0,
-                                                backgroundColor: "#47a84a",
-                                                color: "#FFFFFF",
-                                                borderTopLeftRadius: 4,
-                                                borderBottomLeftRadius: 4,
-                                                paddingTop: 2,
-                                                paddingHorizontal: 4,
-                                                alignSelf: "flex-start",
-                                                fontSize: 12,
-                                            },
-                                            !item.chaptersUnread && {
-                                                borderTopRightRadius: 4,
-                                                borderBottomRightRadius: 4,
-                                            },
-                                        ]}
-                                    >
-                                        {item.chaptersDownloaded}
-                                    </Text>
-                                )}
-                                {item.chaptersUnread && (
-                                    <Text
-                                        style={[
-                                            {
-                                                flex: 0,
-                                                backgroundColor: "#2979FF",
-                                                color: "#FFFFFF",
-                                                borderTopRightRadius: 4,
-                                                borderBottomRightRadius: 4,
-                                                paddingTop: 2,
-                                                paddingHorizontal: 4,
-                                                alignSelf: "flex-start",
-                                                fontSize: 12,
-                                            },
-                                            !item.chaptersDownloaded && {
-                                                borderTopLeftRadius: 4,
-                                                borderBottomLeftRadius: 4,
-                                            },
-                                        ]}
-                                    >
-                                        {item.chaptersUnread}
-                                    </Text>
-                                )}
-                            </View>
-                            {displayMode === 0 && (
-                                <View style={styles.titleContainer}>
-                                    <LinearGradient
-                                        colors={[
-                                            "transparent",
-                                            "rgba(0,0,0,0.6)",
-                                        ]}
-                                        style={styles.linearGradient}
-                                    >
-                                        <Text
-                                            numberOfLines={2}
-                                            style={[
-                                                styles.title,
-                                                {
-                                                    color:
-                                                        "rgba(255,255,255,1)",
-                                                },
-                                            ]}
-                                        >
-                                            {item.novelName}
-                                        </Text>
-                                    </LinearGradient>
-                                </View>
-                            )}
-                        </ImageBackground>
-                    )}
-                    {displayMode === 1 && (
-                        <Text
-                            numberOfLines={2}
-                            style={[
-                                styles.title,
-                                {
-                                    color: theme.textColorPrimary,
-                                    padding: 4,
-                                },
-                            ]}
-                        >
-                            {item.novelName}
-                        </Text>
-                    )}
-                </>
-            </TouchableRipple>
-        </View>
-    ) : (
-        <TouchableRipple
-            borderless
-            centered
-            rippleColor={theme.rippleColor}
-            style={styles.listView}
-            onPress={onPress}
-        >
-            <View
-                style={{
-                    flex: 1,
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                }}
-            >
-                <View
-                    style={{
-                        flexDirection: "row",
-                        alignItems: "center",
-                    }}
-                >
-                    <Image
-                        source={{ uri: item.novelCover }}
-                        style={styles.extensionIcon}
-                    />
-                    <Text
-                        style={{
-                            color: theme.textColorPrimary,
-                            marginLeft: 16,
-                            fontSize: 15,
-                            paddingRight: 8,
-                        }}
-                        numberOfLines={1}
-                    >
-                        {item.novelName}
-                    </Text>
-                </View>
-                <View
-                    style={{
-                        flexDirection: "row",
-                        alignItems: "center",
-                    }}
-                >
-                    {item.chaptersDownloaded && (
-                        <Text
-                            style={[
-                                {
-                                    backgroundColor: "#47a84a",
-                                    color: "#FFFFFF",
-                                    borderTopLeftRadius: 4,
-                                    borderBottomLeftRadius: 4,
-                                    paddingTop: 2,
-                                    paddingHorizontal: 4,
-                                    fontSize: 12,
-                                },
-                                !item.chaptersUnread && {
-                                    borderTopRightRadius: 4,
-                                    borderBottomRightRadius: 4,
-                                },
-                            ]}
-                        >
-                            {item.chaptersDownloaded}
-                        </Text>
-                    )}
-                    {item.chaptersUnread && (
-                        <Text
-                            style={[
-                                {
-                                    backgroundColor: "#2979FF",
-                                    color: "#FFFFFF",
-                                    borderTopRightRadius: 4,
-                                    borderBottomRightRadius: 4,
-                                    paddingTop: 2,
-                                    paddingHorizontal: 4,
-                                    fontSize: 12,
-                                },
-                                !item.chaptersDownloaded && {
-                                    borderTopLeftRadius: 4,
-                                    borderBottomLeftRadius: 4,
-                                },
-                            ]}
-                        >
-                            {item.chaptersUnread}
-                        </Text>
-                    )}
-                </View>
-            </View>
-        </TouchableRipple>
-    );
-};
-
-export default NovelCover;
-
-const styles = StyleSheet.create({
-    // logo: {
-    //     height: 180,
-    // },
-    titleContainer: {
-        flex: 1,
-        justifyContent: "flex-end",
-        borderRadius: 4,
-    },
-    title: {
-        fontFamily: "pt-sans-bold",
-        fontSize: 14,
-        padding: 8,
-    },
-
-    linearGradient: {
-        bottom: -1,
-        borderRadius: 4,
-    },
-    opac: {
-        paddingHorizontal: 4.5,
-        paddingVertical: 4,
-        borderRadius: 4,
-    },
-    extensionIcon: {
-        width: 42,
-        height: 42,
-        borderRadius: 4,
-    },
-    listView: {
-        flex: 1,
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-        flexDirection: "row",
-        alignItems: "center",
-        borderRadius: 4,
-    },
-});

src/database/queries/NovelQueries.js

@@ -1,87 +0,0 @@
-import * as SQLite from "expo-sqlite";
-const db = SQLite.openDatabase("lnreader.db");
-
-const insertNovelQuery = `INSERT INTO novels (novelUrl, sourceUrl, sourceId, source, novelName, novelCover, novelSummary, author, artist, status, genre) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
-
-export const insertNovel = async (novel) => {
-    return new Promise((resolve, reject) =>
-        db.transaction((tx) =>
-            tx.executeSql(
-                insertNovelQuery,
-                [
-                    novel.novelUrl,
-                    novel.sourceUrl,
-                    novel.sourceId,
-                    novel.source,
-                    novel.novelName,
-                    novel.novelCover,
-                    novel.novelSummary,
-                    novel.author,
-                    novel.artist,
-                    novel.status,
-                    novel.genre,
-                ],
-                (txObj, { insertId }) => resolve(insertId),
-                (txObj, error) => console.log("Error ", error)
-            )
-        )
-    );
-};
-
-export const followNovel = async (followed, novelId) => {
-    db.transaction((tx) => {
-        tx.executeSql(
-            "UPDATE novels SET followed = ? WHERE novelId = ?",
-            [!followed, novelId],
-            (tx, res) => {},
-            (txObj, error) => console.log("Error ", error)
-        );
-    });
-};
-
-const checkNovelInCacheQuery = `SELECT * FROM novels WHERE novelUrl=? LIMIT 1`;
-
-export const checkNovelInCache = (novelUrl) => {
-    return new Promise((resolve, reject) =>
-        db.transaction((tx) => {
-            tx.executeSql(
-                checkNovelInCacheQuery,
-                [novelUrl],
-                (txObj, res) => {
-                    if (res.rows.length !== 0) {
-                        resolve(true);
-                    } else {
-                        resolve(false);
-                    }
-                },
-                (txObj, error) => console.log("Error ", error)
-            );
-        })
-    );
-};
-
-export const getNovel = async (novelUrl) => {
-    return new Promise((resolve, reject) =>
-        db.transaction((tx) => {
-            tx.executeSql(
-                `SELECT * FROM novels WHERE novelUrl = ?`,
-                [novelUrl],
-                (txObj, { rows }) => resolve(rows.item(0)),
-                (txObj, error) => console.log("Error ", error)
-            );
-        })
-    );
-};
-
-export const deleteNovelCache = () => {
-    db.transaction((tx) => {
-        tx.executeSql(
-            "DELETE FROM novels WHERE followed = 0",
-            null,
-            (txObj, res) => {
-                console.log("Cleared Novel Cache");
-            },
-            (txObj, error) => console.log("Error ", error)
-        );
-    });
-};