Inconsistent `NavigationBar` Behavior with `Edge-to-Edge` Support (Android)

[wise-danya]

Description

On Android, when toggling the enabled prop of the <KeyboardProvider /> using useKeyboardController, the system NavigationBar behaves inconsistently due to the handling of edge-to-edge mode:

When enabled is set to true, the NavigationBar disappears. When enabled is set to false, the NavigationBar reappears and causes layout issues by lifting the content. This issue is primarily caused by toggling edge-to-edge mode in the enable() and disable() methods.

Steps to reproduce the behavior

1. Integrate react-native-keyboard-controller and react-native-bars into a project.
2. Use the useKeyboardController hook to toggle the enabled prop of <KeyboardProvider />.
3. Toggle enabled to true, observe that the system NavigationBar disappears.
4. Toggle enabled to false, observe that the NavigationBar reappears and lifts the content.

Expected behavior

The NavigationBar should remain hidden or translucent and should not affect the layout or content positioning, regardless of the enabled state of the KeyboardProvider.

Repo for reproducing

You can find a minimal reproducible example for this issue in the following repository: https://github.com/wise-danya/rn-keyboard-controller-issue-example

Video Demo

https://github.com/user-attachments/assets/b24e775e-021a-4131-ba13-bd29a497cf73

Additional context

On some screens, when the library is disabled, the NavigationBar is visible and causes the content to be lifted, leading to layout issues. This makes it hard to gradually adopt the library across multiple screens in an app.

Environment:

• Desktop OS: MacOS 14.6.1
• Device: Pixel 7
• OS: Android 14
• RN version: Example: 0.75.3; Prod: 0.73.9
• RN architecture: New Architecture (Fabric)
• JS engine: Hermes
• Library version: 1.13.4