diff --git a/android/app/src/main/assets/css/index.css b/android/app/src/main/assets/css/index.css index 429e5909..c645d6d3 100644 --- a/android/app/src/main/assets/css/index.css +++ b/android/app/src/main/assets/css/index.css @@ -30,6 +30,7 @@ body { body.page-reader { overflow: hidden; + padding-bottom: unset; } #LNReader-chapter { diff --git a/android/app/src/main/assets/js/core.js b/android/app/src/main/assets/js/core.js index aef408b8..fa34de5d 100644 --- a/android/app/src/main/assets/js/core.js +++ b/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); diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx index cebda2f5..75d2c0d5 100644 --- a/src/components/BottomSheet/BottomSheet.tsx +++ b/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 { - bottomSheetRef: Ref | null; + bottomSheetRef: RefObject | null; } -const BottomSheet: React.FC = props => { +const BottomSheet: React.FC = ({ + bottomSheetRef, + children, + onChange, + ...otherProps +}) => { + const indexRef = useRef(); const { bottom } = useSafeAreaInsets(); const renderBackdrop = useCallback( (backdropProps: BottomSheetBackdropProps) => ( @@ -23,15 +31,26 @@ const BottomSheet: React.FC = props => { ), [], ); + useBackHandler(() => { + if (typeof indexRef.current === 'number' && indexRef.current !== -1) { + bottomSheetRef?.current?.close(); + return true; + } + return false; + }); return ( { + onChange?.(index); + indexRef.current = index; + }} + {...otherProps} > - {props.children} + {children} ); }; diff --git a/src/screens/onboarding/OnboardingScreen.tsx b/src/screens/onboarding/OnboardingScreen.tsx index 02befb8e..bf44e8ab 100644 --- a/src/screens/onboarding/OnboardingScreen.tsx +++ b/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 ; } @@ -49,7 +50,7 @@ export default function OnboardingScreen() { color: theme.onBackground, }} > - Welcome + {getString('onboardingScreen.welcome')}