Web container override (#691)

* PLV now render after first onLayout

* ..

* scrollable node now a public API

* missed override implementation for web

* version bump

Co-authored-by: Talha Naqvi <talha.naqvi@shopify.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "recyclerlistview",
-  "version": "3.1.0-beta.4",
+  "version": "3.1.0-beta.5",
   "description": "The listview that you need and deserve. It was built for performance, uses cell recycling to achieve smooth scrolling.",
   "main": "dist/reactnative/index.js",
   "types": "dist/reactnative/index.d.ts",

src/platform/web/viewrenderer/ViewRenderer.tsx

@@ -13,9 +13,7 @@ export default class ViewRenderer extends BaseViewRenderer<any> {
     private _dim: Dimension = { width: 0, height: 0 };
     private _mainDiv: HTMLDivElement | null = null;
     public componentDidMount(): void {
-        if (super.componentDidMount) {
-            super.componentDidMount();
-        }
+        super.componentDidMount();
         this._checkSizeChange();
     }
 
@@ -42,19 +40,25 @@ export default class ViewRenderer extends BaseViewRenderer<any> {
                 ...this.props.styleOverrides,
                 ...this.animatorStyleOverrides,
             };
-        return (
-            <div ref={this._setRef} style={style}>
-                {this.renderChild()}
-            </div>
-        );
+        const props = {
+            style,
+            ref: this._setRef,
+        };
+        return this._renderItemContainer(props, this.props, this.renderChild()) as JSX.Element;
     }
 
     protected getRef(): object | null {
         return this._mainDiv;
     }
+
+    private _renderItemContainer(props: object, parentProps: ViewRendererProps<any>, children: React.ReactNode): React.ReactNode {
+        return (this.props.renderItemContainer && this.props.renderItemContainer(props, parentProps, children)) || (<div {...props}>{children}</div>);
+    }
+
     private _setRef = (div: HTMLDivElement | null): void => {
         this._mainDiv = div;
     }
+
     private _getTransform(): string {
         return "translate(" + this.props.x + "px," + this.props.y + "px)";
     }