refactor: drop support for tabBarVisible option

BREAKING CHANGE: We need to add support for specifying style for tab bar in options to support the use cases which need this.

example/src/Screens/BottomTabs.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { View, ScrollView, StyleSheet, Platform } from 'react-native';
-import { Button } from 'react-native-paper';
+import { Platform } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
   getFocusedRouteNameFromRoute,
@@ -8,10 +7,7 @@ import {
   NavigatorScreenParams,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
-import {
-  createBottomTabNavigator,
-  BottomTabScreenProps,
-} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -33,34 +29,6 @@ type BottomTabParams = {
   Chat: undefined;
 };
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
-const AlbumsScreen = ({
-  navigation,
-}: BottomTabScreenProps<BottomTabParams>) => {
-  return (
-    <ScrollView>
-      <View style={styles.buttons}>
-        <Button
-          mode="outlined"
-          onPress={() => navigation.setOptions({ tabBarVisible: false })}
-          style={styles.button}
-        >
-          Hide tab bar
-        </Button>
-        <Button
-          mode="outlined"
-          onPress={() => navigation.setOptions({ tabBarVisible: true })}
-          style={styles.button}
-        >
-          Show tab bar
-        </Button>
-      </View>
-      <Albums scrollEnabled={scrollEnabled} />
-    </ScrollView>
-  );
-};
-
 const BottomTabs = createBottomTabNavigator<BottomTabParams>();
 
 export default function BottomTabsScreen({
@@ -117,7 +85,7 @@ export default function BottomTabsScreen({
       />
       <BottomTabs.Screen
         name="Albums"
-        component={AlbumsScreen}
+        component={Albums}
         options={{
           title: 'Albums',
           tabBarIcon: getTabBarIcon('image-album'),
@@ -126,13 +94,3 @@ export default function BottomTabsScreen({
     </BottomTabs.Navigator>
   );
 }
-
-const styles = StyleSheet.create({
-  buttons: {
-    flexDirection: 'row',
-    padding: 8,
-  },
-  button: {
-    margin: 8,
-  },
-});

packages/bottom-tabs/src/types.tsx

@@ -126,11 +126,6 @@ export type BottomTabNavigationOptions = {
    */
   tabBarTestID?: string;
 
-  /**
-   * Boolean indicating whether the tab bar is visible when this screen is active.
-   */
-  tabBarVisible?: boolean;
-
   /**
    * Animation config for showing and hiding the tab bar.
    */

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -147,9 +147,7 @@ export default function BottomTabBar({
 
   const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
 
-  const shouldShowTabBar =
-    focusedOptions.tabBarVisible !== false &&
-    !(keyboardHidesTabBar && isKeyboardShown);
+  const shouldShowTabBar = !(keyboardHidesTabBar && isKeyboardShown);
 
   const visibilityAnimationConfigRef = React.useRef(
     focusedOptions.tabBarVisibilityAnimationConfig