Merge pull request #5 from jcoreio/inner-view-wrapper-style

feat: add innerViewWrapperStyle prop

Author: jedwards1211

README.md

@@ -141,6 +141,12 @@ Extra inline styles to add to the inner "viewport" element.
 
 Extra inline styles to add to the view wrapper elements.
 
+##### `innerViewWrapperStyle: Object`
+
+Extra inline styles to add to the inner div between the `viewStyle` div and your
+view content element. (The inner div was added to ensure perfect height
+animation.)
+
 ##### `rootRef: (node: ?HTMLDivElement) => any`
 
 The `ref` to pass to the root `<div>` element rendered by `ViewSlider`.

src/index.js

@@ -40,6 +40,7 @@ export type Props = {
   viewportClassName?: string,
   viewportStyle: Object,
   viewStyle?: ?Object,
+  innerViewWrapperStyle?: ?Object,
   rootRef?: (node: ?React.ElementRef<'div'>) => mixed,
   viewportRef?: (node: ?React.ElementRef<'div'>) => mixed,
   rtl: boolean,
@@ -180,6 +181,7 @@ export default class ViewSlider extends React.Component<Props, State> {
       spacing,
       rtl,
       viewStyle,
+      innerViewWrapperStyle,
     } = this.props
     const { activeView, transitioning } = this.state
 
@@ -205,7 +207,9 @@ export default class ViewSlider extends React.Component<Props, State> {
         style={prefixer.prefix(style)}
         ref={c => (this.views[index] = c)}
       >
-        <div style={{ width: '100%' }}>
+        <div
+          style={prefixer.prefix({ width: '100%', ...innerViewWrapperStyle })}
+        >
           <TransitionContext state={this.getTransitionState(index)}>
             {this.props.renderView({
               index,

src/simple.js

@@ -19,6 +19,7 @@ export type Props = {
   viewportClassName?: string,
   viewportStyle?: Object,
   viewStyle?: ?Object,
+  innerViewWrapperStyle?: ?Object,
   rootRef?: (node: ?React.ElementRef<'div'>) => mixed,
   viewportRef?: (node: ?React.ElementRef<'div'>) => mixed,
   rtl?: ?boolean,