fix: fix headerTransparent not working outside stack navigator

react-navigation · Aug 11, 2021 · 42c43ff · 42c43ff
1 parent 2e47c42
commit 42c43ff
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 13 deletions.
diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx
@@ -2,16 +2,17 @@ import {
   createBottomTabNavigator,
   useBottomTabBarHeight,
 } from '@react-navigation/bottom-tabs';
-import { HeaderBackButton } from '@react-navigation/elements';
+import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements';
 import {
   getFocusedRouteNameFromRoute,
   NavigatorScreenParams,
   ParamListBase,
+  useIsFocused,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
 import { BlurView } from 'expo-blur';
 import * as React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
+import { ScrollView, StatusBar, StyleSheet } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import Albums from '../Shared/Albums';
@@ -32,12 +33,22 @@ type BottomTabParams = {
 };
 
 const AlbumsScreen = () => {
+  const headerHeight = useHeaderHeight();
   const tabBarHeight = useBottomTabBarHeight();
+  const isFocused = useIsFocused();
 
   return (
-    <ScrollView contentContainerStyle={{ paddingBottom: tabBarHeight }}>
-      <Albums scrollEnabled={false} />
-    </ScrollView>
+    <>
+      {isFocused && <StatusBar barStyle="light-content" />}
+      <ScrollView
+        contentContainerStyle={{
+          paddingTop: headerHeight,
+          paddingBottom: tabBarHeight,
+        }}
+      >
+        <Albums scrollEnabled={false} />
+      </ScrollView>
+    </>
   );
 };
 
@@ -94,11 +105,25 @@ export default function BottomTabsScreen({
         component={AlbumsScreen}
         options={{
           title: 'Albums',
+          headerTintColor: '#fff',
+          headerTransparent: true,
+          headerBackground: () => (
+            <BlurView
+              tint="dark"
+              intensity={100}
+              style={StyleSheet.absoluteFill}
+            />
+          ),
           tabBarIcon: getTabBarIcon('image-album'),
-          tabBarStyle: { position: 'absolute' },
+          tabBarInactiveTintColor: 'rgba(255, 255, 255, 0.5)',
+          tabBarActiveTintColor: '#fff',
+          tabBarStyle: {
+            position: 'absolute',
+            borderTopColor: 'rgba(0, 0, 0, .2)',
+          },
           tabBarBackground: () => (
             <BlurView
-              tint="light"
+              tint="dark"
               intensity={100}
               style={StyleSheet.absoluteFill}
             />

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -145,6 +145,10 @@ export default function BottomTabBar({
     tabBarVisibilityAnimationConfig,
     tabBarStyle,
     tabBarBackground,
+    tabBarActiveTintColor,
+    tabBarInactiveTintColor,
+    tabBarActiveBackgroundColor,
+    tabBarInactiveBackgroundColor,
   } = focusedOptions;
 
   const dimensions = useSafeAreaFrame();
@@ -342,12 +346,10 @@ export default function BottomTabBar({
                   to={buildLink(route.name, route.params)}
                   testID={options.tabBarTestID}
                   allowFontScaling={options.tabBarAllowFontScaling}
-                  activeTintColor={options.tabBarActiveTintColor}
-                  inactiveTintColor={options.tabBarInactiveTintColor}
-                  activeBackgroundColor={options.tabBarActiveBackgroundColor}
-                  inactiveBackgroundColor={
-                    options.tabBarInactiveBackgroundColor
-                  }
+                  activeTintColor={tabBarActiveTintColor}
+                  inactiveTintColor={tabBarInactiveTintColor}
+                  activeBackgroundColor={tabBarActiveBackgroundColor}
+                  inactiveBackgroundColor={tabBarInactiveBackgroundColor}
                   button={options.tabBarButton}
                   icon={
                     options.tabBarIcon ??

diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -131,6 +131,7 @@ export default function BottomTabView(props: Props) {
                   route={descriptor.route}
                   navigation={descriptor.navigation}
                   headerShown={descriptor.options.headerShown}
+                  headerTransparent={descriptor.options.headerTransparent}
                   headerStatusBarHeight={
                     descriptor.options.headerStatusBarHeight
                   }

diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx
@@ -234,6 +234,7 @@ function DrawerViewBase({
                 route={descriptor.route}
                 navigation={descriptor.navigation}
                 headerShown={descriptor.options.headerShown}
+                headerTransparent={descriptor.options.headerTransparent}
                 headerStatusBarHeight={descriptor.options.headerStatusBarHeight}
                 header={header({
                   layout: dimensions,

diff --git a/packages/elements/src/Screen.tsx b/packages/elements/src/Screen.tsx
@@ -25,6 +25,7 @@ type Props = {
   header: React.ReactNode;
   headerShown?: boolean;
   headerStatusBarHeight?: number;
+  headerTransparent?: boolean;
   style?: StyleProp<ViewStyle>;
   children: React.ReactNode;
 };
@@ -41,6 +42,7 @@ export default function Screen(props: Props) {
     modal = false,
     header,
     headerShown = true,
+    headerTransparent,
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
     navigation,
     route,
@@ -78,6 +80,7 @@ export default function Screen(props: Props) {
 
                 setHeaderHeight(height);
               }}
+              style={headerTransparent ? styles.absolute : null}
             >
               {header}
             </View>
@@ -97,4 +100,10 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
   },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
 });
diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
@@ -60,6 +60,7 @@ export default function NativeStackView({ state, descriptors }: Props) {
               route={route}
               navigation={navigation}
               headerShown={headerShown}
+              headerTransparent={headerTransparent}
               header={
                 header !== undefined ? (
                   header({