fix: Tried to register two views with the same name GooglePayButton

README.md

@@ -82,6 +82,7 @@ paymentRequest.canMakePayment().then((canMakePayment) => {
 ```
 
 ### Google Pay Button
+
 Example of adding a native Google Pay button:
 
 ```xml
@@ -91,5 +92,6 @@ Example of adding a native Google Pay button:
   allowedPaymentMethods={googlePayRequest.allowedPaymentMethods}
   theme={GooglePayButtonConstants.Themes.Dark}
   type={GooglePayButtonConstants.Types.Buy}
-  radius={4}        
+  radius={4}
 />
+```

example/src/App.jsx

@@ -16,7 +16,11 @@
 
 import React, { useState } from 'react';
 import { Text, StyleSheet, ScrollView } from 'react-native';
-import { PaymentRequest, GooglePayButton, GooglePayButtonConstants } from '@google/react-native-make-payment';
+import {
+  PaymentRequest,
+  GooglePayButton,
+  GooglePayButtonConstants,
+} from '@google/react-native-make-payment';
 
 const paymentDetails = {
   total: {
@@ -116,29 +120,28 @@ export default function App() {
     scrollView: {
       flexGrow: 1,
       justifyContent: 'center',
-      alignItems: 'center'
+      alignItems: 'center',
     },
     googlepaybutton: {
       height: 100,
       width: 300,
     },
   });
 
-  return (    
+  return (
     <ScrollView contentContainerStyle={styles.scrollView}>
-
       {/*
         Showing the Google Pay button in any case. You might want to
         do a paymentRequest.canMakePayment() check upfront and only
         conditionally show the button
-      */}     
+      */}
       <GooglePayButton
         style={styles.googlepaybutton}
         onPress={checkCanMakePayment}
         allowedPaymentMethods={googlePayRequest.allowedPaymentMethods}
         theme={GooglePayButtonConstants.Themes.Dark}
         type={GooglePayButtonConstants.Types.Buy}
-        radius={4}        
+        radius={4}
       />
       <Text style="{{font-family: monospace, white-space: pre}}">{text}</Text>
     </ScrollView>

src/GooglePayButton.jsx

@@ -14,50 +14,66 @@
  * limitations under the License.
  */
 
-import * as React from 'react'
-import {NativeModules, requireNativeComponent, TouchableOpacity, StyleSheet} from 'react-native'
+import * as React from 'react';
+import {
+  NativeModules,
+  requireNativeComponent,
+  TouchableOpacity,
+  StyleSheet,
+  UIManager,
+} from 'react-native';
 
-const NativeGooglePayButton = requireNativeComponent('GooglePayButton')
+const ComponentName = 'GooglePayButton';
+const NativeGooglePayButton =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent(ComponentName)
+    : () => {
+        throw new Error(
+          `The package 'react-native-make-payment' doesn't seem to be linked.`
+        );
+      };
 
-const GooglePayButtonConstants = NativeModules.GooglePayButtonConstants?.getConstants();
+export const GooglePayButtonConstants =
+    NativeModules.GooglePayButtonConstants.getViewManagerConfig?.(
+        'getConstants'
+    ) ?? NativeModules.GooglePayButtonConstants.getConstants?.();
 
 const GooglePayButton = ({
-    onPress,
-    disabled,
-    allowedPaymentMethods,
-    theme,
-    type, 
-    radius,
-    style    
-  }) => {
-    return (
-      <TouchableOpacity
-        onPress={onPress}      
-        disabled={disabled}
-        activeOpacity={disabled ? 0.3 : 1}
-        style={[disabled ? styles.disabled : styles.notDisabled, style]}              
-      >
-        <NativeGooglePayButton
-            allowedPaymentMethods={allowedPaymentMethods}
-            type={type}
-            theme={theme}
-            radius={radius}
-            style={styles.nativeButtonStyle}
-        >
-        </NativeGooglePayButton>
-      </TouchableOpacity>
-    );
-  };
+  onPress,
+  disabled,
+  allowedPaymentMethods,
+  theme,
+  type,
+  radius,
+  style,
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={disabled ? 0.3 : 1}
+      style={[disabled ? styles.disabled : styles.notDisabled, style]}
+    >
+      <NativeGooglePayButton
+        allowedPaymentMethods={allowedPaymentMethods}
+        type={type}
+        theme={theme}
+        radius={radius}
+        style={styles.nativeButtonStyle}
+      ></NativeGooglePayButton>
+    </TouchableOpacity>
+  );
+};
 
 const styles = StyleSheet.create({
-    disabled: {
-        flex: 0,
-        opacity: 0.4,
-    },
-    notDisabled: {
-        flex: 0,
-    },
-    nativeButtonStyle: { flex: 1 },
+  disabled: {
+    flex: 0,
+    opacity: 0.4,
+  },
+  notDisabled: {
+    flex: 0,
+  },
+  nativeButtonStyle: { flex: 1 },
 });
 
-module.exports = { GooglePayButton, GooglePayButtonConstants };
+module.exports = { GooglePayButton, GooglePayButtonConstants };

src/index.jsx

@@ -38,7 +38,10 @@ class PaymentRequest {
       this.#version = pkg.version;
     } catch (_) {}
 
-    if (this.paymentMethods[GOOGLE_PAY_PMI] && !this.paymentMethods[GOOGLE_PAY_PMI].merchantInfo.softwareInfo) {
+    if (
+      this.paymentMethods[GOOGLE_PAY_PMI] &&
+      !this.paymentMethods[GOOGLE_PAY_PMI].merchantInfo.softwareInfo
+    ) {
       this.paymentMethods[GOOGLE_PAY_PMI].merchantInfo.softwareInfo = {
         id: this.#name.split('/').pop(),
         version: this.#version,