Make WebView a `peerDependency`

[nandorojo]

I'm using a different version of react-native-webview in my Expo SDK 41 app (11.2.3). As a result, it conflicts with this library, resulting in this error:

I think it would be solved if you removed it as a dependency. It's reasonable to expect users to install the webview themselves. For now, I'm solving it by using yarn resolutions in my package.json:

{
  "resolutions": {  
    "react-native-webview": "11.2.3"
  }
}

[nandorojo]

There are many dependencies in this repo that mess up my app. They should be made peerDependencies. This includes expo-linking, react-native-safe-area-context, etc. Making them direct dependencies adds multiple versions to my app of common deps, and led to many issues.

expo also really should not be a dep here.

[nandorojo]

@burstware I highly recommend removing every dependency from this library that is used in other RN apps. This is what react navigation, etc do. It has a lot of bad downstream effects.

[JBaczuk]

@nandorojo Thanks for the feedback!

[nandorojo]

No problem. I appreciate the library, I had this problem too with Plaid. But the version inconsistencies led me to not be able to build by SDK 41 app for like 5 days until I tracked it down to this lib, so it would be worth updating.

[nikodunk]

Hey there!

I also super appreciate this library, but ended up not being able to use it due to the above issues and wrote something similar. I'd love to use this, but simply importing the library lead to white screening.

I'll see if I can sort out the dependencies and PR

[nandorojo]

Yeah I recommend not using this until those dependencies are fixed. It has many unintended consequences.

[JBaczuk]

@nandorojo Sorry you spent so much time tracking this down. I agree we need to change it, I'll see if I can find some time to fix this.

[nikodunk]

For what it's worth - this single-file react-native function is working excellently for me and I wanted to post it here for reference.

I post it here because it's basically your code stripped of all external dependencies except for query-string (which I'm not gonna mess around with :)).

You still use the component like in the docs:

<PlaidLink
  linkToken={YOUR_PLAID_LINK_TOKEN_FETCHED_FROM_YOUR_API}
  onEvent={(event) => console.log(event)}
  onExit={(exit) => console.log(exit)}
  onSuccess={(success) => sendMetaDataToBackend(success.metadata))}
/>

But it's now imported from PlaidLink.js, which simply exports one function which I also got from you.

import { WebView } from "react-native-webview";
import queryString from "query-string";

export function PlaidLink({ linkToken, onEvent, onExit, onSuccess }) {
  let webviewRef = useRef();

  const handleNavigationStateChange = (event) => {
    if (event.url.startsWith("plaidlink://")) {
      console.log(event.url);
      const eventParams = queryString.parse(event.url.replace(/.*\?/, ""));
      const linkSessionId = eventParams.link_session_id;
      const mfaType = eventParams.mfa_type;
      const requestId = eventParams.request_id;
      const viewName = eventParams.view_name;
      const errorCode = eventParams.error_code;
      const errorMessage = eventParams.error_message;
      const errorType = eventParams.error_type;
      const exitStatus = eventParams.exist_status;
      const institutionId = eventParams.institution_id;
      const institutionName = eventParams.institution_name;
      const institutionSearchQuery = eventParams.institution_search_query;
      const timestamp = eventParams.timestamp;

      if (event.url.startsWith("plaidlink://event") && onEvent) {
        onEvent({
          eventName: eventParams.event_name,
          metadata: {
            linkSessionId,
            mfaType,
            requestId,
            viewName,
            errorCode,
            errorMessage,
            errorType,
            exitStatus,
            institutionId,
            institutionName,
            institutionSearchQuery,
            timestamp,
          },
        });
      } else if (event.url.startsWith("plaidlink://exit") && onExit) {
        onExit({
          error: {
            errorCode: errorCode,
            errorMessage: eventParams.error_message,
            errorType: errorType,
          },
          metadata: {
            status: exitStatus,
            institution: {
              id: institutionId,
              name: institutionName,
            },
            linkSessionId,
            requestId,
          },
        });
      } else if (event.url.startsWith("plaidlink://connected") && onSuccess) {
        const publicToken = eventParams.public_token;
        const accounts = JSON.parse(eventParams.accounts);
        onSuccess({
          publicToken,
          metadata: {
            institution: {
              id: institutionId,
              name: institutionName,
            },
            account: accounts[0],
            linkSessionId,
            public_token: publicToken,
          },
        });
      }
      return false;
    }
    return true;
  };

  return (
    <WebView
      source={{
        uri: `https://cdn.plaid.com/link/v2/stable/link.html?isWebview=true&token=${linkToken}`,
      }}
      ref={(ref) => (webviewRef = ref)}
      onError={() => webviewRef.reload()}
      originWhitelist={["https://*", "plaidlink://*"]}
      onShouldStartLoadWithRequest={handleNavigationStateChange}
    />
  );
}

[JBaczuk]

Ok I updated the dependencies in 1.0.6, hopefully this solves this issue, if there are any problems let me know

[nikodunk]

Wow thanks Jordan! I’ll try shortly.

On Thursday, November 4, 2021, Jordan Baczuk @.***> wrote:

Ok I updated the dependencies in 1.0.6, hopefully this solves this issue, if there are any problems let me know

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/burstware/expo-plaid-link/issues/9#issuecomment-960974703, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE7KDVKULUCJAMWVX7HGSHTUKKMW7ANCNFSM46WMNDCQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- atmos https://www.joinatmos.com/?ref=u-vzj9i50f2pev3b6fcira2 | blog https://nikodunk.com