Avoid duplicate screen name warnings

Author: satya164

static/examples/6.x/tab-based-navigation-stack.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { Button, Text, View } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
 
 function DetailsScreen() {
   return (
@@ -64,8 +64,8 @@ export default function App() {
   return (
     <NavigationContainer>
       <Tab.Navigator screenOptions={{ headerShown: false }}>
-        <Tab.Screen name="Home" component={HomeStackScreen} />
-        <Tab.Screen name="Settings" component={SettingsStackScreen} />
+        <Tab.Screen name="HomeStack" component={HomeStackScreen} />
+        <Tab.Screen name="SettingsStack" component={SettingsStackScreen} />
       </Tab.Navigator>
     </NavigationContainer>
   );

static/examples/7.x/tab-based-navigation-stack.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { Button, Text, View } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
 
 function DetailsScreen() {
   return (
@@ -64,8 +64,8 @@ export default function App() {
   return (
     <NavigationContainer>
       <Tab.Navigator screenOptions={{ headerShown: false }}>
-        <Tab.Screen name="Home" component={HomeStackScreen} />
-        <Tab.Screen name="Settings" component={SettingsStackScreen} />
+        <Tab.Screen name="HomeStack" component={HomeStackScreen} />
+        <Tab.Screen name="SettingsStack" component={SettingsStackScreen} />
       </Tab.Navigator>
     </NavigationContainer>
   );

versioned_docs/version-6.x/tab-based-navigation.md

@@ -155,7 +155,7 @@ function SettingsScreen({ navigation }) {
 
 ## A stack navigator for each tab
 
-Usually tabs don't just display one screen — for example, on your Twitter feed, you can tap on a tweet and it brings you to a new screen within that tab with all of the replies. You can think of this as there being separate navigation stacks within each tab, and that's exactly how we will model it in React Navigation.
+Often tabs don't just display one screen — for example, on your Twitter feed, you can tap on a tweet and it brings you to a new screen within that tab with all of the replies. You can think of this as there being separate navigation stacks within each tab, and that's exactly how we will model it in React Navigation.
 
 <samp id="tab-based-navigation-stack" />
 
@@ -226,8 +226,8 @@ export default function App() {
   return (
     <NavigationContainer>
       <Tab.Navigator screenOptions={{ headerShown: false }}>
-        <Tab.Screen name="Home" component={HomeStackScreen} />
-        <Tab.Screen name="Settings" component={SettingsStackScreen} />
+        <Tab.Screen name="HomeStack" component={HomeStackScreen} />
+        <Tab.Screen name="SettingsStack" component={SettingsStackScreen} />
       </Tab.Navigator>
     </NavigationContainer>
   );

versioned_docs/version-7.x/tab-based-navigation.md

@@ -410,7 +410,7 @@ function SettingsScreen() {
 
 ## A stack navigator for each tab
 
-Usually tabs don't just display one screen — for example, on your Twitter feed, you can tap on a tweet and it brings you to a new screen within that tab with all of the replies. You can think of this as there being separate navigation stacks within each tab, and that's exactly how we will model it in React Navigation.
+Often tabs don't just display one screen — for example, on your Twitter feed, you can tap on a tweet and it brings you to a new screen within that tab with all of the replies. You can think of this as there being separate navigation stacks within each tab, and that's exactly how we will model it in React Navigation.
 
 <samp id="tab-based-navigation-stack" />
 
@@ -485,8 +485,8 @@ export default function App() {
   return (
     <NavigationContainer>
       <Tab.Navigator screenOptions={{ headerShown: false }}>
-        <Tab.Screen name="Home" component={HomeStackScreen} />
-        <Tab.Screen name="Settings" component={SettingsStackScreen} />
+        <Tab.Screen name="HomeStack" component={HomeStackScreen} />
+        <Tab.Screen name="SettingsStack" component={SettingsStackScreen} />
       </Tab.Navigator>
     </NavigationContainer>
   );