Automatic Transition Next Bani

ios/Podfile.lock

@@ -610,6 +610,8 @@ PODS:
     - RNSound/Core (= 0.11.2)
   - RNSound/Core (0.11.2):
     - React-Core
+  - RNSVG (15.3.0):
+    - React-Core
   - RNVectorIcons (9.2.0):
     - React-Core
   - SocketRocket (0.6.1)
@@ -703,6 +705,7 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSound (from `../node_modules/react-native-sound`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -846,6 +849,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNSound:
     :path: "../node_modules/react-native-sound"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -933,6 +938,7 @@ SPEC CHECKSUMS:
   RNReanimated: 738543ef6ec0024ea0bc9f4ab3ac99af6f068448
   RNScreens: 3c5b9f4a9dcde752466854b6109b79c0e205dad3
   RNSound: 1081cf2576b404ca804daf4934bb644cb506ff98
+  RNSVG: a48668fd382115bc89761ce291a81c4ca5f2fd2e
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 065f0b74dba4832d6e328238de46eb72c5de9556

package.json

@@ -28,6 +28,7 @@
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-native": "0.71.8",
+    "react-native-circular-progress": "^1.4.0",
     "react-native-collapsible": "^1.6.1",
     "react-native-device-info": "^10.7.0",
     "react-native-draggable-flatlist": "^4.0.1",
@@ -43,6 +44,7 @@
     "react-native-screens": "^3.20.0",
     "react-native-sound": "^0.11.2",
     "react-native-sqlite-storage": "^6.0.1",
+    "react-native-svg": "^15.3.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-webview": "^13.6.2",
     "react-redux": "^8.0.5",

src/ReaderScreen/components/footer.jsx

@@ -4,8 +4,9 @@ import { Icon } from "@rneui/themed";
 import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 import { styles, getHeaderStyles } from "../styles";
-import { colors, constant } from "../../common";
+import { colors } from "../../common";
 import { useAnimationHeadFoot } from "../hooks";
+import { onPress } from "../utils";
 
 function Footer({ navigation, shabadID }) {
   const { navigate } = navigation;
@@ -17,19 +18,6 @@ function Footer({ navigation, shabadID }) {
   const nextBani = currentBaniIndex !== -1 ? baniList[currentBaniIndex + 1] : null;
   const animationPosition = useAnimationHeadFoot();
 
-  function onPress(bani) {
-    if (!bani.folder) {
-      navigate(constant.READER, {
-        key: `Reader-${bani.id}`,
-        params: { id: bani.id, title: bani.gurmukhi },
-      });
-    } else {
-      navigate(constant.FOLDERSCREEN, {
-        key: `Folder-${bani.gurmukhi}`,
-        params: { data: bani.folder, title: bani.gurmukhi },
-      });
-    }
-  }
   return (
     currentBaniIndex !== -1 && (
       <Animated.View
@@ -39,32 +27,34 @@ function Footer({ navigation, shabadID }) {
           { transform: [{ translateY: animationPosition }] },
         ]}
       >
-        {previousBani && (
+        {previousBani ? (
           <Pressable
             style={[styles.pressableView]}
             onPress={() => {
-              onPress(previousBani);
+              onPress(previousBani, navigate);
             }}
           >
             <View style={{ alignItems: "flex-start" }}>
               <Icon
                 name="arrow-back"
                 size={30}
                 onPress={() => {
-                  onPress(previousBani);
+                  onPress(previousBani, navigate);
                 }}
                 color={colors.WHITE_COLOR}
               />
               <Text style={footerStyle.footerTitleStyle}>{previousBani.gurmukhi}</Text>
             </View>
           </Pressable>
+        ) : (
+          <Text>{}</Text>
         )}
 
         {nextBani && (
           <Pressable
             style={[styles.pressableView]}
             onPress={() => {
-              onPress(nextBani);
+              onPress(nextBani, navigate);
             }}
           >
             <View style={{ alignItems: "flex-end" }}>