CODEWITHSUNDEEP
revenuecat
Daniel Haidari
Daniel Haidari

Reputation: 21

App crashes with RevenueCat Paywall & react native CLI

I'm working on a React Native app where I need to integrate RevenueCat for in-app purchases. I'm using the react-native-purchases and react-native-purchases-ui libraries. However, my app keeps crashing when I try to display the RevenueCatUI.Paywall component. The same code works fine when running from Xcode the first time , but it crashes when running from the React Native CLI. 90% of the time the same code works fine and when refreshing it crashes.

`import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import Purchases from 'react-native-purchases';
import RevenueCatUI from 'react-native-purchases-ui';

function Paywall() {
  const [isRevenueCatConnected, setIsRevenueCatConnected] = useState(false);
  const [offerings, setOfferings] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const connect = async () => {
      try {
        console.log('Initializing Purchases...');
        await Purchases.configure({apiKey: 'APIKEY'});
        console.log('Purchases initialized successfully');
        setIsRevenueCatConnected(true);

        // Fetch offerings
        const offeringsResponse = await Purchases.getOfferings();
        setOfferings(offeringsResponse.current);
      } catch (err) {
        console.error('Error connecting to RevenueCat:', err);
        setError(err);
      }
    };
    connect();
  }, []);

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Error connecting to RevenueCat: {error.message}</Text>
      </View>
    );
  }

  if (!isRevenueCatConnected) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text>Connecting to RevenueCat...</Text>
      </View>
    );
  }

  if (!offerings) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text>Loading offerings...</Text>
      </View>
    );
  }

  return (
    <View style={{flex: 1}}>
      <RevenueCatUI.Paywall
      options={{
        offering:offerings
      }}
      onPurchaseCompleted={(purchase) => {
        console.log('Purchase completed:', purchase);
      }}
    />
    </View>
  );
}

export default Paywall;`

I tried everything such as going back over revneucat library and updating the libraries I am able to fetch my products and offerings

Upvotes: 0

Views: 204

Answers (1)

acronimax
acronimax

Reputation: 16

Could you try to separate the SDK initialization from the RevenueCatUI.Paywall. i mean first show to the user a preview like what is your product or just a splash screen in that screen you initialize the SDK and when the user move to next screen, in this new screen you put the RevenueCatUI.Paywall itself without any surround element like:

return (<RevenueCatUI.Paywall ... 

UI Example Navigation

(first screen) -> (paywall screen)

Remember to have the same version in both packages like

"react-native-purchases": "^8.2.6", 
"react-native-purchases-ui": "8.2.6",

Upvotes: 0

Related Questions