@onekeyfe/react-native-bottom-tabs 0.0.0-stage → 6.7.0-alpha.339

package/android/src/main/java/com/onekey/bottomtabs/BottomTabsViewManager.kt

@@ -0,0 +1,216 @@
+package com.onekey.bottomtabs
+
+import android.content.res.ColorStateList
+import android.view.View
+import android.view.ViewGroup
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.RNBottomTabsViewManagerDelegate
+import com.facebook.react.viewmanagers.RNBottomTabsViewManagerInterface
+import com.onekey.bottomtabs.events.OnNativeLayoutEvent
+import com.onekey.bottomtabs.events.OnTabBarMeasuredEvent
+import com.onekey.bottomtabs.events.PageSelectedEvent
+import com.onekey.bottomtabs.events.TabDoublePressEvent
+
+@ReactModule(name = BottomTabsViewManager.NAME)
+class BottomTabsViewManager(context: ReactApplicationContext) :
+  ViewGroupManager<BottomTabsView>(),
+  RNBottomTabsViewManagerInterface<BottomTabsView> {
+
+  private val delegate: RNBottomTabsViewManagerDelegate<BottomTabsView, BottomTabsViewManager> =
+    RNBottomTabsViewManagerDelegate(this)
+
+  override fun createViewInstance(context: ThemedReactContext): BottomTabsView {
+    val view = BottomTabsView(context)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+
+    view.onTabSelectedListener = { key ->
+      eventDispatcher?.dispatchEvent(PageSelectedEvent(surfaceId, view.id, key))
+    }
+
+    view.onTabDoublePressedListener = { key ->
+      eventDispatcher?.dispatchEvent(TabDoublePressEvent(surfaceId, view.id, key))
+    }
+
+    view.onNativeLayoutListener = { width, height ->
+      eventDispatcher?.dispatchEvent(OnNativeLayoutEvent(surfaceId, view.id, width, height))
+    }
+
+    view.onTabBarMeasuredListener = { height ->
+      eventDispatcher?.dispatchEvent(OnTabBarMeasuredEvent(surfaceId, view.id, height))
+    }
+
+    return view
+  }
+
+  override fun onDropViewInstance(view: BottomTabsView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  override fun getName(): String = NAME
+
+  override fun getDelegate(): ViewManagerDelegate<BottomTabsView> = delegate
+
+  // MARK: - Child view management
+
+  override fun addView(parent: BottomTabsView, child: View, index: Int) {
+    parent.addView(child, index)
+  }
+
+  override fun getChildCount(parent: BottomTabsView): Int {
+    return parent.layoutHolder.childCount
+  }
+
+  override fun getChildAt(parent: BottomTabsView, index: Int): View? {
+    val container = parent.layoutHolder.getChildAt(index) as? ViewGroup
+    return container?.getChildAt(0) ?: parent.layoutHolder.getChildAt(index)
+  }
+
+  override fun removeView(parent: BottomTabsView, view: View) {
+    for (i in 0 until parent.layoutHolder.childCount) {
+      val container = parent.layoutHolder.getChildAt(i) as? ViewGroup
+      if (container != null && container.childCount > 0 && container.getChildAt(0) === view) {
+        parent.layoutHolder.removeViewAt(i)
+        return
+      }
+    }
+    parent.layoutHolder.removeView(view)
+  }
+
+  override fun removeAllViews(parent: BottomTabsView) {
+    parent.layoutHolder.removeAllViews()
+  }
+
+  override fun removeViewAt(parent: BottomTabsView, index: Int) {
+    parent.layoutHolder.removeViewAt(index)
+  }
+
+  override fun needsCustomLayoutForChildren(): Boolean = true
+
+  // MARK: - Props (RNBottomTabsViewManagerInterface)
+
+  override fun setItems(view: BottomTabsView?, value: ReadableArray?) {
+    if (view != null && value != null) {
+      val itemsArray = mutableListOf<TabInfo>()
+      for (i in 0 until value.size()) {
+        value.getMap(i)?.let { item ->
+          itemsArray.add(
+            TabInfo(
+              key = item.getString("key") ?: "",
+              title = item.getString("title") ?: "",
+              badge = if (item.hasKey("badge")) item.getString("badge") else null,
+              badgeBackgroundColor = if (item.hasKey("badgeBackgroundColor")) item.getInt("badgeBackgroundColor") else null,
+              badgeTextColor = if (item.hasKey("badgeTextColor")) item.getInt("badgeTextColor") else null,
+              activeTintColor = if (item.hasKey("activeTintColor")) item.getInt("activeTintColor") else null,
+              hidden = if (item.hasKey("hidden")) item.getBoolean("hidden") else false,
+              testID = item.getString("testID"),
+              preventsDefault = if (item.hasKey("preventsDefault")) item.getBoolean("preventsDefault") else false
+            )
+          )
+        }
+      }
+      view.updateItems(itemsArray)
+    }
+  }
+
+  override fun setSelectedPage(view: BottomTabsView?, value: String?) {
+    if (view != null && value != null)
+      view.setSelectedItem(value)
+  }
+
+  override fun setIcons(view: BottomTabsView?, value: ReadableArray?) {
+    if (view != null)
+      view.setIcons(value)
+  }
+
+  override fun setLabeled(view: BottomTabsView?, value: Boolean) {
+    if (view != null)
+      view.setLabeled(value)
+  }
+
+  override fun setRippleColor(view: BottomTabsView?, value: Int?) {
+    if (view != null && value != null) {
+      val color = ColorStateList.valueOf(value)
+      view.setRippleColor(color)
+    }
+  }
+
+  override fun setBarTintColor(view: BottomTabsView?, value: Int?) {
+    if (view != null && value != null)
+      view.setBarTintColor(value)
+  }
+
+  override fun setActiveTintColor(view: BottomTabsView?, value: Int?) {
+    if (view != null && value != null)
+      view.setActiveTintColor(value)
+  }
+
+  override fun setInactiveTintColor(view: BottomTabsView?, value: Int?) {
+    if (view != null && value != null)
+      view.setInactiveTintColor(value)
+  }
+
+  override fun setActiveIndicatorColor(view: BottomTabsView?, value: Int?) {
+    if (view != null && value != null) {
+      val color = ColorStateList.valueOf(value)
+      view.setActiveIndicatorColor(color)
+    }
+  }
+
+  override fun setHapticFeedbackEnabled(view: BottomTabsView?, value: Boolean) {
+    if (view != null)
+      view.isHapticFeedbackEnabled = value
+  }
+
+  override fun setFontFamily(view: BottomTabsView?, value: String?) {
+    view?.setFontFamily(value)
+  }
+
+  override fun setFontWeight(view: BottomTabsView?, value: String?) {
+    view?.setFontWeight(value)
+  }
+
+  override fun setFontSize(view: BottomTabsView?, value: Int) {
+    view?.setFontSize(value)
+  }
+
+  override fun setDisablePageAnimations(view: BottomTabsView?, value: Boolean) {
+    view?.disablePageAnimations = value
+  }
+
+  override fun setTabBarHidden(view: BottomTabsView?, value: Boolean) {
+    view?.setTabBarHidden(value)
+  }
+
+  override fun setIgnoreBottomInsets(view: BottomTabsView?, value: Boolean) {
+    view?.setIgnoreBottomInsets(value)
+  }
+
+  override fun setAndroidTabBarStyle(view: BottomTabsView?, value: String?) {
+    view?.setAndroidTabBarStyle(value)
+  }
+
+  override fun setIgnoreKeyboardInsets(view: BottomTabsView?, value: Boolean) {
+    view?.setIgnoreKeyboardInsets(value)
+  }
+
+  // iOS-only props (no-ops on Android)
+  // selectedIcons feeds UITabBarItem.selectedImage on iOS; Android keeps
+  // swapping the icon in JS via the focusedKey-driven `icons` array.
+  override fun setSelectedIcons(view: BottomTabsView?, value: ReadableArray?) {}
+  override fun setTranslucent(view: BottomTabsView?, value: Boolean) {}
+  override fun setSidebarAdaptable(view: BottomTabsView?, value: Boolean) {}
+  override fun setScrollEdgeAppearance(view: BottomTabsView?, value: String?) {}
+  override fun setMinimizeBehavior(view: BottomTabsView?, value: String?) {}
+
+  companion object {
+    const val NAME = "RNBottomTabsView"
+  }
+}

package/android/src/main/java/com/onekey/bottomtabs/FloatingTabBarStyle.kt

@@ -0,0 +1,50 @@
+package com.onekey.bottomtabs
+
+import android.view.animation.Interpolator
+import kotlin.math.cos
+import kotlin.math.exp
+import kotlin.math.sin
+import kotlin.math.sqrt
+
+// Geometry of the floating tab bar, modeled on the iOS 26 Liquid Glass tab bar (dp).
+internal object FloatingTabBarMetrics {
+  const val BAR_HEIGHT = 62f
+  const val BAR_SIDE_MARGIN = 20f
+  const val BAR_MIN_BOTTOM_GAP = 20f
+  const val BAR_BOTTOM_EXTRA = 4f
+  const val BAR_CONTENT_PADDING = 4f
+  const val INDICATOR_INSET = 4f
+  const val ICON_SIZE = 26f
+  const val LABEL_SIZE_SP = 10f
+  const val SHADOW_ELEVATION = 14f
+
+  // Lens growth while a tab is pressed or dragged.
+  const val LENS_SCALE_X = 1.14f
+  const val LENS_SCALE_Y = 1.24f
+  const val LENS_MAX_STRETCH = 0.16f
+  const val ITEM_PRESSED_SCALE = 1.1f
+  const val DRAG_EDGE_RESISTANCE = 0.22f
+}
+
+/**
+ * Damped spring response normalized to [0, 1] input time. A damping ratio
+ * below 1 overshoots slightly before settling, matching UIKit spring motion.
+ */
+internal class SpringInterpolator(
+  private val dampingRatio: Float = 0.72f,
+  private val angularFrequency: Float = 10f,
+) : Interpolator {
+  private val dampedFrequency =
+    angularFrequency * sqrt(1f - dampingRatio * dampingRatio)
+
+  override fun getInterpolation(input: Float): Float {
+    if (input >= 1f) {
+      return 1f
+    }
+    val decay = exp(-dampingRatio * angularFrequency * input)
+    val phase = dampedFrequency * input
+    return 1f - decay * (
+      cos(phase) + (dampingRatio * angularFrequency / dampedFrequency) * sin(phase)
+    )
+  }
+}

package/android/src/main/java/com/onekey/bottomtabs/ImageSource.kt

@@ -0,0 +1,86 @@
+package com.onekey.bottomtabs
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.net.Uri
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
+import java.util.Locale
+
+data class ImageSource(
+  val context: Context,
+  val uri: String? = null,
+) {
+  private fun isLocalResourceUri(uri: Uri?) = uri?.scheme?.startsWith("res") ?: false
+
+  fun getUri(context: Context): Uri? {
+    val uri = computeUri(context)
+
+    if (isLocalResourceUri(uri)) {
+      return Uri.parse(
+        uri!!.toString().replace("res:/", "android.resource://" + context.packageName + "/")
+      )
+    }
+
+    return uri
+  }
+
+  private fun computeUri(context: Context): Uri? {
+    val stringUri = uri ?: return null
+    return try {
+      val uri: Uri = Uri.parse(stringUri)
+      // Verify scheme is set, so that relative uri (used by static resources) are not handled.
+      if (uri.scheme == null) {
+        computeLocalUri(stringUri, context)
+      } else {
+        uri
+      }
+    } catch (e: Exception) {
+      computeLocalUri(stringUri, context)
+    }
+  }
+
+  private fun computeLocalUri(stringUri: String, context: Context): Uri? {
+    return ResourceIdHelper.getResourceUri(context, stringUri)
+  }
+}
+
+// Taken from https://github.com/expo/expo/blob/sdk-52/packages/expo-image/android/src/main/java/expo/modules/image/ResourceIdHelper.kt
+object ResourceIdHelper {
+  private val idMap = mutableMapOf<String, Int>()
+
+  @SuppressLint("DiscouragedApi")
+  private fun getResourceRawId(context: Context, name: String): Int {
+    if (name.isEmpty()) {
+      return -1
+    }
+
+    val normalizedName = name.lowercase(Locale.ROOT).replace("-", "_")
+    synchronized(this) {
+      val id = idMap[normalizedName]
+      if (id != null) {
+        return id
+      }
+
+      return context
+        .resources
+        .getIdentifier(normalizedName, "raw", context.packageName)
+        .also {
+          idMap[normalizedName] = it
+        }
+    }
+  }
+
+  fun getResourceUri(context: Context, name: String): Uri? {
+    val drawableUri = ResourceDrawableIdHelper.getInstance().getResourceDrawableUri(context, name)
+    if (drawableUri != Uri.EMPTY) {
+      return drawableUri
+    }
+
+    val resId = getResourceRawId(context, name)
+    return if (resId > 0) {
+      Uri.Builder().scheme("res").path(resId.toString()).build()
+    } else {
+      null
+    }
+  }
+}

package/android/src/main/java/com/onekey/bottomtabs/TabInfo.kt

@@ -0,0 +1,13 @@
+package com.onekey.bottomtabs
+
+data class TabInfo(
+  val key: String,
+  val title: String,
+  val badge: String? = null,
+  val badgeBackgroundColor: Int? = null,
+  val badgeTextColor: Int? = null,
+  val activeTintColor: Int? = null,
+  val hidden: Boolean = false,
+  val testID: String? = null,
+  val preventsDefault: Boolean = false
+)

package/android/src/main/java/com/onekey/bottomtabs/Utils.kt

@@ -0,0 +1,31 @@
+package com.onekey.bottomtabs
+
+import android.content.Context
+import android.graphics.Typeface
+import android.util.TypedValue
+import androidx.appcompat.content.res.AppCompatResources
+
+class Utils {
+  companion object {
+    fun convertPixelsToDp(context: Context, value: Int): Double {
+      val displayDensity = context.resources.displayMetrics.density
+      return (value / displayDensity).toDouble()
+    }
+
+    fun getTypefaceStyle(weight: Int?) = when (weight) {
+      700 -> Typeface.BOLD
+      else -> Typeface.NORMAL
+    }
+
+    fun getDefaultColorFor(context: Context, baseColorThemeAttr: Int): Int? {
+      val value = TypedValue()
+      if (!context.theme.resolveAttribute(baseColorThemeAttr, value, true)) {
+        return null
+      }
+      val baseColor = AppCompatResources.getColorStateList(
+        context, value.resourceId
+      )
+      return baseColor.defaultColor
+    }
+  }
+}

package/android/src/main/java/com/onekey/bottomtabs/events/OnNativeLayoutEvent.kt

@@ -0,0 +1,20 @@
+package com.onekey.bottomtabs.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnNativeLayoutEvent(surfaceId: Int, viewTag: Int, private val width: Double, private val height: Double) : Event<OnNativeLayoutEvent>(surfaceId, viewTag) {
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    return Arguments.createMap().apply {
+      putDouble("width", width)
+      putDouble("height", height)
+    }
+  }
+
+  companion object {
+    const val EVENT_NAME = "onNativeLayout"
+  }
+}

package/android/src/main/java/com/onekey/bottomtabs/events/OnTabBarMeasuredEvent.kt

@@ -0,0 +1,19 @@
+package com.onekey.bottomtabs.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnTabBarMeasuredEvent(surfaceId: Int, viewTag: Int, private val height: Int) : Event<OnTabBarMeasuredEvent>(surfaceId, viewTag) {
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    return Arguments.createMap().apply {
+      putInt("height", height)
+    }
+  }
+
+  companion object {
+    const val EVENT_NAME = "onTabBarMeasured"
+  }
+}

package/android/src/main/java/com/onekey/bottomtabs/events/PageSelectedEvent.kt

@@ -0,0 +1,21 @@
+package com.onekey.bottomtabs.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class PageSelectedEvent(surfaceId: Int, viewTag: Int, private val key: String) : Event<PageSelectedEvent>(surfaceId, viewTag) {
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun canCoalesce(): Boolean = false
+
+  override fun getEventData(): WritableMap {
+    return Arguments.createMap().apply {
+      putString("key", key)
+    }
+  }
+
+  companion object {
+    const val EVENT_NAME = "topPageSelected"
+  }
+}

package/android/src/main/java/com/onekey/bottomtabs/events/TabDoublePressEvent.kt

@@ -0,0 +1,19 @@
+package com.onekey.bottomtabs.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class TabDoublePressEvent(surfaceId: Int, viewTag: Int, private val key: String) : Event<TabDoublePressEvent>(surfaceId, viewTag) {
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    return Arguments.createMap().apply {
+      putString("key", key)
+    }
+  }
+
+  companion object {
+    const val EVENT_NAME = "onTabDoublePress"
+  }
+}

package/common/cpp/react/renderer/components/RNBottomTabs/RNBottomTabsViewComponentDescriptor.h

@@ -0,0 +1,32 @@
+#ifdef __cplusplus
+
+#pragma once
+
+#include <react/renderer/components/RNBottomTabs/RNBottomTabsViewShadowNode.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+namespace facebook::react {
+
+class RNBottomTabsViewComponentDescriptor final
+    : public ConcreteComponentDescriptor<RNBottomTabsViewShadowNode> {
+ public:
+    using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode& shadowNode) const override {
+    ConcreteComponentDescriptor::adopt(shadowNode);
+
+#if !defined(ANDROID)
+    auto &bottomTabsShadowNode =
+        static_cast<RNBottomTabsViewShadowNode&>(shadowNode);
+
+    std::weak_ptr<void> imageLoader =
+        contextContainer_->at<std::shared_ptr<void>>("RCTImageLoader");
+    bottomTabsShadowNode.setImageLoader(imageLoader);
+#endif
+  }
+};
+
+} // namespace facebook::react
+
+#endif

package/common/cpp/react/renderer/components/RNBottomTabs/RNBottomTabsViewShadowNode.cpp

@@ -0,0 +1,18 @@
+#include <react/renderer/components/RNBottomTabs/RNBottomTabsViewShadowNode.h>
+
+namespace facebook::react {
+
+extern const char RNBottomTabsViewComponentName[] = "RNBottomTabsView";
+
+void RNBottomTabsViewShadowNode::setImageLoader(
+    std::weak_ptr<void> imageLoader) {
+  getStateDataMutable().setImageLoader(imageLoader);
+}
+
+RNBottomTabsViewShadowNode::StateData &
+RNBottomTabsViewShadowNode::getStateDataMutable() {
+  ensureUnsealed();
+  return const_cast<RNBottomTabsViewShadowNode::StateData &>(getStateData());
+}
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/RNBottomTabs/RNBottomTabsViewShadowNode.h

@@ -0,0 +1,35 @@
+#ifdef __cplusplus
+
+#pragma once
+
+#include <react/renderer/components/RNBottomTabs/EventEmitters.h>
+#include <react/renderer/components/RNBottomTabs/Props.h>
+#include <react/renderer/components/RNBottomTabs/RNBottomTabsViewState.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char RNBottomTabsViewComponentName[];
+
+/*
+ * `ShadowNode` for <RNBottomTabsView> component.
+ */
+class JSI_EXPORT RNBottomTabsViewShadowNode final: public ConcreteViewShadowNode<
+RNBottomTabsViewComponentName,
+RNBottomTabsViewProps,
+RNBottomTabsViewEventEmitter,
+RNBottomTabsViewState> {
+
+public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  using StateData = ConcreteViewShadowNode::ConcreteStateData;
+
+  void setImageLoader(std::weak_ptr<void> imageLoader);
+
+  StateData &getStateDataMutable();
+};
+
+}
+
+#endif

package/common/cpp/react/renderer/components/RNBottomTabs/RNBottomTabsViewState.cpp

@@ -0,0 +1,15 @@
+#include <react/renderer/components/RNBottomTabs/RNBottomTabsViewState.h>
+
+namespace facebook::react {
+
+void RNBottomTabsViewState::setImageLoader(
+    std::weak_ptr<void> imageLoader) {
+  imageLoader_ = imageLoader;
+}
+
+std::weak_ptr<void> RNBottomTabsViewState::getImageLoader()
+    const noexcept {
+  return imageLoader_;
+}
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/RNBottomTabs/RNBottomTabsViewState.h

@@ -0,0 +1,25 @@
+#ifdef __cplusplus
+
+#pragma once
+
+#include <react/renderer/core/StateData.h>
+#ifdef RN_SERIALIZABLE_STATE
+#include <folly/dynamic.h>
+#endif
+
+namespace facebook::react {
+
+class RNBottomTabsViewState final {
+ public:
+  RNBottomTabsViewState() = default;
+
+  void setImageLoader(std::weak_ptr<void> imageLoader);
+  std::weak_ptr<void> getImageLoader() const noexcept;
+
+ private:
+  std::weak_ptr<void> imageLoader_;
+};
+
+} // namespace facebook::react
+
+#endif