Add react-native-paper and implement progress bar in CurrentlyReading…

package.json

@@ -34,6 +34,7 @@
     "react-native-gesture-handler": "^2.24.0",
     "react-native-keyboard-avoiding-scroll-view": "^1.0.1",
     "react-native-material-menu": "^2.0.0",
+    "react-native-paper": "^5.13.1",
     "react-native-ratings": "^8.1.0",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "^5.3.0",

src/components/CurrentlyReadingBook.tsx

@@ -6,6 +6,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { useTranslation } from "react-i18next";
+import { ProgressBar } from "react-native-paper";
 
 type RootStackParamList = {
   BookPreview: {
@@ -109,6 +110,11 @@ export const CurrentlyReadingBook = ({
                 {t("current_page")}: {currentPage}
               </Text>
             </View>
+            <ProgressBar
+              progress={currentPage ? currentPage / parseInt(pages) : 0}
+              color={colors.textSecondary}
+              style={styles.progressBar}
+            />
           </View>
         </View>
       </View>
@@ -172,4 +178,9 @@ const styles = StyleSheet.create({
     opacity: 0.9,
     marginLeft: 4,
   },
+  progressBar: {
+    height: 6,
+    borderRadius: 3,
+    marginTop: 10,
+  },
 });

src/screens/BookPreviewScreen.tsx

@@ -49,6 +49,13 @@ export default function BookPreviewScreen() {
   const [bookStatus, setBookStatus] = useState(book.status);
   const [open, setOpen] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [parsedBook, setParsedBook] = useState({
+    ...book,
+    saveDate: new Date(book.saveDate),
+    status: book.status ? book.status : t("to_read"),
+    favPage: book.favPage ? book.favPage : 0,
+    currentPage: Number(book.currentPage) || 0,
+  });
 
   const getSecureImageUrl = (url: string | undefined) => {
     if (!url) return "https://via.placeholder.com/128x192?text=No+Cover";
@@ -78,14 +85,6 @@ export default function BookPreviewScreen() {
     );
   }
 
-  const parsedBook = {
-    ...book,
-    saveDate: new Date(book.saveDate),
-    status: book.status ? book.status : t("to_read"),
-    favPage: book.favPage ? book.favPage : 0,
-    currentPage: Number(book.currentPage) || 0,
-  };
-
   const handleEdit = () => {
     setMenuVisible(false);
     navigation.navigate("AddBook", {
@@ -124,6 +123,10 @@ export default function BookPreviewScreen() {
 
   const handleStatusChange = async (newStatusKey: string) => {
     setBookStatus(newStatusKey);
+    setParsedBook((prevBook) => ({
+      ...prevBook,
+      status: newStatusKey,
+    }));
     try {
       const existingBooks = await AsyncStorage.getItem("books");
       const books = existingBooks ? JSON.parse(existingBooks) : [];