feat: add navigationBarTranslucent prop (#120)

## 📜 Description

Added new `navigationBarTranslucent` prop on `KeyboardProvider`.

## 💡 Motivation and Context

To make it more customizable and support translucent navigation bar I
decided to add a new prop called `navigationBarTranslucent`. This prop
follows the same pattern as `statusBarTranslucent`.

Fixes
#119

## 📢 Changelog

### JS
- updated specs for fabric codegen;

### Android
- added handling of new property (if property is set to `true`, then we
are setting 0 bottom padding - the same logic is already used for
controling status bar transparency);

## 🤔 How Has This Been Tested?

Manually tested on:
- Pixel 3a (API 33, emulator);
- Pixel 6 Pro (API 28, emulator)

## 📸 Screenshots (if appropriate):

|Before|After|
|-------|---------------|
|<img width="226" alt="image"
src="https://user-images.githubusercontent.com/22820318/221593460-a65f9136-ae60-40e0-8243-154c252dc903.png">|<img
width="226" alt="image"
src="https://user-images.githubusercontent.com/22820318/221593746-e56fc41a-cf07-43d0-a2be-ab948a022897.png">|

## 📝 Checklist

- [x] CI successfully passed

android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt

@@ -27,6 +27,10 @@ class KeyboardControllerViewManager(mReactContext: ReactApplicationContext) : Re
     return manager.setStatusBarTranslucent(view, value)
   }
 
+  override fun setNavigationBarTranslucent(view: ReactViewGroup, value: Boolean) {
+    return manager.setNavigationBarTranslucent(view, value)
+  }
+
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
     return manager.getExportedCustomDirectEventTypeConstants()
   }

android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardControllerViewManagerImpl.kt

@@ -17,6 +17,7 @@ import com.reactnativekeyboardcontroller.views.EdgeToEdgeReactViewGroup
 class KeyboardControllerViewManagerImpl(private val mReactContext: ReactApplicationContext) {
   private val TAG = KeyboardControllerViewManagerImpl::class.qualifiedName
   private var isStatusBarTranslucent = false
+  private var isNavigationBarTranslucent = false
 
   fun createViewInstance(reactContext: ThemedReactContext): ReactViewGroup {
     val view = EdgeToEdgeReactViewGroup(reactContext)
@@ -44,7 +45,7 @@ class KeyboardControllerViewManagerImpl(private val mReactContext: ReactApplicat
           0,
           if (this.isStatusBarTranslucent) 0 else insets?.getInsets(WindowInsetsCompat.Type.systemBars())?.top ?: 0,
           0,
-          insets?.getInsets(WindowInsetsCompat.Type.navigationBars())?.bottom ?: 0,
+          if (this.isNavigationBarTranslucent) 0 else insets?.getInsets(WindowInsetsCompat.Type.navigationBars())?.bottom ?: 0,
         )
 
         insets
@@ -61,6 +62,10 @@ class KeyboardControllerViewManagerImpl(private val mReactContext: ReactApplicat
     this.isStatusBarTranslucent = isStatusBarTranslucent
   }
 
+  fun setNavigationBarTranslucent(view: ReactViewGroup, isNavigationBarTranslucent: Boolean) {
+    this.isNavigationBarTranslucent = isNavigationBarTranslucent
+  }
+
   fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
     val map: MutableMap<String, Any> = MapBuilder.of(
       "topKeyboardMove",

android/src/paper/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt

@@ -21,6 +21,11 @@ class KeyboardControllerViewManager(mReactContext: ReactApplicationContext) : Re
     manager.setStatusBarTranslucent(view, isStatusBarTranslucent)
   }
 
+  @ReactProp(name = "navigationBarTranslucent")
+  fun setNavigationBarTranslucent(view: ReactViewGroup, isNavigationBarTranslucent: Boolean) {
+    manager.setNavigationBarTranslucent(view, isNavigationBarTranslucent)
+  }
+
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
     return manager.getExportedCustomDirectEventTypeConstants()
   }

src/animated.tsx

@@ -49,11 +49,20 @@ type KeyboardProviderProps = {
    * @platform android
    */
   statusBarTranslucent?: boolean;
+  /**
+   * Set the value to `true`, if you use translucent navigation bar on Android.
+   * Defaults to `false`.
+   *
+   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119
+   * @platform android
+   */
+  navigationBarTranslucent?: boolean;
 };
 
 export const KeyboardProvider = ({
   children,
   statusBarTranslucent,
+  navigationBarTranslucent,
 }: KeyboardProviderProps) => {
   // animated values
   const progress = useAnimatedValue(0);
@@ -131,6 +140,7 @@ export const KeyboardProvider = ({
         onKeyboardMoveReanimated={handler}
         onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}
         onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}
+        navigationBarTranslucent={navigationBarTranslucent}
         statusBarTranslucent={statusBarTranslucent}
         style={styles.container}
       >

src/specs/KeyboardControllerViewNativeComponent.ts

@@ -16,6 +16,7 @@ type KeyboardMoveEvent = Readonly<{
 export interface NativeProps extends ViewProps {
   // props
   statusBarTranslucent?: boolean;
+  navigationBarTranslucent?: boolean;
   // callbacks
   onKeyboardMove?: DirectEventHandler<KeyboardMoveEvent>;
   onKeyboardMoveStart?: DirectEventHandler<KeyboardMoveEvent>;

src/types.ts

@@ -27,6 +27,7 @@ export type KeyboardControllerProps = {
     e: NativeSyntheticEvent<EventWithName<NativeEvent>>
   ) => void;
   statusBarTranslucent?: boolean;
+  navigationBarTranslucent?: boolean;
 } & ViewProps;
 
 export type KeyboardControllerModule = {