Tweak custom tab bar example

react-navigation · Oct 22, 2023 · eeb0d4e · eeb0d4e
1 parent a7ef158
commit eeb0d4e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,