Adding long Press support on android and iOS (#66)

* feat: added support for long press in android

* feat: handled dynamic update tab in android

* feat: ios long press event handling

* fix: long press added

* fix: tab long pressed event file moved

* feat: ios impl added

* fix: unwanted changes removed

* fix: on tab long press definition changed

* fix: index handling

* feat: added example in native bottom tabs

* feat: add event section in doc

Author: shubhamguptadream11

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

@@ -10,6 +10,7 @@ import android.util.TypedValue
 import android.net.Uri
 import android.view.Choreographer
 import android.view.MenuItem
+import android.view.View
 import androidx.appcompat.content.res.AppCompatResources
 import com.facebook.common.references.CloseableReference
 import com.facebook.datasource.DataSources
@@ -29,6 +30,7 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
   private var isLayoutEnqueued = false
   var items: MutableList<TabInfo>? = null
   var onTabSelectedListener: ((WritableMap) -> Unit)? = null
+  var onTabLongPressedListener: ((WritableMap) -> Unit)? = null
   private var isAnimating = false
   private var activeTintColor: Int? = null
   private var inactiveTintColor: Int? = null
@@ -52,6 +54,16 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     }
   }
 
+  private fun onTabLongPressed(item: MenuItem) {
+    val longPressedItem = items?.firstOrNull { it.title == item.title }
+    longPressedItem?.let {
+      val event = Arguments.createMap().apply {
+        putString("key", longPressedItem.key)
+      }
+      onTabLongPressedListener?.invoke(event)
+    }
+  }
+
   override fun requestLayout() {
     super.requestLayout()
     @Suppress("SENSELESS_COMPARISON") // layoutCallback can be null here since this method can be called in init
@@ -95,6 +107,12 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
       } else {
         removeBadge(index)
       }
+      post {
+        findViewById<View>(menuItem.itemId).setOnLongClickListener {
+          onTabLongPressed(menuItem)
+          true
+        }
+      }
     }
   }
 

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

@@ -100,6 +100,13 @@ class RCTTabViewViewManager :
         eventDispatcher.dispatchEvent(PageSelectedEvent(viewTag = view.id, key = it))
       }
     }
+
+    view.onTabLongPressedListener = { data ->
+      data.getString("key")?.let {
+        eventDispatcher.dispatchEvent(TabLongPressEvent(viewTag = view.id, key = it))
+      }
+    }
+
     return view
   }
 
@@ -151,6 +158,8 @@ class RCTTabViewViewManager :
     return MapBuilder.of(
       PageSelectedEvent.EVENT_NAME,
       MapBuilder.of("registrationName", "onPageSelected"),
+      TabLongPressEvent.EVENT_NAME,
+      MapBuilder.of("registrationName", "onTabLongPress")
     )
   }
 

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

@@ -0,0 +1,24 @@
+package com.rcttabview
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+class TabLongPressEvent(viewTag: Int, private val key: String) :
+  Event<TabLongPressEvent>(viewTag) {
+
+  companion object {
+    const val EVENT_NAME = "onTabLongPress"
+  }
+
+  override fun getEventName(): String {
+    return EVENT_NAME
+  }
+
+  override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+    val event = Arguments.createMap().apply {
+      putString("key", key)
+    }
+    rctEventEmitter.receiveEvent(viewTag, eventName, event)
+  }
+}

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -149,3 +149,23 @@ Badge to show on the tab icon.
 #### `lazy`
 
 Whether this screens should render the first time it's accessed. Defaults to true. Set it to false if you want to render the screen on initial render.
+
+### Events
+
+The navigator can emit events on certain actions. Supported events are:
+
+#### `tabLongPress`
+
+This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period.
+
+Example:
+
+```tsx
+React.useEffect(() => {
+  const unsubscribe = navigation.addListener('tabLongPress', (e) => {
+    // Do something
+  });
+
+  return unsubscribe;
+}, [navigation]);
+```

example/ios/Podfile.lock

@@ -1209,7 +1209,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-bottom-tabs (0.0.10):
+  - react-native-bottom-tabs (0.0.12):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1229,6 +1229,7 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - SwiftUIIntrospect (~> 1.0)
     - Yoga
   - react-native-safe-area-context (4.11.0):
     - React-Core
@@ -1545,6 +1546,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - SocketRocket (0.7.0)
+  - SwiftUIIntrospect (1.3.0)
   - Yoga (0.0.0)
 
 DEPENDENCIES:
@@ -1621,6 +1623,7 @@ DEPENDENCIES:
 SPEC REPOS:
   trunk:
     - SocketRocket
+    - SwiftUIIntrospect
 
 EXTERNAL SOURCES:
   boost:
@@ -1774,15 +1777,15 @@ SPEC CHECKSUMS:
   React-CoreModules: 2d68c251bc4080028f2835fa47504e8f20669a21
   React-cxxreact: bb0dc212b515d6dba6c6ddc4034584e148857db9
   React-debug: fd0ed8ecd5f8a23c7daf5ceaca8aa722a4d083fd
-  React-defaultsnativemodule: 0d824306a15dd80e2bea12f4079fbeff9712b301
-  React-domnativemodule: 195491d7c1725befd636f84c67bf229203fc7d07
+  React-defaultsnativemodule: 371dc516e5020f8b87f1d32f8fa6872cafcc2081
+  React-domnativemodule: 5d1288b9b8666b818a1004b56a03befc00eb5698
   React-Fabric: c12ce848f72cba42fb9e97a73a7c99abc6353f23
   React-FabricComponents: 7813d5575c8ea2cda0fef9be4ff9d10987cba512
   React-FabricImage: c511a5d612479cb4606edf3557c071956c8735f6
   React-featureflags: cf78861db9318ae29982fa8953c92d31b276c9ac
-  React-featureflagsnativemodule: 54f6decea27c187c2127e3669a7f5bf2e145e637
+  React-featureflagsnativemodule: e774cf495486b0e2a8b324568051d6b4c722fa93
   React-graphics: 7572851bca7242416b648c45d6af87d93d29281e
-  React-idlecallbacksnativemodule: 7d21b0e071c3e02bcc897d2c3db51319642dd466
+  React-idlecallbacksnativemodule: d2009bad67ef232a0ee586f53193f37823e81ef1
   React-ImageManager: aedf54d34d4475c66f4c3da6b8359b95bee904e4
   React-jsc: 92ac98e0e03ee54fdaa4ac3936285a4fdb166fab
   React-jserrorhandler: 0c8949672a00f2a502c767350e591e3ec3d82fb3
@@ -1792,8 +1795,8 @@ SPEC CHECKSUMS:
   React-jsitracing: 3935b092f85bb1e53b8cf8a00f572413648af46b
   React-logger: 4072f39df335ca443932e0ccece41fbeb5ca8404
   React-Mapbuffer: 714f2fae68edcabfc332b754e9fbaa8cfc68fdd4
-  React-microtasksnativemodule: 618b64238e43ef3154079f193aa6649e5320ae19
-  react-native-bottom-tabs: f2d0c291b0158846fb8c6964b9535a3ab206fdf2
+  React-microtasksnativemodule: 987cf7e0e0e7129250a48b807e70d3b906c726cf
+  react-native-bottom-tabs: 30906150a76d9735a58080792f363dc9ccee9c04
   react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: 4a9543185905fe41014c06776bf126083795aed9
   React-NativeModulesApple: 651670a799672bd54469f2981d91493dda361ddf
@@ -1820,12 +1823,13 @@ SPEC CHECKSUMS:
   React-utils: b2baee839fb869f732d617b97dcfa384b4b4fdb3
   ReactCodegen: f177b8fd67788c5c6ff45a39c7482c5f8d77ace6
   ReactCommon: 627bd3192ef01a351e804e9709673d3741d38fec
-  ReactNativeHost: 62249d6e1e42a969159946c035c1cd3f4b1035dd
+  ReactNativeHost: 99c0ffb175cd69de2ac9a70892cd22dac65ea79d
   ReactTestApp-DevSupport: b7cd76a3aeee6167f5e14d82f09685059152c426
   ReactTestApp-Resources: 7db90c026cccdf40cfa495705ad436ccc4d64154
-  RNGestureHandler: 366823a3ebcc5ddd25550dbfe80e89779c4760b2
-  RNScreens: d86f05e9c243a063ca67cda7f4e05d28fe5c31d4
+  RNGestureHandler: 18b9b5d65c77c4744a640f69b7fccdd47ed935c0
+  RNScreens: 5288a8dbeedb3c5051aa2d5658c1c553c050b80a
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
+  SwiftUIIntrospect: fee9aa07293ee280373a591e1824e8ddc869ba5d
   Yoga: 4ef80d96a5534f0e01b3055f17d1e19a9fc61b63
 
 PODFILE CHECKSUM: 539add55dc6c2e7f9754e288b1ce4fd8583819ae

example/src/Examples/NativeBottomTabs.tsx

@@ -4,15 +4,33 @@ import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
 // This import works properly when library is published
 import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { Platform } from 'react-native';
 
 const Tab = createNativeBottomTabNavigator();
 
 function NativeBottomTabs() {
   return (
-    <Tab.Navigator tabBarInactiveTintColor="red" tabBarActiveTintColor="orange">
+    <Tab.Navigator
+      tabBarInactiveTintColor="red"
+      tabBarActiveTintColor="orange"
+      screenListeners={{
+        tabLongPress: (data) => {
+          console.log(
+            `${Platform.OS}: Long press detected on tab with key ${data.target} at the navigator level.`
+          );
+        },
+      }}
+    >
       <Tab.Screen
         name="Article"
         component={Article}
+        listeners={{
+          tabLongPress: (data) => {
+            console.log(
+              `${Platform.OS}: Long press detected on tab with key ${data.target} at the screen level.`
+            );
+          },
+        }}
         options={{
           tabBarBadge: '10',
           tabBarIcon: ({ focused }) =>

ios/RCTTabViewViewManager.mm

@@ -24,6 +24,7 @@ - (UIView *)view
 
 RCT_EXPORT_VIEW_PROPERTY(items, NSArray)
 RCT_EXPORT_VIEW_PROPERTY(onPageSelected, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onTabLongPress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(selectedPage, NSString)
 RCT_EXPORT_VIEW_PROPERTY(tabViewStyle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(icons, NSArray<RCTImageSource *>);

ios/TabItemLongPressModifier.swift

@@ -0,0 +1,64 @@
+import SwiftUI
+import SwiftUIIntrospect
+
+struct TabItemLongPressModifier: ViewModifier {
+  let onLongPress: (Int) -> Void
+  
+  func body(content: Content) -> some View {
+    content.introspect(.tabView, on: .iOS(.v13, .v14, .v15, .v16, .v17, .v18)) { tabController in
+      // Remove existing long press gestures
+      if let existingGestures = tabController.tabBar.gestureRecognizers {
+        for gesture in existingGestures where gesture is UILongPressGestureRecognizer {
+          tabController.tabBar.removeGestureRecognizer(gesture)
+        }
+      }
+      
+      // Create gesture handler
+      let handler = LongPressGestureHandler(tabBar: tabController.tabBar, handler: onLongPress)
+      let gesture = UILongPressGestureRecognizer(target: handler, action: #selector(LongPressGestureHandler.handleLongPress(_:)))
+      gesture.minimumPressDuration = 0.5
+      
+      objc_setAssociatedObject(tabController.tabBar, &AssociatedKeys.gestureHandler, handler, .OBJC_ASSOCIATION_RETAIN)
+      
+      tabController.tabBar.addGestureRecognizer(gesture)
+    }
+  }
+}
+
+private struct AssociatedKeys {
+  static var gestureHandler: UInt8 = 0
+}
+
+private class LongPressGestureHandler: NSObject {
+  private weak var tabBar: UITabBar?
+  private let handler: (Int) -> Void
+  
+  init(tabBar: UITabBar, handler: @escaping (Int) -> Void) {
+    self.tabBar = tabBar
+    self.handler = handler
+    super.init()
+  }
+  
+  @objc func handleLongPress(_ recognizer: UILongPressGestureRecognizer) {
+    guard recognizer.state == .began,
+          let tabBar = tabBar else { return }
+    
+    let location = recognizer.location(in: tabBar)
+
+    // Get buttons and sort them by frames
+    let tabBarButtons = tabBar.subviews.filter { String(describing: type(of: $0)).contains("UITabBarButton") }.sorted(by: { $0.frame.minX < $1.frame.minX })
+    
+    for (index, button) in tabBarButtons.enumerated() {
+      if button.frame.contains(location) {
+        handler(index)
+        break
+      }
+    }
+  }
+}
+
+extension View {
+  func onTabItemLongPress(_ handler: @escaping (Int) -> Void) -> some View {
+    modifier(TabItemLongPressModifier(onLongPress: handler))
+  }
+}

ios/TabLongPressedEvent.swift

@@ -0,0 +1,36 @@
+import React
+
+class TabLongPressEvent: NSObject, RCTEvent {
+  var viewTag: NSNumber
+  private var key: NSString
+  internal var coalescingKey: UInt16
+
+  var eventName: String {
+    return "onTabLongPress"
+  }
+
+  init(reactTag: NSNumber, key: NSString, coalescingKey: UInt16) {
+    self.viewTag = reactTag
+    self.key = key
+    self.coalescingKey = coalescingKey
+    super.init()
+  }
+
+  func canCoalesce() -> Bool {
+    return false
+  }
+
+  class func moduleDotMethod() -> String {
+    return "RCTEventEmitter.receiveEvent"
+  }
+
+  func arguments() -> [Any] {
+    return [
+      viewTag,
+      RCTNormalizeInputEventName(eventName),
+      [
+        "key": key
+      ]
+    ]
+  }
+}

ios/TabViewImpl.swift

@@ -50,6 +50,7 @@ struct RepresentableView: UIViewRepresentable {
 struct TabViewImpl: View {
   @ObservedObject var props: TabViewProps
   var onSelect: (_ key: String) -> Void
+  var onLongPress: (_ key: String) -> Void
 
   var body: some View {
     TabView(selection: $props.selectedPage) {
@@ -75,6 +76,11 @@ struct TabViewImpl: View {
           .tabBadge(tabData?.badge)
       }
     }
+    .onTabItemLongPress({ index in
+        if let key = props.items?.tabs[safe: index]?.key {
+          onLongPress(key)
+        }
+    })
     .tintColor(props.selectedActiveTintColor)
     .getSidebarAdaptable(enabled: props.sidebarAdaptable ?? false)
     .configureAppearance(props: props)