feat: handle edge-to-edge on Android (#101)

* feat: handle edge-to-edge on Android

* fix: handle custom background color in edge-to-edge

* feat: detect using react-native-edge-to-edge

* fix: refactor detection

* docs: document edge-to-edge

Author: okwasniewski

android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -183,6 +183,7 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     val colorDrawable = ColorDrawable(backgroundColor)
 
     itemBackground = colorDrawable
+    backgroundTintList = ColorStateList.valueOf(backgroundColor)
   }
 
   fun setActiveTintColor(color: Int?) {

android/src/main/java/com/rcttabview/RCTTabViewImpl.kt

@@ -1,6 +1,10 @@
 package com.rcttabview
 
 import android.content.res.ColorStateList
+import android.graphics.Color
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.MapBuilder
 
@@ -16,10 +20,6 @@ class RCTTabViewImpl {
     return NAME
   }
 
-  companion object {
-    const val NAME = "RNCTabView"
-  }
-
   fun setItems(view: ReactBottomNavigationView, items: ReadableArray) {
     val itemsArray = mutableListOf<TabInfo>()
     for (i in 0 until items.size()) {
@@ -85,4 +85,29 @@ class RCTTabViewImpl {
       MapBuilder.of("registrationName", "onTabLongPress")
     )
   }
+
+  companion object {
+    const val NAME = "RNCTabView"
+
+    // Detect `react-native-edge-to-edge` (https://github.com/zoontek/react-native-edge-to-edge)
+    private val EDGE_TO_EDGE = try {
+      Class.forName("com.zoontek.rnedgetoedge.EdgeToEdgePackage")
+      true
+    } catch (exception: ClassNotFoundException) {
+      false
+    }
+
+    fun getNavigationBarInset(context: ReactContext): Int {
+      val window = context.currentActivity?.window
+
+      val isSystemBarTransparent = EDGE_TO_EDGE || window?.navigationBarColor == Color.TRANSPARENT
+
+      if (!isSystemBarTransparent) {
+        return 0
+      }
+
+      val windowInsets = ViewCompat.getRootWindowInsets(window?.decorView ?: return 0)
+      return windowInsets?.getInsets(WindowInsetsCompat.Type.navigationBars())?.bottom ?: 0
+    }
+  }
 }

android/src/newarch/RCTTabViewManager.kt

@@ -113,9 +113,11 @@ class RCTTabViewManager(context: ReactApplicationContext) :
     val measureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
     view.measure(measureSpec, measureSpec)
 
+    val bottomInset = RCTTabViewImpl.getNavigationBarInset(contextInner)
+
     return YogaMeasureOutput.make(
       toDIPFromPixel(view.measuredWidth.toFloat()),
-      toDIPFromPixel(view.measuredHeight.toFloat())
+      toDIPFromPixel(view.measuredHeight.toFloat() + bottomInset)
     )
   }
 

android/src/oldarch/RCTTabViewManager.kt

@@ -133,12 +133,13 @@ class RCTTabViewManager(context: ReactApplicationContext) : SimpleViewManager<Re
       if (mMeasured) {
         return YogaMeasureOutput.make(mWidth, mHeight)
       }
-
       val tabView = ReactBottomNavigationView(themedContext)
       val spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+
+      val navigationBarInset = RCTTabViewImpl.getNavigationBarInset(themedContext)
       tabView.measure(spec, spec)
       this.mWidth = tabView.measuredWidth
-      this.mHeight = tabView.measuredHeight
+      this.mHeight = tabView.measuredHeight + navigationBarInset
       this.mMeasured = true
 
       return YogaMeasureOutput.make(mWidth, mHeight)

docs/docs/docs/guides/_meta.json

@@ -1 +1 @@
-["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", "android-native-styling", "handling-scrollview-insets", "usage-with-vector-icons"]
+["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", {"type": "divider"}, "handling-scrollview-insets",  "usage-with-vector-icons", {"type": "divider"}, "android-native-styling", "edge-to-edge-support"]

docs/docs/docs/guides/edge-to-edge-support.md

@@ -0,0 +1,13 @@
+# Android Edge to Edge Support
+
+React Native Bottom Tabs supports edge-to-edge navigation on Android.
+
+In order to enable edge-to-edge follow installation instructions for [react-native-edge-to-edge](https://github.com/zoontek/react-native-edge-to-edge).
+
+Once this package is installed, this library will automatically use it to enable edge-to-edge navigation on Android.
+
+### Before
+
+| Before | After |
+|:---:|:---:|
+| ![Before](../../public/img/no-edge-to-edge.png) | ![After](../../public/img/edge-to-edge.png) |