diff --git a/.storybook/preview.js b/.storybook/preview.js
index 65508e6bed71b..f02e3938d182b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -6,6 +6,7 @@ import HTMLEngineProvider from '../src/components/HTMLEngineProvider';
 import OnyxProvider from '../src/components/OnyxProvider';
 import {LocaleContextProvider} from '../src/components/withLocalize';
 import ONYXKEYS from '../src/ONYXKEYS';
+import MockNavigationProvider from '../__mocks__/MockNavigationProvider';
 
 Onyx.init({
     keys: ONYXKEYS,
@@ -18,6 +19,7 @@ const decorators = [
                 OnyxProvider,
                 LocaleContextProvider,
                 HTMLEngineProvider,
+                MockNavigationProvider,
             ]}
         >
             <Story />
diff --git a/__mocks__/MockNavigationProvider.js b/__mocks__/MockNavigationProvider.js
new file mode 100644
index 0000000000000..67d4790f6b893
--- /dev/null
+++ b/__mocks__/MockNavigationProvider.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {NavigationContext} from '@react-navigation/native';
+
+const propTypes = {
+    /** Rendered child component */
+    children: PropTypes.node.isRequired,
+};
+
+const MockNavigationProvider = props => (
+    <NavigationContext.Provider
+        value={{
+            isFocused: () => true,
+            addListener: () => {},
+            removeListener: () => {},
+        }}
+    >
+        {props.children}
+    </NavigationContext.Provider>
+);
+
+MockNavigationProvider.propTypes = propTypes;
+
+export default MockNavigationProvider;