From b7535cfe409f8a696fb3ae163da749572aeb6d60 Mon Sep 17 00:00:00 2001 From: nyagami Date: Wed, 22 May 2024 20:54:07 +0700 Subject: [PATCH 01/10] replace native Navigation bar by expo-navigation-bar --- .../LNReader/MainApplication.java | 2 - .../NavigationBarColorModule.java | 158 ------------------ .../NavigationBarColorPackage.java | 25 --- package-lock.json | 25 +++ package.json | 1 + src/hooks/common/useFullscreenMode.ts | 31 ++-- src/native/NavigationBarColor.ts | 32 ---- src/navigators/Main.tsx | 8 +- 8 files changed, 46 insertions(+), 236 deletions(-) delete mode 100644 android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorModule.java delete mode 100644 android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorPackage.java delete mode 100644 src/native/NavigationBarColor.ts diff --git a/android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainApplication.java b/android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainApplication.java index 1cca556d2..732296028 100644 --- a/android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainApplication.java +++ b/android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainApplication.java @@ -13,7 +13,6 @@ import com.facebook.soloader.SoLoader; import com.rajarsheechatterjee.EpubUtil.EpubUtilPackage; -import com.rajarsheechatterjee.NavigationBarColor.NavigationBarColorPackage; import com.rajarsheechatterjee.TextFile.TextFilePackage; import com.rajarsheechatterjee.VolumeButtonListener.VolumeButtonListenerPackage; import com.rajarsheechatterjee.ZipArchive.ZipArchivePackage; @@ -35,7 +34,6 @@ public boolean getUseDeveloperSupport() { @Override protected List getPackages() { List packages = new PackageList(this).getPackages(); - packages.add(new NavigationBarColorPackage()); packages.add(new VolumeButtonListenerPackage()); packages.add(new ZipArchivePackage()); packages.add(new TextFilePackage()); diff --git a/android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorModule.java b/android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorModule.java deleted file mode 100644 index a66d7e9d1..000000000 --- a/android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorModule.java +++ /dev/null @@ -1,158 +0,0 @@ -package com.rajarsheechatterjee.NavigationBarColor; - -import android.animation.ArgbEvaluator; -import android.animation.ValueAnimator; -import android.graphics.Color; -import android.os.Build; -import android.app.Activity; -import android.view.View; -import android.view.Window; -import android.view.WindowManager; -import com.facebook.react.bridge.Arguments; -import com.facebook.react.bridge.Promise; -import com.facebook.react.bridge.ReactApplicationContext; -import com.facebook.react.bridge.ReactContextBaseJavaModule; -import com.facebook.react.bridge.ReactMethod; -import com.facebook.react.bridge.WritableMap; -import java.util.HashMap; -import java.util.Map; -import com.facebook.react.uimanager.IllegalViewOperationException; -import static com.facebook.react.bridge.UiThreadUtil.runOnUiThread; - -public class NavigationBarColorModule extends ReactContextBaseJavaModule { - public static final String REACT_CLASS = "NavigationBarColor"; - private static final String ERROR_NO_ACTIVITY = "E_NO_ACTIVITY"; - private static final String ERROR_NO_ACTIVITY_MESSAGE = "Tried to change the navigation bar while not attached to an Activity"; - private static final int UI_FLAG_HIDE_NAV_BAR = View.SYSTEM_UI_FLAG_LAYOUT_STABLE - | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION - | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar - | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY; - - public NavigationBarColorModule(ReactApplicationContext context) { - super(context); - } - - public void setNavigationBarTheme(Activity activity, Boolean light) { - if (activity != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { - Window window = activity.getWindow(); - int flags = window.getDecorView().getSystemUiVisibility(); - if (light) { - flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR; - } else { - flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR; - } - window.getDecorView().setSystemUiVisibility(flags); - } - } - - - @Override - public String getName() { - return REACT_CLASS; - } - - @Override - public Map getConstants() { - final Map constants = new HashMap<>(); - constants.put("EXAMPLE_CONSTANT", "example"); - - return constants; - } - - @ReactMethod - public void changeNavigationBarColor(final String color, final Boolean light, final Boolean animated, final Promise promise) { - final WritableMap map = Arguments.createMap(); - if (getCurrentActivity() != null) { - try { - final Window window = getCurrentActivity().getWindow(); - runOnUiThread(new Runnable() { - @Override - public void run() { - if (color.equals("transparent") || color.equals("translucent")) { - window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS); - window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); - if (color.equals("transparent")) { - window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS); - } else { - window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); - } - setNavigationBarTheme(getCurrentActivity(), light); - map.putBoolean("success", true); - promise.resolve(map); - return; - } else { - window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS); - window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); - } - if (animated) { - Integer colorFrom = window.getNavigationBarColor(); - Integer colorTo = Color.parseColor(color); - //window.setNavigationBarColor(colorTo); - ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo); - colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { - @Override - public void onAnimationUpdate(ValueAnimator animator) { - window.setNavigationBarColor((Integer) animator.getAnimatedValue()); - } - }); - colorAnimation.start(); - } else { - window.setNavigationBarColor(Color.parseColor(color)); - } - setNavigationBarTheme(getCurrentActivity(), light); - WritableMap map = Arguments.createMap(); - map.putBoolean("success", true); - promise.resolve(map); - } - }); - } catch (IllegalViewOperationException e) { - map.putBoolean("success", false); - promise.reject("error", e); - } - - } else { - promise.reject(ERROR_NO_ACTIVITY, new Throwable(ERROR_NO_ACTIVITY_MESSAGE)); - } - } - - @ReactMethod - public void hideNavigationBar(Promise promise) { - try { - runOnUiThread(new Runnable() { - @Override - public void run() { - if (getCurrentActivity() != null) { - View decorView = getCurrentActivity().getWindow().getDecorView(); - decorView.setSystemUiVisibility(UI_FLAG_HIDE_NAV_BAR); - } - } - }); - } catch (IllegalViewOperationException e) { - WritableMap map = Arguments.createMap(); - map.putBoolean("success", false); - promise.reject("error", e); - } - } - - @ReactMethod - public void showNavigationBar(Promise promise) { - try { - runOnUiThread(new Runnable() { - @Override - public void run() { - if (getCurrentActivity() != null) { - Window w = getCurrentActivity().getWindow(); - w.setStatusBarColor(Color.TRANSPARENT); - w.setNavigationBarColor(Color.TRANSPARENT); - View decorView = w.getDecorView(); - decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); - } - } - }); - } catch (IllegalViewOperationException e) { - WritableMap map = Arguments.createMap(); - map.putBoolean("success", false); - promise.reject("error", e); - } - } -} diff --git a/android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorPackage.java b/android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorPackage.java deleted file mode 100644 index ff4738f9d..000000000 --- a/android/app/src/main/java/com/rajarsheechatterjee/NavigationBarColor/NavigationBarColorPackage.java +++ /dev/null @@ -1,25 +0,0 @@ -package com.rajarsheechatterjee.NavigationBarColor; -import com.facebook.react.ReactPackage; -import com.facebook.react.bridge.NativeModule; -import com.facebook.react.bridge.ReactApplicationContext; -import com.facebook.react.uimanager.ViewManager; - -import java.util.ArrayList; -import java.util.Collections; -import java.util.List; - -public class NavigationBarColorPackage implements ReactPackage { - @Override - public List createViewManagers(ReactApplicationContext reactContext) { - return Collections.emptyList(); - } - - @Override - public List createNativeModules(ReactApplicationContext reactContext) { - List modules = new ArrayList<>(); - - modules.add(new NavigationBarColorModule(reactContext)); - - return modules; - } -} diff --git a/package-lock.json b/package-lock.json index 083714375..ecf0f5a27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "expo-linear-gradient": "~12.3.0", "expo-linking": "~5.0.2", "expo-localization": "~14.3.0", + "expo-navigation-bar": "^2.8.1", "expo-notifications": "~0.20.1", "expo-speech": "~11.3.0", "expo-sqlite": "~11.3.3", @@ -10001,6 +10002,18 @@ "invariant": "^2.2.4" } }, + "node_modules/expo-navigation-bar": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/expo-navigation-bar/-/expo-navigation-bar-2.8.1.tgz", + "integrity": "sha512-aT5G+7SUsXDVPsRwp8fF940ycka1ABb4g3QKvTZN3YP6kMWvsiYEmRqMIJVy0zUr/i6bxBG1ZergkXimWrFt3w==", + "dependencies": { + "@react-native/normalize-color": "^2.0.0", + "debug": "^4.3.2" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-notifications": { "version": "0.20.1", "resolved": "https://registry.npmjs.org/expo-notifications/-/expo-notifications-0.20.1.tgz", @@ -15722,6 +15735,18 @@ "@babel/runtime": "^7.20.6" } }, + "node_modules/react-native-dotenv/node_modules/dotenv": { + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, "node_modules/react-native-drawer-layout": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-3.2.2.tgz", diff --git a/package.json b/package.json index b568d065f..d8779a187 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "expo-linear-gradient": "~12.3.0", "expo-linking": "~5.0.2", "expo-localization": "~14.3.0", + "expo-navigation-bar": "^2.8.1", "expo-notifications": "~0.20.1", "expo-speech": "~11.3.0", "expo-sqlite": "~11.3.3", diff --git a/src/hooks/common/useFullscreenMode.ts b/src/hooks/common/useFullscreenMode.ts index b86d2c3e2..9ec3f66c4 100644 --- a/src/hooks/common/useFullscreenMode.ts +++ b/src/hooks/common/useFullscreenMode.ts @@ -2,17 +2,18 @@ import { useCallback, useEffect } from 'react'; import { StatusBar } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import color from 'color'; -import { - changeNavigationBarColor, - hideNavigationBar, - showNavigationBar, -} from '../../native/NavigationBarColor'; import { useChapterGeneralSettings, useChapterReaderSettings, useTheme, } from '../persisted'; import Color from 'color'; +import * as NavigationBar from 'expo-navigation-bar'; + +export const changeNavigationBarColor = (color: string, isDark = false) => { + NavigationBar.setBackgroundColorAsync(color); + NavigationBar.setButtonStyleAsync(isDark ? 'dark' : 'light'); +}; const useFullscreenMode = () => { const { addListener } = useNavigation(); @@ -23,7 +24,7 @@ const useFullscreenMode = () => { const setImmersiveMode = useCallback(() => { if (fullScreenMode) { StatusBar.setHidden(true); - hideNavigationBar(); + NavigationBar.setVisibilityAsync('hidden'); } else { StatusBar.setBarStyle( color(backgroundColor).isDark() ? 'light-content' : 'dark-content', @@ -35,8 +36,16 @@ const useFullscreenMode = () => { const showStatusAndNavBar = useCallback(() => { StatusBar.setHidden(false); - showNavigationBar(); - changeNavigationBarColor(Color(theme.surface).hex(), !theme.isDark); + NavigationBar.setVisibilityAsync('visible'); + + /** + * This is overlay of reader footer and should be transparent. + * But in hexa, ##xxxxxx00 could be another color + */ + changeNavigationBarColor( + Color(theme.surface).alpha(0.05).hexa(), + !theme.isDark, + ); }, []); useEffect(() => { @@ -47,11 +56,7 @@ const useFullscreenMode = () => { const unsubscribe = addListener('beforeRemove', () => { showStatusAndNavBar(); StatusBar.setBarStyle(theme.isDark ? 'light-content' : 'dark-content'); - changeNavigationBarColor( - Color(theme.surface2).hex(), - !theme.isDark, - true, - ); + changeNavigationBarColor(Color(theme.surface2).hex(), !theme.isDark); }); return unsubscribe; diff --git a/src/native/NavigationBarColor.ts b/src/native/NavigationBarColor.ts deleted file mode 100644 index 1a45d5f5b..000000000 --- a/src/native/NavigationBarColor.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { NativeModules, Platform } from 'react-native'; - -const { NavigationBarColor } = NativeModules; - -const changeNavigationBarColor = ( - color = '', - light = false, - animated = true, -) => { - if (Platform.OS === 'android') { - const LightNav = light ? true : false; - NavigationBarColor.changeNavigationBarColor(color, LightNav, animated); - } -}; - -const hideNavigationBar = () => { - if (Platform.OS === 'android') { - NavigationBarColor.hideNavigationBar(); - } else { - return false; - } -}; - -const showNavigationBar = () => { - if (Platform.OS === 'android') { - NavigationBarColor.showNavigationBar(); - } else { - return false; - } -}; - -export { changeNavigationBarColor, hideNavigationBar, showNavigationBar }; diff --git a/src/navigators/Main.tsx b/src/navigators/Main.tsx index 8d785e8ed..fa77ff038 100644 --- a/src/navigators/Main.tsx +++ b/src/navigators/Main.tsx @@ -31,8 +31,8 @@ import BrowseSettings from '../screens/browse/BrowseSettings'; import { updateLibrary } from '@services/updates'; import WebviewScreen from '@screens/WebviewScreen/WebviewScreen'; import { RootStackParamList } from './types'; -import { changeNavigationBarColor } from '@native/NavigationBarColor'; import Color from 'color'; +import { changeNavigationBarColor } from '@hooks/common/useFullscreenMode'; const Stack = createStackNavigator(); @@ -44,11 +44,7 @@ const MainNavigator = () => { useEffect(() => { const timer = setTimeout(async () => { setBarColor(theme); - changeNavigationBarColor( - Color(theme.surface2).hex(), - !theme.isDark, - true, - ); + changeNavigationBarColor(Color(theme.surface2).hex(), !theme.isDark); }, 500); return () => { From 1f1ce428e797c10376733a11db44b63cf057f0a1 Mon Sep 17 00:00:00 2001 From: nyagami Date: Wed, 22 May 2024 21:37:21 +0700 Subject: [PATCH 02/10] fix fullscreen logic --- src/hooks/common/useFullscreenMode.ts | 36 +++++++++++-------- .../reader/components/ReaderFooter.tsx | 2 +- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/hooks/common/useFullscreenMode.ts b/src/hooks/common/useFullscreenMode.ts index 9ec3f66c4..894a633de 100644 --- a/src/hooks/common/useFullscreenMode.ts +++ b/src/hooks/common/useFullscreenMode.ts @@ -1,7 +1,6 @@ import { useCallback, useEffect } from 'react'; import { StatusBar } from 'react-native'; import { useNavigation } from '@react-navigation/native'; -import color from 'color'; import { useChapterGeneralSettings, useChapterReaderSettings, @@ -9,6 +8,7 @@ import { } from '../persisted'; import Color from 'color'; import * as NavigationBar from 'expo-navigation-bar'; +import { setBarColor } from '@theme/utils/setBarColor'; export const changeNavigationBarColor = (color: string, isDark = false) => { NavigationBar.setBackgroundColorAsync(color); @@ -26,9 +26,7 @@ const useFullscreenMode = () => { StatusBar.setHidden(true); NavigationBar.setVisibilityAsync('hidden'); } else { - StatusBar.setBarStyle( - color(backgroundColor).isDark() ? 'light-content' : 'dark-content', - ); + setBarColor(theme); StatusBar.setBackgroundColor(backgroundColor); changeNavigationBarColor(backgroundColor); } @@ -38,15 +36,21 @@ const useFullscreenMode = () => { StatusBar.setHidden(false); NavigationBar.setVisibilityAsync('visible'); - /** - * This is overlay of reader footer and should be transparent. - * But in hexa, ##xxxxxx00 could be another color - */ - changeNavigationBarColor( - Color(theme.surface).alpha(0.05).hexa(), - !theme.isDark, - ); - }, []); + if (fullScreenMode) { + /** + * This is overlay of reader footer and should be transparent. + * But in hexa, ##xxxxxx00 could be another color + */ + changeNavigationBarColor( + Color(theme.surface).alpha(0.05).hexa(), + !theme.isDark, + ); + StatusBar.setTranslucent(true); + StatusBar.setBackgroundColor('transparent'); + } else { + changeNavigationBarColor(backgroundColor); + } + }, [fullScreenMode]); useEffect(() => { setImmersiveMode(); @@ -54,7 +58,11 @@ const useFullscreenMode = () => { useEffect(() => { const unsubscribe = addListener('beforeRemove', () => { - showStatusAndNavBar(); + StatusBar.setHidden(false); + NavigationBar.setVisibilityAsync('visible'); + setBarColor(theme); + StatusBar.setTranslucent(true); + StatusBar.setBackgroundColor('transparent'); StatusBar.setBarStyle(theme.isDark ? 'light-content' : 'dark-content'); changeNavigationBarColor(Color(theme.surface2).hex(), !theme.isDark); }); diff --git a/src/screens/reader/components/ReaderFooter.tsx b/src/screens/reader/components/ReaderFooter.tsx index 50f84d8a9..dbf81ae1c 100644 --- a/src/screens/reader/components/ReaderFooter.tsx +++ b/src/screens/reader/components/ReaderFooter.tsx @@ -142,7 +142,7 @@ const styles = StyleSheet.create({ zIndex: 1, bottom: 0, width: '100%', - paddingBottom: 16, + paddingBottom: 40, }, buttonsContainer: { flexDirection: 'row', From 3d4fd975b00eab92accf3ff2545463c19fed0d49 Mon Sep 17 00:00:00 2001 From: nyagami Date: Wed, 22 May 2024 21:52:42 +0700 Subject: [PATCH 03/10] fix: navigation button color --- src/hooks/common/useFullscreenMode.ts | 26 ++++++++++++++++---------- src/navigators/Main.tsx | 6 ++++-- src/theme/utils/setBarColor.ts | 6 ++++++ 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/hooks/common/useFullscreenMode.ts b/src/hooks/common/useFullscreenMode.ts index 894a633de..7c8b9473b 100644 --- a/src/hooks/common/useFullscreenMode.ts +++ b/src/hooks/common/useFullscreenMode.ts @@ -8,12 +8,10 @@ import { } from '../persisted'; import Color from 'color'; import * as NavigationBar from 'expo-navigation-bar'; -import { setBarColor } from '@theme/utils/setBarColor'; - -export const changeNavigationBarColor = (color: string, isDark = false) => { - NavigationBar.setBackgroundColorAsync(color); - NavigationBar.setButtonStyleAsync(isDark ? 'dark' : 'light'); -}; +import { + changeNavigationBarColor, + setBarColor, +} from '@theme/utils/setBarColor'; const useFullscreenMode = () => { const { addListener } = useNavigation(); @@ -26,9 +24,14 @@ const useFullscreenMode = () => { StatusBar.setHidden(true); NavigationBar.setVisibilityAsync('hidden'); } else { - setBarColor(theme); + StatusBar.setBarStyle( + Color(backgroundColor).isDark() ? 'light-content' : 'dark-content', + ); StatusBar.setBackgroundColor(backgroundColor); - changeNavigationBarColor(backgroundColor); + changeNavigationBarColor( + backgroundColor, + Color(backgroundColor).isDark(), + ); } }, [backgroundColor, fullScreenMode]); @@ -48,9 +51,12 @@ const useFullscreenMode = () => { StatusBar.setTranslucent(true); StatusBar.setBackgroundColor('transparent'); } else { - changeNavigationBarColor(backgroundColor); + changeNavigationBarColor( + backgroundColor, + Color(backgroundColor).isDark(), + ); } - }, [fullScreenMode]); + }, [backgroundColor, fullScreenMode]); useEffect(() => { setImmersiveMode(); diff --git a/src/navigators/Main.tsx b/src/navigators/Main.tsx index fa77ff038..a1b6842ae 100644 --- a/src/navigators/Main.tsx +++ b/src/navigators/Main.tsx @@ -3,7 +3,10 @@ import React, { useEffect } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -import { setBarColor } from '@theme/utils/setBarColor'; +import { + changeNavigationBarColor, + setBarColor, +} from '@theme/utils/setBarColor'; import { useAppSettings, usePlugins, useTheme } from '@hooks/persisted'; import { useGithubUpdateChecker } from '@hooks/common/githubUpdateChecker'; @@ -32,7 +35,6 @@ import { updateLibrary } from '@services/updates'; import WebviewScreen from '@screens/WebviewScreen/WebviewScreen'; import { RootStackParamList } from './types'; import Color from 'color'; -import { changeNavigationBarColor } from '@hooks/common/useFullscreenMode'; const Stack = createStackNavigator(); diff --git a/src/theme/utils/setBarColor.ts b/src/theme/utils/setBarColor.ts index b1543af85..41e051a47 100644 --- a/src/theme/utils/setBarColor.ts +++ b/src/theme/utils/setBarColor.ts @@ -1,5 +1,6 @@ import { StatusBar } from 'react-native'; import { ThemeColors } from '@theme/types'; +import * as NavigationBar from 'expo-navigation-bar'; /** * Sets status and navigation bar color. @@ -9,3 +10,8 @@ import { ThemeColors } from '@theme/types'; export const setBarColor = (theme: ThemeColors) => StatusBar.setBarStyle(theme.isDark ? 'light-content' : 'dark-content'); + +export const changeNavigationBarColor = (color: string, isDark = false) => { + NavigationBar.setBackgroundColorAsync(color); + NavigationBar.setButtonStyleAsync(isDark ? 'light' : 'dark'); +}; From aa69f33b1e8ca0ff48c4d057c69480d6a8681d2a Mon Sep 17 00:00:00 2001 From: nyagami Date: Wed, 22 May 2024 21:56:50 +0700 Subject: [PATCH 04/10] fix: navigation color when theme changed --- src/hooks/common/useFullscreenMode.ts | 2 +- src/navigators/Main.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/common/useFullscreenMode.ts b/src/hooks/common/useFullscreenMode.ts index 7c8b9473b..264ae5fe6 100644 --- a/src/hooks/common/useFullscreenMode.ts +++ b/src/hooks/common/useFullscreenMode.ts @@ -46,7 +46,7 @@ const useFullscreenMode = () => { */ changeNavigationBarColor( Color(theme.surface).alpha(0.05).hexa(), - !theme.isDark, + theme.isDark, ); StatusBar.setTranslucent(true); StatusBar.setBackgroundColor('transparent'); diff --git a/src/navigators/Main.tsx b/src/navigators/Main.tsx index a1b6842ae..7cc3219b0 100644 --- a/src/navigators/Main.tsx +++ b/src/navigators/Main.tsx @@ -46,7 +46,7 @@ const MainNavigator = () => { useEffect(() => { const timer = setTimeout(async () => { setBarColor(theme); - changeNavigationBarColor(Color(theme.surface2).hex(), !theme.isDark); + changeNavigationBarColor(Color(theme.surface2).hex(), theme.isDark); }, 500); return () => { From 4e5bd652844257235d8b0beaa2e99a4afdce2000 Mon Sep 17 00:00:00 2001 From: nyagami Date: Wed, 22 May 2024 21:58:57 +0700 Subject: [PATCH 05/10] fix: status bar color on full screen mode --- src/hooks/common/useFullscreenMode.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/common/useFullscreenMode.ts b/src/hooks/common/useFullscreenMode.ts index 264ae5fe6..4da591006 100644 --- a/src/hooks/common/useFullscreenMode.ts +++ b/src/hooks/common/useFullscreenMode.ts @@ -50,6 +50,7 @@ const useFullscreenMode = () => { ); StatusBar.setTranslucent(true); StatusBar.setBackgroundColor('transparent'); + setBarColor(theme); } else { changeNavigationBarColor( backgroundColor, From fa7ccd5d3f0c878e6288fdee395f6273ecf4cdd6 Mon Sep 17 00:00:00 2001 From: nyagami Date: Fri, 24 May 2024 00:00:31 +0700 Subject: [PATCH 06/10] 40 is too large --- src/screens/reader/components/ReaderFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/reader/components/ReaderFooter.tsx b/src/screens/reader/components/ReaderFooter.tsx index dbf81ae1c..ef94e4d63 100644 --- a/src/screens/reader/components/ReaderFooter.tsx +++ b/src/screens/reader/components/ReaderFooter.tsx @@ -142,7 +142,7 @@ const styles = StyleSheet.create({ zIndex: 1, bottom: 0, width: '100%', - paddingBottom: 40, + paddingBottom: 28, }, buttonsContainer: { flexDirection: 'row', From 4411df946c82b5f11fd074f4df50351960c5d4f2 Mon Sep 17 00:00:00 2001 From: nyagami Date: Fri, 24 May 2024 23:00:49 +0700 Subject: [PATCH 07/10] no 40 is acceptable :) --- src/screens/reader/components/ReaderFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/reader/components/ReaderFooter.tsx b/src/screens/reader/components/ReaderFooter.tsx index ef94e4d63..dbf81ae1c 100644 --- a/src/screens/reader/components/ReaderFooter.tsx +++ b/src/screens/reader/components/ReaderFooter.tsx @@ -142,7 +142,7 @@ const styles = StyleSheet.create({ zIndex: 1, bottom: 0, width: '100%', - paddingBottom: 28, + paddingBottom: 40, }, buttonsContainer: { flexDirection: 'row', From 9d0e094bbe633c94664ac9bb6a062758a7fca2b1 Mon Sep 17 00:00:00 2001 From: nyagami Date: Fri, 24 May 2024 23:03:54 +0700 Subject: [PATCH 08/10] refactor setBarColor --- src/hooks/common/useFullscreenMode.ts | 10 +--------- src/theme/utils/setBarColor.ts | 20 ++++++++++++-------- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/hooks/common/useFullscreenMode.ts b/src/hooks/common/useFullscreenMode.ts index 4da591006..08ac13ec6 100644 --- a/src/hooks/common/useFullscreenMode.ts +++ b/src/hooks/common/useFullscreenMode.ts @@ -24,10 +24,7 @@ const useFullscreenMode = () => { StatusBar.setHidden(true); NavigationBar.setVisibilityAsync('hidden'); } else { - StatusBar.setBarStyle( - Color(backgroundColor).isDark() ? 'light-content' : 'dark-content', - ); - StatusBar.setBackgroundColor(backgroundColor); + setBarColor(Color(backgroundColor)); changeNavigationBarColor( backgroundColor, Color(backgroundColor).isDark(), @@ -48,8 +45,6 @@ const useFullscreenMode = () => { Color(theme.surface).alpha(0.05).hexa(), theme.isDark, ); - StatusBar.setTranslucent(true); - StatusBar.setBackgroundColor('transparent'); setBarColor(theme); } else { changeNavigationBarColor( @@ -68,9 +63,6 @@ const useFullscreenMode = () => { StatusBar.setHidden(false); NavigationBar.setVisibilityAsync('visible'); setBarColor(theme); - StatusBar.setTranslucent(true); - StatusBar.setBackgroundColor('transparent'); - StatusBar.setBarStyle(theme.isDark ? 'light-content' : 'dark-content'); changeNavigationBarColor(Color(theme.surface2).hex(), !theme.isDark); }); diff --git a/src/theme/utils/setBarColor.ts b/src/theme/utils/setBarColor.ts index 41e051a47..46b0a006b 100644 --- a/src/theme/utils/setBarColor.ts +++ b/src/theme/utils/setBarColor.ts @@ -1,15 +1,19 @@ import { StatusBar } from 'react-native'; import { ThemeColors } from '@theme/types'; import * as NavigationBar from 'expo-navigation-bar'; +import Color from 'color'; -/** - * Sets status and navigation bar color. - * - * @param theme - */ - -export const setBarColor = (theme: ThemeColors) => - StatusBar.setBarStyle(theme.isDark ? 'light-content' : 'dark-content'); +export const setBarColor = (color: ThemeColors | Color) => { + if (color instanceof Color) { + // fullscreen reader mode + StatusBar.setBarStyle(color.isDark() ? 'light-content' : 'dark-content'); + StatusBar.setBackgroundColor(color.hexa()); + } else { + StatusBar.setTranslucent(true); + StatusBar.setBackgroundColor('transparent'); + StatusBar.setBarStyle(color.isDark ? 'light-content' : 'dark-content'); + } +}; export const changeNavigationBarColor = (color: string, isDark = false) => { NavigationBar.setBackgroundColorAsync(color); From 675f54108d1c45ab052502b9660314e649e10781 Mon Sep 17 00:00:00 2001 From: nyagami Date: Tue, 28 May 2024 14:46:24 +0700 Subject: [PATCH 09/10] refactor: rename setStatusBarColor --- src/hooks/common/useFullscreenMode.ts | 8 ++++---- src/navigators/Main.tsx | 4 ++-- src/theme/utils/setBarColor.ts | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/hooks/common/useFullscreenMode.ts b/src/hooks/common/useFullscreenMode.ts index 08ac13ec6..9e210a1fd 100644 --- a/src/hooks/common/useFullscreenMode.ts +++ b/src/hooks/common/useFullscreenMode.ts @@ -10,7 +10,7 @@ import Color from 'color'; import * as NavigationBar from 'expo-navigation-bar'; import { changeNavigationBarColor, - setBarColor, + setStatusBarColor, } from '@theme/utils/setBarColor'; const useFullscreenMode = () => { @@ -24,7 +24,7 @@ const useFullscreenMode = () => { StatusBar.setHidden(true); NavigationBar.setVisibilityAsync('hidden'); } else { - setBarColor(Color(backgroundColor)); + setStatusBarColor(Color(backgroundColor)); changeNavigationBarColor( backgroundColor, Color(backgroundColor).isDark(), @@ -45,7 +45,7 @@ const useFullscreenMode = () => { Color(theme.surface).alpha(0.05).hexa(), theme.isDark, ); - setBarColor(theme); + setStatusBarColor(theme); } else { changeNavigationBarColor( backgroundColor, @@ -62,7 +62,7 @@ const useFullscreenMode = () => { const unsubscribe = addListener('beforeRemove', () => { StatusBar.setHidden(false); NavigationBar.setVisibilityAsync('visible'); - setBarColor(theme); + setStatusBarColor(theme); changeNavigationBarColor(Color(theme.surface2).hex(), !theme.isDark); }); diff --git a/src/navigators/Main.tsx b/src/navigators/Main.tsx index 7cc3219b0..fceac2c3f 100644 --- a/src/navigators/Main.tsx +++ b/src/navigators/Main.tsx @@ -5,7 +5,7 @@ import { createStackNavigator } from '@react-navigation/stack'; import { changeNavigationBarColor, - setBarColor, + setStatusBarColor, } from '@theme/utils/setBarColor'; import { useAppSettings, usePlugins, useTheme } from '@hooks/persisted'; import { useGithubUpdateChecker } from '@hooks/common/githubUpdateChecker'; @@ -45,7 +45,7 @@ const MainNavigator = () => { useEffect(() => { const timer = setTimeout(async () => { - setBarColor(theme); + setStatusBarColor(theme); changeNavigationBarColor(Color(theme.surface2).hex(), theme.isDark); }, 500); diff --git a/src/theme/utils/setBarColor.ts b/src/theme/utils/setBarColor.ts index 46b0a006b..3985da450 100644 --- a/src/theme/utils/setBarColor.ts +++ b/src/theme/utils/setBarColor.ts @@ -3,7 +3,7 @@ import { ThemeColors } from '@theme/types'; import * as NavigationBar from 'expo-navigation-bar'; import Color from 'color'; -export const setBarColor = (color: ThemeColors | Color) => { +export const setStatusBarColor = (color: ThemeColors | Color) => { if (color instanceof Color) { // fullscreen reader mode StatusBar.setBarStyle(color.isDark() ? 'light-content' : 'dark-content'); From 9cffc3d60dc5d2371b334d78ba48f9672bea548b Mon Sep 17 00:00:00 2001 From: nyagami Date: Tue, 28 May 2024 15:11:34 +0700 Subject: [PATCH 10/10] no padding for landscape mode --- src/screens/reader/components/ReaderFooter.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/screens/reader/components/ReaderFooter.tsx b/src/screens/reader/components/ReaderFooter.tsx index dbf81ae1c..1e1a3a14f 100644 --- a/src/screens/reader/components/ReaderFooter.tsx +++ b/src/screens/reader/components/ReaderFooter.tsx @@ -7,6 +7,7 @@ import { ThemeColors } from '@theme/types'; import { ChapterInfo, NovelInfo } from '@database/types'; import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types'; import { ChapterScreenProps } from '@navigators/types'; +import { useDeviceOrientation } from '@hooks/index'; interface ChapterFooterProps { theme: ThemeColors; @@ -38,14 +39,17 @@ const ChapterFooter = ({ borderless: true, radius: 50, }; - + const orientation = useDeviceOrientation(); return ( @@ -142,7 +146,6 @@ const styles = StyleSheet.create({ zIndex: 1, bottom: 0, width: '100%', - paddingBottom: 40, }, buttonsContainer: { flexDirection: 'row',