I'm experiencing an issue where the bottom navigation bar overlaps the "Continue as guest" button and other UI elements at the bottom of the Plaid Connect Prompt screen on Samsung Galaxy S24 Ultra and similar devices.
Plaid Link React Native: 12.1.1 React Native Version: 0.79.1 Android OS Version: 14.0+ Devices: Samsung Galaxy S24 Ultra
The bottom navigation bar covers the bottom UI elements, making them difficult to interact with.
Continue as guest button is not visible
import { create, open, dismissLink, LinkSuccess, LinkExit, LinkIOSPresentationStyle, LinkLogLevel} from 'react-native-plaid-link-sdk';
const handleConnectBank = () => {
const openProps = createLinkOpenProps();
open(openProps);
};
const createLinkOpenProps = () => {
return {
onSuccess: async success => {
setLoading(true);
console.log('createLinkOpenProps: ', success);
console.log('createLinkOpenPropsPublicToken: ', success.publicToken);
console.log('createLinkOpenPropAccounts: ', success.metadata.accounts);
// Create an array of promises for all API calls
callExchangePublicToken(success.metadata.accounts, success.publicToken);
},
onExit: linkExit => {
setLoading(false);
console.log('Exit: ', linkExit);
dismissLink();
setTimeout(() => {
setLinkToken(null);
}, 100);
},
iOSPresentationStyle: LinkIOSPresentationStyle.MODAL,
logLevel: LinkLogLevel.ERROR,
};
};
const createLinkToken = useCallback(async () => {
console.log('press connect bank');
setLoading(true);
makeRequest({
url: `api/plaid/v1/create-link-token?customerId=${user.businessInfo.id}`,
method: 'GET',
onSuccess: data => {
setLoading(false);
console.log('linkToken: ', data);
setLinkToken(data);
},
onFailure: error => {
setLoading(false);
},
});
});
useEffect(() => {
if (linkToken == null) {
createLinkToken();
} else {
console.log('linkToken: ', linkToken.linkToken);
const tokenConfiguration = createLinkTokenConfiguration(
linkToken.linkToken,
);
create(tokenConfiguration);
}
}, [linkToken]);
<Button
title="Connect Bank Account"
onPress={handleConnectBank}
loading={loading}
fullWidth
style={styles.connectButton}
/>
This is a bug that was present in older versions of the Plaid Link React Native SDK. It has been fixed in newer versions. Upgrading to the Plaid Link React Native SDK 12.4 or later should resolve the issue.