Fix: reader page padding & back press (#1339)

* fix: remove bottom padding in page reader

* fix: disable drag transition when holding

* reader bottom sheet backpress handler

* close drawer on backpress

* fix: undefined index

* chores: added onboading strings

android/app/src/main/assets/css/index.css

@@ -30,6 +30,7 @@ body {
 
 body.page-reader { 
   overflow: hidden;
+  padding-bottom: unset;
 }
 
 #LNReader-chapter {

android/app/src/main/assets/js/core.js

@@ -412,6 +412,7 @@ window.addEventListener('DOMContentLoaded', async () => {
     if (reader.generalSettings.val.pageReader) {
       const diffX =
         (e.changedTouches[0].screenX - this.initialX) / reader.layoutWidth;
+      reader.chapterElement.style.transition = 'unset';
       reader.chapterElement.style.transform =
         'translateX(-' + (pageReader.page.val - diffX) * 100 + '%)';
     }
@@ -421,6 +422,7 @@ window.addEventListener('DOMContentLoaded', async () => {
     const diffX = e.changedTouches[0].screenX - this.initialX;
     const diffY = e.changedTouches[0].screenY - this.initialY;
     if (reader.generalSettings.val.pageReader) {
+      reader.chapterElement.style.transition = '200ms';
       const diffXPercentage = diffX / reader.layoutWidth;
       if (diffXPercentage < -0.3) {
         pageReader.movePage(pageReader.page.val + 1);

src/components/BottomSheet/BottomSheet.tsx

@@ -1,4 +1,4 @@
-import React, { Ref, useCallback } from 'react';
+import React, { RefObject, useCallback, useRef } from 'react';
 import {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
@@ -6,12 +6,20 @@ import {
   BottomSheetModalProps,
 } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useBackHandler } from '@hooks/index';
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
 interface BottomSheetProps extends Omit<BottomSheetModalProps, 'ref'> {
-  bottomSheetRef: Ref<BottomSheetModal> | null;
+  bottomSheetRef: RefObject<BottomSheetModalMethods> | null;
 }
 
-const BottomSheet: React.FC<BottomSheetProps> = props => {
+const BottomSheet: React.FC<BottomSheetProps> = ({
+  bottomSheetRef,
+  children,
+  onChange,
+  ...otherProps
+}) => {
+  const indexRef = useRef<number>();
   const { bottom } = useSafeAreaInsets();
   const renderBackdrop = useCallback(
     (backdropProps: BottomSheetBackdropProps) => (
@@ -23,15 +31,26 @@ const BottomSheet: React.FC<BottomSheetProps> = props => {
     ),
     [],
   );
+  useBackHandler(() => {
+    if (typeof indexRef.current === 'number' && indexRef.current !== -1) {
+      bottomSheetRef?.current?.close();
+      return true;
+    }
+    return false;
+  });
   return (
     <BottomSheetModal
-      ref={props.bottomSheetRef}
+      ref={bottomSheetRef}
       backdropComponent={renderBackdrop}
       handleComponent={null}
       containerStyle={{ paddingBottom: bottom }}
-      {...props}
+      onChange={index => {
+        onChange?.(index);
+        indexRef.current = index;
+      }}
+      {...otherProps}
     >
-      {props.children}
+      {children}
     </BottomSheetModal>
   );
 };

src/screens/onboarding/OnboardingScreen.tsx

@@ -6,6 +6,7 @@ import { Button } from '@components';
 import PickThemeStep from './PickThemeStep';
 import { useState } from 'react';
 import { MMKVStorage } from '@utils/mmkv/mmkv';
+import { getString } from '@strings/translations';
 
 enum OnboardingStep {
   PICK_THEME,
@@ -25,7 +26,7 @@ export default function OnboardingScreen() {
   const renderHelptext = () => {
     switch (step) {
       case OnboardingStep.PICK_THEME:
-        return 'Pick a theme';
+        return getString('onboardingScreen.pickATheme');
       default:
         return <PickThemeStep />;
     }
@@ -49,7 +50,7 @@ export default function OnboardingScreen() {
           color: theme.onBackground,
         }}
       >
-        Welcome
+        {getString('onboardingScreen.welcome')}
       </Text>
       <Text
         style={{
@@ -72,7 +73,7 @@ export default function OnboardingScreen() {
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
         <Button
           style={{ flex: 1 }}
-          title="Complete"
+          title={getString('onboardingScreen.complete')}
           mode="contained"
           onPress={() => {
             MMKVStorage.set('IS_ONBOARDED', true);

src/screens/onboarding/PickThemeStep.tsx

@@ -6,6 +6,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { useMMKVObject } from 'react-native-mmkv';
 import { useTheme } from '@hooks/persisted';
 import { darkThemes, lightThemes } from '@theme/md3';
+import { getString } from '@strings/translations';
 
 const ThemeList = ({
   theme,
@@ -66,7 +67,9 @@ const SchemeButton = ({
         onPress={onPress}
       >
         <Text style={{ color: isSelected ? theme.onPrimary : theme.onSurface }}>
-          {isDarkButton ? 'Dark' : 'Light'}
+          {isDarkButton
+            ? getString('onboardingScreen.dark')
+            : getString('onboardingScreen.light')}
         </Text>
       </Pressable>
     </View>

src/screens/reader/ReaderScreen.tsx

@@ -17,6 +17,9 @@ import { getString } from '@strings/translations';
 import KeepScreenAwake from './components/KeepScreenAwake';
 import useChapter from './hooks/useChapter';
 import { ChapterContextProvider, useChapterContext } from './ChapterContext';
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import { useBackHandler } from '@hooks/index';
+import { get } from 'lodash-es';
 
 const Chapter = ({ route, navigation }: ChapterScreenProps) => {
   const drawerRef = useRef<DrawerLayoutAndroid>(null);
@@ -27,6 +30,12 @@ const Chapter = ({ route, navigation }: ChapterScreenProps) => {
     >
       <DrawerLayoutAndroid
         ref={drawerRef}
+        onDrawerOpen={() => {
+          drawerRef.current?.setState(prev => ({ ...prev, isOpen: true }));
+        }}
+        onDrawerClose={() => {
+          drawerRef.current?.setState(prev => ({ ...prev, isOpen: false }));
+        }}
         drawerWidth={300}
         drawerPosition="left"
         renderNavigationView={() => <ChapterDrawer />}
@@ -51,7 +60,7 @@ export const ChapterContent = ({
 }: ChapterContentProps) => {
   const { novel, chapter } = useChapterContext();
   const webViewRef = useRef<WebView>(null);
-  const readerSheetRef = useRef(null);
+  const readerSheetRef = useRef<BottomSheetModalMethods>(null);
   const theme = useTheme();
   const { pageReader = false, keepScreenOn } = useChapterGeneralSettings();
 
@@ -87,6 +96,14 @@ export const ChapterContent = ({
     hideHeader();
   }, [drawerRef, hideHeader]);
 
+  useBackHandler(() => {
+    if (get(drawerRef.current?.state, 'isOpen')) {
+      drawerRef.current?.closeDrawer();
+      return true;
+    }
+    return false;
+  });
+
   if (error) {
     return (
       <ErrorScreenV2

src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx

@@ -1,8 +1,8 @@
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import React, { Ref, useMemo, useState } from 'react';
+import React, { RefObject, useMemo, useState } from 'react';
 import color from 'color';
 
-import { BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import BottomSheet from '@components/BottomSheet/BottomSheet';
 import { useChapterGeneralSettings, useTheme } from '@hooks/persisted';
 import { SceneMap, TabBar, TabView } from 'react-native-tab-view';
@@ -16,6 +16,7 @@ import ReaderValueChange from './ReaderValueChange';
 import ReaderFontPicker from './ReaderFontPicker';
 import { overlay } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
 const ReaderTab: React.FC = () => {
   return (
@@ -160,7 +161,7 @@ const GeneralTab: React.FC = () => {
 };
 
 interface ReaderBottomSheetV2Props {
-  bottomSheetRef: Ref<BottomSheetModal> | null;
+  bottomSheetRef: RefObject<BottomSheetModalMethods> | null;
 }
 
 const ReaderBottomSheetV2: React.FC<ReaderBottomSheetV2Props> = ({

strings/languages/en/strings.json

@@ -492,5 +492,12 @@
     "unableToGetNovel": "Unable to get novel",
     "updatesLower": "updates",
     "updatingLibrary": "Updating library"
+  },
+  "onboardingScreen": {
+    "welcome": "Welcome",
+    "pickATheme": "Pick a theme",
+    "light": "Light",
+    "dark": "Dark",
+    "complete": "Complete"
   }
 }

strings/languages/vi_VN/strings.json

@@ -521,5 +521,12 @@
     "unableToGetNovel": "Không thể lấy được truyện",
     "updatesLower": "cập nhập",
     "updatingLibrary": "Đang cập nhật thư viện"
+  },
+  "onboardingScreen": {
+    "welcome": "Xin chào",
+    "pickATheme": "Hãy chọn chủ đề",
+    "light": "Sáng",
+    "dark": "Tối",
+    "complete": "Hoàn tất"
   }
 }

strings/types/index.ts

@@ -399,4 +399,9 @@ export interface StringMap {
   'updatesScreen.unableToGetNovel': 'string';
   'updatesScreen.updatesLower': 'string';
   'updatesScreen.updatingLibrary': 'string';
+  'onboardingScreen.welcome': 'string';
+  'onboardingScreen.pickATheme': 'string';
+  'onboardingScreen.light': 'string';
+  'onboardingScreen.dark': 'string';
+  'onboardingScreen.complete': 'string';
 }