androidreact-nativeandroid-studiovisual-studio-codeplaid

App Bottom Navigation Bar Overlapping UI Elements on Samsung S24 Ultra


Bottom navigation bar overlapping UI elements in Plaid Link on Samsung Galaxy S24 Ultra (React Native)

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.

Environment:

Plaid Link React Native: 12.1.1 React Native Version: 0.79.1 Android OS Version: 14.0+ Devices: Samsung Galaxy S24 Ultra

Issue:

The bottom navigation bar covers the bottom UI elements, making them difficult to interact with.

Screenshot:

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}
      />

Solution

  • 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.