@react-navigation/bottom-tabs 6.0.9 → 6.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "6.0.9",
+  "version": "6.3.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,22 +36,22 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.2.1",
+    "@react-navigation/elements": "^1.3.2",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native": "^6.0.9",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",
     "del-cli": "^3.0.1",
-    "react": "~16.13.1",
-    "react-native": "~0.63.4",
+    "react": "17.0.1",
+    "react-native": "~0.64.3",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.8.0",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
     "typescript": "^4.3.2"
   },
   "peerDependencies": {
@@ -75,5 +75,5 @@
       ]
     ]
   },
-  "gitHead": "e77a5ab9d342a03cd8e20b54938700dfd4e23f42"
+  "gitHead": "c5ef6b5e88426e658123ea8590da583314b9001e"
 }

package/src/index.tsx

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

package/src/navigators/createBottomTabNavigator.tsx

@@ -28,6 +28,7 @@ type Props = DefaultNavigatorOptions<
   BottomTabNavigationConfig;
 
 function BottomTabNavigator({
+  id,
   initialRouteName,
   backBehavior,
   children,
@@ -103,6 +104,7 @@ function BottomTabNavigator({
       BottomTabNavigationOptions,
       BottomTabNavigationEventMap
     >(TabRouter, {
+      id,
       initialRouteName,
       backBehavior,
       children,

package/src/types.tsx

@@ -42,10 +42,12 @@ export type BottomTabNavigationHelpers = NavigationHelpers<
 
 export type BottomTabNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = keyof ParamList
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined
 > = NavigationProp<
   ParamList,
   RouteName,
+  NavigatorID,
   TabNavigationState<ParamList>,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap
@@ -54,9 +56,10 @@ export type BottomTabNavigationProp<
 
 export type BottomTabScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = keyof ParamList
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined
 > = {
-  navigation: BottomTabNavigationProp<ParamList, RouteName>;
+  navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
   route: RouteProp<ParamList, RouteName>;
 };
 

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?.()) {