From eeb0d4e00528df8ded02ac9cbae37423d728aaf6 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Mon, 23 Oct 2023 00:32:48 +0200
Subject: [PATCH] Tweak custom tab bar example

---
 .../version-6.x/bottom-tab-navigator.md        |  3 +--
 .../version-6.x/custom-navigators.md           | 18 ++++++++++--------
 .../version-6.x/material-top-tab-navigator.md  |  3 +--
 .../version-7.x/custom-navigators.md           | 14 ++++++++------
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/versioned_docs/version-6.x/bottom-tab-navigator.md b/versioned_docs/version-6.x/bottom-tab-navigator.md
index b0ba8793664..d5902dcf7a5 100755
--- a/versioned_docs/version-6.x/bottom-tab-navigator.md
+++ b/versioned_docs/version-6.x/bottom-tab-navigator.md
@@ -112,8 +112,7 @@ function MyTabBar({ state, descriptors, navigation }) {
           });
 
           if (!isFocused && !event.defaultPrevented) {
-            // The `merge: true` option makes sure that the params inside the tab screen are preserved
-            navigation.navigate({ name: route.name, merge: true });
+            navigation.navigate(route.name, route.params);
           }
         };
 
diff --git a/versioned_docs/version-6.x/custom-navigators.md b/versioned_docs/version-6.x/custom-navigators.md
index 021082ca45d..b2939bce632 100755
--- a/versioned_docs/version-6.x/custom-navigators.md
+++ b/versioned_docs/version-6.x/custom-navigators.md
@@ -74,26 +74,27 @@ function TabNavigator({
   return (
     <NavigationContent>
       <View style={[{ flexDirection: 'row' }, tabBarStyle]}>
-        {state.routes.map((route) => (
+        {state.routes.map((route, index) => (
           <Pressable
             key={route.key}
             onPress={() => {
+              const isFocused = state.index === index;
               const event = navigation.emit({
                 type: 'tabPress',
                 target: route.key,
                 canPreventDefault: true,
               });
 
-              if (!event.defaultPrevented) {
+              if (!isFocused && !event.defaultPrevented) {
                 navigation.dispatch({
-                  ...TabActions.jumpTo(route.name),
+                  ...TabActions.jumpTo(route.name, route.params),
                   target: state.key,
                 });
               }
             }}
             style={{ flex: 1 }}
           >
-            <Text>{descriptors[route.key].options.title || route.name}</Text>
+            <Text>{descriptors[route.key].options.title ??  route.name}</Text>
           </Pressable>
         ))}
       </View>
@@ -252,20 +253,21 @@ function TabNavigator({
   return (
     <NavigationContent>
       <View style={[{ flexDirection: 'row' }, tabBarStyle]}>
-        {state.routes.map((route) => (
+        {state.routes.map((route, index) => (
           <Pressable
             key={route.key}
             onPress={() => {
+              const isFocused = state.index === index;
               const event = navigation.emit({
                 type: 'tabPress',
                 target: route.key,
                 canPreventDefault: true,
                 data: {
-                  isAlreadyFocused: route.key === state.routes[state.index].key,
+                  isAlreadyFocused: isFocused,
                 },
               });
 
-              if (!event.defaultPrevented) {
+              if (!isFocused && !event.defaultPrevented) {
                 navigation.dispatch({
                   ...CommonActions.navigate(route),
                   target: state.key,
@@ -274,7 +276,7 @@ function TabNavigator({
             }}
             style={{ flex: 1 }}
           >
-            <Text>{descriptors[route.key].options.title || route.name}</Text>
+            <Text>{descriptors[route.key].options.title ?? route.name}</Text>
           </Pressable>
         ))}
       </View>
diff --git a/versioned_docs/version-6.x/material-top-tab-navigator.md b/versioned_docs/version-6.x/material-top-tab-navigator.md
index a279668fd94..3c7f9e578d4 100755
--- a/versioned_docs/version-6.x/material-top-tab-navigator.md
+++ b/versioned_docs/version-6.x/material-top-tab-navigator.md
@@ -156,8 +156,7 @@ function MyTabBar({ state, descriptors, navigation, position }) {
           });
 
           if (!isFocused && !event.defaultPrevented) {
-            // The `merge: true` option makes sure that the params inside the tab screen are preserved
-            navigation.navigate({ name: route.name, merge: true });
+            navigation.navigate(route.name, route.params);
           }
         };
 
diff --git a/versioned_docs/version-7.x/custom-navigators.md b/versioned_docs/version-7.x/custom-navigators.md
index f159a158f1e..70acaeba829 100755
--- a/versioned_docs/version-7.x/custom-navigators.md
+++ b/versioned_docs/version-7.x/custom-navigators.md
@@ -77,22 +77,23 @@ function TabNavigator({
           <Pressable
             key={route.key}
             onPress={() => {
+              const isFocused = state.index === index;
               const event = navigation.emit({
                 type: 'tabPress',
                 target: route.key,
                 canPreventDefault: true,
               });
 
-              if (!event.defaultPrevented) {
+              if (!isFocused && !event.defaultPrevented) {
                 navigation.dispatch({
-                  ...TabActions.jumpTo(route.name),
+                  ...TabActions.jumpTo(route.name, route.params),
                   target: state.key,
                 });
               }
             }}
             style={{ flex: 1 }}
           >
-            <Text>{descriptors[route.key].options.title || route.name}</Text>
+            <Text>{descriptors[route.key].options.title ?? route.name}</Text>
           </Pressable>
         ))}
       </View>
@@ -251,20 +252,21 @@ function TabNavigator({
   return (
     <NavigationContent>
       <View style={[{ flexDirection: 'row' }, tabBarStyle]}>
-        {state.routes.map((route) => (
+        {state.routes.map((route, index) => (
           <Pressable
             key={route.key}
             onPress={() => {
+              const isFocused = state.index === index;
               const event = navigation.emit({
                 type: 'tabPress',
                 target: route.key,
                 canPreventDefault: true,
                 data: {
-                  isAlreadyFocused: route.key === state.routes[state.index].key,
+                  isAlreadyFocused: isFocused,
                 },
               });
 
-              if (!event.defaultPrevented) {
+              if (!isFocused && !event.defaultPrevented) {
                 navigation.dispatch({
                   ...CommonActions.navigate(route),
                   target: state.key,