@onekeyfe/react-native-bottom-tabs 0.0.0-stage → 6.7.0-10

package/LICENSE

@@ -0,0 +1,46 @@
+MIT License
+
+Copyright (c) 2024 Callstack
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+The Expo-derived ResourceIdHelper code in android/src/main/java/com/onekey/bottomtabs/ImageSource.kt retains:
+
+The MIT License (MIT)
+
+Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,95 @@
-# Temporary Holding Version
+# @onekeyfe/react-native-bottom-tabs
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Native bottom-tab navigation for OneKey React Native applications on iOS and
+Android. The controlled React component receives route state from the caller
+and renders scenes through the application's supplied renderer.
+
+## Installation and usage
+
+```sh
+yarn add @onekeyfe/react-native-bottom-tabs
+```
+
+Install the application's iOS pods and rebuild the native application to register
+the bottom tabs. The application owns route definitions and selection state.
+
+```tsx
+import { useState } from 'react';
+import { Text } from 'react-native';
+import BottomTabs from '@onekeyfe/react-native-bottom-tabs';
+
+const routes = [{ key: 'home', title: 'Home' }, { key: 'settings', title: 'Settings' }];
+
+function Tabs() {
+  const [index, setIndex] = useState(0);
+  return (
+    <BottomTabs
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={({ route }) => <Text>{route.title}</Text>}
+    />
+  );
+}
+```
+
+Earlier releases were published as `@onekeyfe/react-native-tab-view`, where
+the default export was `TabView` and `onTabLongPress` existed.
+
+## State, scenes and platform options
+
+`navigationState` contains the selected index and keyed routes. `onIndexChange`
+reports requested tab changes; update state in the caller. Route metadata can
+supply labels, badges and icons. `SceneMap` builds a renderer from stable scene
+components; `useBottomTabBarHeight` and `BottomTabBarHeightContext` expose tab-bar
+height to content under the provider.
+
+The default export is `BottomTabs`; `AppleIcon` and `TabRole` are exported types.
+Some appearance and interaction options are platform-specific, including Apple
+symbols and newer iOS tab-bar presentation. Check those options against the
+consumer's supported OS versions rather than assuming identical native layouts.
+
+On Android, `androidBottomBlurEnabled` controls live background blur, translucent
+tint, and a gradient above the native bar. It defaults to enabled on Android 16+
+(API 36); pass `false` to disable it or `true` to enable it on Android 12–15.
+Earlier Android versions retain the standard bar. It is ignored on iOS and with
+a custom `tabBar`. When enabled, scenes extend behind the bar: use
+`useBottomTabBarHeight()` as scroll-content bottom padding so the last row can
+scroll above it. `tabBarStyle.backgroundColor` sets the surface tint.
+
+See [src/BottomTabs.tsx](src/BottomTabs.tsx) for component props and
+[src/types.ts](src/types.ts) for route definitions.
+
+See [docs/SPEC.md](docs/SPEC.md) for native touch-selection contracts and
+acceptance boundaries.
+
+## Upstream attribution
+
+First, a sincere thank-you to Oskar Kwaśniewski and the
+`react-native-bottom-tabs` maintainers for their excellent work 🙏
+
+This package is built on, and inspired by,
+[okwasniewski/react-native-bottom-tabs](https://github.com/okwasniewski/react-native-bottom-tabs).
+
+Our original plan was to keep our customizations as patches on top of upstream
+`react-native-bottom-tabs`.
+
+As our product requirements evolved, the scope of those changes outgrew what we
+could reasonably maintain as an upstream patch set. We regret that we were
+unable to keep this work in patch form.
+
+As the gap grew, we ultimately forked `react-native-bottom-tabs` to keep
+development and delivery stable.
+
+## Upstream Project
+
+- Repository: [okwasniewski/react-native-bottom-tabs](https://github.com/okwasniewski/react-native-bottom-tabs)
+- License: MIT
+
+## Notes
+
+- This fork includes OneKey-specific adaptations for our product requirements.
+- If you are looking for original behavior and full documentation, please refer
+  to the upstream repository.
+
+Thank you again to Oskar Kwaśniewski and everyone who contributes to
+`react-native-bottom-tabs` 💙

package/android/build.gradle

@@ -0,0 +1,119 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['BottomTabs_' + name]
+  }
+
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["BottomTabs_kotlinVersion"]
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return true
+}
+
+def reactNativeArchitectures() {
+  def value = rootProject.getProperties().get("reactNativeArchitectures")
+  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["BottomTabs_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+  return (major == 7 && minor >= 3) || major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.onekey.bottomtabs"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        // Codegen specs
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+def COIL_VERSION = "3.0.2"
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation 'com.google.android.material:material:1.14.0-alpha05'
+
+  implementation("io.coil-kt.coil3:coil:${COIL_VERSION}")
+  implementation("io.coil-kt.coil3:coil-network-okhttp:${COIL_VERSION}")
+  implementation("io.coil-kt.coil3:coil-svg:${COIL_VERSION}")
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "RNBottomTabs"
+    codegenJavaPackageName = "com.onekey.bottomtabs"
+  }
+}

package/android/gradle.properties

@@ -0,0 +1,4 @@
+BottomTabs_kotlinVersion=1.9.24
+BottomTabs_minSdkVersion=24
+BottomTabs_targetSdkVersion=35
+BottomTabs_compileSdkVersion=35

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.onekey.bottomtabs">
+</manifest>

package/android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

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

@@ -0,0 +1,92 @@
+package com.onekey.bottomtabs
+
+import android.graphics.BlendMode
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.LinearGradient
+import android.graphics.Paint
+import android.graphics.RenderEffect
+import android.graphics.RenderNode
+import android.graphics.Shader
+import androidx.annotation.RequiresApi
+import kotlin.math.ceil
+import kotlin.math.max
+
+/** A GPU-only backdrop. The source callback must draw scenes, never this overlay. */
+@RequiresApi(31)
+internal class BottomBarBlurRenderer(private val density: Float) {
+  private val node = RenderNode("TabBarBackdrop")
+  private val tintPaint = Paint()
+  private val maskPaint = Paint().apply { blendMode = BlendMode.DST_IN }
+  private var lastWidth = 0
+  private var lastBarTop = -1
+  private var lastBottom = 0
+  private var lastTint = Color.TRANSPARENT
+  private var fadeTop = 0f
+  private var sampleTop = 0f
+
+  init {
+    node.setRenderEffect(RenderEffect.createBlurEffect(
+      20f * density / SCALE,
+      20f * density / SCALE,
+      Shader.TileMode.CLAMP,
+    ))
+  }
+
+  fun draw(
+    canvas: Canvas,
+    width: Int,
+    barTop: Int,
+    bottom: Int,
+    tint: Int,
+    drawScenes: (Canvas) -> Unit,
+  ) {
+    if (!canvas.isHardwareAccelerated || width <= 0 || bottom <= barTop) return
+
+    if (width != lastWidth || barTop != lastBarTop || bottom != lastBottom || tint != lastTint) {
+      fadeTop = max(0f, barTop - 24f * density)
+      sampleTop = max(0f, fadeTop - 40f * density)
+      node.setPosition(0, 0, ceil(width / SCALE).toInt(), ceil((bottom - sampleTop) / SCALE).toInt())
+      maskPaint.shader = LinearGradient(
+        0f, fadeTop, 0f, barTop.toFloat(),
+        Color.TRANSPARENT, Color.WHITE, Shader.TileMode.CLAMP,
+      )
+      val surface = (tint and 0x00ffffff) or (minOf(Color.alpha(tint), 199) shl 24)
+      tintPaint.color = surface
+      lastWidth = width
+      lastBarTop = barTop
+      lastBottom = bottom
+      lastTint = tint
+    }
+
+    val recording = node.beginRecording()
+    try {
+      // Reuse child View display lists. No bitmap capture or full-screen blur.
+      recording.scale(1f / SCALE, 1f / SCALE)
+      recording.translate(0f, -sampleTop)
+      recording.drawColor(tint or (0xff shl 24))
+      drawScenes(recording)
+    } finally {
+      node.endRecording()
+    }
+
+    val layer = canvas.saveLayer(0f, fadeTop, width.toFloat(), bottom.toFloat(), null)
+    val transform = canvas.save()
+    canvas.translate(0f, sampleTop)
+    canvas.scale(SCALE, SCALE)
+    canvas.drawRenderNode(node)
+    canvas.restoreToCount(transform)
+    canvas.drawRect(0f, fadeTop, width.toFloat(), bottom.toFloat(), tintPaint)
+    // Fade the combined blur and tint, keeping the transition free of a hard seam.
+    canvas.drawRect(0f, fadeTop, width.toFloat(), bottom.toFloat(), maskPaint)
+    canvas.restoreToCount(layer)
+  }
+
+  fun release() {
+    node.discardDisplayList()
+  }
+
+  private companion object {
+    const val SCALE = 4f
+  }
+}

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

@@ -0,0 +1,16 @@
+package com.onekey.bottomtabs
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class BottomTabsPackage : ReactPackage {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(BottomTabsViewManager(reactContext))
+  }
+
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return emptyList()
+  }
+}