Add migration instructions for unmountOnBlur

Author: satya164

versioned_docs/version-7.x/upgrading-from-6.x.md

@@ -336,7 +336,7 @@ The `popToTopOnBlur` option provides an alternative approach - it pops the scree
 
 See [Bottom Tab Navigator](bottom-tab-navigator.md#poptotoponblur) and [Drawer Navigator](drawer-navigator.md#poptotoponblur) docs for usage.
 
-It's still possible to achieve the old behavior of `unmountOnBlur` by using the useIsFocused hook in the screen:
+It's still possible to achieve the old behavior of `unmountOnBlur` by using the [`useIsFocused`](use-is-focused.md) hook in the screen:
 
 ```js
 const isFocused = useIsFocused();
@@ -346,7 +346,45 @@ if (!isFocused) {
 }
 ```
 
-This could also be combined with the new [layout props](#new-layout-props) to specify it at the screen configuration level.
+This could also be combined with the new [layout props](#new-layout-props) to specify it at the screen configuration level to make the migration easier.
+
+To achieve this, define a component that uses the `useIsFocused` hook to conditionally render its children:
+
+```js
+function UnmountOnBlur({ children }) {
+  const isFocused = useIsFocused();
+
+  if (!isFocused) {
+    return null;
+  }
+
+  return children;
+}
+```
+
+Then use the component in `layout` prop of the screen:
+
+```diff lang=js
+<Tab.Screen
+  name="MyScreen"
+  component={MyScreen}
++   layout={({ children }) => <UnmountOnBlur>{children}</UnmountOnBlur>}
+  options={{
+-     unmountOnBlur: true,
+  }}
+/>
+```
+
+Or `screenLayout` prop of the navigator:
+
+```diff lang=js
+<Tab.Navigator
++   screenLayout={({ children }) => <UnmountOnBlur>{children}</UnmountOnBlur>}
+  screenOptions={{
+-     unmountOnBlur: true,
+  }}
+>
+```
 
 #### The `tabBarTestID` option is renamed to `tabBarButtonTestID` in Bottom Tab Navigator and Material Top Tab Navigator