@react-navigation/bottom-tabs 6.0.7 → 6.2.0

package/src/index.tsx

@@ -22,6 +22,7 @@ export type {
   BottomTabBarButtonProps,
   BottomTabBarProps,
   BottomTabHeaderProps,
+  BottomTabNavigationEventMap,
   BottomTabNavigationOptions,
   BottomTabNavigationProp,
   BottomTabScreenProps,

package/src/navigators/createBottomTabNavigator.tsx

@@ -34,12 +34,16 @@ function BottomTabNavigator({
   screenListeners,
   screenOptions,
   sceneContainerStyle,
-  // @ts-expect-error: lazy is deprecated
-  lazy,
-  // @ts-expect-error: tabBarOptions is deprecated
-  tabBarOptions,
-  ...rest
+  ...restWithDeprecated
 }: Props) {
+  const {
+    // @ts-expect-error: lazy is deprecated
+    lazy,
+    // @ts-expect-error: tabBarOptions is deprecated
+    tabBarOptions,
+    ...rest
+  } = restWithDeprecated;
+
   let defaultScreenOptions: BottomTabNavigationOptions = {};
 
   if (tabBarOptions) {

package/src/views/Badge.tsx

@@ -23,14 +23,14 @@ type Props = {
 };
 
 export default function Badge({
-  visible = true,
-  size = 18,
   children,
   style,
+  visible = true,
+  size = 18,
   ...rest
 }: Props) {
   const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
-  const [rendered, setRendered] = React.useState(visible ? true : false);
+  const [rendered, setRendered] = React.useState(visible);
 
   const theme = useTheme();
 
@@ -52,12 +52,12 @@ export default function Badge({
     return () => opacity.stopAnimation();
   }, [opacity, rendered, visible]);
 
-  if (visible && !rendered) {
-    setRendered(true);
-  }
-
-  if (!visible && !rendered) {
-    return null;
+  if (!rendered) {
+    if (visible) {
+      setRendered(true);
+    } else {
+      return null;
+    }
   }
 
   // @ts-expect-error: backgroundColor definitely exists
@@ -73,7 +73,6 @@ export default function Badge({
       numberOfLines={1}
       style={[
         {
-          opacity,
           transform: [
             {
               scale: opacity.interpolate({
@@ -82,12 +81,13 @@ export default function Badge({
               }),
             },
           ],
-          backgroundColor,
           color: textColor,
-          fontSize,
           lineHeight: size - 1,
           height: size,
           minWidth: size,
+          opacity,
+          backgroundColor,
+          fontSize,
           borderRadius,
         },
         styles.container,

package/src/views/BottomTabView.tsx

@@ -92,6 +92,7 @@ export default function BottomTabView(props: Props) {
     <SafeAreaProviderCompat>
       <MaybeScreenContainer
         enabled={detachInactiveScreens}
+        hasTwoStates
         style={styles.container}
       >
         {routes.map((route, index) => {

package/src/views/ScreenFallback.tsx

@@ -22,6 +22,7 @@ export const MaybeScreenContainer = ({
   ...rest
 }: ViewProps & {
   enabled: boolean;
+  hasTwoStates: boolean;
   children: React.ReactNode;
 }) => {
   if (Screens?.screensEnabled?.()) {