Blank screen showing for too long before going to desired screen after exit

[muresanandrei]

After linking a bank or closing the webview it takes a lot of time to return to the view from status state EXIT. What may be the issue ? Also there is a difference on simulator and real phone when testing this.

[catalinmiron]

@muresanandrei could you please add more details?

Also there is a difference on simulator and real phone when testing this.
For the performance perspective?

[muresanandrei]

@catalinmiron Yes. On simulator there is no problem when I exit the webview it exits instantly. But on phone it takes like 15 seconds even more. During that it just shows a blank screen.

[catalinmiron]

I'm not sure if is related to this library. Is there any repo that I can test? Thanks!

[muresanandrei]

I can share you my plaid code.

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);
    }
}

[muresanandrei]

When state status is EXIT this is called this.bankLinked() and it returns a view. But this delay is only on phone not simulator.

[muresanandrei]

Is there maybe some prop I could use in webview to fix the delay ?

[catalinmiron]

@muresanandrei a simple component as is PlaidAuthenticator can't actually fix your code. You have a lot of async stuff going on and definitely you should add a loading indicator.

I could also do a code review but it might be out of scope.

1. this.updateData() -> is not waiting for the fetch nor asyncstorage
2. !!! You're having logic inside render() which is not good at all !!!
3. Try using some async/await

const getJWT = async () => {
  try {
    const token = await AsyncStorage.getItem('jwt');
    return token
    }
  } catch (error) {
    // Error retrieving data
  }
}

const constructFormData = () => {
  const {public_token, institution} = this.state.data.metadata;
  const {institution_id, name } = institution;
  const formData = new FormData();
  const obj = JSON.stringify({public_token, institution_id, name});
  formData.set(obj);

  return formData;
}

const addInstitution = async () => {
  const jwt = await this.getJWT();
  const body = this.constructorFormData();
  
  try {
    const response = await fetch(`${api_url}?token=${jwt}`);
    const data = await response.json();
    // do whatever!
  } catch (err) {}
}

4. Split your code in small functions that usually are doing a single task/job
5. I don't know what injectJavascript really does, but definitely you can clean-up

Thanks!

[muresanandrei]

@catalinmiron Thanks for this but the problem is even when I just press x button and takes like a minute to render a simple view. During that I have a blank screen again this is only on phone. This is a problem with the PlaidAuthenticator even using your example same result I get. The injecting javascript is for not getting errors because of plaid captcha.

[muresanandrei]

@catalinmiron This is not fixed I took the example and run it and it has the same problem. When you close it just shows a blank screen.

[alfonsosn]

I’m running into a very similar problem. When I try to exit or have finished connecting through the Plaid link, when my app changes state back to my React-Native component, I get a blank screen for a long time before the WebView transitions Back to my app again. And similarly, this only seems to happen on my iPhone and not on the simulator. But it happens on my TestFlight app.

[07nisha]

Is this issue solved? if yes please share the solution with me as i am also facing the same issue on phone as well as simulator.