From 9b0040a757a46c58efa65626dd54902101cda30a Mon Sep 17 00:00:00 2001
From: Sameed Sharif <sameedsharif54@gmail.com>
Date: Fri, 12 Sep 2025 19:08:57 +0500
Subject: [PATCH] feat: add navigationBarTranslucent prop for Android
 navigation bar support

- Add navigationBarTranslucent prop to SelectDropdown component
- Update TypeScript definitions with new prop
- Pass navigationBarTranslucent to DropdownModal component
- Support for Android navigation bar transparency
---
 index.d.ts                      | 4 ++++
 src/SelectDropdown.js           | 3 ++-
 src/components/DropdownModal.js | 4 +++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index f5c89c4..0c53d2f 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -59,6 +59,10 @@ declare module 'react-native-select-dropdown' {
      * required to set true when statusbar is translucent (android only)
      */
     statusBarTranslucent?: boolean;
+    /**
+     * Determines whether your modal should go under the system navigationbar.
+     */
+    navigationBarTranslucent?: boolean;
     /**
      * style object for dropdown view
      */
diff --git a/src/SelectDropdown.js b/src/SelectDropdown.js
index d114c06..039aae6 100644
--- a/src/SelectDropdown.js
+++ b/src/SelectDropdown.js
@@ -27,6 +27,7 @@ const SelectDropdown = (
     onScrollEndReached /* function  */,
     /////////////////////////////
     statusBarTranslucent /* boolean */,
+    navigationBarTranslucent /* boolean */,
     dropdownStyle /* style object for search input */,
     dropdownOverlayColor /* string */,
     showsVerticalScrollIndicator /* boolean */,
@@ -164,7 +165,7 @@ const SelectDropdown = (
   const renderDropdown = () => {
     return (
       isVisible && (
-        <DropdownModal statusBarTranslucent={statusBarTranslucent} visible={isVisible} onRequestClose={onRequestClose}>
+        <DropdownModal navigationBarTranslucent={navigationBarTranslucent} statusBarTranslucent={statusBarTranslucent} visible={isVisible} onRequestClose={onRequestClose}>
           <DropdownOverlay onPress={closeDropdown} backgroundColor={dropdownOverlayColor} />
           <DropdownWindow layoutStyle={dropdownWindowStyle}>
             <FlatList
diff --git a/src/components/DropdownModal.js b/src/components/DropdownModal.js
index e40436d..7fead0d 100644
--- a/src/components/DropdownModal.js
+++ b/src/components/DropdownModal.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import {Modal} from 'react-native';
 
-const DropdownModal = ({visible, statusBarTranslucent, onRequestClose, children}) => {
+const DropdownModal = ({visible, statusBarTranslucent, onRequestClose, children, navigationBarTranslucent}) => {
   const defaults = {
     statusBarTranslucent: statusBarTranslucent || false,
+    navigationBarTranslucent: navigationBarTranslucent || false,
   };
   return (
     <Modal
@@ -12,6 +13,7 @@ const DropdownModal = ({visible, statusBarTranslucent, onRequestClose, children}
       animationType="none"
       transparent={true}
       statusBarTranslucent={defaults.statusBarTranslucent}
+      navigationBarTranslucent={defaults.navigationBarTranslucent}
       visible={visible}>
       {children}
     </Modal>