Fix/translucent with default scroll edge (#191)

* fix: translucent with default scroll edge * docs(changeset): fix: make translucent prop work properly with default apperance
callstackincubator · Dec 12, 2024 · f681e5e · f681e5e
1 parent aa04554
commit f681e5e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/curly-snails-crash.md b/.changeset/curly-snails-crash.md
@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+fix: make translucent prop work properly with default apperance
diff --git a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift b/packages/react-native-bottom-tabs/ios/TabViewImpl.swift
@@ -199,7 +199,6 @@ private func configureTransparentAppearance(tabBar: UITabBar, props: TabViewProp
 
 private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps) {
   let appearance = UITabBarAppearance()
-  tabBar.isTranslucent = props.translucent
 
   // Configure background
   switch props.scrollEdgeAppearance {
@@ -208,8 +207,15 @@ private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps)
   default:
     appearance.configureWithDefaultBackground()
   }
-  appearance.backgroundColor = props.barTintColor
-
+
+  if props.translucent == false {
+    appearance.configureWithOpaqueBackground()
+  }
+
+  if props.barTintColor != nil {
+    appearance.backgroundColor = props.barTintColor
+  }
+
   // Configure item appearance
   let itemAppearance = UITabBarItemAppearance()
   let fontSize = props.fontSize != nil ? CGFloat(props.fontSize!) : tabBarDefaultFontSize