From a5552e50b89394ec94d2d822e4c4a6455d6e6e93 Mon Sep 17 00:00:00 2001
From: Najuna Brian <najuna.dev@gmail.com>
Date: Sun, 21 Dec 2025 16:25:24 +0300
Subject: [PATCH] Fix: Bottom navigation bar

---
 formulus/src/navigation/MainTabNavigator.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/formulus/src/navigation/MainTabNavigator.tsx b/formulus/src/navigation/MainTabNavigator.tsx
index cd707e58d..f94533d60 100644
--- a/formulus/src/navigation/MainTabNavigator.tsx
+++ b/formulus/src/navigation/MainTabNavigator.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import HomeScreen from '../screens/HomeScreen';
 import FormsScreen from '../screens/FormsScreen';
@@ -10,6 +11,10 @@ import MoreScreen from '../screens/MoreScreen';
 const Tab = createBottomTabNavigator();
 
 const MainTabNavigator: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  const baseTabBarHeight = 60;
+  const tabBarHeight = baseTabBarHeight + insets.bottom;
+
   return (
     <Tab.Navigator
       screenOptions={{
@@ -20,9 +25,9 @@ const MainTabNavigator: React.FC = () => {
           backgroundColor: '#FFFFFF',
           borderTopWidth: 1,
           borderTopColor: '#E5E5E5',
-          paddingBottom: 4,
+          paddingBottom: Math.max(insets.bottom, 4),
           paddingTop: 4,
-          height: 60,
+          height: tabBarHeight,
         },
       }}>
       <Tab.Screen