Update nesting docs

Author: satya164

versioned_docs/version-7.x/navigation-lifecycle.md

@@ -308,6 +308,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 function ProfileScreen() {
   const navigation = useNavigation();
 
+  // highlight-start
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       // Screen was focused
@@ -318,14 +319,17 @@ function ProfileScreen() {
 
     return unsubscribe;
   }, [navigation]);
+  // highlight-end
 
+  // highlight-start
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('blur', () => {
       console.log('ProfileScreen blurred');
     });
 
     return unsubscribe;
   }, [navigation]);
+  // highlight-end
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -392,6 +396,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 function ProfileScreen() {
   const navigation = useNavigation();
 
+
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       // Screen was focused
@@ -402,14 +407,17 @@ function ProfileScreen() {
 
     return unsubscribe;
   }, [navigation]);
+  // highlight-end
 
+  // highlight-start
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('blur', () => {
       console.log('ProfileScreen blurred');
     });
 
     return unsubscribe;
   }, [navigation]);
+  // highlight-end
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -493,8 +501,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useFocusEffect } from '@react-navigation/native';
 
 function ProfileScreen() {
-  const navigation = useNavigation();
-
+  // highlight-start
   useFocusEffect(
     React.useCallback(() => {
       // Do something when the screen is focused
@@ -507,6 +514,7 @@ function ProfileScreen() {
       };
     }, [])
   );
+  // highlight-end
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -556,8 +564,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useFocusEffect } from '@react-navigation/native';
 
 function ProfileScreen() {
-  const navigation = useNavigation();
-
+  // highlight-start
   useFocusEffect(
     React.useCallback(() => {
       // Do something when the screen is focused
@@ -570,6 +577,7 @@ function ProfileScreen() {
       };
     }, [])
   );
+  // highlight-end
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

versioned_docs/version-7.x/nesting-navigators.md

@@ -798,11 +798,9 @@ navigation.navigate('Root', {
 
 This affects what happens when pressing the back button. When there's an initial screen, the back button will take the user there.
 
-## Nesting multiple navigators
+## Avoiding multiple headers when nesting
 
-It's sometimes useful to nest multiple navigators such as stack, drawer or tabs.
-
-When nesting multiple stack, drawer or bottom tab navigator, headers from both child and parent navigators would be shown. However, usually it's more desirable to show the header in the child navigator and hide the header in the screen of the parent navigator.
+When nesting multiple stack, drawer or bottom tab navigators, headers from both child and parent navigators would be shown. However, usually it's more desirable to show the header in the child navigator and hide the header in the screen of the parent navigator.
 
 To achieve this, you can hide the header in the screen containing the navigator using the `headerShown: false` option.