Skip to main content

My app shows the paywall for a few seconds and then app crashes without any logs.

 

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({navigation}) {

const tisRevenueCatConnected, setIsRevenueCatConnected] = useState(false);

const tofferings, setOfferings] = useState(null);

const terror, setError] = useState(null);

 

useEffect(() => {

const connect = async () => {

try {

console.log('Initializing Purchases...');

await Purchases.configure({apiKey: 'my_api_key'});

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);

navigation.replace("sProcess")

}}

/>

</View>

);

}

 

export default Paywall;

Hey @coder,

What version of the RN Purchases SDK and UI are you currently on, and which Paywalls template are you attempting to display?