Not working on Android

[fikriwebdev]

After click the button its only show blank space. Its only happen on android but working on IOS.

Screen.Recording.2024-10-02.at.06.36.32.mov

package.json dependencies

"dependencies": {
    "@gorhom/bottom-sheet": "^4.6.3",
    "@likashefqet/react-native-image-zoom": "^3.0.0",
    "@notifee/react-native": "^7.8.2",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/cli": "^13.6.9",
    "@react-native-community/cli-debugger-ui": "^13.6.9",
    "@react-native-community/netinfo": "^11.3.2",
    "@react-native-firebase/app": "^16.5.0",
    "@react-native-firebase/crashlytics": "^16.5.0",
    "@react-native-firebase/dynamic-links": "^16.5.0",
    "@react-native-firebase/in-app-messaging": "^16.5.0",
    "@react-native-firebase/messaging": "^16.5.0",
    "@react-native-firebase/perf": "^16.5.0",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/elements": "^1.3.30",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@react-navigation/stack": "^6.3.29",
    "@segment/analytics-react-native": "^2.19.1",
    "@segment/sovran-react-native": "^1.1.1",
    "@shopify/flash-list": "^1.6.4",
    "@shopify/restyle": "^2.4.4",
    "@tap-payments/gosell-sdk-react-native": "^1.0.57",
    "@types/react-native-dotenv": "^0.2.0",
    "@valasolutions/react-native-markdown": "^1.0.3",
    "@zellosoft.com/react-native-toast-message": "^1.4.11",
    "appcenter": "5.0.1",
    "appcenter-analytics": "5.0.1",
    "appcenter-crashes": "5.0.1",
    "benefit-pay-react-native": "^0.1.3",
    "date-fns": "^3.6.0",
    "formik": "^2.4.6",
    "instabug-reactnative": "^13.0.5",
    "jwt-decode": "^4.0.0",
    "patch-package": "^8.0.0",
    "react": "18.3.1",
    "react-i18next": "^14.1.2",
    "react-native": "0.73.8",
    "react-native-bootsplash": "^5.5.3",
    "react-native-calendars": "^1.1305.0",
    "react-native-code-push": "^8.2.2",
    "react-native-config": "^1.5.1",
    "react-native-document-picker": "^9.3.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-error-boundary": "^1.2.4",
    "react-native-exception-handler": "^2.10.10",
    "react-native-fast-image": "^8.6.3",
    "react-native-freshchat-sdk": "^4.6.3",
    "react-native-gesture-handler": "^2.16.2",
    "react-native-get-random-values": "^1.11.0",
    "react-native-image-picker": "^7.1.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-mmkv": "^2.12.2",
    "react-native-modal": "^13.0.1",
    "react-native-pager-view": "^6.3.1",
    "react-native-permissions": "^4.1.5",
    "react-native-reanimated": "^3.10.1",
    "react-native-restart": "^0.0.27",
    "react-native-safe-area-context": "^4.10.4",
    "react-native-screens": "^3.31.1",
    "react-native-shared-element": "^0.8.9",
    "react-native-svg": "^15.3.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-webview": "^13.10.3",
    "react-navigation-shared-element": "^3.1.3",
    "rive-react-native": "^7.0.0",
    "swr": "^2.2.5",
    "use-debounce": "^10.0.1",
    "zustand": "^4.5.2"
  },

Implementation

    <View
      style={{
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <BenefitPayView
        onSuccess={data => {
          console.log('🚀 ~ tokenValue:', data);
        }}
        onError={data => {
          console.log('🚀 ~ onError:', data);
        }}
        onChargeCreated={data => {
          console.log('🚀 ~ onChargeCreated:', data);
          setIsProcessing(false);
        }}
        onClicked={() => {
          console.log('🚀 ~ onClicked');
          setIsProcessing(true);
        }}
        onOrderCreated={data => {
          console.log('🚀 ~ onOrderCreated:', data);
          setIsProcessing(false);
        }}
        onCanceled={() => {
          console.log('🚀 ~ onCanceled');
          onCancelled();
        }}
        style={{width: '100%'}}
        config={{
          operator: {
            publicKey: 'pk_test_Wa4ju8UC1zoi0HhST9yO3M6n',
            hashString: '',
          },
          transaction: {
            amount: +bookingData.totalcostuser.toFixed(2),
            currency:
              TapCurrencyCode[
                bookingData.paymentCurrency.code.toUpperCase() as keyof typeof TapCurrencyCode
              ],
          },
          reference: {
            transaction: bookingData.merchant,
            order: bookingData.id,
          },
          merchant: {id: ''},
          customer: {
            id: '',
            names: [
              {
                lang: userData.language === 'ar' ? Locale.ar : Locale.en,
                first: bookingData.firstname,
                middle: '',
                last: '',
              },
            ],
            contact: {
              email: userData.email,
              phone: {
                countryCode: `+${userData.country_code}`,
                number: `${userData.phone}`,
              },
            },
          },
          interface: {
            locale: Locale.en,
            edges: Edges.curved,
          },
          post: {
            url: bookingData.instantbooking
              ? PAYMENT_CHARGE_REDIRECT_URL
              : PAYMENT_AUTH_REDIRECT_URL,
          },
        }}
        onReady={() => {
          setIsLoading(false);
        }}
      />
      {isLoading ? <ButtonSkeleton /> : null}
      {isProcessing ? (
        <Box flexDirection="row" alignItems="center" gap="m">
          <Spinner color="#ED2555" />
          <Text fontWeight="500" textAlign="center" color="badgeGray">
            Creating your transaction...
          </Text>
        </Box>
      ) : null}
    </View>
  );