Function utility that serves as workaround for https://github.com/wix/react-native-navigation/issues/838

delayTabRender.js

import React, { Component } from 'react';
import hoistStatics from 'hoist-non-react-statics';

/**
 * Function utility that serves as workaround for https://github.com/wix/react-native-navigation/issues/838#issuecomment-320475935
 * It waits for 'didAppear' event to happen on the native side before rendering content into the screen.
 * That avoids annoying flickering when switching to a new bottom tab for the first time.
 * @param tabId
 * @returns {function(ReactClass.<*>)}
 */
export default function delayTabRender(tabId: number) {
  return (WrappedComponent: ReactClass<*>): ReactClass<*> => {
    type Props = {
      navigator: *,
    };
    type State = {
      shouldRender: boolean,
    };
    class DelayedComponent extends Component<void, Props, State> {
      state = {
        shouldRender: false,
      };
      isVisited: boolean = false;

      constructor(props: Props) {
        super(props);
        this.props.navigator.setOnNavigatorEvent(
          this.onNavigatorEvent.bind(this),
        );
      }

      onNavigatorEvent(event: *) {
        if (
          event.id === 'bottomTabSelected' &&
          event.selectedTabIndex === tabId
        ) {
          // First time switching to a new tab
          this.isVisited = true;
        }
        if (
          event.type === 'ScreenChangedEvent' &&
          event.id === 'didAppear' &&
          this.isVisited
        ) {
          this.setState({
            shouldRender: true,
          });
        }
      }

      render() {
        return this.state.shouldRender
          ? <WrappedComponent {...this.props} />
          : null;
      }
    }
    return hoistStatics(DelayedComponent, WrappedComponent);
  };
}