From 90f6142c5621cc4f861998592799acefb2bb4efa Mon Sep 17 00:00:00 2001
From: Alexandre Tachau <alexandre.tachau@tutamail.com>
Date: Mon, 9 Mar 2026 02:32:17 +0100
Subject: [PATCH] (UI) Android navigation bar colors adapts to the app theme

Added expo-navigation-bar & a function to change the style of android's navigation bar
---
 package-lock.json   | 17 +++++++++++++++++
 package.json        |  1 +
 src/app/_layout.tsx | 10 ++++++++++
 3 files changed, 28 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 2ae036a..5468b63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "expo-linear-gradient": "~15.0.7",
         "expo-linking": "~8.0.8",
         "expo-media-library": "~18.2.0",
+        "expo-navigation-bar": "~5.0.10",
         "expo-notifications": "~0.32.16",
         "expo-router": "~6.0.14",
         "expo-secure-store": "~15.0.7",
@@ -8251,6 +8252,22 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-navigation-bar": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/expo-navigation-bar/-/expo-navigation-bar-5.0.10.tgz",
+      "integrity": "sha512-r9rdLw8mY6GPMQmVVOY/r1NBBw74DZefXHF60HxhRsdNI2kjc1wLdfWfR2rk4JVdOvdMDujnGrc9HQmqM3n8Jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-native/normalize-colors": "0.81.5",
+        "debug": "^4.3.2",
+        "react-native-is-edge-to-edge": "^1.2.1"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-notifications": {
       "version": "0.32.16",
       "resolved": "https://registry.npmjs.org/expo-notifications/-/expo-notifications-0.32.16.tgz",
diff --git a/package.json b/package.json
index a431ad1..946cf31 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "expo-linear-gradient": "~15.0.7",
     "expo-linking": "~8.0.8",
     "expo-media-library": "~18.2.0",
+    "expo-navigation-bar": "~5.0.10",
     "expo-notifications": "~0.32.16",
     "expo-router": "~6.0.14",
     "expo-secure-store": "~15.0.7",
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index 4999bfb..abddf44 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -3,6 +3,7 @@ import { useAuthStore } from '@/utils/authStore';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SplashScreen, Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
+import * as NavigationBar from 'expo-navigation-bar';
 import React, { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
 import { KeyboardProvider } from "react-native-keyboard-controller";
@@ -19,6 +20,13 @@ function AppContent() {
     const { colorScheme } = useTheme();
     const systemColorScheme = useColorScheme();
 
+    const getNavigationBarStyle = () => {
+        if (colorScheme === 'device') {
+            return systemColorScheme === 'dark' ? NavigationBar.setButtonStyleAsync('light') : NavigationBar.setButtonStyleAsync('dark');
+        }
+        return colorScheme === 'dark' ? NavigationBar.setButtonStyleAsync('light') : NavigationBar.setButtonStyleAsync('dark');
+    };
+
     const getStatusBarStyle = () => {
         if (colorScheme === 'device') {
             return systemColorScheme === 'dark' ? 'light' : 'dark';
@@ -26,6 +34,8 @@ function AppContent() {
         return colorScheme === 'dark' ? 'light' : 'dark';
     };
 
+    getNavigationBarStyle();
+
     return (
         <React.Fragment>
             <StatusBar style={getStatusBarStyle()} />