feat: add support for isNavigationBarTranslucentAndroid (#6431)

## Summary

Resolves #6043. For StatusBar we have a flag that removes top padding
when we want to render RN stuff "under" StatusBar. A similar problem was
raised in #6043, but for NavigationBar, so I added another flag
`isNavigationBarTranslucentAndroid` that removes bottom padding as well.
Currently, I see no way to make it automatic. I tried one approach to
remove the flags in #5889, but it doesn't seem to be the performant
solution.

## Preview 

|Before|After without flag|After with flag|
|-|-|-|
|<img width="602" alt="before"
src="https://github.com/user-attachments/assets/0032efbe-342a-4e06-81ee-f7351bb032f7">|<img
width="602" alt="after-without-flag"
src="https://github.com/user-attachments/assets/6f259329-9bf4-4bbb-8ce4-32d671e65a5a">|<img
width="602" alt="after-with-flag"
src="https://github.com/user-attachments/assets/81c43052-f3b3-4a3b-a9cb-bd974e851c43">|

## Test plan

Testing is a bit tricky, because an example from the issue uses a
navigation bar package from Expo, which requires Expo and our example
app doesn't have Expo.

What I did:

<details>
<summary>Steps</summary>

```bash
# clone reanimated from current branch 
git clone https://github.com/software-mansion/react-native-reanimated.git
# checkout current branch
git checkout @maciekstosio/Add-support-for-isNavigationBarTranslucentAndroid
# install
yarn && yarn build
# build npm package
cd packages/react-native-reanimated
./createNPMPackage.sh --fresh
# next, create simple expo project
npx create-expo-stack
# install library for navigation bar
npx expo install expo-navigation-bar
# install reanimated 
npx expo install react-native-reanimated
# replace in package.json path to locally-build package i.e.:
"react-native-reanimated": "file:react-native-reanimated.tgz"
# yarn install 
# npx expo run:android
```

</details>

<details>
<summary>App.tsx to test</summary>

```jsx
import * as NavigationBar from 'expo-navigation-bar';
import React, { useEffect } from 'react';
import Animated, {
  useAnimatedKeyboard,
  useAnimatedStyle,
} from 'react-native-reanimated';
import {
  Platform,
  StatusBar,
  StyleSheet,
  TextInput,
  View,
  Text,
  Button,
} from 'react-native';

export default function EmptyExample() {
  const keyboard = useAnimatedKeyboard({
    isNavigationBarTranslucentAndroid: true,
  });

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateY: -keyboard.height.value }],
  }));

  useEffect(() => {
    StatusBar.setBarStyle('dark-content');
    NavigationBar.setBackgroundColorAsync('transparent');
  }, []);

  return (
    <Animated.View
      style={[
        styles.container,
        animatedStyles,
        { justifyContent: 'flex-end', borderWidth: 5, borderColor: '#ff0' },
      ]}>
      <View
        style={[
          styles.center,
          {
            height: 200,
            backgroundColor: '#f0f',
            borderWidth: 5,
            borderColor: '#0ff',
          },
        ]}>
        <Text>{`Android ${Platform.constants['Release']}`}</Text>
        <TextInput placeholder="Test" />
      </View>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: 'rgba(255,0,255,0.2)' },
  center: { justifyContent: 'center', alignItems: 'center' },
});
```

</details>

Author: maciekstosio

packages/docs-reanimated/docs/device/useAnimatedKeyboard.mdx

@@ -101,9 +101,13 @@ import AnimatedKeyboardSrc from '!!raw-loader!@site/src/examples/AnimatedKeyboar
 
 - On Android, using the `useAnimatedKeyboard` hook expands root view to full screen ([immersive mode](https://developer.android.com/develop/ui/views/layout/immersive)) and takes control over insets management.
 
-  - When `isStatusBarTranslucentAndroid` is `false` it applies the top and bottom margins according to the insets.
+  - When `isStatusBarTranslucentAndroid` is `false` it applies the top margin according to the insets.
 
-  - When `isStatusBarTranslucentAndroid` is `true` it applies bottom padding according to the navigation inset and sets top margin to `0`.
+  - When `isStatusBarTranslucentAndroid` is `true` it sets top margin to `0`.
+
+  - When `isNavigationBarTranslucentAndroid` is `false` it applies the bottom margin according to the insets.
+
+  - When `isNavigationBarTranslucentAndroid` is `true` it sets bottom margin to `0`.
 
 - On Android, when using navigation with native header, `isStatusBarTranslucentAndroid` doesn't affect the top inset.
 

packages/docs-reanimated/versioned_docs/version-2.x/api/hooks/useAnimatedKeyboard.md

@@ -48,6 +48,8 @@ Properties:
 
 - `isStatusBarTranslucentAndroid`[bool] - if you want to use translucent status bar on Android, set this option to `true`. Defaults to `false`. Ignored on iOS.
 
+- `isNavigationBarTranslucentAndroid`[bool] - if you want to use translucent navigation bar on Android, set this option to `true`. Defaults to `false`. Ignored on iOS.
+
 ### Example
 
 ```js

packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp

@@ -870,7 +870,8 @@ void NativeReanimatedModule::initializeLayoutAnimations() {
 jsi::Value NativeReanimatedModule::subscribeForKeyboardEvents(
     jsi::Runtime &rt,
     const jsi::Value &handlerWorklet,
-    const jsi::Value &isStatusBarTranslucent) {
+    const jsi::Value &isStatusBarTranslucent,
+    const jsi::Value &isNavigationBarTranslucent) {
   auto shareableHandler = extractShareableOrThrow<ShareableWorklet>(
       rt,
       handlerWorklet,
@@ -880,7 +881,8 @@ jsi::Value NativeReanimatedModule::subscribeForKeyboardEvents(
         uiWorkletRuntime_->runGuarded(
             shareableHandler, jsi::Value(keyboardState), jsi::Value(height));
       },
-      isStatusBarTranslucent.getBool());
+      isStatusBarTranslucent.getBool(),
+      isNavigationBarTranslucent.getBool());
 }
 
 void NativeReanimatedModule::unsubscribeFromKeyboardEvents(

packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.h

@@ -157,7 +157,8 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec {
   jsi::Value subscribeForKeyboardEvents(
       jsi::Runtime &rt,
       const jsi::Value &keyboardEventContainer,
-      const jsi::Value &isStatusBarTranslucent) override;
+      const jsi::Value &isStatusBarTranslucent,
+      const jsi::Value &isNavigationBarTranslucent) override;
   void unsubscribeFromKeyboardEvents(
       jsi::Runtime &rt,
       const jsi::Value &listenerId) override;

packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModuleSpec.cpp

@@ -138,7 +138,8 @@ static jsi::Value SPEC_PREFIX(subscribeForKeyboardEvents)(
     const jsi::Value *args,
     size_t) {
   return static_cast<NativeReanimatedModuleSpec *>(&turboModule)
-      ->subscribeForKeyboardEvents(rt, std::move(args[0]), std::move(args[1]));
+      ->subscribeForKeyboardEvents(
+          rt, std::move(args[0]), std::move(args[1]), std::move(args[2]));
 }
 
 static jsi::Value SPEC_PREFIX(unsubscribeFromKeyboardEvents)(

packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModuleSpec.h

@@ -77,7 +77,8 @@ class JSI_EXPORT NativeReanimatedModuleSpec : public TurboModule {
   virtual jsi::Value subscribeForKeyboardEvents(
       jsi::Runtime &rt,
       const jsi::Value &keyboardEventContainer,
-      const jsi::Value &isStatusBarTranslucent) = 0;
+      const jsi::Value &isStatusBarTranslucent,
+      const jsi::Value &isNavigationBarTranslucent) = 0;
   virtual void unsubscribeFromKeyboardEvents(
       jsi::Runtime &rt,
       const jsi::Value &listenerId) = 0;

packages/react-native-reanimated/Common/cpp/reanimated/Tools/PlatformDepMethodsHolder.h

@@ -72,7 +72,7 @@ using ConfigurePropsFunction = std::function<void(
     const jsi::Value &uiProps,
     const jsi::Value &nativeProps)>;
 using KeyboardEventSubscribeFunction =
-    std::function<int(std::function<void(int, int)>, bool)>;
+    std::function<int(std::function<void(int, int)>, bool, bool)>;
 using KeyboardEventUnsubscribeFunction = std::function<void(int)>;
 using MaybeFlushUIUpdatesQueueFunction = std::function<void()>;
 

packages/react-native-reanimated/android/src/main/cpp/reanimated/NativeProxy.cpp

@@ -416,14 +416,16 @@ void NativeProxy::setGestureState(int handlerTag, int newState) {
 
 int NativeProxy::subscribeForKeyboardEvents(
     std::function<void(int, int)> callback,
-    bool isStatusBarTranslucent) {
+    bool isStatusBarTranslucent,
+    bool isNavigationBarTranslucent) {
   static const auto method =
-      getJniMethod<int(KeyboardWorkletWrapper::javaobject, bool)>(
+      getJniMethod<int(KeyboardWorkletWrapper::javaobject, bool, bool)>(
           "subscribeForKeyboardEvents");
   return method(
       javaPart_.get(),
       KeyboardWorkletWrapper::newObjectCxxArgs(std::move(callback)).get(),
-      isStatusBarTranslucent);
+      isStatusBarTranslucent,
+      isNavigationBarTranslucent);
 }
 
 void NativeProxy::unsubscribeFromKeyboardEvents(int listenerId) {

packages/react-native-reanimated/android/src/main/cpp/reanimated/NativeProxy.h

@@ -221,7 +221,8 @@ class NativeProxy : public jni::HybridClass<NativeProxy> {
   void unregisterSensor(int sensorId);
   int subscribeForKeyboardEvents(
       std::function<void(int, int)> callback,
-      bool isStatusBarTranslucent);
+      bool isStatusBarTranslucent,
+      bool isNavigationBarTranslucent);
   void unsubscribeFromKeyboardEvents(int listenerId);
 #ifdef RCT_NEW_ARCH_ENABLED
   // nothing

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/keyboard/Keyboard.java

@@ -18,9 +18,10 @@ public int getHeight() {
     return mHeight;
   }
 
-  public void updateHeight(WindowInsetsCompat insets) {
+  public void updateHeight(WindowInsetsCompat insets, boolean isNavigationBarTranslucent) {
     int contentBottomInset = insets.getInsets(CONTENT_TYPE_MASK).bottom;
-    int systemBarBottomInset = insets.getInsets(SYSTEM_BAR_TYPE_MASK).bottom;
+    int systemBarBottomInset =
+        isNavigationBarTranslucent ? 0 : insets.getInsets(SYSTEM_BAR_TYPE_MASK).bottom;
     int keyboardHeightDip = contentBottomInset - systemBarBottomInset;
     int keyboardHeight = (int) PixelUtil.toDIPFromPixel(Math.max(0, keyboardHeightDip));
     if (keyboardHeight <= 0 && mState == KeyboardState.OPEN) {