feat: introduce config (#9)

* feat: introduce config

* fix: resizing images, chat example

* fix: tabview animations on Android

Author: okwasniewski

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

@@ -14,22 +14,26 @@ import com.facebook.imagepipeline.request.ImageRequestBuilder
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.WritableMap
+import com.facebook.react.modules.core.ReactChoreographer
 import com.facebook.react.views.imagehelper.ImageSource
 import com.facebook.react.views.imagehelper.ImageSource.Companion.getTransparentBitmapImageSource
 import com.google.android.material.bottomnavigation.BottomNavigationView
 
 
 class ReactBottomNavigationView(context: Context) : BottomNavigationView(context) {
-  private val ANIMATION_DURATION: Long = 300
   private val icons: MutableMap<Int, ImageSource> = mutableMapOf()
-
+  private var isLayoutEnqueued = false
   var items: MutableList<TabInfo>? = null
   var onTabSelectedListener: ((WritableMap) -> Unit)? = null
   private var isAnimating = false
-  private val frameCallback = Choreographer.FrameCallback {
-    if (isAnimating) {
-      measureAndLayout()
-    }
+
+  private val layoutCallback = Choreographer.FrameCallback {
+    isLayoutEnqueued = false
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+    )
+    layout(left, top, right, bottom)
   }
 
   init {
@@ -41,35 +45,31 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
 
   override fun requestLayout() {
     super.requestLayout()
-    // Manually trigger measure & layout, as RN on Android skips those.
-    // See this issue: https://github.com/facebook/react-native/issues/17968#issuecomment-721958427
-    this.post {
-      measureAndLayout()
+    @Suppress("SENSELESS_COMPARISON") // layoutCallback can be null here since this method can be called in init
+    if (!isLayoutEnqueued && layoutCallback != null) {
+      isLayoutEnqueued = true
+      // we use NATIVE_ANIMATED_MODULE choreographer queue because it allows us to catch the current
+      // looper loop instead of enqueueing the update in the next loop causing a one frame delay.
+      ReactChoreographer
+        .getInstance()
+        .postFrameCallback(
+          ReactChoreographer.CallbackType.NATIVE_ANIMATED_MODULE,
+          layoutCallback,
+        )
     }
   }
 
   private fun onTabSelected(item: MenuItem) {
+    if (isLayoutEnqueued) {
+      return;
+    }
     val selectedItem = items?.first { it.title == item.title }
     selectedItem?.let {
       val event = Arguments.createMap().apply {
         putString("key", selectedItem.key)
       }
       onTabSelectedListener?.invoke(event)
-      startAnimation()
-    }
-  }
-
-  // Refresh TabView children to fix issue with animations.
-  // https://github.com/facebook/react-native/issues/17968#issuecomment-697136929
-  private fun startAnimation() {
-    if (labelVisibilityMode != LABEL_VISIBILITY_AUTO) {
-      return
     }
-    isAnimating = true
-    Choreographer.getInstance().postFrameCallback(frameCallback)
-    postDelayed({
-      isAnimating = false
-    }, ANIMATION_DURATION)
   }
 
   fun updateItems(items: MutableList<TabInfo>) {
@@ -117,6 +117,16 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     }
   }
 
+  fun setConfig(config: TabViewConfig) {
+    labelVisibilityMode = if (config.labeled == false) {
+      LABEL_VISIBILITY_UNLABELED
+    } else if (config.labeled == true) {
+      LABEL_VISIBILITY_LABELED
+    } else {
+      LABEL_VISIBILITY_AUTO
+    }
+  }
+
   private fun getDrawable(imageSource: ImageSource): Drawable {
     // TODO: Check if this can be done using some built-in React Native class
     val imageRequest = ImageRequestBuilder.newBuilderWithSource(imageSource.uri).build()
@@ -130,14 +140,6 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     return BitmapDrawable(resources, bitmap)
   }
 
-  // Fixes issues with BottomNavigationView children layouting.
-  private fun measureAndLayout() {
-      measure(
-        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
-        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY))
-      layout(left, top, right, bottom)
-  }
-
   override fun onDetachedFromWindow() {
     super.onDetachedFromWindow()
     isAnimating = false

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

@@ -2,6 +2,7 @@ package com.rcttabview
 
 import android.view.View.MeasureSpec
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.LayoutShadowNode
@@ -22,6 +23,10 @@ data class TabInfo(
   val badge: String
 )
 
+data class TabViewConfig(
+  val labeled: Boolean?
+)
+
 @ReactModule(name = RCTTabViewViewManager.NAME)
 class RCTTabViewViewManager :
   SimpleViewManager<ReactBottomNavigationView>() {
@@ -55,6 +60,14 @@ class RCTTabViewViewManager :
     }
   }
 
+  @ReactProp(name = "config")
+  fun setConfig(view: ReactBottomNavigationView, config: ReadableMap?) {
+    val tabViewConfig = TabViewConfig(
+      labeled = if (config?.hasKey("labeled") == true) config.getBoolean("labeled") else null,
+    )
+    view.setConfig(tabViewConfig)
+  }
+
   @ReactProp(name = "icons")
   fun setIcons(view: ReactBottomNavigationView, icons: ReadableArray?) {
     view.setIcons(icons)

example/src/App.tsx

@@ -20,11 +20,13 @@ import ThreeTabs from './Examples/ThreeTabs';
 import FourTabs from './Examples/FourTabs';
 import MaterialBottomTabs from './Examples/MaterialBottomTabs';
 import SFSymbols from './Examples/SFSymbols';
+import LabeledTabs from './Examples/Labeled';
 
 const examples = [
   { component: ThreeTabs, name: 'Three Tabs' },
   { component: FourTabs, name: 'Four Tabs' },
   { component: SFSymbols, name: 'SF Symbols' },
+  { component: LabeledTabs, name: 'Labeled Tabs' },
   {
     component: FourTabs,
     name: 'Four Tabs - No header',

example/src/Examples/FourTabs.tsx

@@ -42,6 +42,7 @@ export default function FourTabs() {
 
   return (
     <TabView
+      sidebarAdaptable
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}

example/src/Examples/Labeled.tsx

@@ -0,0 +1,50 @@
+import TabView, { SceneMap } from 'react-native-bottom-tabs';
+import { useState } from 'react';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+
+export default function LabeledTabs() {
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    {
+      key: 'article',
+      title: 'Article',
+      focusedIcon: require('../../assets/icons/article_dark.png'),
+      badge: '!',
+    },
+    {
+      key: 'albums',
+      title: 'Albums',
+      focusedIcon: require('../../assets/icons/grid_dark.png'),
+      badge: '5',
+    },
+    {
+      key: 'contacts',
+      focusedIcon: require('../../assets/icons/person_dark.png'),
+      title: 'Contacts',
+    },
+    {
+      key: 'chat',
+      focusedIcon: require('../../assets/icons/chat_dark.png'),
+      title: 'Chat',
+    },
+  ]);
+
+  const renderScene = SceneMap({
+    article: Article,
+    albums: Albums,
+    contacts: Contacts,
+    chat: Chat,
+  });
+
+  return (
+    <TabView
+      labeled
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+    />
+  );
+}

example/src/Screens/Chat.tsx

@@ -1,5 +1,6 @@
 import {
   Image,
+  KeyboardAvoidingView,
   Platform,
   ScrollView,
   type ScrollViewProps,
@@ -22,7 +23,10 @@ export function Chat({
 }: Partial<ScrollViewProps & { bottom: boolean }>) {
   console.log(Platform.OS, ' Rendering Chat');
   return (
-    <View style={styles.container}>
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
       <ScrollView
         style={styles.inverted}
         contentContainerStyle={styles.content}
@@ -64,10 +68,10 @@ export function Chat({
       />
       {bottom ? (
         <View
-          style={[styles.spacer, Platform.OS !== 'android' && { height: 80 }]}
+          style={[styles.spacer, Platform.OS !== 'android' && { height: 90 }]}
         />
       ) : null}
-    </View>
+    </KeyboardAvoidingView>
   );
 }
 

ios/RCTTabViewViewManager.mm

@@ -22,5 +22,6 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(selectedPage, NSString)
 RCT_EXPORT_VIEW_PROPERTY(tabViewStyle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(icons, NSArray<RCTImageSource *>);
+RCT_EXPORT_VIEW_PROPERTY(config, NSDictionary)
 
 @end

ios/TabViewImpl.swift

@@ -7,9 +7,9 @@ import React
  */
 class TabViewProps: ObservableObject {
   @Published var children: [UIView]?
+  @Published var config: TabViewConfig?
   @Published var items: TabData?
   @Published var selectedPage: String?
-  @Published var tabViewStyle: String?
   @Published var icons: [Int: UIImage] = [:]
 }
 
@@ -38,50 +38,56 @@ struct TabViewImpl: View {
         let child = props.children?[safe: index] ?? UIView()
         let tabData = props.items?.tabs[safe: index]
         let icon = props.icons[index]
+        
         RepresentableView(view: child)
           .frame(maxWidth: .infinity, maxHeight: .infinity)
           .tabItem {
-            TabItem(icon: icon, sfSymbol: tabData?.sfSymbol, title: tabData?.title)
+            TabItem(
+              title: tabData?.title,
+              icon: icon,
+              sfSymbol: tabData?.sfSymbol,
+              labeled: props.config?.labeled
+            )
           }
           .tag(tabData?.key)
           .tabBadge(tabData?.badge)
       }
-      .getTabViewStyle(name: props.tabViewStyle ?? "")
       .onChange(of: props.selectedPage ?? "") { newValue in
         onSelect(newValue)
       }
     }
+    .getSidebarAdaptable(enabled: props.config?.sidebarAdaptable ?? false)
   }
 }
 
 struct TabItem: View {
+  var title: String?
   var icon: UIImage?
   var sfSymbol: String?
-  var title: String?
+  var labeled: Bool?
 
   var body: some View {
     if let icon {
       Image(uiImage: icon)
     } else if let sfSymbol, !sfSymbol.isEmpty {
       Image(systemName: sfSymbol)
     }
-    Text(title ?? "")
+    if (labeled != false) {
+      Text(title ?? "")
+    }
   }
 }
 
 extension View {
   @ViewBuilder
-  func getTabViewStyle(name: String) -> some View {
-    switch name {
-    case "automatic":
-      self.tabViewStyle(.automatic)
-    case "sidebarAdaptable":
-      if #available(iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, *) {
+  func getSidebarAdaptable(enabled: Bool) -> some View {
+    if #available(iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, *) {
+      if (enabled) {
         self.tabViewStyle(.sidebarAdaptable)
       } else {
         self
       }
-    default:
+    } else {
       self
     }
   }