@react-navigation/bottom-tabs 7.0.0-alpha.1 → 7.0.0-alpha.11

package/src/views/ScreenFallback.tsx

@@ -1,11 +1,16 @@
-import { ResourceSavingView } from '@react-navigation/elements';
 import * as React from 'react';
-import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import {
+  Animated,
+  type StyleProp,
+  View,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
 
 type Props = {
-  visible: boolean;
-  children: React.ReactNode;
   enabled: boolean;
+  active: 0 | 1 | 2 | Animated.AnimatedInterpolation<0 | 1>;
+  children: React.ReactNode;
   freezeOnBlur?: boolean;
   style?: StyleProp<ViewStyle>;
 };
@@ -33,18 +38,12 @@ export const MaybeScreenContainer = ({
   return <View {...rest} />;
 };
 
-export function MaybeScreen({ visible, children, ...rest }: Props) {
+export function MaybeScreen({ enabled, active, ...rest }: ViewProps & Props) {
   if (Screens?.screensEnabled?.()) {
     return (
-      <Screens.Screen activityState={visible ? 2 : 0} {...rest}>
-        {children}
-      </Screens.Screen>
+      <Screens.Screen enabled={enabled} activityState={active} {...rest} />
     );
   }
 
-  return (
-    <ResourceSavingView visible={visible} {...rest}>
-      {children}
-    </ResourceSavingView>
-  );
+  return <View {...rest} />;
 }

package/src/views/TabBarIcon.tsx

@@ -1,11 +1,11 @@
 import type { Route } from '@react-navigation/native';
 import React from 'react';
 import {
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import { Badge } from './Badge';
@@ -27,6 +27,8 @@ type Props = {
   style: StyleProp<ViewStyle>;
 };
 
+const ICON_SIZE = 25;
+
 export function TabBarIcon({
   route: _,
   horizontal,
@@ -39,8 +41,6 @@ export function TabBarIcon({
   renderIcon,
   style,
 }: Props) {
-  const size = 25;
-
   // We render the icon twice at the same position on top of each other:
   // active and inactive one, so we can fade between them.
   return (
@@ -50,25 +50,21 @@ export function TabBarIcon({
       <View style={[styles.icon, { opacity: activeOpacity }]}>
         {renderIcon({
           focused: true,
-          size,
+          size: ICON_SIZE,
           color: activeTintColor,
         })}
       </View>
       <View style={[styles.icon, { opacity: inactiveOpacity }]}>
         {renderIcon({
           focused: false,
-          size,
+          size: ICON_SIZE,
           color: inactiveTintColor,
         })}
       </View>
       <Badge
         visible={badge != null}
-        style={[
-          styles.badge,
-          horizontal ? styles.badgeHorizontal : styles.badgeVertical,
-          badgeStyle,
-        ]}
-        size={(size * 3) / 4}
+        style={[styles.badge, badgeStyle]}
+        size={ICON_SIZE * 0.75}
       >
         {badge}
       </Badge>
@@ -88,23 +84,19 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
     // Workaround for react-native >= 0.54 layout bug
-    minWidth: 25,
+    minWidth: ICON_SIZE,
   },
   iconVertical: {
-    flex: 1,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
   },
   iconHorizontal: {
-    height: '100%',
-    marginTop: 3,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
   },
   badge: {
     position: 'absolute',
-    left: 3,
-  },
-  badgeVertical: {
-    top: 3,
-  },
-  badgeHorizontal: {
-    top: 7,
+    right: -5,
+    top: -5,
   },
 });