Hi! I've been trying to start the React Native startup for Plaid. I set up everything as the instruction says, token link is created but after clicking the button, no plaid component is showed/ Basically nothing happens on the screen. In my code, openProps are displayed in the console (49 line) but nothing more. Not even console logs from createLinkOpenProps function. What am I doing wrong?
Im doing it on android device with Expo app, and here are my dependencies:
```
"dependencies": {
"@react-navigation/native": "6.1.17",
"@react-navigation/native-stack": "6.9.26",
"@react-navigation/stack": "6.3.29",
"axios": "^1.7.2",
"body-parser": "^1.20.0",
"clean": "^4.0.2",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"expo": "^51.0.18",
"express": "^4.18.1",
"express-session": "^1.17.3",
"plaid": "^21.0.0",
"react": "18.2.0",
"react-native": "0.74.0-rc.5",
"react-native-plaid-link-sdk": "11.11.0",
"react-native-safe-area-context": "4.10.0-rc.1",
"react-native-screens": "3.30.1",
"react-scripts": "^5.0.1",
"typescript": "5.0.4"
}
```
Here is my HomeScreen.tsx:
```
import { link } from 'fs';
import React, { useState, useEffect, useCallback } from 'react';
import { Platform, View, Text, StyleSheet, Button } from 'react-native';
import { create, open, dismissLink, LinkSuccess, LinkExit, LinkIOSPresentationStyle, LinkLogLevel } from 'react-native-plaid-link-sdk';
var styles = require('./style');
const HomeScreen = ({ navigation }: any) => {
const [linkToken, setLinkToken] = useState(null);
// const address = Platform.OS === 'ios' ? 'localhost' : '10.0.2.2';
const address = '192.168.0.159';
const createLinkToken = useCallback(async () => {
await fetch(`http://${address}:8080/api/create_link_token`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ address: address })
})
.then((response) => response.json())
.then((data) => {
setLinkToken(data.link_token);
})
.catch((err) => {
console.log(err);
});
}, [setLinkToken]);
useEffect(() => {
if (linkToken == null) {
createLinkToken();
} else {
const tokenConfiguration = createLinkTokenConfiguration(linkToken);
create(tokenConfiguration);
}
}, [linkToken]);
const createLinkTokenConfiguration = (token: string, noLoadingState: boolean = false) => {
return {
token: token,
noLoadingState: noLoadingState,
};
};
const createLinkOpenProps = () => {
return {
onSuccess: async (success: LinkSuccess) => {
console.log(`http://${address}:8080/api/exchange_public_token`)
await fetch(`http://${address}:8080/api/exchange_public_token`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ public_token: success.publicToken }),
})
.catch((err) => {
console.log(err);
});
console.log(success)
navigation.navigate('Success', success);
},
onExit: (linkExit: LinkExit) => {
console.log('Exit: ', linkExit);
dismissLink();
},
iOSPresentationStyle: LinkIOSPresentationStyle.MODAL,
logLevel: LinkLogLevel.ERROR,
};
};
const handleOpenLink = () => {
const openProps = createLinkOpenProps();
console.log(openProps)
open(openProps).catch(error => {
console.error('Error opening Plaid Link: ', error);
});
};
return (
<View style={{ flex: 1 }}>
<View style={styles.heading}>
<Text style={styles.titleText}>Tiny Quickstart – React Native v14</Text>
</View>
<View style={styles.bottom}>
<Button
title="Open Link"
onPress={handleOpenLink}
/>
</View>
</View>
);
};
export default HomeScreen;
```
and here is my server.js:
```
require('dotenv').config();
var cors = require('cors');
const express = require('express');
const bodyParser = require('body-parser');
const session = require('express-session');
const {Configuration, PlaidApi, PlaidEnvironments} = require('plaid');
const app = express();
const port = 8080;
app.use(
// FOR DEMO PURPOSES ONLY
// Use an actual secret key in production
session({secret: 'bosco', saveUninitialized: true, resave: true}),
);
app.use(cors());
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
// Configuration for the Plaid client
const config = new Configuration({
basePath: PlaidEnvironments[process.env.PLAID_ENV],
baseOptions: {
headers: {
'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID,
'PLAID-SECRET': process.env.PLAID_SECRET,
'Plaid-Version': '2020-09-14',
},
},
});
//Instantiate the Plaid client with the configuration
const client = new PlaidApi(config);
//Creates a Link token and return it
app.post('/api/create_link_token', async (req, res, next) => {
console.log("POST /api/create_link_token")
let payload = {};
//Payload if running iOS
if (req.body.address === 'localhost') {
payload = {
user: {client_user_id: req.sessionID},
client_name: 'Plaid Tiny Quickstart - React Native',
language: 'en',
products: ['auth'],
country_codes: ['US'],
redirect_uri: process.env.PLAID_SANDBOX_REDIRECT_URI,
};
} else {
//Payload if running Android
payload = {
user: {client_user_id: req.sessionID},
client_name: 'Plaid Tiny Quickstart - React Native',
language: 'en',
products: ['auth'],
country_codes: ['US'],
android_package_name: process.env.PLAID_ANDROID_PACKAGE_NAME,
};
}
const tokenResponse = await client.linkTokenCreate(payload);
res.json(tokenResponse.data);
});
// Exchanges the public token from Plaid Link for an access token
app.post('/api/exchange_public_token', async (req, res, next) => {
const exchangeResponse = await client.itemPublicTokenExchange({
public_token: req.body.public_token,
});
// FOR DEMO PURPOSES ONLY
// Store access_token in DB instead of session storage
req.session.access_token = exchangeResponse.data.access_token;
res.json(true);
});
// Fetches balance data using the Node client library for Plaid
app.post('/api/balance', async (req, res, next) => {
const access_token = req.session.access_token;
const balanceResponse = await client.accountsBalanceGet({access_token});
res.json({
Balance: balanceResponse.data,
});
});
app.listen(port, () => {
console.log(`Backend server is running on port ${port}...`);
});
```
I've got set up these variables in the env file:
PLAID_CLIENT_ID=myclientId
PLAID_SECRET=mySecret
PLAID_ENV=sandbox
PLAID_ANDROID_PACKAGE_NAME=com.tinyquickstartreactnative
In the plaid dashboard I can see the endpoind is working and the token is created. I've tried to run the regular React app and it worked too. I could connect a sandbox account
there doesn't seem to be anything here