feat: native support for haptic feedback (#108)

Author: okwasniewski

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

@@ -5,8 +5,10 @@ import android.content.res.ColorStateList
 import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
+import android.os.Build
 import android.util.TypedValue
 import android.view.Choreographer
+import android.view.HapticFeedbackConstants
 import android.view.MenuItem
 import android.view.View
 import androidx.appcompat.content.res.AppCompatResources
@@ -34,6 +36,7 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
   private var inactiveTintColor: Int? = null
   private val checkedStateSet = intArrayOf(android.R.attr.state_checked)
   private val uncheckedStateSet = intArrayOf(-android.R.attr.state_checked)
+  private var hapticFeedbackEnabled = true
 
   private val layoutCallback = Choreographer.FrameCallback {
     isLayoutEnqueued = false
@@ -59,6 +62,7 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
         putString("key", longPressedItem.key)
       }
       onTabLongPressedListener?.invoke(event)
+      emitHapticFeedback(HapticFeedbackConstants.LONG_PRESS)
     }
   }
 
@@ -88,6 +92,7 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
         putString("key", selectedItem.key)
       }
       onTabSelectedListener?.invoke(event)
+      emitHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)
     }
   }
 
@@ -200,6 +205,16 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     itemActiveIndicatorColor = color
   }
 
+  fun setHapticFeedback(enabled: Boolean) {
+    hapticFeedbackEnabled = enabled
+  }
+
+  fun emitHapticFeedback(feedbackConstants: Int) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R && hapticFeedbackEnabled) {
+      this.performHapticFeedback(feedbackConstants)
+    }
+  }
+
   private fun updateTintColors(item: MenuItem? = null) {
     // First let's check current item color.
     val currentItemTintColor = items?.find { it.title == item?.title }?.activeTintColor

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

@@ -77,6 +77,10 @@ class RCTTabViewImpl {
     view.setInactiveTintColor(color)
   }
 
+  fun setHapticFeedbackEnabled(view: ReactBottomNavigationView, enabled: Boolean) {
+   view.setHapticFeedback(enabled)
+  }
+
   fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {
     return MapBuilder.of(
       PageSelectedEvent.EVENT_NAME,

android/src/newarch/RCTTabViewManager.kt

@@ -98,6 +98,11 @@ class RCTTabViewManager(context: ReactApplicationContext) :
     return delegate
   }
 
+  override fun setHapticFeedbackEnabled(view: ReactBottomNavigationView?, value: Boolean) {
+    if (view != null)
+      tabViewImpl.setHapticFeedbackEnabled(view, value)
+  }
+
   public override fun measure(
     context: Context?,
     localData: ReadableMap?,

android/src/oldarch/RCTTabViewManager.kt

@@ -109,6 +109,11 @@ class RCTTabViewManager(context: ReactApplicationContext) : SimpleViewManager<Re
   fun setDisablePageAnimations(view: ReactBottomNavigationView, flag: Boolean) {
   }
 
+  @ReactProp(name = "hapticFeedbackEnabled")
+  fun setHapticFeedbackEnabled(view: ReactBottomNavigationView, value: Boolean) {
+      tabViewImpl.setHapticFeedbackEnabled(view, value)
+  }
+
   class TabViewShadowNode() : LayoutShadowNode(),
     YogaMeasureFunction {
     private var mWidth = 0

docs/docs/docs/getting-started/how-is-it-different.mdx

@@ -45,6 +45,10 @@ TabView can turn in to a side bar on tvOS, iPadOS and macOS. This is controlled
 
 SwiftUI's TabView offer built-in smooth animations between tabs.
 
+### Out of the box support for Haptic Feedback
+
+Using one prop you can add haptic feedback support to your tab bar on both Android and iOS. This can significantly enhance users experience.
+
 ## When to use JS Bottom Tabs
 
 Using native components enforce certain constraints that we need to adapt to.

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

@@ -118,6 +118,10 @@ Tab views using the sidebar adaptable style have an appearance
 - macOS and tvOS always show a sidebar.
 - visionOS shows an ornament and also shows a sidebar for secondary tabs within a `TabSection`.
 
+#### `hapticFeedbackEnabled`
+
+Whether to enable haptic feedback on tab press. Defaults to true.
+
 ### Options
 
 The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`.

example/src/Examples/NativeBottomTabs.tsx

@@ -11,6 +11,7 @@ const Tab = createNativeBottomTabNavigator();
 function NativeBottomTabs() {
   return (
     <Tab.Navigator
+      hapticFeedbackEnabled={false}
       tabBarInactiveTintColor="#C57B57"
       tabBarActiveTintColor="#F7DBA7"
       barTintColor="#1E2D2F"

ios/Fabric/RCTTabViewComponentView.mm

@@ -140,7 +140,11 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   }
 
   if (oldViewProps.inactiveTintColor != newViewProps.inactiveTintColor) {
-    _tabViewProvider.inactiveTintColor =  RCTUIColorFromSharedColor(newViewProps.inactiveTintColor);
+    _tabViewProvider.inactiveTintColor = RCTUIColorFromSharedColor(newViewProps.inactiveTintColor);
+  }
+  
+  if (oldViewProps.hapticFeedbackEnabled != newViewProps.hapticFeedbackEnabled) {
+    _tabViewProvider.hapticFeedbackEnabled = newViewProps.hapticFeedbackEnabled;
   }
 
   [super updateProps:props oldProps:oldProps];

ios/RCTTabViewViewManager.mm

@@ -42,6 +42,7 @@ - (instancetype)init
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(activeTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(inactiveTintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(hapticFeedbackEnabled, BOOL)
 
 //  MARK: TabViewProviderDelegate
 

ios/TabViewImpl.swift

@@ -19,6 +19,7 @@ class TabViewProps: ObservableObject {
   @Published var barTintColor: UIColor?
   @Published var activeTintColor: UIColor?
   @Published var inactiveTintColor: UIColor?
+  @Published var hapticFeedbackEnabled: Bool = true
 
   var selectedActiveTintColor: UIColor? {
     if let selectedPage = selectedPage,
@@ -80,6 +81,7 @@ struct TabViewImpl: View {
     .onTabItemLongPress({ index in
       if let key = props.items[safe: index]?.key {
         onLongPress(key)
+        emitHapticFeedback(longPress: true)
       }
     })
     .tintColor(props.selectedActiveTintColor)
@@ -94,8 +96,23 @@ struct TabViewImpl: View {
       }
 
       onSelect(newValue)
+      emitHapticFeedback()
     }
   }
+  
+  func emitHapticFeedback(longPress: Bool = false) {
+#if os(iOS)
+    if !props.hapticFeedbackEnabled {
+      return
+    }
+    
+    if longPress {
+      UINotificationFeedbackGenerator().notificationOccurred(.success)
+    } else {
+      UISelectionFeedbackGenerator().selectionChanged()
+    }
+#endif
+  }
 }
 
 private func configureAppearance(for appearanceType: String, appearance: UITabBarAppearance) -> UITabBarAppearance {