PlaidLink React Native Not Working

[salmane8-labs]

The problem

I followed the quickstart to implement the plaid. https://github.com/plaid/tiny-quickstart/blob/main/react_native/TinyQuickstartReactNative
I am successfully able to get the link token but the PlainLink component in react native is not working. i am getting the following error when i press on th PlaidLink Component.

Environment

Plaid Link React Native	e.g. 11.0.3
ReactNative Version	e.g. 0.72.6
Occurs on iOS	e.g. yes
iOS Version	e.g. 16.1
iOS Devices/Emulators	e.g. iPhone 14 Pro

Steps to Reproduce

Just follow the quicstart and this error happens for me.

Logs

Argument 1 (BOOL) of RNLinksdk.create must not be null

RCTLogArgumentError(RCTModuleMethod*, unsigned long, objc_object*, char const*)
RCTModuleMethod.mm:67
__41-[RCTModuleMethod processMethodSignature]_block_invoke.96
-[RCTModuleMethod invokeWithBridge:module:arguments:]
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&, int, (anonymous namespace)::SchedulingContext)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

Code To Reproduce Issue

import { useState, useCallback, useEffect } from 'react';

import { StyleSheet, Text, View, Dimensions } from 'react-native';
import PlaidLink, { LinkSuccess, LinkExit, usePlaidEmitter } from 'react-native-plaid-link-sdk';

let height = Dimensions.get('window').height;
let width = Dimensions.get('window').width;

export default function App() {

const [linkToken, setLinkToken] = useState(null);
const address = '7019-116-90-112-9.ngrok-free.app'//Platform.OS === 'ios' ? 'localhost' : '10.0.2.2';

// usePlaidEmitter((event) => {
// console.log("Plaid Event")
// console.log(event);
// });

const createLinkToken = useCallback(async () => {
await fetch(https://${address}/api/plaid/create_link_token, {
method: "POST",
headers: {
"Content-Type": "application/json",
// "Authorization": "Bearer " + u.token,
},
body: JSON.stringify({ address: address })
})
.then((response) => response.json())
.then((data) => {
console.log(data.data.link_token)
setLinkToken(data.data.link_token);
})
.catch((err) => {
console.log(err);
});
}, [setLinkToken])

useEffect(() => {
if (linkToken == null) {
createLinkToken();
}
console.log("Link token is ", linkToken)
}, [linkToken]);

return (
<View style={{flex: 1, height: height, width: width, justifyContent: 'center', alignItems: 'center'}}>

  <View style={styles.bottom}>
    <PlaidLink
      tokenConfig={{
        token: linkToken,
        logLevel: 'DEBUG'
      }}
      onSuccess={(success) => {
        console.log(success);
      }}
      onExit={(exit) => {
        // console.log(exit);
      }}
    >
      <Text>Add Account</Text>
    </PlaidLink>
  </View>
</View>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
height: height,
width: width
},
});

[dtroupe-plaid]

The error Argument 1 (BOOL) of RNLinksdk.create must not be null is the result of the call to export const PlaidLink = (props: PlaidLinkComponentProps) which calls NativeModules.RNLinksdk.create(config.token, config.noLoadingState) which calls the native code RCT_EXPORT_METHOD(create:(NSString*)token :(BOOL)noLoadingState) which requires a variable called noLoadingState. Since you're not passing this bool you get this error.

This variable should be optional, but it's not.

You can resolve the issue by using the code in the README of this repo.

<PlaidLink
        tokenConfig={{
            token: "#GENERATED_LINK_TOKEN#",
            logLevel: LinkLogLevel.ERROR,
            // Add this variable to your code.
            noLoadingState: false,
        }}
        onSuccess={(success: LinkSuccess) => { console.log(success) }}
        onExit={(exit: LinkExit) => { console.log(exit) }}
    >

Apologies for the confusion. I'll put up a PR to fix this issue and look at the README for the quickstart example as well. Thanks for flagging.

[dtroupe-plaid]

After looking into this issue more - it appears there issues would be flagged by the compiler in 11.0.3

I added clarification in noLoadingState in #615

Additionally the tiny quickstart example is using version 8.x.x of this SDK which is no longer supported.

[phoenixy1]

fyi @dtroupe-plaid Thanks for looking at this! In response, I am working on upgrading the tiny quickstart to use version 11 of the react native sdk. This was a lot more involved than I thought it would be, but I've got it working for iOS and will start on Android soon. Will request your review when it's done.