feat(react-native): add option to set keyboarVerticalOffset to KeyboardAvoidingView wrapping Storybook's view

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
 }
 ```
 

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,
 };

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}
             />
           );
         }