react-native-purchases-ui

[ameenmattar]

• [x] I have updated Purchases SDK to the latest version
• [x] I have read the Contribution Guidelines
• [x] I have searched the Community
• [x] I have read docs.revenuecat.com
• [x] I have searched for existing Github issues

Describe the bug I am trying to follow the documentation for displaying the paywall in my app, I ran the following command line : npm i react-native-purchases-ui then I ran pod install too, and I am trying to Display the Paywall as mentioned in the documentation:

import RevenueCatUI, { PAYWALL_RESULT } from "../react-native-purchases-ui";

async function presentPaywall(): Promise<boolean> {
    const paywallResult: PAYWALL_RESULT = await RevenueCatUI.presentPaywall();

    switch (paywallResult) {
        case PAYWALL_RESULT.NOT_PRESENTED:
        case PAYWALL_RESULT.ERROR:
        case PAYWALL_RESULT.CANCELLED:
            return false;
        case PAYWALL_RESULT.PURCHASED:
        case PAYWALL_RESULT.RESTORED:
            return true;
        default:
            return false;
    }
}

async function presentPaywallIfNeeded() {
    const paywallResult: PAYWALL_RESULT = await RevenueCatUI.presentPaywallIfNeeded({
        requiredEntitlementIdentifier: "pro"
    });
}

I am gettinng the below error:

Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

1. Environment
   1. Platform: IOS
   2. SDK version: RevenueCat (4.32.0)
   3. OS version: Ventura 13.3
   4. Xcode/Android Studio version: Xcode Version 14.2 (14C18)
   5. React Native version: 0.68.2
   6. SDK installation (CocoaPods + version or manual): RNPurchases (7.16.0) RevenueCat (4.32.0) RevenueCatUI (4.32.0)

Any Clearer Docs for installation/Configuration ? Knowing that the SDK is configured correctly since I am retrieving the Offerings.

[RCGitBot]

👀 We've just linked this issue to our internal tracker and notified the team. Thank you for reporting, we're checking this out!

[NachoSoto]

Thanks for letting us know! We'll try to figure out the issue.

or there is an early initialization error when loading React Native.

Is there a chance you have more information in the logs? Could you also share with us your package.json?

[ameenmattar]

@NachoSoto Yes sure thats my package.json:

 "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.17.9",
    "@react-native-clipboard/clipboard": "^1.11.1",
    "@react-native-community/cli-debugger-ui": "^12.3.3",
    "@react-native-firebase/app": "^16.4.6",
    "@react-native-firebase/dynamic-links": "^16.4.6",
    "@react-navigation/bottom-tabs": "5.11.15",
    "@react-navigation/compat": "^5.3.20",
    "@react-navigation/drawer": "5.12.9",
    "@react-navigation/native": "5.9.8",
    "@react-navigation/stack": "5.14.9",
    "axios": "^0.27.2",
    "dayjs": "^1.11.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "install": "^0.13.0",
    "moment": "^2.29.4",
    "qs": "^6.11.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-actionsheet": "^2.4.2",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-audio-recorder-player": "^3.5.1",
    "react-native-awesome-alerts": "^2.0.0",
    "react-native-axios": "^0.17.1",
    "react-native-calendar-picker": "^7.1.2",
    "react-native-circular-progress": "^1.3.7",
    "react-native-confirmation-code-field": "^7.3.0",
    "react-native-contacts": "^7.0.4",
    "react-native-countdown-component": "^2.7.1",
    "react-native-country-picker-modal": "^2.0.0",
    "react-native-credit-card-input": "^0.3.1",
    "react-native-date-picker": "^4.2.5",
    "react-native-deep-linking": "^2.2.0",
    "react-native-device-info": "^10.0.2",
    "react-native-fast-image": "^8.5.11",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-google-pay": "^2.1.0",
    "react-native-gradle-plugin": "^0.70.1",
    "react-native-html-to-pdf": "^0.12.0",
    "react-native-image-crop-picker": "^0.38.0",
    "react-native-image-viewing": "^0.2.2",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-paper": "5.0.0-rc.4",
    "react-native-permissions": "^3.6.0",
    "react-native-phone-number-input": "^2.1.0",
    "react-native-purchases": "^7.16.1",
    "react-native-purchases-ui": "^7.16.1",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "^2.12.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.15.0",
    "react-native-size-matters": "^0.4.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^12.4.4",
    "react-native-swipeable-item": "^2.0.9",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-video": "^5.2.0",
    "react-native-webview": "^11.23.0",
    "react-redux": "^7.2.8",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "rn-fetch-blob": "^0.12.0",
    "vasern": "^0.3.68"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@types/node": "^18.11.9",
    "babel-jest": "^26.6.3",
    "eslint": "^8.26.0",
    "eslint-config-airbnb": "^19.0.4",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-native-clean-project": "^4.0.1",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

Unfortunately no additional logs, the app is not launching and displaying the Invariant Violation Error. If I remove the import lin: import RevenueCatUI, {PAYWALL_RESULT} from 'react-native-purchases-ui'; The app launches successfully.

Thank you 🙏

[NachoSoto]

Thank you! Have you tried this?

[ameenmattar]

Yes I did, but no luck, same error!

[ameenmattar]

@NachoSoto If I go to node_modules/react-native-purchases-ui/src/index.tsx I see the Error below:

Not sure if its related

[vegaro]

@ameenmattar I see in your original post you're importing

import RevenueCatUI, { PAYWALL_RESULT } from "../react-native-purchases-ui";

You should be doing

import RevenueCatUI, { PAYWALL_RESULT } from "react-native-purchases-ui";

Did you see that relative import in our docs?

[vegaro]

Just found where we are pointing to do that in our docs and I will update it. Please let us know if that was the issue.

[ameenmattar]

@ameenmattar I see in your original post you're importing

import RevenueCatUI, { PAYWALL_RESULT } from "../react-native-purchases-ui";

You should be doing

import RevenueCatUI, { PAYWALL_RESULT } from "react-native-purchases-ui";

Did you see that relative import in our docs?

@vegaro Yes I did that too, and still the app doesn't launch with the same error!

[vegaro]

What do you get if you try importing react-native-purchases?

import Purchases from 'react-native-purchases';

Also, can you please try removing node_modules and running npm install again? There's a suggestion here https://github.com/facebook/react-native/issues/32952#issuecomment-1022251585 to run npx react-native-clean-project

[ameenmattar]

@vegaro I did as you recommended removing the node_modules and running npx react-native-clean-project but still same Error once importing react-native-purchases-ui And concerning react-native-purchases If I import Purchases from react-native-purchases it works normally and the app launches successfully and more than that I am able to retrieve the offerings successfully , so this means the sdk is well downloaded and configured. The Erorr only appears if I import react-native-purchases-ui

[vegaro]

@ameenmattar I've been looking into this again and the only thing I can say is that I've tried creating a new project using npx react-native@0.68.2 init, then npm i react-native-purchases and npm i react-native-purchases-ui and added to App.tsx:

import Purchases from 'react-native-purchases';
import RevenueCatUI, { PAYWALL_RESULT } from "react-native-purchases-ui";
...

function App(): React.JSX.Element {
  Purchases.configure({
    apiKey: '-------',
  });

  useEffect(() => {
    const presentPaywall = async () => {
      const paywallResult: PAYWALL_RESULT = await RevenueCatUI.presentPaywall();
      console.log('Paywall result: ', paywallResult);
    };

    presentPaywall().catch(console.error); // Catch and log any errors
  }, []);

  return (
  ....

The app loads fine in both iOS and Android and I the paywall is displayed. So I am not sure what's going on with your project.

Do you have a minimal reproducible project I can try to run in my machine?

Thanks

[attali-david]

I'm having the same issue with react-native-purchase-ui.

I've tried all the proposed solutions, but I continue to get these errors: ERROR Invariant Violation:new NativeEventEmitter()requires a non-null argument., js engine: hermes ERROR Invariant Violation: "main" has not been registered.

[attali-david]

When I inspect the ios directory in the node module for react-native-purchase-ui, there's no .xcodeproj file. Could this be the reason why react native is unable to autolink the library?

[shashank-bhatotia]

I am facing this issue - Invariant Violation:new NativeEventEmitter()requires a non-null argument.

--

[shashank-bhatotia]

It seems that NativeModules.RNPaywalls invoked in the module is returning null -

[vegaro]

Are you both @shashank-bhatotia and @attali-david seeing the same linking issues in both iOS and Android? Or is it isolated to iOS

[vegaro]

If it's isolated to iOS, have you ran pod install in the iOS folder of your project? I've been reading about autolinking of libraries in react native and from 0.60 libraries are automatically linked (added to Podfile) but you still need to run "pod install" inside your iOS folder.

Your project has a Podfile correct?

We think we still need to add the xcodeproj file for whoever is manually linking libraries, but we want to understand which kind of setup you have.

[shashank-bhatotia]

have you ran pod install in the iOS folder of your project?

Yes. I am attaching screenshot of git diff for a. podfile.lock -

b. project.pbxproj -

Also attaching screenshots of the diffs for package.json and yarn.lock -

[attali-david]

Yes, I've run pod install.

package-lock_diff.txt

podfile_diff.txt

[attali-david]

I can confirm @shashank-bhatotia find that NativeModules.RNPaywalls invoked in the module is returning null.

LOG {"RNPaywalls": null}

[nunathanw]

any update on this? I'm running a development build and getting this error as well.

node_modules/react-native-purchases-ui/src/index.tsx const RNPaywalls = NativeModules.RNPaywalls; returns null

[shashank-bhatotia]

@vegaro Let us know if you need more information about our setup to dig into the issue.

[scottflear]

@vegaro same issues as the both have, could you let us know what we can do next please? For everyday we miss the paywall we're losing revenue. thanks.

[vegaro]

@shashank-bhatotia I don't see RNPaywalls nor RNPurchases in your Podfile diff, can you share both your whole podfile and the output of pod install? Thanks

@attali-david I do see RNPaywalls and RNPurchases in your podfile diff, which is good. If you open the xcworkspace of your project with xcode, do you see both in the Pods folder?

Can you confirm if the paywalls work in Android? We would like to rule out an iOS only issue, or an issue with the whole package.

I also will share soon a branch that adds an xcodeproj to the plugin just in case that's what's causing the issues. I have to fork the SDK before I can share that with you, since the react-native-purchases-ui lives in a subfolder of this repository, I will do that ASAP and share here for you to test.

We do have a Discord server https://discord.gg/KBfS58Cq , it would be very helpful to figure this out if you could join. We can talk more privately there, which will speed things up. We have a #paywalls-react-native we can use for this conversation. Thanks!

[vegaro]

Can you try using this dependency see if the problems are fixed?

npm install "https://github.com/vegaro/react-native-purchases.git#add-xcodeproj" --save

It's the same as 7.17.0 but with an xcodeproj file inside the ios folder

Package.json should look like

  "dependencies": {
...
    "react-native-purchases": "7.17.0",
    "react-native-purchases-ui": "github:vegaro/react-native-purchases#add-xcodeproj"
  },

Thanks!

[shashank-bhatotia]

I don't see RNPaywalls nor RNPurchases in your Podfile diff, can you share both your whole podfile and the output of pod install? Thanks

@vegaro RNPurchases was not a recent addition to Pods, we have been using RevenueCat in our project for some time. Which is why it was not present in this new branch's git diff for the pod file.

Nevertheless, here is the output for pod install -

Adding a custom script phase for Pod RNFBApp: [RNFB] Core Configuration
react-native-appsflyer: Using default AppsFlyerFramework. You may require App Tracking Transparency. Not allowed for Kids apps.
react-native-appsflyer: You may set variable `$RNAppsFlyerStrictMode=true` in Podfile to use strict mode for kids apps.
Auto-linking React Native modules for target `Trtle`: BVLinearGradient, BugsnagReactNative, CodePush, RNAppleHealthKit, RNCAsyncStorage, RNCMaskedView, RNCPushNotificationIOS, RNDeviceInfo, RNFBApp, RNFBRemoteConfig, RNFastImage, RNGestureHandler, RNPermissions, RNPurchases, RNReanimated, RNSVG, RNScreens, logrocket-react-native, react-native-app-auth, react-native-appsflyer, react-native-background-timer, react-native-blob-util, react-native-camera, react-native-config, react-native-date-picker, react-native-device-country, react-native-flipper, react-native-image-picker, react-native-orientation-locker, react-native-pager-view, react-native-pdf, react-native-randombytes, react-native-safe-area-context, react-native-skia, react-native-splash-screen, react-native-video, and react-native-webview
Analyzing dependencies
react-native-appsflyer: Using AppsFlyerFramework/Strict mode
Downloading dependencies
Generating Pods project
Integrating client project
Pod installation complete! There are 94 dependencies from the Podfile and 108 total pods installed.

And the following is the whole podfile -

require_relative "../node_modules/react-native/scripts/react_native_pods"
require_relative "../node_modules/@react-native-community/cli-platform-ios/native_modules"

platform :ios, "15.0"

target "Trtle" do
  config = use_native_modules!

  $RNAppsFlyerStrictMode = true

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false,
  )

  permissions_path = "../node_modules/react-native-permissions/ios"
  pod "Permission-Camera", :path => "#{permissions_path}/Camera"

  # RevenueCat
  pod 'RNPurchases', :path => '../node_modules/react-native-purchases', :inhibit_warnings => true, :modular_headers => false

  # RevenueCat Paywall
  pod 'RevenueCat'
  pod 'RevenueCatUI'

  target "TrtleTests" do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!({ 'Flipper'=> '0.161.0' })

  def __xcode_15_workaround(installer)
    xcode_version_output = `xcodebuild -version`
    xcode_version_match = xcode_version_output.match(/Xcode (\d+(\.\d+)?)/)

    if xcode_version_match
      xcode_version = Gem::Version.new(xcode_version_match[1])
      if xcode_version >= Gem::Version.new('15.0')
        installer.pods_project.targets.each do |target|
          target.build_configurations.each do |config|
            config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)', '_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION']
          end
        end
      end
    end
  end

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)

    __xcode_15_workaround(installer)

    # temporary fix for this issue to suppress a ton of warnings
    # https://github.com/CocoaPods/CocoaPods/issues/7314
    installer.pods_project.targets.each do |t|
      t.build_configurations.each do |config|
          config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.0'
      end
  end
  end
end

target "Trtle-tvOS" do
  # Pods for Trtle-tvOS

  target "Trtle-tvOSTests" do
    inherit! :search_paths
    # Pods for testing
  end
end

[attali-david]

@vegaro I installed your package with npm install "https://github.com/vegaro/react-native-purchases.git#add-xcodeproj" --save. I'm still getting the same error even after running a clean install using the following commands for a clean install.

rm -rf Pods/
rm Podfile.lock
pod install
cd ios
NODE_ENV=test npx expo start -c --dev-client

[shashank-bhatotia]

We do have a Discord server https://discord.gg/KBfS58Cq , it would be very helpful to figure this out if you could join. We can talk more privately there, which will speed things up. We have a #paywalls-react-native we can use for this conversation. Thanks!

Shows only #server-rules channel on the Discord server:

[vegaro]

@shashank-bhatotia please add a reaction to the only message in #server-rules to get acknowledge and get access to the other channels. I DMed you in Discord as well. Thanks

[attali-david]

@vegaro Here's a screenshot of my pod directory in xcode

[attali-david]

@vegaro I reached out to you on Discord. I don't see a #paywalls-react-native even after reacting to the message in #server-rules.

[vegaro]

It looks like @attali-david 's issues were related to Expo and running with NODE_ENV=test npx expo start -c --dev-client instead of running directly from xcode.

Are you also using expo development builds? @shashank-bhatotia @scottflear @nunathanw @ameenmattar

[brentvatne]

hi there! the native module is not found, it means that the app binary that you are running has not been compiled with the native code from the revenuecat sdk.

when you install a library that includes native code, you need to create a new development build. you can do this either in by using EAS or compiling locally. more info: https://docs.expo.dev/workflow/overview/#the-core-development-loop

[shashank-bhatotia]

Hi, @vegaro! I'm using bare React Native, not Expo.

Update: I have posted the message to continue this discussion on #paywalls-react-native channel on the RC Discord server as well: https://discord.com/channels/1121319986699440218/1201554998056726570/1201750925518307379

[vegaro]

We've just released version 7.18.0 which fixes autolinking for react-native < 0.69. Please make sure your react-native-purchases version is also set to 7.18.0

"react-native-purchases": "7.18.0",
"react-native-purchases-ui": "7.18.0",

Don't forget to run pod install in the ios folder as well.

We would appreciate if you can confirm the issues have been resolved for you so we can close this issue.

Thanks

[ameenmattar]

@vegaro I can CONFIRM that the issue is solved for me using the updated versions:

"react-native-purchases": "7.18.0",
"react-native-purchases-ui": "7.18.0",

The app is launching normally and the paywall now is appearing. Thank you for your support!

[shashank-bhatotia]

Great news! The issues have been resolved after updating to version 7.18.0 for both "react-native-purchases" and "react-native-purchases-ui," and running pod install in the iOS folder. Thanks for the fix, @vegaro!

🚀