Skip to content

Commit

Permalink
set inset based padding to RNTester (#46354)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #46354

**Issue:**
With forced edge-to-edge on Android 15, RNTester title at top overlaps with the status bar and bottom tab bar overlaps with bottom nav bar

**Solution:**
Add margins based on inset values to the ReactRootView which is the contentView for RNTesterActivity which acts as global padding within RNTester

Changelog:
[Android][Changed] - Adding padding for RNTester on Android 15 forced edge-to-edge

Reviewed By: mdvacca

Differential Revision: D62247910

fbshipit-source-id: 7b35d0c2016b6897b5de436a4245c9e910559541
  • Loading branch information
alanleedev authored and facebook-github-bot committed Sep 5, 2024
1 parent 46fc9d9 commit f7479e6
Showing 1 changed file with 28 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
package com.facebook.react.uiapp

import android.os.Bundle
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.view.View
import android.widget.FrameLayout
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import com.facebook.react.FBRNTesterEndToEndHelper
import com.facebook.react.ReactActivity
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
Expand Down Expand Up @@ -37,6 +43,28 @@ class RNTesterActivity : ReactActivity() {
if (this::initialProps.isInitialized) initialProps else Bundle()
}

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// set background color so it will show below transparent system bars on forced edge-to-edge
this.window?.setBackgroundDrawable(ColorDrawable(Color.BLACK))
// register insets listener to update margins on the ReactRootView to avoid overlap w/ system bars
getReactDelegate()?.getReactRootView()?.let { rootView ->
val insetsType: Int =
WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout()

val windowInsetsListener = { view: View, windowInsets: WindowInsetsCompat ->
val insets = windowInsets.getInsets(insetsType)

(view.layoutParams as FrameLayout.LayoutParams).apply {
setMargins(insets.left, insets.top, insets.right, insets.bottom)
}

WindowInsetsCompat.CONSUMED
}
ViewCompat.setOnApplyWindowInsetsListener(rootView, windowInsetsListener)
}
}

override fun createReactActivityDelegate() = RNTesterActivityDelegate(this, mainComponentName)

override fun getMainComponentName() = "RNTesterApp"
Expand Down

0 comments on commit f7479e6

Please sign in to comment.