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 [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: '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;
