feat(mobile): implement custom tab bar and item pressable components on android native (#3613)

grtsinry43 · web-flow · commit ad3ac4926adc · 2025-05-06T16:00:03.000+08:00
* feat(mobile): implement custom tab bar and item pressable components on android native

Adds native Android implementations for custom UI components previously available on iOS:

- **Custom Tab Bar:**
    - Implements `TabBarRootView` using `ViewPager2` and a custom `CustomTabBarView` (LinearLayout) to host RN-rendered tab items (`TabBarPortalView`).
    - Provides `TabScreenView` as a container for page content within Fragments managed by `TabBarPagerAdapter`.
    - Includes `TabBarModule`, `TabScreenModule`, and `TabBarPortalModule` for Expo autolinking and JS bridging (props: `selectedIndex`, event: `onTabIndexChange`, function: `switchTab`).
    - This approach mirrors the iOS version by avoiding the native `TabLayout` and allowing full customization of the tab bar via React Native components.

- **Item Pressable:**
    - Implements `ItemPressableView` extending `ExpoView`.
    * Provides native touch feedback using Android's foreground ripple (`selectableItemBackground`) by default.
    * Includes a prop `touchHighlight` to enable/disable feedback.
    * Fires `onItemPress` event on click/tap.
    * Includes `ItemPressableModule` for Expo integration.

* fix(mobile): Adjust content view `padding` to prevent overlap with Bottom Bar

* feat(mobile): implement native tab bar components and improve tab switching logic
diff --git a/apps/mobile/native/android/build.gradle b/apps/mobile/native/android/build.gradle
@@ -28,6 +28,11 @@ if (useManagedAndroidSdkVersions) {
       minSdkVersion safeExtGet("minSdkVersion", 21)
       targetSdkVersion safeExtGet("targetSdkVersion", 34)
     }
+
+    dependencies {
+      implementation "androidx.fragment:fragment:1.8.6"
+      implementation "androidx.viewpager2:viewpager2:1.1.0"
+    }
   }
 }
 
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/itempressable/ItemPressableModule.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/itempressable/ItemPressableModule.kt
@@ -0,0 +1,18 @@
+package expo.modules.follownative.itempressable
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ItemPressableModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ItemPressable")
+
+    View(ItemPressableView::class) {
+      Prop("touchHighlight") { view: ItemPressableView, enabled: Boolean ->
+        view.setTouchHighlight(enabled)
+      }
+
+      Events("onItemPress")
+    }
+  }
+}
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/itempressable/ItemPressableView.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/itempressable/ItemPressableView.kt
@@ -0,0 +1,86 @@
+package expo.modules.follownative.itempressable
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.graphics.drawable.Drawable
+import android.graphics.drawable.RippleDrawable
+import android.os.Build
+import android.util.TypedValue
+import android.view.MotionEvent
+import android.view.ViewGroup
+import androidx.core.content.ContextCompat
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+import androidx.core.view.isNotEmpty
+
+class ItemPressableView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+  val onItemPress by EventDispatcher()
+
+  private var touchHighlightEnabled: Boolean = true
+  private var originalBackground: Drawable? = null
+  private var isPressedDown = false
+
+  private var rippleDrawable: RippleDrawable? = null
+  private val highlightColor = Color.argb(40, 0, 0, 0)
+
+  init {
+    isClickable = true
+    isFocusable = true
+
+    originalBackground = background
+
+    setupRipple()
+  }
+
+  fun setTouchHighlight(enabled: Boolean) {
+    touchHighlightEnabled = enabled
+    if (!enabled) {
+      foreground = null
+    } else {
+      setupRipple()
+    }
+  }
+
+  private fun setupRipple() {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && touchHighlightEnabled) {
+      val typedValue = TypedValue()
+      context.theme.resolveAttribute(android.R.attr.selectableItemBackground, typedValue, true)
+      foreground = ContextCompat.getDrawable(context, typedValue.resourceId)
+
+    }
+  }
+
+  override fun performClick(): Boolean {
+    super.performClick() // Handles accessibility events, sound effects etc.
+    onItemPress(emptyMap()) // Dispatch the event (with no arg) to React Native
+    return true
+  }
+
+  init {
+    layoutParams = ViewGroup.LayoutParams(
+      ViewGroup.LayoutParams.WRAP_CONTENT,
+      ViewGroup.LayoutParams.WRAP_CONTENT
+    )
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    if (isNotEmpty()) {
+      val child = getChildAt(0)
+      measureChild(child, widthMeasureSpec, heightMeasureSpec)
+      setMeasuredDimension(child.measuredWidth, child.measuredHeight)
+    } else {
+      super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    }
+  }
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+    if (isNotEmpty()) {
+      val child = getChildAt(0)
+      // Layout the child to fill this container
+      child.layout(0, 0, r - l, b - t)
+    }
+  }
+}
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabBarModule.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabBarModule.kt
@@ -0,0 +1,25 @@
+package expo.modules.follownative.tabbar
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import kotlinx.coroutines.launch
+
+class TabBarModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("TabBarRoot")
+
+    View(TabBarRootView::class) {
+      Prop("selectedIndex") { view: TabBarRootView, index: Int ->
+        view.setSelectedIndex(index)
+      }
+
+      Events("onTabIndexChange")
+    }
+
+    AsyncFunction("switchTab") { view: TabBarRootView, index: Int ->
+      appContext.mainQueue.launch {
+        view.setSelectedIndex(index)
+      }
+    }
+  }
+}
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabBarPortalModule.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabBarPortalModule.kt
@@ -0,0 +1,14 @@
+package expo.modules.follownative.tabbar
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class TabBarPortalModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("TabBarPortal")
+
+    View(TabBarPortalView::class) {
+
+    }
+  }
+}
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabBarPortalView.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabBarPortalView.kt
@@ -0,0 +1,10 @@
+package expo.modules.follownative.tabbar
+
+import android.content.Context
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+import androidx.core.view.isNotEmpty
+
+class TabBarPortalView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+}
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabBarRootView.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabBarRootView.kt
@@ -0,0 +1,130 @@
+package expo.modules.follownative.tabbar
+
+import android.content.Context
+import android.util.Log
+import android.view.Gravity
+import android.view.View
+import android.widget.FrameLayout
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.FragmentActivity
+import androidx.viewpager2.adapter.FragmentStateAdapter
+import androidx.viewpager2.widget.ViewPager2
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class TabBarRootView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+  override val shouldUseAndroidLayout: Boolean = true
+
+  private val container = FrameLayout(context).apply {
+    layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+  }
+
+  internal val viewPager: ViewPager2 = ViewPager2(context).apply {
+    id = View.generateViewId()
+    layoutParams = FrameLayout.LayoutParams(
+      FrameLayout.LayoutParams.MATCH_PARENT,
+      FrameLayout.LayoutParams.MATCH_PARENT
+    )
+    offscreenPageLimit = 1
+    isUserInputEnabled = false
+  }
+
+  private val tabFragments = mutableListOf<TabScreenFragment>()
+  private var pagerAdapter: FragmentStateAdapter? = null
+  private val onTabIndexChange by EventDispatcher<Map<String, Int>>()
+
+  init {
+    super.addView(container)
+
+    container.addView(viewPager)
+
+    setupAdapter()
+
+    viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
+      override fun onPageSelected(position: Int) {
+        super.onPageSelected(position)
+        onTabIndexChange(mapOf("index" to position))
+      }
+    })
+  }
+
+  private fun setupAdapter() {
+    val activity = appContext.activityProvider?.currentActivity as? FragmentActivity
+    if (activity != null) {
+      pagerAdapter = object : FragmentStateAdapter(activity) {
+        override fun getItemCount(): Int = tabFragments.size
+        override fun createFragment(position: Int): Fragment = tabFragments[position]
+      }
+      viewPager.adapter = pagerAdapter
+    } else {
+      Log.e("TabBarRootView", "FragmentActivity is null. Cannot set up ViewPager2 adapter.")
+    }
+  }
+
+  fun addTabScreenView(screenView: TabScreenView, index: Int) {
+    val fragment = TabScreenFragment.newInstance(screenView)
+    if (index >= tabFragments.size) {
+      tabFragments.add(fragment)
+    } else {
+      tabFragments.add(index, fragment)
+    }
+    pagerAdapter?.notifyItemInserted(index)
+  }
+
+  fun removeTabScreenView(screenView: TabScreenView) {
+    val index = tabFragments.indexOfFirst { it.containsView(screenView) }
+    if (index != -1) {
+      tabFragments.removeAt(index)
+      pagerAdapter?.notifyItemRemoved(index)
+    }
+  }
+
+  fun addPortalView(portalView: TabBarPortalView) {
+    val layoutParams = FrameLayout.LayoutParams(
+      FrameLayout.LayoutParams.MATCH_PARENT,
+      (64 * resources.displayMetrics.density).toInt()
+    ).apply {
+      gravity = Gravity.BOTTOM
+    }
+
+    portalView.layoutParams = layoutParams
+
+    container.addView(portalView)
+
+    viewPager.layoutParams = (viewPager.layoutParams as FrameLayout.LayoutParams).apply {
+      bottomMargin = (64 * resources.displayMetrics.density).toInt()
+    }
+  }
+
+  fun removePortalView(portalView: TabBarPortalView) {
+    container.removeView(portalView)
+  }
+
+  fun setSelectedIndex(index: Int) {
+    if (index >= 0 && index < tabFragments.size) {
+      viewPager.setCurrentItem(index, false)
+    }
+  }
+
+  override fun addView(child: View?, index: Int) {
+    if (child is TabScreenView) {
+      addTabScreenView(child, index)
+    } else if (child is TabBarPortalView) {
+      addPortalView(child)
+    } else {
+      super.addView(child, index)
+    }
+  }
+
+  override fun removeView(child: View?) {
+    if (child is TabScreenView) {
+      removeTabScreenView(child)
+    } else if (child is TabBarPortalView) {
+      removePortalView(child)
+    } else {
+      super.removeView(child)
+    }
+  }
+}
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabScreenFragment.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabScreenFragment.kt
@@ -0,0 +1,33 @@
+package expo.modules.follownative.tabbar
+
+import android.os.Bundle
+import android.util.Log
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.FragmentActivity
+
+class TabScreenFragment : Fragment() {
+  private var screenView: TabScreenView? = null
+
+  override fun onCreateView(inflater: android.view.LayoutInflater, container: android.view.ViewGroup?, savedInstanceState: android.os.Bundle?): View? {
+    if (screenView?.parent != null) {
+      (screenView?.parent as? android.view.ViewGroup)?.removeView(screenView)
+    }
+    return screenView
+  }
+
+  fun containsView(view: TabScreenView): Boolean {
+    return screenView == view
+  }
+
+  companion object {
+    fun newInstance(view: TabScreenView): TabScreenFragment {
+      val fragment = TabScreenFragment()
+      fragment.screenView = view
+      return fragment
+    }
+  }
+}
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabScreenModule.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabScreenModule.kt
@@ -0,0 +1,14 @@
+package expo.modules.follownative.tabbar
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class TabScreenModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("TabScreen")
+
+    View(TabScreenView::class) {
+
+    }
+  }
+}
diff --git a/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabScreenView.kt b/apps/mobile/native/android/src/main/java/expo/modules/follownative/tabbar/TabScreenView.kt
@@ -0,0 +1,10 @@
+package expo.modules.follownative.tabbar
+
+import android.content.Context
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+
+
+class TabScreenView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+}
diff --git a/apps/mobile/native/expo-module.config.json b/apps/mobile/native/expo-module.config.json
@@ -17,6 +17,11 @@
     ]
   },
   "android": {
-    "modules": []
+    "modules": [
+      "expo.modules.follownative.tabbar.TabBarModule",
+      "expo.modules.follownative.tabbar.TabScreenModule",
+      "expo.modules.follownative.tabbar.TabBarPortalModule",
+      "expo.modules.follownative.itempressable.ItemPressableModule"
+    ]
   }
 }
diff --git a/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.android.tsx b/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.android.tsx
diff --git a/apps/mobile/src/lib/navigation/bottom-tab/TabRoot.android.tsx b/apps/mobile/src/lib/navigation/bottom-tab/TabRoot.android.tsx
diff --git a/apps/mobile/src/lib/navigation/bottom-tab/TabScreen.android.tsx b/apps/mobile/src/lib/navigation/bottom-tab/TabScreen.android.tsx
diff --git a/apps/mobile/src/screens/(stack)/(tabs)/settings.tsx b/apps/mobile/src/screens/(stack)/(tabs)/settings.tsx

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,11 @@ if (useManagedAndroidSdkVersions) {`
`28`	`28`	`minSdkVersion safeExtGet("minSdkVersion", 21)`
`29`	`29`	`targetSdkVersion safeExtGet("targetSdkVersion", 34)`
`30`	`30`	`}`
	`31`	`+`
	`32`	`+ dependencies {`
	`33`	`+ implementation "androidx.fragment:fragment:1.8.6"`
	`34`	`+ implementation "androidx.viewpager2:viewpager2:1.1.0"`
	`35`	`+ }`
`31`	`36`	`}`
`32`	`37`	`}`
`33`	`38`