import React, { useEffect, useState } from 'react'
import { StyleSheet, Image, View, ActivityIndicator } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { adapty } from 'react-native-adapty' // "2.7.0-canary.1"
import { createPaywallView } from '@adapty/react-native-ui' //"^2.0.0-canary.1"
import { useAppDispatch } from '../state/store'
import { loadLessonsAsync } from '../state/slices/lessonSlice'
const LandingPage = () => {
const navigation = useNavigation()
const thunkDispatch = useAppDispatch()
let unsubscribe: (() => void) | undefined
const [isLoading, setIsLoading] = useState(false)
const loadLessons = async () => {
thunkDispatch(loadLessonsAsync())
}
const showPaywall = async () => {
setIsLoading(true)
try {
const id = 'onboarding.v1'
const locale = 'en'
const paywall = await adapty.getPaywall(id, locale)
const view = await createPaywallView(paywall)
unsubscribe = view.registerEventHandlers({
onCloseButtonPress() {
console.log('close button press')
return true
},
onProductSelected() {
console.log('product selected')
},
onLoadingProductsFailed(error) {
console.log('loading products failed', error)
},
onPurchaseCancelled() {
console.log('purchase cancelled')
},
onPurchaseCompleted(profile) {
console.log('purchase completed ', profile)
loadLessons().then(() => {
navigation.navigate('Dashboard' as never)
})
return true
},
onPurchaseFailed(error) {
console.log('purchase error ', error)
},
onPurchaseStarted() {
console.log('purchase started')
},
onRenderingFailed(error) {
console.log('error rendering ', error)
},
onRestoreCompleted(profile) {
console.log('restore completed ', profile)
console.log(profile)
loadLessons().then(() => {
navigation.navigate('Dashboard' as never)
})
return true
},
onRestoreFailed(error) {
console.log('restore failed', error)
},
onAction(action) {
console.log('action', action)
},
})
await view.present()
} catch (error) {
console.error(error)
} finally {
setIsLoading(false)
}
}
useEffect(() => {
showPaywall()
return () => {
if (unsubscribe) {
unsubscribe()
}
}
}, [])
return (
<View style={styles.pageContainer}>
{isLoading && (
<View style={styles.spinnerOverlay}>
<ActivityIndicator size="large" color="#ffffff" />
</View>
)}
<Image
source={require('../../assets/images/appIcon.png')}
resizeMode="contain"
style={styles.image}
/>
</View>
)
}
const styles = StyleSheet.create({
pageContainer: {
backgroundColor: '#6B53FF',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
resizeMode: 'contain',
},
image: {
width: '100%',
height: '100%',
},
spinnerOverlay: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(107,83,255,0.8)',
zIndex: 1000,
justifyContent: 'center',
alignItems: 'center',
},
})
export default LandingPage
Hi I am trying to render a paywall that I built in adapty. It is rendering fine and I am able to make a purchase that gets reflected in the adapty dashboard and in my sandbox ios settings. However most of my event handlers never get called. The main one I need is onPurchaseCompleted. This never gets called even after a successful purchase. The only ones that ever get called are onProductSelected, onPurchaseStarted, and onRestoreCompleted (when I restore). Any help would be greatly appreciated