Android modal does not respect users setDecorFitsSystemWindows

[simonbothen-radinn]

Description

Edge to edge does not work on modals when running Android even though the root activity has setDecorFitsSystemWindows set to false.

React Native Version

0.71.6

Output of npx react-native info

System: OS: macOS 13.2.1 CPU: (8) arm64 Apple M1 Pro Memory: 114.33 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 19.7.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 9.5.1 - /opt/homebrew/bin/npm Watchman: 2023.02.20.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: Electric Eel 2022.1.1 Patch 2 Electric Eel 2022.1.1 Patch 2 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.18 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.6 => 0.71.6 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Set WindowCompat.setDecorFitsSystemWindows(getWindow(), false); on MainActivity::onCreate.
2. Open a modal in JS on an Android with: position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, And props transparent statusBarTranslucent
3. The modal does not cover the "Gesture Navigation Bar"

Snack, code example, screenshot, or link to a repository

How to hotfix it:

` package com.radinn;

import androidx.core.view.WindowCompat;

import com.facebook.react.ReactPackage; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.ViewManager; import com.facebook.react.views.modal.ReactModalHostManager; import com.facebook.react.views.modal.ReactModalHostView;

import java.util.Arrays; import java.util.Collections; import java.util.List;

public class ModalHostHotFix implements ReactPackage {

@Override
public List<NativeModule>
createNativeModules(ReactApplicationContext reactContext) {
    return Collections.emptyList();
}

@Override
public List<ViewManager>
createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
            new ReactModalHostManager() {
                @Override
                protected ReactModalHostView createViewInstance(ThemedReactContext reactContext) {

                    return new ReactModalHostView(reactContext) {
                        @Override
                        protected void showOrUpdate() {
                            super.showOrUpdate();
                            if (this.getDialog() != null)
                                WindowCompat.setDecorFitsSystemWindows(this.getDialog().getWindow(), false);
                        }
                    };
                }
            }
    );
}

}

`

[zbxing]

I also encountered this problem. Can someone help me?

[zbxing]

@cortinico Can you help me solve this problem？Thank you very much!

[zbxing]

I have found the cause of the problem. the selected code is newly added by me, for the current Modal. Because Modal is implemented with Dialog, we must immerse the system bar

[zbxing]

I am modifying the source code classes.jar, which is not convenient to operate, so I hope that the official will improve this problem in the future, or provide property settings. @cortinico

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.