Added startInvisible prop to PullToRefresh comp

This allows the user to hide the pullDownContent when there are no touches.
Helps if the scrollable content has any opacity, or loads in after the pullDownContent

__tests__/components/PullToRefresh.spec.tsx

@@ -14,6 +14,7 @@ describe("PullToRefresh spec", () => {
                     pullDownThreshold={200}
                     triggerHeight={100}
                     backgroundColor="white"
+                    startInvisible={false}
                 >
                     <div>Test</div>
                 </PullToRefresh>

__tests__/components/__snapshots__/PullToRefresh.spec.tsx.snap

@@ -21,6 +21,7 @@ exports[`PullToRefresh spec App shows PullToRefresh 1`] = `
         "position": "absolute",
         "right": 0,
         "top": 0,
+        "visibility": "visible",
       }
     }
   >

src/components/PullToRefresh.tsx

@@ -8,6 +8,7 @@ export interface PullToRefreshProps {
     onRefresh: () => Promise<any>;
     triggerHeight?: number;
     backgroundColor?: string;
+    startInvisible?: boolean;
 }
 
 export interface PullToRefreshState {
@@ -115,6 +116,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
 
         this.container.style.overflow = "visible";
         this.container.style.transform = `translate(0px, ${this.currentY - this.startY}px)`;
+        this.pullDown.style.visibility = "visible";
     }
 
     private onEnd() {
@@ -123,6 +125,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
         this.currentY = 0;
 
         if (!this.state.pullToRefreshThresholdBreached) {
+            this.pullDown.style.visibility = this.props.startInvisible ? "hidden" : "visible";
             this.initContainer();
             return;
         }
@@ -154,7 +157,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
     }
 
     private renderPullDownContent() {
-        const {releaseContent, pullDownContent, refreshContent} = this.props;
+        const {releaseContent, pullDownContent, refreshContent, startInvisible} = this.props;
         const {onRefreshing, pullToRefreshThresholdBreached} = this.state;
         const content = onRefreshing ? refreshContent : pullToRefreshThresholdBreached ? releaseContent : pullDownContent;
         const contentStyle: React.CSSProperties = {
@@ -163,6 +166,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
             left: 0,
             right: 0,
             top: 0,
+            visibility: startInvisible ? "hidden" : "visible",
         };
         return (
             <div style={contentStyle} ref={this.pullDownRef}>