Skip to content

Commit

Permalink
add inset based margins to RedBox (facebook#46391)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
alanleedev authored and facebook-github-bot committed Sep 9, 2024
1 parent 3244a5e commit 97b661c
Showing 1 changed file with 31 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,23 @@

import android.app.Activity;
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.widget.FrameLayout;
import androidx.annotation.Nullable;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import com.facebook.common.logging.FLog;
import com.facebook.react.R;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.common.SurfaceDelegate;
import com.facebook.react.devsupport.interfaces.DevSupportManager;
import com.facebook.react.devsupport.interfaces.RedBoxHandler;
import java.util.Objects;

/**
* The implementation of SurfaceDelegate with {@link Activity}. This is the default SurfaceDelegate
Expand Down Expand Up @@ -102,6 +110,29 @@ public boolean onKeyUp(int keyCode, KeyEvent event) {
}
return super.onKeyUp(keyCode, event);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
Objects.requireNonNull(getWindow());
// set background color so it will show below transparent system bars on forced
// edge-to-edge
getWindow().setBackgroundDrawable(new ColorDrawable(Color.BLACK));
// register insets listener to update margins on the ReactRootView to avoid overlap w/
// system bars
int insetsType =
WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout();

ViewCompat.setOnApplyWindowInsetsListener(
mRedBoxContentView,
(view, windowInsetsCompat) -> {
Insets insets = windowInsetsCompat.getInsets(insetsType);

FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) view.getLayoutParams();
lp.setMargins(insets.left, insets.top, insets.right, insets.bottom);

return WindowInsetsCompat.CONSUMED;
});
}
};
mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
mDialog.setContentView(mRedBoxContentView);
Expand Down

0 comments on commit 97b661c

Please sign in to comment.