From c93f299f406bf43bd7e04a76abe91bf69a974de0 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Sat, 19 Oct 2024 18:26:33 +0530 Subject: [PATCH 1/3] feat: added example for translucent --- .../docs/guides/usage-with-react-navigation.mdx | 4 ++++ example/src/App.tsx | 8 ++++++++ example/src/Examples/FourTabs.tsx | 3 +++ ios/RCTTabViewViewManager.mm | 1 + ios/TabViewImpl.swift | 15 ++++++++++++++- ios/TabViewProvider.swift | 6 ++++++ src/TabView.tsx | 5 +++++ src/TabViewNativeComponent.ts | 1 + 8 files changed, 42 insertions(+), 1 deletion(-) diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx index a6af2b3..706b067 100644 --- a/docs/docs/docs/guides/usage-with-react-navigation.mdx +++ b/docs/docs/docs/guides/usage-with-react-navigation.mdx @@ -61,6 +61,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` + +A Boolean value that indicates whether the tab bar is translucent. + Available options: - `default` - uses default background and shadow values. - `transparent` - uses transparent background and no shadow. diff --git a/example/src/App.tsx b/example/src/App.tsx index 07ffa0f..5abcc2e 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -35,6 +35,10 @@ const FourTabsTransparentScrollEdgeAppearance = () => { return ; }; +const FourTabsTranslucent = () => { + return ; +}; + const examples = [ { component: ThreeTabs, name: 'Three Tabs' }, { component: FourTabs, name: 'Four Tabs' }, @@ -50,6 +54,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' }, { diff --git a/example/src/Examples/FourTabs.tsx b/example/src/Examples/FourTabs.tsx index 344cbde..2d72e77 100644 --- a/example/src/Examples/FourTabs.tsx +++ b/example/src/Examples/FourTabs.tsx @@ -9,12 +9,14 @@ interface Props { ignoresTopSafeArea?: boolean; disablePageAnimations?: boolean; scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent'; + translucent?: boolean; } export default function FourTabs({ ignoresTopSafeArea = false, disablePageAnimations = false, scrollEdgeAppearance = 'default', + translucent = true, }: Props) { const [index, setIndex] = useState(0); const [routes] = useState([ @@ -59,6 +61,7 @@ export default function FourTabs({ navigationState={{ index, routes }} onIndexChange={setIndex} renderScene={renderScene} + translucent={translucent} /> ); } diff --git a/ios/RCTTabViewViewManager.mm b/ios/RCTTabViewViewManager.mm index e60c896..c4acb2a 100644 --- a/ios/RCTTabViewViewManager.mm +++ b/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 diff --git a/ios/TabViewImpl.swift b/ios/TabViewImpl.swift index f0502a4..a76f539 100644 --- a/ios/TabViewImpl.swift +++ b/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 + } } - } } diff --git a/ios/TabViewProvider.swift b/ios/TabViewProvider.swift index ead7613..5caf4f7 100644 --- a/ios/TabViewProvider.swift +++ b/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 { diff --git a/src/TabView.tsx b/src/TabView.tsx index 6c30e50..69782d3 100644 --- a/src/TabView.tsx +++ b/src/TabView.tsx @@ -77,6 +77,11 @@ interface Props { route: Route; focused: boolean; }) => ImageSource | undefined; + + /** + * A Boolean value that indicates whether the tab bar is translucent. (iOS only) + */ + translucent?: boolean; } const ANDROID_MAX_TABS = 6; diff --git a/src/TabViewNativeComponent.ts b/src/TabViewNativeComponent.ts index e15681b..db37cdf 100644 --- a/src/TabViewNativeComponent.ts +++ b/src/TabViewNativeComponent.ts @@ -23,6 +23,7 @@ export interface TabViewProps extends ViewProps { labeled?: boolean; sidebarAdaptable?: boolean; scrollEdgeAppearance?: string; + translucent?: boolean; } export default codegenNativeComponent('RCTTabView'); From f9ba4b3a1975d5d1c7e5db322777fd8c6fc29f12 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Sun, 20 Oct 2024 08:45:16 +0530 Subject: [PATCH 2/3] fix: empty setter for android and ios code prettier --- .../com/rcttabview/RCTTabViewViewManager.kt | 6 +++++- ios/TabViewImpl.swift | 20 +++++++++---------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt b/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt index df52033..3956826 100644 --- a/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt +++ b/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt @@ -1,7 +1,7 @@ package com.rcttabview import android.content.res.ColorStateList -import android.graphics.Color +import android.view.View import android.view.View.MeasureSpec import com.facebook.react.bridge.ReadableArray import com.facebook.react.common.MapBuilder @@ -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) diff --git a/ios/TabViewImpl.swift b/ios/TabViewImpl.swift index a76f539..4c844b0 100644 --- a/ios/TabViewImpl.swift +++ b/ios/TabViewImpl.swift @@ -160,14 +160,14 @@ extension View { } } - @ViewBuilder - func tabBarTranslucent(_ translucent: Bool) -> some View { - self - .onAppear { - UITabBar.appearance().isTranslucent = translucent - } - .onChange(of: translucent) { newValue in - UITabBar.appearance().isTranslucent = newValue - } - } + @ViewBuilder + func tabBarTranslucent(_ translucent: Bool) -> some View { + self + .onAppear { + UITabBar.appearance().isTranslucent = translucent + } + .onChange(of: translucent) { newValue in + UITabBar.appearance().isTranslucent = newValue + } + } } From 0c9e0b682e636f721aea7e0d0abdff455d9be290 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Sun, 20 Oct 2024 08:49:20 +0530 Subject: [PATCH 3/3] fix: pr comments resovled --- android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt b/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt index 3956826..d1495b8 100644 --- a/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt +++ b/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt @@ -1,7 +1,7 @@ package com.rcttabview import android.content.res.ColorStateList -import android.view.View +import android.graphics.Color import android.view.View.MeasureSpec import com.facebook.react.bridge.ReadableArray import com.facebook.react.common.MapBuilder