Add fonts in reader

App.js

@@ -15,6 +15,12 @@ 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"),
     });
 
 const App = () => {

src/redux/settings/settings.actions.js

@@ -5,6 +5,7 @@ import {
     UPDATE_READER_THEME,
     UPDATE_READER_TEXT_ALIGN,
     UPDATE_READER_PADDING,
+    SET_READER_FONT,
 } from "./settings.types";
 
 export const setDisplayMode = (val) => (dispatch) => {
@@ -48,3 +49,10 @@ export const updateReaderPadding = (val) => (dispatch) => {
         payload: val,
     });
 };
+
+export const setReaderFont = (val) => (dispatch) => {
+    dispatch({
+        type: SET_READER_FONT,
+        payload: val,
+    });
+};

src/redux/settings/settings.reducer.js

@@ -1,6 +1,7 @@
 import {
     SET_DISPLAY_MODE,
     SET_ITEMS_PER_ROW,
+    SET_READER_FONT,
     UPDATE_READER_PADDING,
     UPDATE_READER_TEXT_ALIGN,
     UPDATE_READER_TEXT_SIZE,
@@ -15,6 +16,7 @@ const initialState = {
         textSize: 16,
         textAlign: "left",
         padding: 5,
+        fontFamily: null,
     },
 };
 
@@ -62,6 +64,11 @@ const settingsReducer = (state = initialState, action) => {
                 ...state,
                 reader: { ...state.reader, padding: payload },
             };
+        case SET_READER_FONT:
+            return {
+                ...state,
+                reader: { ...state.reader, fontFamily: payload },
+            };
         default:
             return state;
     }

src/redux/settings/settings.types.js

@@ -4,3 +4,4 @@ export const UPDATE_READER_THEME = "UPDATE_READER_THEME";
 export const UPDATE_READER_TEXT_SIZE = "UPDATE_READER_TEXT_SIZE";
 export const UPDATE_READER_TEXT_ALIGN = "UPDATE_READER_TEXT_ALIGN";
 export const UPDATE_READER_PADDING = "UPDATE_READER_PADDING";
+export const SET_READER_FONT = "SET_READER_FONT";

src/screens/Chapter/Chapter.js

@@ -173,6 +173,9 @@ const ChapterItem = ({
                                 textAlign: reader.textAlign,
                                 paddingHorizontal: `${reader.padding}%`,
                             },
+                            reader.fontFamily && {
+                                fontFamily: reader.fontFamily,
+                            },
                         ]}
                     >
                         {chapter.chapterText.trim()}

src/screens/Chapter/components/BottomSheet.js

@@ -1,13 +1,14 @@
 import React from "react";
 
 import { Animated, StyleSheet, View, Text, Dimensions } from "react-native";
-import { ToggleButton, IconButton } from "react-native-paper";
+import { ToggleButton, IconButton, Chip } from "react-native-paper";
 import Slider from "@react-native-community/slider";
 import Bottomsheet from "rn-sliding-up-panel";
 
 import { connect } from "react-redux";
 
 import {
+    setReaderFont,
     updateReaderPadding,
     updateReaderTextAlign,
     updateReaderTextSize,
@@ -23,13 +24,24 @@ const ChapterBottomSheet = ({
     updateReaderTheme,
     updateReaderTextAlign,
     updateReaderPadding,
+    setReaderFont,
 }) => {
+    const fonts = [
+        { fontFamily: "", name: "Original" },
+        { fontFamily: "arbutus-slab", name: "Arbutus Slab" },
+        { fontFamily: "domine", name: "Domine" },
+        { fontFamily: "lato", name: "Lato" },
+        { fontFamily: "noto-sans", name: "Noto Sans" },
+        { fontFamily: "open-sans", name: "Open Sans" },
+        { fontFamily: "pt-serif", name: "PT Serif" },
+    ];
+
     return (
         <Bottomsheet
             animatedValue={new Animated.Value(0)}
             ref={bottomSheetRef}
-            draggableRange={{ top: 360, bottom: 0 }}
-            snappingPoints={[0, 360]}
+            draggableRange={{ top: 450, bottom: 0 }}
+            snappingPoints={[0, 450]}
             showBackdrop={false}
         >
             <View style={styles.contentContainer}>
@@ -37,7 +49,7 @@ const ChapterBottomSheet = ({
                 <View style={styles.readerSettingsContainer}>
                     <Text
                         style={{
-                            color: theme.textColorPrimary,
+                            color: "#FFFFFF",
                             fontWeight: "bold",
                         }}
                     >
@@ -59,7 +71,7 @@ const ChapterBottomSheet = ({
                     />
                     <Text
                         style={{
-                            color: theme.textColorPrimary,
+                            color: "#FFFFFF",
                             fontWeight: "bold",
                         }}
                     >
@@ -100,7 +112,7 @@ const ChapterBottomSheet = ({
                     </ToggleButton.Row>
                     <Text
                         style={{
-                            color: theme.textColorPrimary,
+                            color: "#FFFFFF",
                             fontWeight: "bold",
                             marginTop: 10,
                         }}
@@ -144,7 +156,7 @@ const ChapterBottomSheet = ({
                     </ToggleButton.Row>
                     <Text
                         style={{
-                            color: theme.textColorPrimary,
+                            color: "#FFFFFF",
                             fontWeight: "bold",
                             marginTop: 10,
                         }}
@@ -170,7 +182,7 @@ const ChapterBottomSheet = ({
                         />
                         <Text
                             style={{
-                                color: theme.textColorPrimary,
+                                color: "#FFFFFF",
                                 paddingHorizontal: 50,
                             }}
                         >
@@ -186,6 +198,42 @@ const ChapterBottomSheet = ({
                             }
                         />
                     </View>
+                    <Text
+                        style={{
+                            color: "#FFFFFF",
+                            fontWeight: "bold",
+                            marginTop: 10,
+                        }}
+                    >
+                        Font Style
+                    </Text>
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            flexWrap: "wrap",
+                            justifyContent: "center",
+                        }}
+                    >
+                        {fonts.map((font, index) => (
+                            <Chip
+                                key={index}
+                                onPress={() => setReaderFont(font.fontFamily)}
+                                textStyle={{ fontFamily: font.fontFamily }}
+                                style={{
+                                    borderWidth: 0,
+                                    marginHorizontal: 5,
+                                    marginVertical: 5,
+                                }}
+                                selected={
+                                    reader.fontFamily === font.fontFamily
+                                        ? true
+                                        : false
+                                }
+                            >
+                                {font.name}
+                            </Chip>
+                        ))}
+                    </View>
                 </View>
             </View>
         </Bottomsheet>
@@ -202,6 +250,7 @@ export default connect(mapStateToProps, {
     updateReaderTheme,
     updateReaderTextAlign,
     updateReaderPadding,
+    setReaderFont,
 })(ChapterBottomSheet);
 
 const styles = StyleSheet.create({