Add info about navigation prop to drawer content and tab bar

Author: satya164

versioned_docs/version-5.x/bottom-tab-navigator.md

@@ -145,6 +145,22 @@ function MyTabBar({ state, descriptors, navigation }) {
 
 This example will render a basic tab bar with labels.
 
+Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since `useNavigation` is only available inside screens. You get a `navigation` prop for your `tabBar` which you can use instead:
+
+```js
+function MyTabBar({ navigation }) {
+  return (
+    <Button
+      title="Go somewhere"
+      onPress={() => {
+        // Navigate using the `navigation` prop that you received
+        navigation.navigate('SomeScreen');
+      }}
+    />
+  );
+}
+```
+
 #### `tabBarOptions`
 
 An object containing the props for the default tab bar component. If you're using a custom tab bar, these will be passed as props to the tab bar and you can handle them.

versioned_docs/version-5.x/drawer-navigator.md

@@ -265,6 +265,22 @@ function CustomDrawerContent({ progress, ...rest }) {
 }
 ```
 
+Note that you **cannot** use the `useNavigation` hook inside the `drawerContent` since `useNavigation` is only available inside screens. You get a `navigation` prop for your `drawerContent` which you can use instead:
+
+```js
+function CustomDrawerContent({ navigation }) {
+  return (
+    <Button
+      title="Go somewhere"
+      onPress={() => {
+        // Navigate using the `navigation` prop that you received
+        navigation.navigate('SomeScreen');
+      }}
+    />
+  );
+}
+```
+
 To use the custom component, we need to pass it in the `drawerContent` prop:
 
 ```js

versioned_docs/version-5.x/material-top-tab-navigator.md

@@ -255,6 +255,22 @@ function MyTabBar({ state, descriptors, navigation, position }) {
 
 This example will render a basic tab bar with labels.
 
+Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since `useNavigation` is only available inside screens. You get a `navigation` prop for your `tabBar` which you can use instead:
+
+```js
+function MyTabBar({ navigation }) {
+  return (
+    <Button
+      title="Go somewhere"
+      onPress={() => {
+        // Navigate using the `navigation` prop that you received
+        navigation.navigate('SomeScreen');
+      }}
+    />
+  );
+}
+```
+
 #### `tabBarOptions`
 
 An object containing the props for the tab bar component. It can contain the following properties: