Skip to content

Fixes #904#940

Open
MiguelBebensee wants to merge 2 commits intoAdyen:developfrom
MiguelBebensee:develop
Open

Fixes #904#940
MiguelBebensee wants to merge 2 commits intoAdyen:developfrom
MiguelBebensee:develop

Conversation

@MiguelBebensee
Copy link

Issue: Invariant Violation: new NativeEventEmitter() requires a non-null argument on iOS when opening Drop-in (React Native 0.80.2)
Root cause: In v2.9.0, getWrapper.ts imports AdyenDropIn through a barrel re-export:

import { AdyenApplePay, AdyenDropIn, AdyenGooglePay, AdyenInstant } from '..';

This resolves through modules/index.ts, which re-exports from each submodule. On React Native 0.80.2 with Metro bundler, AdyenDropIn is undefined at the time getWrapper() is called, causing new NativeEventEmitter(undefined) to throw the invariant violation on iOS.

This was not an issue in v2.8.0 because getWrapper created a new wrapper instance each call (new DropInComponentWrapper()) using a directly imported native module, rather than referencing a pre-constructed singleton through a barrel export.

Fix: Replace the barrel import with direct imports:

import { AdyenDropIn } from '../dropin/AdyenDropIn';
import { AdyenApplePay } from '../applepay/AdyenApplePay';
import { AdyenGooglePay } from '../googlepay/AdyenGooglePay';
import { AdyenInstant } from '../instant/AdyenInstant';

This is likely not reproducible on RN 0.83.1 due to Metro bundler improvements in newer React Native versions.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @MiguelBebensee, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a critical runtime error on iOS for React Native applications using Adyen's Drop-in component. The fix addresses an issue with module resolution in older React Native versions by modifying how specific Adyen components are imported, ensuring they are correctly defined when accessed.

Highlights

  • Fixes Invariant Violation on iOS: Addressed an 'Invariant Violation: new NativeEventEmitter() requires a non-null argument' error occurring on iOS when opening Drop-in, specifically with React Native 0.80.2.
  • Module Import Resolution: Resolved an issue where AdyenDropIn was undefined due to a barrel re-export mechanism in modules/index.ts when using Metro bundler on React Native 0.80.2.
  • Direct Imports Implemented: Replaced the problematic barrel import for Adyen components (AdyenApplePay, AdyenDropIn, AdyenGooglePay, AdyenInstant) with direct imports from their respective module paths.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/modules/base/getWrapper.ts
    • Replaced barrel import with direct imports for Adyen components to resolve an 'Invariant Violation' on iOS.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request effectively resolves an invariant violation on iOS by replacing a problematic barrel import with direct imports in getWrapper.ts. This is a clear and direct fix for the circular dependency issue encountered with older React Native versions. The change improves the stability of module loading. I have one suggestion to further improve code maintainability.

Comment on lines 9 to 12
import { AdyenDropIn } from '../dropin/AdyenDropIn';
import { AdyenApplePay } from '../applepay/AdyenApplePay';
import { AdyenGooglePay } from '../googlepay/AdyenGooglePay';
import { AdyenInstant } from '../instant/AdyenInstant';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For improved code readability and maintainability, it's a good practice to keep import statements sorted alphabetically by path. This makes it easier to locate specific imports and can help prevent merge conflicts in the future.

Suggested change
import { AdyenDropIn } from '../dropin/AdyenDropIn';
import { AdyenApplePay } from '../applepay/AdyenApplePay';
import { AdyenGooglePay } from '../googlepay/AdyenGooglePay';
import { AdyenInstant } from '../instant/AdyenInstant';
import { AdyenApplePay } from '../applepay/AdyenApplePay';
import { AdyenDropIn } from '../dropin/AdyenDropIn';
import { AdyenGooglePay } from '../googlepay/AdyenGooglePay';
import { AdyenInstant } from '../instant/AdyenInstant';

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant