TypeError: null is not an object (evaluating '_reactNativeBraintreeDropinUi.default.show')

[RajaZahid]

Getting error: TypeError: null is not an object (evaluating '_reactNativeBraintreeDropinUi.default.show')

Following function is being used to display BraintreeDropIn:

const onPressMakePayment = () => {

 BraintreeDropIn.show({
 clientToken: '123',
  merchantIdentifier: 'applePayMerchantIdentifier',
  googlePayMerchantId: 'googlePayMerchantId',
  countryCode: 'US',    //apple pay setting
  currencyCode: 'USD',   //apple pay setting
  merchantName: 'Your Merchant Name for Apple Pay',
  orderTotal:'Total Price',
  googlePay: true,
  applePay: true,
  vaultManager: true,
  payPal: true, 
  cardDisabled: false,
  darkTheme: true,
})
.then(result => console.log(result))
.catch((error) => {
  if (error.code === 'USER_CANCELLATION') {
    // update your UI to handle cancellation
  } else {
    // update your UI to handle other errors
  }
});

}

react-native-cli: 2.0.1 react-native: 0.69.4

I have noticed "BraintreeDropIn" is null which is causing issue.

[ArseniyChern]

+1

[RajaZahid]

@wgltony Any idea what could be wrong?

[fahad86]

+1

[short-dsb]

Just figured this out and wanted to share…

When React Native removed link and unlink from the CLI, they also changed two things:

1. The *.podspec file now needs to be in the root of the project.
2. A podspecPath can no longer be defined in react-native.config.js

To fix, you can apply the following patch via patch-package and the drop-in UI should work again in iOS on React Native 0.69.

diff --git a/node_modules/react-native-braintree-dropin-ui/ios/RNBraintreeDropIn.podspec b/node_modules/react-native-braintree-dropin-ui/RNBraintreeDropIn.podspec
similarity index 85%
rename from node_modules/react-native-braintree-dropin-ui/ios/RNBraintreeDropIn.podspec
rename to node_modules/react-native-braintree-dropin-ui/RNBraintreeDropIn.podspec
index 8835268..cdd07e7 100644
--- a/node_modules/react-native-braintree-dropin-ui/ios/RNBraintreeDropIn.podspec
+++ b/node_modules/react-native-braintree-dropin-ui/RNBraintreeDropIn.podspec
@@ -1,17 +1,17 @@
 Pod::Spec.new do |s|
   s.name         = "RNBraintreeDropIn"
-  s.version      = "1.0.0"
+  s.version      = "1.1.3"
   s.summary      = "RNBraintreeDropIn"
   s.description  = <<-DESC
                   RNBraintreeDropIn
                    DESC
   s.homepage     = "https://github.com/bamlab/react-native-braintree-payments-drop-in"
   s.license      = "MIT"
-  # s.license      = { :type => "MIT", :file => "../LICENSE" }
+  # s.license      = { :type => "MIT", :file => "./LICENSE" }
   s.author             = { "author" => "[email protected]" }
   s.platform     = :ios, "9.0"
   s.source       = { :git => "https://github.com/BradyShober/react-native-braintree-dropin-ui.git", :tag => "master" }
-  s.source_files  = "*.{h,m}"
+  s.source_files  = "ios/**/*.{h,m}"
   s.requires_arc = true
   s.dependency    'React'
   s.dependency    'Braintree'
diff --git a/node_modules/react-native-braintree-dropin-ui/react-native.config.js b/node_modules/react-native-braintree-dropin-ui/react-native.config.js
index f162c2b..6550b2f 100644
--- a/node_modules/react-native-braintree-dropin-ui/react-native.config.js
+++ b/node_modules/react-native-braintree-dropin-ui/react-native.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = {
   dependency: {
     platforms: {
-      ios: { podspecPath: path.join(__dirname, 'ios', 'RNBraintreeDropIn.podspec') },
+      ios: {},
       android: {
       	packageImportPath: 'import tech.power.RNBraintreeDropIn.RNBraintreeDropInPackage;',
         packageInstance: 'new RNBraintreeDropInPackage()',

Hope this helps!

[mgdeveloper7]

Just figured this out and wanted to share…

When React Native removed link and unlink from the CLI, they also changed two things:

1. The *.podspec file now needs to be in the root of the project.
2. A podspecPath can no longer be defined in react-native.config.js

To fix, you can apply the following patch via patch-package and the drop-in UI should work again in iOS on React Native 0.69.

diff --git a/node_modules/react-native-braintree-dropin-ui/ios/RNBraintreeDropIn.podspec b/node_modules/react-native-braintree-dropin-ui/RNBraintreeDropIn.podspec
similarity index 85%
rename from node_modules/react-native-braintree-dropin-ui/ios/RNBraintreeDropIn.podspec
rename to node_modules/react-native-braintree-dropin-ui/RNBraintreeDropIn.podspec
index 8835268..cdd07e7 100644
--- a/node_modules/react-native-braintree-dropin-ui/ios/RNBraintreeDropIn.podspec
+++ b/node_modules/react-native-braintree-dropin-ui/RNBraintreeDropIn.podspec
@@ -1,17 +1,17 @@
 Pod::Spec.new do |s|
   s.name         = "RNBraintreeDropIn"
-  s.version      = "1.0.0"
+  s.version      = "1.1.3"
   s.summary      = "RNBraintreeDropIn"
   s.description  = <<-DESC
                   RNBraintreeDropIn
                    DESC
   s.homepage     = "https://github.com/bamlab/react-native-braintree-payments-drop-in"
   s.license      = "MIT"
-  # s.license      = { :type => "MIT", :file => "../LICENSE" }
+  # s.license      = { :type => "MIT", :file => "./LICENSE" }
   s.author             = { "author" => "[email protected]" }
   s.platform     = :ios, "9.0"
   s.source       = { :git => "https://github.com/BradyShober/react-native-braintree-dropin-ui.git", :tag => "master" }
-  s.source_files  = "*.{h,m}"
+  s.source_files  = "ios/**/*.{h,m}"
   s.requires_arc = true
   s.dependency    'React'
   s.dependency    'Braintree'
diff --git a/node_modules/react-native-braintree-dropin-ui/react-native.config.js b/node_modules/react-native-braintree-dropin-ui/react-native.config.js
index f162c2b..6550b2f 100644
--- a/node_modules/react-native-braintree-dropin-ui/react-native.config.js
+++ b/node_modules/react-native-braintree-dropin-ui/react-native.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = {
   dependency: {
     platforms: {
-      ios: { podspecPath: path.join(__dirname, 'ios', 'RNBraintreeDropIn.podspec') },
+      ios: {},
       android: {
       	packageImportPath: 'import tech.power.RNBraintreeDropIn.RNBraintreeDropInPackage;',
         packageInstance: 'new RNBraintreeDropInPackage()',

Hope this helps!

Thanks for that.

The changes above also resolved the issue I had in the thread https://github.com/wgltony/react-native-braintree-dropin-ui/issues/90