diff --git a/docs/with-navigation.md b/docs/with-navigation.md
index 93c931e668b..801c15323ec 100644
--- a/docs/with-navigation.md
+++ b/docs/with-navigation.md
@@ -6,7 +6,7 @@ sidebar_label: withNavigation
 
 `withNavigation` is a higher order component which passes the `navigation` prop into a wrapped component. It's useful when you cannot pass the `navigation` prop into the component directly, or don't want to pass it in case of a deeply nested child.
 
-- `withNavigation(Component)` returns a Component.
+- `withNavigation(Component, config)` returns a Component.
 
 ## Example
 
@@ -30,10 +30,20 @@ export default withNavigation(MyBackButton);
 
 - If you wish to use the `ref` prop on the wrapped component, you must pass the `onRef` prop instead. For example,
 
-```
-// MyBackButton.ts
+```js
+// MyBackButton.js
 export default withNavigation(MyBackButton);
 
-// MyNavBar.ts
+// MyNavBar.js
+<MyBackButton onRef={(elem) => this.backButton = elem} />
+```
+
+- If you need to use `withNavigation` HOC as the wrapped component of a custom HOC that use `onRef` prop API too, in order to prevent `onRef` callback fuction be called twice, `onRef` injectiong must be disabled using second param `config` object.
+
+```js
+// MyBackButton.js
+export myCustomHOC(withNavigation(MyBackButton, { forwardRef: false }));
+
+// MyNavBar.js
 <MyBackButton onRef={(elem) => this.backButton = elem} />
 ```
diff --git a/website/versioned_docs/version-3.x/with-navigation.md b/website/versioned_docs/version-3.x/with-navigation.md
new file mode 100644
index 00000000000..5ed087c8b4e
--- /dev/null
+++ b/website/versioned_docs/version-3.x/with-navigation.md
@@ -0,0 +1,50 @@
+---
+id: version-3.x-with-navigation
+title: withNavigation
+sidebar_label: withNavigation
+original_id: with-navigation
+---
+
+`withNavigation` is a higher order component which passes the `navigation` prop into a wrapped component. It's useful when you cannot pass the `navigation` prop into the component directly, or don't want to pass it in case of a deeply nested child.
+
+- `withNavigation(Component, config)` returns a Component.
+
+## Example
+
+```js
+import React from 'react';
+import { Button } from 'react-native';
+import { withNavigation } from 'react-navigation';
+
+class MyBackButton extends React.Component {
+  render() {
+    return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
+  }
+}
+
+// withNavigation returns a component that wraps MyBackButton and passes in the
+// navigation prop
+export default withNavigation(MyBackButton);
+```
+
+## Notes
+
+- If you wish to use the `ref` prop on the wrapped component, you must pass the `onRef` prop instead. For example,
+
+```js
+// MyBackButton.js
+export default withNavigation(MyBackButton);
+
+// MyNavBar.js
+<MyBackButton onRef={(elem) => this.backButton = elem} />
+```
+
+- If you need to use `withNavigation` HOC as the wrapped component of a custom HOC that use `onRef` prop API too, in order to prevent `onRef` callback fuction be called twice, `onRef` injectiong must be disabled using second param `config` object.
+
+```js
+// MyBackButton.js
+export myCustomHOC(withNavigation(MyBackButton, { forwardRef: false }));
+
+// MyNavBar.js
+<MyBackButton onRef={(elem) => this.backButton = elem} />
+```
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 00000000000..fb57ccd13af
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+