Blank screen showing for too long before going to desired screen after exit about react-native-plaid-link HOT 11 CLOSED

export default class Plaid extends Component {
  state = {
    data: {},
    status: 'LOGIN',
    firstLink:this.props.data !== undefined ? this.props.data : ''
  };

  render() {

      switch(this.state.status) {
          case 'CONNECTED':
              return this.addInstitution();
          case 'EXIT':
            return this.bankLinked();
          default:
              return this.renderLogin();
      }
  }

  onLoadStart = props => {
    console.log('onLoadStart', props);
  };

  onLoad = props => {

  };

  onLoadEnd = props => {

  };

    static navigatorStyle = {
        tabBarHidden: true
    };

  renderLogin() {
      const patchPostMessageFunction = () => {
          let originalPostMessage = window.postMessage;
          let patchedPostMessage = function(message, targetOrigin, transfer) {
              originalPostMessage(message, targetOrigin, transfer);
          };

          patchedPostMessage.toString = () => {
              return String(Object.hasOwnProperty).replace(
                  'hasOwnProperty',
                  'postMessage'
              );
          };
          window.postMessage = patchedPostMessage;
      };

      const patchPostMessageJsCode =
          '(' + String(patchPostMessageFunction) + ')();';

    return (
          <PlaidAuthenticator
            onMessage={this.onMessage}
            publicKey="xxxxxxxxxxxx"
            env="development"
            product="auth,transactions"
            clientName="xxxxxxxxx"
            onLoad={this.onLoad}
            onLoadStart={this.onLoadStart}
            onLoadEnd={this.onLoadEnd}
            requires_code
            includeDisplayData={true}
            javaScriptEnabled={true}
            injectedJavaScript={patchPostMessageJsCode}
          />
    );
  }

  profile = () => {
    this.props.navigator.push({
          screen: 'app.ProfileSettings', // unique ID registered with Navigation.registerScreen
          title: 'Profile', // navigation bar title of the pushed screen (optional)
          animated: true, // does the push have transition animation or does it happen immediately (optional)
          backButtonHidden: true, // hide the back button altogether (optional)
          navigatorStyle: {navBarHidden:true}, // override
          animationType: 'fade',
      });
  }

  plaid = () => {
      this.props.navigator.push({
          screen: 'app.Plaid', // unique ID registered with Navigation.registerScreen
          title: 'Plaid', // navigation bar title of the pushed screen (optional)
          animated: true, // does the push have transition animation or does it happen immediately (optional)
          backButtonHidden: true, // hide the back button altogether (optional)
          navigatorStyle: {navBarHidden:true}, // override
          animationType: 'fade',
      });
  }

  bankLinked = () => {
      return (
          <View style={styles.container}>
              <TouchableHighlight underlayColor="rgba(255,255,255,0.9)" onPress={() => this.plaid()}>
                <Text style={styles.paragraph}>Link another bank</Text>
              </TouchableHighlight>

                      <TouchableHighlight underlayColor="rgba(255,255,255,0.9)" onPress={() => this.profile()}>
                          <Text style={[styles.value, styles.paragraph]}>
                              Go back to profile
                          </Text>
                      </TouchableHighlight>
              }
          </View>
      );
  }

  addInstitution() {
      //Link bank to server if it is connect via web view
          AsyncStorage.getItem('jwt', (err, token) => {
              const formData = new FormData();
              formData.append('public_token', this.state.data.metadata.public_token);
              formData.append('institution_id', this.state.data.metadata.institution.institution_id);
              formData.append('institution_name', this.state.data.metadata.institution.name);

              fetch(Api.url.BASE_URL + "/api/plaid/add-institution?token=" + token, {
                  method: 'POST',
                  headers: {
                      'Accept': 'application/json',
                      'Authorization': `Bearer ${token}`
                  },
                  body: formData
              })
                  .then((response) => response.json())
                  .then((json) => {
                      if (!json.success) {
                          alert("Something went wrong try again!");
                      }
                  })
                  .catch(() => {
                      console.log("Something went wrong try again!");
                  })
                  .done()

          });

        this.updateAppData();

        return this.bankLinked();
  }

  onMessage = data => {
      //Add plaid institution
      this.setState({data, status: data.action.substr(data.action.lastIndexOf(':') + 1).toUpperCase()});
  }

    //Emit new data banks state to dashboard
    updateAppData = () => {
        EventRegister.emit('dashboardBanks', true);
        EventRegister.emit('dashboardTransactions', true);
        EventRegister.emit('profileBanks', true);
    }
}