Issue Report: Problems with AddressSheet on Android and iOS

[geek-ibrar]

Summary

I am experiencing the following issues with the AddressSheet component from the stripe-react-native library in both Android and iOS:

1. Android: Enabling the New Architecture in gradle.properties causes the app to crash when opening the AddressSheet.
2. iOS: Encountering this error (link here).

Environment

• @stripe/stripe-react-native: ^0.38.0
• @stripe/stripe-identity-react-native: ^0.2.13
• @stripe/stripe-terminal-react-native: ^0.0.1-beta.21
• react-native: 0.76.1
• react: 18.3.1
• Node version: >=18

Issue Details

1. Android

Steps to Reproduce

1. Enable New Architecture in gradle.properties.
2. Render the AddressSheet component with the following code:

<AddressSheet
  visible={addressSheetVisible}
  onSubmit={addressDetails => {
   // this will not get triggered 
    setAddress(addressDetails?.address);
    setAddressSheetVisible(false);
  }}
  appearance={customAppearance}
  presentationStyle={'popover'}
  defaultValues={{
    address: {
      line1: '',
      postalCode: '',
      country: '',
      city: '',
    },
  }}
  onError={errorSubmit => {
    if (errorSubmit.code === AddressSheetError.Failed) {
      Alert.alert('There was an error.');
    }
    setAddressSheetVisible(false);
  }}
  primaryButtonTitle={'Confirm'}
  sheetTitle={'Billing Address'}
/>

Expected Behavior
The AddressSheet should open and return the entered address through the onSubmit callback.

Actual Behavior

• App crashes when opening the AddressSheet when New Architecture is disabled.
• Error in Logcat:
  java.lang.NoSuchMethodError: No static method uicore/StripeShapes
• AddressSheet didn't return the address data with New Architecture enabled. i.e onSubmit is not getting triggered

2. iOS

Issue
When using the AddressSheet component on iOS, the app throws the following error:
Issue #1732 on GitHub.

Code Snippet
Here’s the full code for the AddressSheet component:

<AddressSheet
  visible={addressSheetVisible}
  onSubmit={addressDetails => {
    setAddress(addressDetails?.address);
    setAddressSheetVisible(false);
  }}
  appearance={customAppearance}
  presentationStyle={'popover'}
  defaultValues={{
    address: {
      line1: '',
      postalCode: '',
      country: '',
      city: '',
    },
  }}
  onError={errorSubmit => {
    if (errorSubmit.code === AddressSheetError.Failed) {
      Alert.alert('There was an error.');
    }
    setAddressSheetVisible(false);
  }}
  primaryButtonTitle={'Confirm'}
  sheetTitle={'Billing Address'}
/>

Package.json

{
  "name": "app-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@stripe/stripe-identity-react-native": "^0.2.13",
    "@stripe/stripe-react-native": "^0.38.0",
    "@stripe/stripe-terminal-react-native": "^0.0.1-beta.21",
    "react": "18.3.1",
    "react-native": "0.76.1"
  },
  "engines": {
    "node": ">=18"
  }
}

Questions/Requests

1. Android: How can I resolve the crash caused by the AddressSheet when using the New Architecture?
2. iOS: Is there an update or workaround for Issue #1732?
3. Are there any additional configurations needed for compatibility with React Native 0.76.1?

[geek-ibrar]

UPDATE

Facing the same issue on android with PaymentSheet

const { initPaymentSheet, presentPaymentSheet, confirmPaymentSheetPayment, retrieveSetupIntent } = useStripe();

const showPaymentSheet = async () => {
   // Get data from APIs
    const response = await setupPaymentSheet()

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Organisation Name",
      customerId: response?.customerId,
      customerEphemeralKeySecret: response?.ephemeralKey,
      setupIntentClientSecret: response?.clientSecret,
      defaultBillingDetails: {
        name: user?.firstName + ' ' + user?.lastName,
      },
      style: 'alwaysLight',
      billingDetailsCollectionConfiguration: {
        name: CollectionMode.ALWAYS,
        email: CollectionMode.NEVER,
        address: AddressCollectionMode.FULL,
      },
      primaryButtonLabel: "Save Card",
      customFlow: true,
      appearance: customAppearance,
    });

    if (error) {
      Alert.alert(`Error: ${error.message}`);
    }
    else {
      openPaymentSheet(response?.clientSecret || '')
    }
  }

  const openPaymentSheet = async (clientSecret: string) => {
    const { error } = await presentPaymentSheet();     //    <=====  App crash on this
    console.log('presentPaymentSheet-error', error)

    const { error: confirmError } = await confirmPaymentSheetPayment();
    
    // Other code to call APIs
  };