feat: implement useBottomTabBarHeight (#158)

* feat: implement useBottomTabBarHeight * docs(changeset): feat: add useBottomTabBarHeight() hook * feat: add events for old arch * feat: add docs
callstackincubator · Nov 23, 2024 · 51c523b · 51c523b
1 parent 153f5f7
commit 51c523b
Show file tree

Hide file tree

Showing 17 changed files with 308 additions and 84 deletions.
diff --git a/.changeset/perfect-onions-reply.md b/.changeset/perfect-onions-reply.md
@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+feat: add useBottomTabBarHeight() hook
diff --git a/apps/example/ios/Podfile.lock b/apps/example/ios/Podfile.lock
@@ -1209,7 +1209,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-bottom-tabs (0.5.2):
+  - react-native-bottom-tabs (0.6.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1222,7 +1222,7 @@ PODS:
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-bottom-tabs/common (= 0.5.2)
+    - react-native-bottom-tabs/common (= 0.6.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-rendererdebug
@@ -1234,7 +1234,7 @@ PODS:
     - SDWebImageSVGCoder (>= 1.7.0)
     - SwiftUIIntrospect (~> 1.0)
     - Yoga
-  - react-native-bottom-tabs/common (0.5.2):
+  - react-native-bottom-tabs/common (0.6.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1945,7 +1945,7 @@ SPEC CHECKSUMS:
   React-logger: d79b704bf215af194f5213a6b7deec50ba8e6a9b
   React-Mapbuffer: b982d5bba94a8bc073bda48f0d27c9b28417fae3
   React-microtasksnativemodule: 8fa285fed833a04a754bf575f8ded65fc240b88d
-  react-native-bottom-tabs: 402d19b4a55e6e17c78736a9dd2592cd9864881e
+  react-native-bottom-tabs: c17ddaf86c160134349c6325e020c1f38ee5f743
   react-native-safe-area-context: 73505107f7c673cd550a561aeb6271f152c483b6
   React-nativeconfig: 8c83d992b9cc7d75b5abe262069eaeea4349f794
   React-NativeModulesApple: b8465afc883f5bf3fe8bac3767e394d581a5f123
@@ -1982,8 +1982,8 @@ SPEC CHECKSUMS:
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   SwiftUIIntrospect: fee9aa07293ee280373a591e1824e8ddc869ba5d
-  Yoga: 055f92ad73f8c8600a93f0e25ac0b2344c3b07e6
+  Yoga: aa3df615739504eebb91925fc9c58b4922ea9a08
 
 PODFILE CHECKSUM: 1c1dbca3e400ef935aa9a150cb2dcb58fb8c4536
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.14.3
diff --git a/apps/example/src/Components/MusicControl.tsx b/apps/example/src/Components/MusicControl.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+type MusicControlProps = {
+  bottomOffset: number;
+};
+
+export const MusicControl: React.FC<MusicControlProps> = ({ bottomOffset }) => {
+  return (
+    <View
+      style={[
+        styles.musicControlContainer,
+        {
+          bottom: bottomOffset + 10,
+        },
+      ]}
+    >
+      <View style={styles.musicControlContent}>
+        <View style={styles.songInfo}>
+          <Text style={styles.songTitle} numberOfLines={1}>
+            Currently Playing Song
+          </Text>
+        </View>
+        <View style={styles.controls}>
+          <Text style={styles.controlButton}>⏸</Text>
+          <Text style={styles.controlButton}>⏭</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  musicControlContainer: {
+    position: 'absolute',
+    left: 15,
+    right: 15,
+    borderRadius: 18,
+    height: 55,
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 5,
+    elevation: 8,
+  },
+  musicControlContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  songInfo: {
+    flex: 1,
+    marginRight: 16,
+  },
+  songTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#000',
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  controlButton: {
+    fontSize: 24,
+    paddingHorizontal: 12,
+    color: '#000',
+  },
+});
diff --git a/apps/example/src/Screens/Contacts.tsx b/apps/example/src/Screens/Contacts.tsx
@@ -9,6 +9,8 @@ import {
   Text,
   View,
 } from 'react-native';
+import { useBottomTabBarHeight } from 'react-native-bottom-tabs';
+import { MusicControl } from '../Components/MusicControl';
 
 type Item = { name: string; number: number };
 
@@ -97,6 +99,7 @@ export function Contacts({ query, ...rest }: Props) {
   console.log(Platform.OS, ' Rendering Contacts');
   const renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />;
 
+  const tabBarHeight = useBottomTabBarHeight();
   const ref = React.useRef<FlatList>(null);
   useScrollToTop(ref);
 
@@ -117,6 +120,7 @@ export function Contacts({ query, ...rest }: Props) {
         renderItem={renderItem}
         ItemSeparatorComponent={ItemSeparator}
       />
+      <MusicControl bottomOffset={tabBarHeight} />
     </SafeAreaView>
   );
 }

diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx
@@ -265,3 +265,38 @@ React.useEffect(() => {
   return unsubscribe;
 }, [navigation]);
 ```
+
+### Hooks
+
+`useBottomTabBarHeight`
+
+This hook returns the height of the bottom tab bar. This is useful when you want to place a component above the tab bar on iOS. It's not needed to offset the content of the screen as the navigator does it automatically.
+
+```tsx
+import { useBottomTabBarHeight } from 'react-native-bottom-tabs';
+
+function MyComponent() {
+  const tabBarHeight = useBottomTabBarHeight();
+
+  return (
+    <ScrollView>
+      {/* Content */}
+      <View style={{ bottom: tabBarHeight }} />
+    </ScrollView>
+  );
+}
+```
+
+Alternatively, you can use the `BottomTabBarHeightContext` directly if you are using a class component or need it in a reusable component that can be used outside the bottom tab navigator:
+
+```tsx
+import { BottomTabBarHeightContext } from 'react-native-bottom-tabs';
+
+// ...
+
+<BottomTabBarHeightContext.Consumer>
+  {tabBarHeight => (
+    /* render something */
+  )}
+</BottomTabBarHeightContext.Consumer>
+```
diff --git a/...e-bottom-tabs/ios/PageSelectedEvent.swift → ...m-tabs/ios/Events/PageSelectedEvent.swift b/...e-bottom-tabs/ios/PageSelectedEvent.swift → ...m-tabs/ios/Events/PageSelectedEvent.swift
@@ -4,26 +4,26 @@ import React
   private var key: NSString
   @objc public var viewTag: NSNumber
   @objc public var coalescingKey: UInt16
-
+  
   @objc public var eventName: String {
     return "onPageSelected"
   }
-
+  
   @objc public init(reactTag: NSNumber, key: NSString, coalescingKey: UInt16) {
     self.viewTag = reactTag
     self.key = key
     self.coalescingKey = coalescingKey
     super.init()
   }
-
+  
   @objc public func canCoalesce() -> Bool {
     return false
   }
-
+  
   @objc public class func moduleDotMethod() -> String {
     return "RCTEventEmitter.receiveEvent"
   }
-
+  
   @objc public func arguments() -> [Any] {
     return [
       viewTag,

diff --git a/packages/react-native-bottom-tabs/ios/Events/TabBarMeasuredEvent.swift b/packages/react-native-bottom-tabs/ios/Events/TabBarMeasuredEvent.swift
@@ -0,0 +1,36 @@
+import React
+
+@objc public class TabBarMeasuredEvent: NSObject, RCTEvent {
+  private var height: NSInteger
+  @objc public var viewTag: NSNumber
+  @objc public var coalescingKey: UInt16
+
+  @objc public var eventName: String {
+    return "onTabBarMeasured"
+  }
+
+  @objc public init(reactTag: NSNumber, height: NSInteger, coalescingKey: UInt16) {
+    self.viewTag = reactTag
+    self.height = height
+    self.coalescingKey = coalescingKey
+    super.init()
+  }
+
+  @objc public func canCoalesce() -> Bool {
+    return false
+  }
+
+  @objc public class func moduleDotMethod() -> String {
+    return "RCTEventEmitter.receiveEvent"
+  }
+
+  @objc public func arguments() -> [Any] {
+    return [
+      viewTag,
+      RCTNormalizeInputEventName(eventName) ?? eventName,
+      [
+        "height": height
+      ]
+    ]
+  }
+}
diff --git a/...bottom-tabs/ios/TabLongPressedEvent.swift → ...tabs/ios/Events/TabLongPressedEvent.swift b/...bottom-tabs/ios/TabLongPressedEvent.swift → ...tabs/ios/Events/TabLongPressedEvent.swift
@@ -8,26 +8,26 @@ protocol RCTEvent {}
   private var key: NSString
   @objc public var viewTag: NSNumber
   @objc public var coalescingKey: UInt16
-
+  
   @objc public var eventName: String {
     return "onTabLongPress"
   }
-
+  
   @objc public init(reactTag: NSNumber, key: NSString, coalescingKey: UInt16) {
     self.viewTag = reactTag
     self.key = key
     self.coalescingKey = coalescingKey
     super.init()
   }
-
+  
   @objc public func canCoalesce() -> Bool {
     return false
   }
-
+  
   @objc public class func moduleDotMethod() -> String {
     return "RCTEventEmitter.receiveEvent"
   }
-
+  
   @objc public func arguments() -> [Any] {
     return [
       viewTag,

diff --git a/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm b/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm
@@ -223,6 +223,15 @@ - (void)onLongPressWithKey:(NSString *)key reactTag:(NSNumber *)reactTag {
   }
 }
 
+- (void)onTabBarMeasuredWithHeight:(NSInteger)height reactTag:(NSNumber *)reactTag {
+  auto eventEmitter = std::static_pointer_cast<const RNCTabViewEventEmitter>(_eventEmitter);
+  if (eventEmitter) {
+    eventEmitter->onTabBarMeasured(RNCTabViewEventEmitter::OnTabBarMeasured {
+      .height = (int)height
+    });
+  }
+}
+
 @end
 
 Class<RCTComponentViewProtocol> RNCTabViewCls(void)

diff --git a/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm b/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm
@@ -30,6 +30,7 @@ - (instancetype)init
 RCT_EXPORT_VIEW_PROPERTY(items, NSArray)
 RCT_EXPORT_VIEW_PROPERTY(onPageSelected, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onTabLongPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onTabBarMeasured, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(selectedPage, NSString)
 RCT_EXPORT_VIEW_PROPERTY(tabViewStyle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(icons, NSArray<RCTImageSource *>);
@@ -59,6 +60,11 @@ - (void)onPageSelectedWithKey:(NSString *)key reactTag:(NSNumber *)reactTag {
   [self.bridge.eventDispatcher sendEvent:event];
 }
 
+- (void)onTabBarMeasuredWithHeight:(NSInteger)height reactTag:(NSNumber *)reactTag {
+  auto event = [[TabBarMeasuredEvent alloc] initWithReactTag:reactTag height:height coalescingKey:_coalescingKey++];
+  [self.bridge.eventDispatcher sendEvent:event];
+}
+
 - (UIView *)view
 {
   return [[TabViewProvider alloc] initWithDelegate:self];

diff --git a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift b/packages/react-native-bottom-tabs/ios/TabViewImpl.swift
@@ -55,10 +55,11 @@ struct RepresentableView: UIViewRepresentable {
  */
 struct TabViewImpl: View {
   @ObservedObject var props: TabViewProps
-  var onSelect: (_ key: String) -> Void
-  var onLongPress: (_ key: String) -> Void
   @Weak var tabBar: UITabBar?
 
+  var onSelect: (_ key: String) -> Void
+  var onLongPress: (_ key: String) -> Void
+  var onTabBarMeasured: (_ height: Int) -> Void
 
   var body: some View {
     TabView(selection: $props.selectedPage) {
@@ -83,6 +84,9 @@ struct TabViewImpl: View {
 #endif
     .introspectTabView(closure: { tabController in
       tabBar = tabController.tabBar
+      onTabBarMeasured(
+        Int(tabController.tabBar.frame.size.height)
+      )
     })
     .configureAppearance(props: props, tabBar: tabBar)
     .tintColor(props.selectedActiveTintColor)