feat(iOS): Added translucent property for iOS (#62)

* feat: added example for translucent

* fix: empty setter for android and ios code prettier

* fix: pr comments resovled

Author: shubhamguptadream11

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

@@ -76,6 +76,10 @@ class RCTTabViewViewManager :
     }
   }
 
+  @ReactProp(name = "translucent")
+  fun setTranslucentview(view: ReactBottomNavigationView, translucent: Boolean?) {
+  }
+
   public override fun createViewInstance(context: ThemedReactContext): ReactBottomNavigationView {
     eventDispatcher = context.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
     val view = ReactBottomNavigationView(context)

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

@@ -65,6 +65,10 @@ Whether to disable page animations between tabs.
 
 Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom.
 
+#### `translucent` <Badge text="iOS" type="info" />
+
+A Boolean value that indicates whether the tab bar is translucent.
+
 Available options:
 
 - `default` - uses default background and shadow values.

example/src/App.tsx

@@ -39,6 +39,10 @@ const FourTabsTransparentScrollEdgeAppearance = () => {
   return <FourTabs scrollEdgeAppearance="transparent" />;
 };
 
+const FourTabsTranslucent = () => {
+  return <FourTabs translucent={false} />;
+};
+
 const examples = [
   { component: ThreeTabs, name: 'Three Tabs' },
   { component: FourTabs, name: 'Four Tabs' },
@@ -58,6 +62,10 @@ const examples = [
     component: FourTabsTransparentScrollEdgeAppearance,
     name: 'Four Tabs - Transparent scroll edge appearance',
   },
+  {
+    component: FourTabsTranslucent,
+    name: 'Four Tabs - Translucent tab bar',
+  },
   { component: NativeBottomTabs, name: 'Native Bottom Tabs' },
   { component: JSBottomTabs, name: 'JS Bottom Tabs' },
   {

example/src/Examples/FourTabs.tsx

@@ -10,13 +10,15 @@ interface Props {
   ignoresTopSafeArea?: boolean;
   disablePageAnimations?: boolean;
   scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+  translucent?: boolean;
   rippleColor?: ColorValue;
 }
 
 export default function FourTabs({
   ignoresTopSafeArea = false,
   disablePageAnimations = false,
   scrollEdgeAppearance = 'default',
+  translucent = true,
   rippleColor,
 }: Props) {
   const [index, setIndex] = useState(0);
@@ -62,6 +64,7 @@ export default function FourTabs({
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}
+      translucent={translucent}
       rippleColor={rippleColor}
     />
   );

ios/RCTTabViewViewManager.mm

@@ -32,5 +32,6 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(ignoresTopSafeArea, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(disablePageAnimations, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(scrollEdgeAppearance, NSString)
+RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
 
 @end

ios/TabViewImpl.swift

@@ -15,6 +15,7 @@ class TabViewProps: ObservableObject {
   @Published var ignoresTopSafeArea: Bool?
   @Published var disablePageAnimations: Bool = false
   @Published var scrollEdgeAppearance: String?
+  @Published var translucent: Bool = true
 }
 
 /**
@@ -62,6 +63,7 @@ struct TabViewImpl: View {
       }
     }
     .getSidebarAdaptable(enabled: props.sidebarAdaptable ?? false)
+    .tabBarTranslucent(props.translucent)
     .onChange(of: props.selectedPage ?? "") { newValue in
       if (props.disablePageAnimations) {
         UIView.setAnimationsEnabled(false)
@@ -155,6 +157,17 @@ extension View {
         .ignoresSafeArea(.container, edges: .horizontal)
         .ignoresSafeArea(.container, edges: .bottom)
         .frame(idealWidth: frame.width, idealHeight: frame.height)
+      }
     }
+    
+  @ViewBuilder
+  func tabBarTranslucent(_ translucent: Bool) -> some View {
+    self
+      .onAppear {
+        UITabBar.appearance().isTranslucent = translucent
+      }
+      .onChange(of: translucent) { newValue in
+        UITabBar.appearance().isTranslucent = newValue
+      }
   }
 }

ios/TabViewProvider.swift

@@ -64,6 +64,12 @@ struct TabData: Codable {
       props.scrollEdgeAppearance = scrollEdgeAppearance as? String
     }
   }
+    
+  @objc var translucent: Bool = true {
+    didSet {
+      props.translucent = translucent
+    }
+  }
 
   @objc var items: NSArray? {
     didSet {

src/TabView.tsx

@@ -85,6 +85,10 @@ interface Props<Route extends BaseRoute> {
     focused: boolean;
   }) => ImageSource | undefined;
 
+  /**
+   * A Boolean value that indicates whether the tab bar is translucent. (iOS only)
+   */
+  translucent?: boolean;
   rippleColor?: ColorValue;
 }
 

src/TabViewNativeComponent.ts

@@ -23,6 +23,7 @@ export interface TabViewProps extends ViewProps {
   labeled?: boolean;
   sidebarAdaptable?: boolean;
   scrollEdgeAppearance?: string;
+  translucent?: boolean;
   rippleColor?: ProcessedColorValue | null;
 }