From 4abd69b460504b5f37769bffccc0ed9a15221279 Mon Sep 17 00:00:00 2001 From: Ammar Ahmed Date: Mon, 14 Jul 2025 12:21:43 +0500 Subject: [PATCH 1/2] mobile: fix nav bar handling on android 15 and above --- apps/mobile/app/components/ui/sheet/index.js | 20 +++++++++++------ apps/mobile/app/stores/use-theme-store.ts | 2 +- apps/mobile/app/utils/notesnook-module.ts | 4 +++- .../notesnook/RCTNNativeModule.java | 22 +++++++++++++++++++ .../react-native-actions-sheet+0.9.7.patch | 12 ++++++++++ 5 files changed, 51 insertions(+), 9 deletions(-) create mode 100644 apps/mobile/patches/react-native-actions-sheet+0.9.7.patch diff --git a/apps/mobile/app/components/ui/sheet/index.js b/apps/mobile/app/components/ui/sheet/index.js index 6da9f3e93..009af7c57 100644 --- a/apps/mobile/app/components/ui/sheet/index.js +++ b/apps/mobile/app/components/ui/sheet/index.js @@ -23,13 +23,11 @@ import { Platform, View } from "react-native"; import ActionSheet from "react-native-actions-sheet"; import useGlobalSafeAreaInsets from "../../../hooks/use-global-safe-area-insets"; import { useSettingStore } from "../../../stores/use-setting-store"; -import { PremiumToast } from "../../premium/premium-toast"; -import { Toast } from "../../toast"; -import { useAppState } from "../../../hooks/use-app-state"; -import SettingsService from "../../../services/settings"; import { useUserStore } from "../../../stores/use-user-store"; import { getContainerBorder } from "../../../utils/colors"; - +import { PremiumToast } from "../../premium/premium-toast"; +import { Toast } from "../../toast"; +import { NotesnookModule } from "../../../utils/notesnook-module"; /** * * @param {any} param0 @@ -63,6 +61,10 @@ const SheetWrapper = ({ const locked = useUserStore((state) => state.appLocked); let width = dimensions.width > 600 ? 600 : 500; + const isGestureNavigationEnabled = + NotesnookModule.isGestureNavigationEnabled(); + + console.log(isGestureNavigationEnabled); const style = React.useMemo(() => { return { @@ -77,14 +79,18 @@ const SheetWrapper = ({ borderBottomRightRadius: 0, borderBottomLeftRadius: 0, ...getContainerBorder(colors.primary.border, 0.5), - borderBottomWidth: 0 + borderBottomWidth: 0, + paddingBottom: isGestureNavigationEnabled + ? insets.bottom + : insets.bottom || 48 }; }, [ colors.primary.background, colors.primary.border, largeTablet, smallTablet, - width + width, + insets.bottom ]); const _onOpen = () => { diff --git a/apps/mobile/app/stores/use-theme-store.ts b/apps/mobile/app/stores/use-theme-store.ts index ffae0ca83..05797c84b 100644 --- a/apps/mobile/app/stores/use-theme-store.ts +++ b/apps/mobile/app/stores/use-theme-store.ts @@ -43,7 +43,7 @@ export function changeSystemBarColors() { const isDark = useThemeStore.getState().colorScheme === "dark"; changeNavigationBarColor( currTheme.scopes.base.primary.background, - isDark, + !isDark, false ); StatusBar.setBackgroundColor("transparent" as any); diff --git a/apps/mobile/app/utils/notesnook-module.ts b/apps/mobile/app/utils/notesnook-module.ts index 07de78208..cf99eebac 100644 --- a/apps/mobile/app/utils/notesnook-module.ts +++ b/apps/mobile/app/utils/notesnook-module.ts @@ -40,6 +40,7 @@ interface NotesnookModuleInterface { hasWidgetNote: (noteId: string) => Promise; updateWidgetNote: (noteId: string, data: string) => void; updateReminderWidget: () => void; + isGestureNavigationEnabled: () => boolean; } export const NotesnookModule: NotesnookModuleInterface = Platform.select({ @@ -59,7 +60,8 @@ export const NotesnookModule: NotesnookModuleInterface = Platform.select({ getWidgetNotes: () => {}, hasWidgetNote: () => {}, updateWidgetNote: () => {}, - updateReminderWidget: () => {} + updateReminderWidget: () => {}, + isGestureNavigationEnabled: () => true }, android: NativeModules.NNativeModule }); diff --git a/apps/mobile/native/android/app/src/main/java/com/streetwriters/notesnook/RCTNNativeModule.java b/apps/mobile/native/android/app/src/main/java/com/streetwriters/notesnook/RCTNNativeModule.java index 5faa69636..b79daf2ac 100644 --- a/apps/mobile/native/android/app/src/main/java/com/streetwriters/notesnook/RCTNNativeModule.java +++ b/apps/mobile/native/android/app/src/main/java/com/streetwriters/notesnook/RCTNNativeModule.java @@ -7,7 +7,9 @@ import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.graphics.Color; +import android.os.Build; import android.os.Bundle; +import android.provider.Settings; import android.util.Log; import android.view.WindowManager; import android.widget.RemoteViews; @@ -217,4 +219,24 @@ public class RCTNNativeModule extends ReactContextBaseJavaModule { wm.notifyAppWidgetViewDataChanged(id, R.id.widget_list_view); } } + + @ReactMethod(isBlockingSynchronousMethod = true) + public boolean isGestureNavigationEnabled() { + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { + try { + String navBarMode = Settings.Secure.getString( + mContext.getContentResolver(), + "navigation_mode" + ); + return "2".equals(navBarMode); + } catch (Exception e) { + return false; + } + } else { + return false; + } + } + + + } diff --git a/apps/mobile/patches/react-native-actions-sheet+0.9.7.patch b/apps/mobile/patches/react-native-actions-sheet+0.9.7.patch new file mode 100644 index 000000000..67c920abb --- /dev/null +++ b/apps/mobile/patches/react-native-actions-sheet+0.9.7.patch @@ -0,0 +1,12 @@ +diff --git a/node_modules/react-native-actions-sheet/dist/src/index.js b/node_modules/react-native-actions-sheet/dist/src/index.js +index 0e124da..3703153 100644 +--- a/node_modules/react-native-actions-sheet/dist/src/index.js ++++ b/node_modules/react-native-actions-sheet/dist/src/index.js +@@ -1088,6 +1088,7 @@ export default forwardRef(function ActionSheet(_a, ref) { + * Always true, it causes issue with keyboard handling. + */ + statusBarTranslucent: true, ++ navigationBarTranslucent: true + } + : { + testID: ((_b = props.testIDs) === null || _b === void 0 ? void 0 : _b.root) || props.testID, From a6825a2df23c8b603362b3d6c41bc2f964df4ca8 Mon Sep 17 00:00:00 2001 From: Ammar Ahmed Date: Mon, 14 Jul 2025 15:19:15 +0500 Subject: [PATCH 2/2] mobile: fix bottom insets --- apps/mobile/app/navigation/fluid-panels-view.tsx | 1 - apps/mobile/app/screens/editor/wrapper.tsx | 6 ++++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/mobile/app/navigation/fluid-panels-view.tsx b/apps/mobile/app/navigation/fluid-panels-view.tsx index 5235f6721..e66da5df0 100644 --- a/apps/mobile/app/navigation/fluid-panels-view.tsx +++ b/apps/mobile/app/navigation/fluid-panels-view.tsx @@ -421,7 +421,6 @@ export const FluidPanelsView = React.memo( height: "100%", width: "100%", backgroundColor: colors.primary.background, - paddingBottom: Platform.OS === "android" ? insets?.bottom : 0, marginRight: orientation === "LANDSCAPE-RIGHT" && Platform.OS === "ios" ? insets.right diff --git a/apps/mobile/app/screens/editor/wrapper.tsx b/apps/mobile/app/screens/editor/wrapper.tsx index 640ec5475..2ac601a2b 100644 --- a/apps/mobile/app/screens/editor/wrapper.tsx +++ b/apps/mobile/app/screens/editor/wrapper.tsx @@ -96,14 +96,16 @@ export const EditorWrapper = ({ widths }: { widths: any }) => { minHeight: "100%", backgroundColor: toolBarColors.primary.background, borderLeftWidth: DDS.isTab ? 1 : 0, - borderLeftColor: DDS.isTab ? colors.secondary.background : "transparent" + borderLeftColor: DDS.isTab + ? colors.secondary.background + : "transparent", + paddingBottom: insets.bottom }} > {loading || !introCompleted ? null : (