White blank screen

[muresanandrei]

When I close plaid from the x icon it shows only a blank white screen.I have to press for example in my app a tab menu to go to a screen.Isn't there a way to specify what happens when you close plaid ?

[corasan]

I want to know this too, were you able to solve this?

[mouthzipper]

any update on this issue? got the the same problem

[catalinmiron]

I'll take a look at it and come back with an answer. Sorry for my late response, thanks guys!

[catalinmiron]

You can catch the exit event from onMessage function.

switch(this.state.data.action) {
  case 'plaid_link-undefined::connected':
    return this.renderDetails()
  case 'plaid_link-undefined::exit':
    return this.renderExit();
  default:
    return this.renderLogin();
}

Please let me know if this works. Thanks

[catalinmiron]

[catalinmiron]

You can implement a state machine based on plaid action CONNECTED / EXIT / ACKNOWLEDGE / EVENT...

Change you component to

this.state = {
  status: 'LOGIN'
}

// also add status to setState
onMessage = (data) => {
  this.setState({data, status: data.action.substr(data.action.lastIndexOf(':') + 1).toUpperCase()})
}

render() {
  // Possible statuses: CONNECTED | EXIT | ACKNOWLEDGE | EVENT | LOGIN
  switch(this.state.status) {
    case 'CONNECTED':
      return this.renderDetails()
    case 'LOGIN':
    case 'EXIT':
      return this.renderButton();
    default:
      return this.renderPlaidWebview();
  }
}

// The renderButton should always reset the status code
// this.setState({status: ''}) E.g

renderButton = () => {
  return <View style={styles.container}>
    <TouchableOpacity onPress={() => this.setState({status: ''})}>
      <Text style={styles.paragraph}>Login with Plaid</Text>
    </TouchableOpacity>
  </View>
}

Here's the full example code

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import PlaidAuthenticator from 'react-native-plaid-link';

export default class App extends Component {
  state = {
    data: {},
    status: 'LOGIN'
  };

render() {
  // Status: CONNECTED|EVENT|ACKOWLEDGE|EXIT|LOGIN
  switch(this.state.status) {
    case 'CONNECTED':
      return this.renderDetails()
    case 'LOGIN':
    case 'EXIT':
      return this.renderButton();
    default:
      return this.renderLogin();
  }
}

renderButton = () => {
  return <View style={styles.container}>
    <TouchableOpacity onPress={() => this.setState({status: ''})}>
      <Text style={styles.paragraph}>Login with Plaid</Text>
    </TouchableOpacity>
  </View>
}

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

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

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

  renderLogin() {
    return (
      <PlaidAuthenticator
        onMessage={this.onMessage}
        publicKey="eecc6d6382543dbee6478afbc5879b"
        env="sandbox"
        product="auth,transactions"
        onLoad={this.onLoad}
        onLoadStart={this.onLoadStart}
        onLoadEnd={this.onLoadEnd}
      />
    );
  }

  renderDetails() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>Institution</Text>
        <Text style={styles.value}>
          {this.state.data.metadata.institution.name}
        </Text>
        <Text style={styles.paragraph}>Institution ID</Text>
        <Text style={styles.value}>
          {this.state.data.metadata.institution.institution_id}
        </Text>
        <Text style={styles.paragraph}>Token</Text>
        <Text style={styles.value}>
          {this.state.data.metadata.public_token}
        </Text>
      </View>
    );
  }

  onMessage = data => {
    // Possible Statuses
    // ::connected, ::exit, ::acknowledge, ::event
    /*
      Response example for success

      {
        "action": "plaid_link-undefined::connected",
        "metadata": {
          "account": {
            "id": null,
            "name": null
          },
          "account_id": null,
          "public_token": "public-sandbox-e697e666-9ac2-4538-b152-7e56a4e59365",
          "institution": {
            "name": "Chase",
            "institution_id": "ins_3"
          }
        }
      }
    */

    this.setState({ data, status: data.action.substr(data.action.lastIndexOf(':') + 1).toUpperCase() });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 24,
    backgroundColor: '#ecf0f1'
  },
  paragraph: {
    fontSize: 18,
    marginBottom: 5,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e'
  },
  value: {
    marginBottom: 20,
    textAlign: 'center'
  }
});

PR is welcome with changing & upgrading the example code with the above one :)

Thanks!

[catalinmiron]

Published 1.3.5 with an updated example. Please reference to it example