fix: App Crash on Chapter End (#598)

* fixed midnightdusk * fixed missing key * fixed navigationbar visible after closing drawer * removed insets * Novelscreen warning removal * removed remove Prefix * fixed App crash at the end of chapter * added Tooltip
LNReader · May 6, 2023 · 7221070 · 7221070
1 parent ec5df86
commit 7221070
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 89 deletions.
diff --git a/src/screens/history/components/HistorySkeletonLoading.tsx b/src/screens/history/components/HistorySkeletonLoading.tsx
@@ -16,7 +16,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
 
   const renderLoadingChapter = (item: number, index: number) => {
     return (
-      <>
+      <View key={index}>
         {index === 0 || Math.random() > 0.6 ? (
           <ShimmerPlaceHolder
             style={styles.date}
@@ -25,7 +25,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
             width={Math.random() * 40 + 50}
           />
         ) : null}
-        <View style={styles.chapterCtn} key={index}>
+        <View style={styles.chapterCtn}>
           <ShimmerPlaceHolder
             style={styles.picture}
             shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
@@ -63,7 +63,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
             />
           </View>
         </View>
-      </>
+      </View>
     );
   };
 

diff --git a/src/screens/novel/NovelScreen.js b/src/screens/novel/NovelScreen.js
@@ -215,6 +215,7 @@ const Novel = ({ route, navigation }) => {
     }
 
     return list;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected]);
 
   const deleteChapter = chapter =>
@@ -300,13 +301,16 @@ const Novel = ({ route, navigation }) => {
       position[chapter.chapterId] &&
       position[chapter.chapterId].percentage;
     if (savedProgress < 100 && savedProgress > 0 && !chapter.read) {
+      const margin = chapter.releaseDate ? 5 : 0;
       return (
         <Text
-          style={{
-            color: theme.outline,
-            fontSize: 12,
-            marginLeft: chapter.releaseDate ? 5 : 0,
-          }}
+          style={[
+            styles.defaultTextSize,
+            {
+              color: theme.outline,
+              marginLeft: margin,
+            },
+          ]}
           numberOfLines={1}
         >
           {chapter.releaseDate ? '•  ' : null}
@@ -360,15 +364,7 @@ const Novel = ({ route, navigation }) => {
       <View style={[styles.container, { backgroundColor: theme.background }]}>
         <Portal>
           {selected.length === 0 ? (
-            <View
-              style={{
-                position: 'absolute',
-                height: StatusBar.currentHeight + 54,
-                width: '100%',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-              }}
-            >
+            <View style={styles.row}>
               <IconButton
                 icon="arrow-left"
                 iconColor={theme.onBackground}
@@ -546,10 +542,7 @@ const Novel = ({ route, navigation }) => {
                       icon="dots-vertical"
                       iconColor={theme.onBackground}
                       size={21}
-                      style={{
-                        marginTop: StatusBar.currentHeight + 8,
-                        marginRight: 16,
-                      }}
+                      style={styles.iconButton}
                       onPress={() => showExtraMenu(true)}
                     />
                   }
@@ -583,16 +576,12 @@ const Novel = ({ route, navigation }) => {
             <Animated.View
               entering={FadeIn.duration(150)}
               exiting={FadeOut.duration(150)}
-              style={{
-                position: 'absolute',
-                width: '100%',
-                elevation: 2,
-                backgroundColor: theme.surface2,
-                paddingTop: StatusBar.currentHeight,
-                flexDirection: 'row',
-                alignItems: 'center',
-                paddingBottom: 8,
-              }}
+              style={[
+                {
+                  backgroundColor: theme.surface2,
+                },
+                styles.animatedView,
+              ]}
             >
               <Appbar.Action
                 icon="close"
@@ -613,7 +602,7 @@ const Novel = ({ route, navigation }) => {
             </Animated.View>
           )}
         </Portal>
-        <View style={{ minHeight: 3, flex: 1 }}>
+        <View style={styles.flashlistContainer}>
           <FlashList
             ref={flatlistRef}
             estimatedItemSize={64}
@@ -624,8 +613,8 @@ const Novel = ({ route, navigation }) => {
             windowSize={15}
             initialNumToRender={7}
             renderItem={renderItem}
-            keyExtractor={(item, index) => 'chapter' + index}
-            contentContainerStyle={{ paddingBottom: 100 }}
+            keyExtractor={(_item, index) => 'chapter' + index}
+            contentContainerStyle={styles.paddingB100}
             ListHeaderComponent={
               <NovelInfoHeader
                 item={item}
@@ -668,7 +657,7 @@ const Novel = ({ route, navigation }) => {
           <Actionbar
             active={selected.length > 0}
             theme={theme}
-            style={{ marginBottom: 24 }}
+            style={styles.marginB24}
             actions={actions}
           />
           <Snackbar
@@ -681,7 +670,7 @@ const Novel = ({ route, navigation }) => {
               },
             }}
             theme={{ colors: { primary: theme.primary } }}
-            style={{ backgroundColor: theme.surface, marginBottom: 32 }}
+            style={[{ backgroundColor: theme.surface }, styles.marginB32]}
           >
             <Text style={{ color: theme.onSurface }}>
               Delete downloaded chapters?
@@ -745,10 +734,43 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  row: {
+    position: 'absolute',
+    height: StatusBar.currentHeight + 54,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  iconButton: {
+    marginTop: StatusBar.currentHeight + 8,
+    marginRight: 16,
+  },
   fab: {
     position: 'absolute',
     margin: 16,
     right: 0,
     bottom: 16,
   },
+  defaultTextSize: {
+    fontSize: 12,
+  },
+  animatedView: {
+    position: 'absolute',
+    width: '100%',
+    elevation: 2,
+    paddingTop: StatusBar.currentHeight,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 8,
+  },
+  marginB24: {
+    marginBottom: 24,
+  },
+  marginB32: {
+    marginBottom: 32,
+  },
+  paddingB100: {
+    paddingBottom: 100,
+  },
+  flashlistContainer: { minHeight: 3, flex: 1 },
 });
diff --git a/src/screens/reader/ReaderScreen.js b/src/screens/reader/ReaderScreen.js
@@ -4,7 +4,6 @@ import { Dimensions, NativeModules, NativeEventEmitter } from 'react-native';
 import VolumeButtonListener from './../../utils/volumeButtonListener';
 
 import { useDispatch } from 'react-redux';
-import { Portal } from 'react-native-paper';
 import { useKeepAwake } from 'expo-keep-awake';
 
 import {
@@ -35,7 +34,6 @@ import { useTextToSpeech } from '../../hooks/useTextToSpeech';
 import { useFullscreenMode, useLibrarySettings } from '../../hooks';
 import { getChapterFromDb } from '../../database/queries/DownloadQueries';
 import ReaderBottomSheetV2 from './components/ReaderBottomSheet/ReaderBottomSheet';
-import { useReaderSettings } from '../../redux/hooks';
 import { defaultTo } from 'lodash-es';
 import BottomInfoBar from './components/BottomInfoBar/BottomInfoBar';
 import { sanitizeChapterText } from './utils/sanitizeChapterText';
@@ -80,8 +78,6 @@ const ChapterContent = ({ route, navigation }) => {
 
   const theme = useTheme();
   const dispatch = useDispatch();
-  const readerSettings = useReaderSettings();
-  const { theme: backgroundColor } = readerSettings;
 
   const {
     swipeGestures = false,
@@ -146,12 +142,15 @@ const ChapterContent = ({ route, navigation }) => {
     return () => {
       VolumeButtonListener.disconnect();
       emmiter.current.removeAllListeners('VolumeUp');
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       emmiter.current.removeAllListeners('VolumeDown');
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [useVolumeButtons, scrollAmount]);
 
   const onLayout = useCallback(e => {
     setTimeout(() => connectVolumeButton());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const getChapter = async id => {
@@ -179,6 +178,7 @@ const ChapterContent = ({ route, navigation }) => {
         payload: { novelId, chapterId },
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [[nextChapter, prevChapter], setAdjacentChapter] = useState([]);
@@ -192,6 +192,7 @@ const ChapterContent = ({ route, navigation }) => {
       setAdjacentChapter([nextChap, prevChap]);
     };
     setPrevAndNextChap();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chapter]);
 
   const [ttsStatus, startTts] = useTextToSpeech(
@@ -216,6 +217,7 @@ const ChapterContent = ({ route, navigation }) => {
   let scrollInterval;
   useEffect(() => {
     if (autoScroll) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       scrollInterval = setInterval(() => {
         webViewRef.current?.injectJavaScript(`(()=>{
           window.scrollBy({top:${defaultTo(
@@ -255,6 +257,7 @@ const ChapterContent = ({ route, navigation }) => {
         updateTracker();
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [chapter],
   );
 
@@ -307,7 +310,7 @@ const ChapterContent = ({ route, navigation }) => {
   });
   const openDrawer = () => {
     navigation.openDrawer();
-    setHidden(true);
+    hideHeader();
   };
 
   if (loading) {

diff --git a/src/screens/reader/components/ChapterDrawer.js b/src/screens/reader/components/ChapterDrawer.js
@@ -1,20 +1,18 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
-import { Text } from 'react-native-paper';
+import { Text, Tooltip } from 'react-native-paper';
 import color from 'color';
 import { useTheme } from '@hooks/useTheme';
 import { FlashList } from '@shopify/flash-list';
 import { Button, LoadingScreenV2 } from '@components/index';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getString } from '@strings/translations';
 import { useNovel, useSettings, usePreferences } from '@hooks/reduxHooks';
 import { useDispatch } from 'react-redux';
 import { setNovel, getNovelAction } from '@redux/novel/novel.actions';
 
 const ChapterDrawer = ({ state: st, navigation }) => {
   const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  const styles = createStylesheet(theme, insets);
+  const styles = createStylesheet(theme);
   let listRef = useRef();
 
   const dispatch = useDispatch();
@@ -57,8 +55,8 @@ const ChapterDrawer = ({ state: st, navigation }) => {
     });
     let res;
     res = indexOfCurrentChapter >= 2 ? indexOfCurrentChapter - 2 : 0;
-    listRef.current?.scrollToIndex?.(res);
     return res;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chapters, currentChapterId, listAscending]);
   const [buttonProperties, setButtonProperties] = useState({
     up: {
@@ -87,27 +85,29 @@ const ChapterDrawer = ({ state: st, navigation }) => {
     });
   };
   const renderItem = ({ item }) => (
-    <View
-      style={[
-        styles.drawerElementContainer,
-        item.chapterId === currentChapterId && {
-          backgroundColor: color(theme.primary).alpha(0.12).string(),
-        },
-      ]}
-    >
-      <Pressable
-        android_ripple={{ color: theme.rippleColor }}
-        onPress={() => changeChapter(item)}
-        style={styles.chapterCtn}
+    <Tooltip title={item.chapterName} leaveTouchDelay={1000}>
+      <View
+        style={[
+          styles.drawerElementContainer,
+          item.chapterId === currentChapterId && {
+            backgroundColor: color(theme.primary).alpha(0.12).string(),
+          },
+        ]}
       >
-        <Text numberOfLines={1} style={styles.chapterNameCtn}>
-          {item.chapterName}
-        </Text>
-        {item?.releaseDate ? (
-          <Text style={styles.releaseDateCtn}>{item.releaseDate}</Text>
-        ) : null}
-      </Pressable>
-    </View>
+        <Pressable
+          android_ripple={{ color: theme.rippleColor }}
+          onPress={() => changeChapter(item)}
+          style={styles.chapterCtn}
+        >
+          <Text numberOfLines={1} style={styles.chapterNameCtn}>
+            {item.chapterName}
+          </Text>
+          {item?.releaseDate ? (
+            <Text style={styles.releaseDateCtn}>{item.releaseDate}</Text>
+          ) : null}
+        </Pressable>
+      </View>
+    </Tooltip>
   );
 
   const ListFooter = () => {
@@ -201,7 +201,7 @@ const ChapterDrawer = ({ state: st, navigation }) => {
   );
 };
 
-const createStylesheet = (theme, insets) => {
+const createStylesheet = theme => {
   return StyleSheet.create({
     drawer: {
       flex: 1,
@@ -248,7 +248,7 @@ const createStylesheet = (theme, insets) => {
     footer: {
       marginTop: 4,
       paddingTop: 8,
-      paddingBottom: insets.bottom,
+      paddingBottom: 30,
       borderTopWidth: 1,
       borderTopColor: theme.outline,
     },

diff --git a/src/theme/md3/index.ts b/src/theme/md3/index.ts
@@ -1,5 +1,5 @@
 export { defaultTheme } from './defaultTheme';
-export { midnightDusk } from './mignightDusk';
+export { midnightDusk } from './midnightDusk';
 export { tealTurquoise } from './tealTurquoise';
 export { yotsubaTheme } from './yotsuba';
 export { lavenderTheme } from './lavender';