feat: add a tabBarBackground option to bottom tabs

react-navigation · May 14, 2021 · 2f282f1 · 2f282f1
1 parent 5165eb7
commit 2f282f1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx
@@ -1,12 +1,17 @@
 import * as React from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { BlurView } from 'expo-blur';
 import {
   getFocusedRouteNameFromRoute,
   ParamListBase,
   NavigatorScreenParams,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {
+  createBottomTabNavigator,
+  useBottomTabBarHeight,
+} from '@react-navigation/bottom-tabs';
 import { HeaderBackButton } from '@react-navigation/elements';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -28,6 +33,16 @@ type BottomTabParams = {
   TabChat: undefined;
 };
 
+const AlbumsScreen = () => {
+  const tabBarHeight = useBottomTabBarHeight();
+
+  return (
+    <ScrollView contentContainerStyle={{ paddingBottom: tabBarHeight }}>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
 const BottomTabs = createBottomTabNavigator<BottomTabParams>();
 
 export default function BottomTabsScreen({
@@ -78,10 +93,18 @@ export default function BottomTabsScreen({
       />
       <BottomTabs.Screen
         name="TabAlbums"
-        component={Albums}
+        component={AlbumsScreen}
         options={{
           title: 'Albums',
           tabBarIcon: getTabBarIcon('image-album'),
+          tabBarStyle: { position: 'absolute' },
+          tabBarBackground: () => (
+            <BlurView
+              tint="light"
+              intensity={100}
+              style={StyleSheet.absoluteFill}
+            />
+          ),
         }}
       />
     </BottomTabs.Navigator>

diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
@@ -229,6 +229,15 @@ export type BottomTabNavigationOptions = HeaderOptions & {
    */
   tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 
+  /**
+   * Component to use as background for the tab bar.
+   * You could render an image, a gradient, blur view etc.
+   *
+   * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
+   * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+   */
+  tabBarBackground?: () => React.ReactNode;
+
   /**
    * Whether this screen should be unmounted when navigating away from it.
    * Defaults to `false`.

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -144,6 +144,7 @@ export default function BottomTabBar({
     tabBarHideOnKeyboard = false,
     tabBarVisibilityAnimationConfig,
     tabBarStyle,
+    tabBarBackground,
   } = focusedOptions;
 
   const dimensions = useSafeAreaFrame();
@@ -244,12 +245,15 @@ export default function BottomTabBar({
     layout,
   });
 
+  const tabBarBackgroundElement = tabBarBackground?.();
+
   return (
     <Animated.View
       style={[
         styles.tabBar,
         {
-          backgroundColor: colors.card,
+          backgroundColor:
+            tabBarBackgroundElement != null ? 'transparent' : colors.card,
           borderTopColor: colors.border,
         },
         {
@@ -278,6 +282,9 @@ export default function BottomTabBar({
       pointerEvents={isTabBarHidden ? 'none' : 'auto'}
       onLayout={handleLayout}
     >
+      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+        {tabBarBackgroundElement}
+      </View>
       <View accessibilityRole="tablist" style={styles.content}>
         {routes.map((route, index) => {
           const focused = index === state.index;