Skip to content

Commit 97b661c

Browse files
alanleedevfacebook-github-bot
authored andcommitted
add inset based margins to RedBox (facebook#46391)
Summary: Pull Request resolved: facebook#46391 **Issue:** RedBox displays early error before JS Error handling is properly setup. On Android 15, targetSdk 35 (forced edge-to-edge), dialog overlaps with system bars making it difficult to use. **Solution** Add inset based margins so content does not overlap with system bars. Changelog: [Android][Fixed] - RedBox content overlapping with system bars on Android 15 forced edge-to-edge Reviewed By: fkgozali Differential Revision: D62362105 fbshipit-source-id: 57f60222914d407ebdcfd0359dbdf3ac36bde8f5
1 parent 3244a5e commit 97b661c

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/RedBoxDialogSurfaceDelegate.java

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,23 @@
99

1010
import android.app.Activity;
1111
import android.app.Dialog;
12+
import android.graphics.Color;
13+
import android.graphics.drawable.ColorDrawable;
14+
import android.os.Bundle;
1215
import android.view.KeyEvent;
1316
import android.view.Window;
17+
import android.widget.FrameLayout;
1418
import androidx.annotation.Nullable;
19+
import androidx.core.graphics.Insets;
20+
import androidx.core.view.ViewCompat;
21+
import androidx.core.view.WindowInsetsCompat;
1522
import com.facebook.common.logging.FLog;
1623
import com.facebook.react.R;
1724
import com.facebook.react.common.ReactConstants;
1825
import com.facebook.react.common.SurfaceDelegate;
1926
import com.facebook.react.devsupport.interfaces.DevSupportManager;
2027
import com.facebook.react.devsupport.interfaces.RedBoxHandler;
28+
import java.util.Objects;
2129

2230
/**
2331
* The implementation of SurfaceDelegate with {@link Activity}. This is the default SurfaceDelegate
@@ -102,6 +110,29 @@ public boolean onKeyUp(int keyCode, KeyEvent event) {
102110
}
103111
return super.onKeyUp(keyCode, event);
104112
}
113+
114+
@Override
115+
protected void onCreate(Bundle savedInstanceState) {
116+
Objects.requireNonNull(getWindow());
117+
// set background color so it will show below transparent system bars on forced
118+
// edge-to-edge
119+
getWindow().setBackgroundDrawable(new ColorDrawable(Color.BLACK));
120+
// register insets listener to update margins on the ReactRootView to avoid overlap w/
121+
// system bars
122+
int insetsType =
123+
WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout();
124+
125+
ViewCompat.setOnApplyWindowInsetsListener(
126+
mRedBoxContentView,
127+
(view, windowInsetsCompat) -> {
128+
Insets insets = windowInsetsCompat.getInsets(insetsType);
129+
130+
FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) view.getLayoutParams();
131+
lp.setMargins(insets.left, insets.top, insets.right, insets.bottom);
132+
133+
return WindowInsetsCompat.CONSUMED;
134+
});
135+
}
105136
};
106137
mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
107138
mDialog.setContentView(mRedBoxContentView);

0 commit comments

Comments
 (0)