View component support renderDelay prop for delaying rendering content

Author: ethanshar

generatedTypes/components/view/index.d.ts

@@ -22,6 +22,10 @@ export interface ViewPropTypes extends ViewProps, ContainerModifiers {
      * TODO: probobly isn't needed
      */
     height?: string | number;
+    /**
+     * Experimental: Pass time in ms to delay render
+     */
+    renderDelay?: number;
 }
 declare const _default: React.ComponentClass<ViewPropTypes, any> | React.FunctionComponent<ViewPropTypes>;
 export default _default;

src/components/view/index.tsx

@@ -24,25 +24,47 @@ export interface ViewPropTypes extends ViewProps, ContainerModifiers {
    * TODO: probobly isn't needed
    */
   height?: string | number;
+  /**
+   * Experimental: Pass time in ms to delay render
+   */
+  renderDelay?: number;
 }
 type PropsTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & ViewPropTypes;
 
+interface ViewState {
+  ready: boolean;
+}
+
 /**
  * @description: An enhanced View component
  * @extends: View
  * @extendslink: https://facebook.github.io/react-native/docs/view.html
  * @modifiers: margins, paddings, alignments, background, borderRadius
  */
-class View extends PureComponent<PropsTypes> {
+class View extends PureComponent<PropsTypes, ViewState> {
   static displayName = 'View';
   private Container: React.ClassType<any, any, any>;
+
   constructor(props: PropsTypes) {
     super(props);
 
     this.Container = props.useSafeArea && Constants.isIOS ? SafeAreaView : RNView;
     if (props.animated) {
       this.Container = Animated.createAnimatedComponent(this.Container);
     }
+
+    this.state = {
+      ready: !props.renderDelay
+    };
+  }
+
+  componentDidMount() {
+    const {renderDelay} = this.props;
+    if (renderDelay) {
+      setTimeout(() => {
+        this.setState({ready: true});
+      }, renderDelay);
+    }
   }
 
   // TODO: do we need this?
@@ -52,6 +74,10 @@ class View extends PureComponent<PropsTypes> {
   }
 
   render() {
+    if (!this.state.ready) {
+      return null;
+    }
+
     // (!) extract left, top, bottom... props to avoid passing them on Android
     // eslint-disable-next-line
     const {