From 7acadb1fe08c97881332c029e328354affb87bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Estev=C3=A3o=20Lucas?= <lucas@work.co>
Date: Mon, 26 Nov 2018 14:01:42 -0500
Subject: [PATCH] feat(react-native): add option to set keyboarVerticalOffset
 to KeyboardAvoidingView wrapping Storybook's view

---
 app/react-native/readme.md                           |  4 +++-
 .../src/preview/components/OnDeviceUI/index.js       | 12 +++++++++++-
 app/react-native/src/preview/index.js                |  1 +
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/react-native/readme.md b/app/react-native/readme.md
index 4cc408d447b..f21620e4c41 100644
--- a/app/react-native/readme.md
+++ b/app/react-native/readme.md
@@ -124,9 +124,11 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
     initialSelection: Object (null)
         -- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }`
     shouldPersistSelection: Boolean (true)
-        -- initialize storybook with the last selected story.`
+        -- initialize storybook with the last selected story.
     shouldDisableKeyboardAvoidingView: Boolean (false)
         -- Disable KeyboardAvoidingView wrapping Storybook's view
+    keyboardAvoidingViewVerticalOffset: Number (0)
+        -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
 }
 ```
 
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index bba3360275a..8fea8995f0c 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -111,7 +111,14 @@ export default class OnDeviceUI extends PureComponent {
   };
 
   render() {
-    const { stories, events, url, isUIHidden, shouldDisableKeyboardAvoidingView } = this.props;
+    const {
+      stories,
+      events,
+      url,
+      isUIHidden,
+      shouldDisableKeyboardAvoidingView,
+      keyboardAvoidingViewVerticalOffset,
+    } = this.props;
     const {
       tabOpen,
       slideBetweenAnimation,
@@ -137,6 +144,7 @@ export default class OnDeviceUI extends PureComponent {
         <KeyboardAvoidingView
           enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
           behavior={IS_IOS ? 'padding' : null}
+          keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset}
           style={style.flex}
         >
           <AbsolutePositionedKeyboardAwareView
@@ -200,6 +208,7 @@ OnDeviceUI.propTypes = {
     storyFn: PropTypes.func.isRequired,
   }),
   shouldDisableKeyboardAvoidingView: PropTypes.bool,
+  keyboardAvoidingViewVerticalOffset: PropTypes.number,
 };
 
 OnDeviceUI.defaultProps = {
@@ -208,4 +217,5 @@ OnDeviceUI.defaultProps = {
   isUIHidden: false,
   initialStory: null,
   shouldDisableKeyboardAvoidingView: false,
+  keyboardAvoidingViewVerticalOffset: 0,
 };
diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js
index f7c0b9e9ac7..4d5bea15257 100644
--- a/app/react-native/src/preview/index.js
+++ b/app/react-native/src/preview/index.js
@@ -116,6 +116,7 @@ export default class Preview {
               tabOpen={params.tabOpen}
               initialStory={setInitialStory ? preview._getInitialStory() : null}
               shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
+              keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
             />
           );
         }