@@ -12,13 +12,6 @@ import {
12
12
requestPurchase ,
13
13
requestSubscription ,
14
14
} from 'expo-iap' ;
15
- import type {
16
- Product ,
17
- ProductPurchase ,
18
- PurchaseError ,
19
- SubscriptionProduct ,
20
- } from 'expo-iap/build/ExpoIap.types' ;
21
- import type { RequestSubscriptionAndroidProps } from 'expo-iap/build/types/ExpoIapAndroid.types' ;
22
15
import { Stack } from 'expo-router' ;
23
16
import { useEffect , useState } from 'react' ;
24
17
import {
@@ -33,6 +26,14 @@ import {
33
26
View ,
34
27
} from 'react-native' ;
35
28
import { t } from '../../../src/STRINGS' ;
29
+ import {
30
+ Product ,
31
+ ProductPurchase ,
32
+ PurchaseError ,
33
+ SubscriptionProduct ,
34
+ } from 'expo-iap/src/ExpoIap.types' ;
35
+ import { RequestSubscriptionAndroidProps } from 'expo-iap/src/types/ExpoIapAndroid.types' ;
36
+ import { ProductIos } from 'expo-iap/src/types/ExpoIapIos.types' ;
36
37
37
38
const productSkus = [
38
39
'cpk.points.200' ,
@@ -53,7 +54,8 @@ const operations = [
53
54
'getProducts' ,
54
55
'getSubscriptions' ,
55
56
'endConnection' ,
56
- ] ;
57
+ ] as const ;
58
+
57
59
type Operation = ( typeof operations ) [ number ] ;
58
60
59
61
export default function App ( ) {
@@ -70,23 +72,24 @@ export default function App() {
70
72
case 'endConnection' :
71
73
if ( await endConnection ( ) ) {
72
74
setProducts ( [ ] ) ;
75
+ setSubscriptions ( [ ] ) ;
73
76
setIsConnected ( false ) ;
74
77
}
75
78
break ;
76
79
77
80
case 'getProducts' :
78
81
try {
79
- const products = await getProducts ( productSkus ) ;
80
- setProducts ( products ) ;
82
+ const fetchedProducts = await getProducts ( productSkus ) ;
83
+ setProducts ( fetchedProducts ) ;
81
84
} catch ( error ) {
82
85
console . error ( error ) ;
83
86
}
84
87
break ;
85
88
86
89
case 'getSubscriptions' :
87
90
try {
88
- const subscriptions = await getSubscriptions ( subscriptionSkus ) ;
89
- setSubscriptions ( subscriptions ) ;
91
+ const fetchedSubscriptions = await getSubscriptions ( subscriptionSkus ) ;
92
+ setSubscriptions ( fetchedSubscriptions ) ;
90
93
} catch ( error ) {
91
94
console . error ( error ) ;
92
95
}
@@ -143,52 +146,59 @@ export default function App() {
143
146
) : (
144
147
< View style = { { gap : 12 } } >
145
148
< Text style = { { fontSize : 20 } } > Products</ Text >
146
- { products . map ( ( item ) => {
147
- if ( isProductAndroid ( item ) ) {
149
+ { products . map ( ( product ) => {
150
+ if ( isProductIos ( product ) ) {
151
+ const iosProduct : ProductIos = product ;
152
+
148
153
return (
149
- < View key = { item . title } style = { { gap : 12 } } >
154
+ < View key = { iosProduct . id } style = { { gap : 12 } } >
150
155
< Text >
151
- { item . title } -{ ' ' }
152
- { item . oneTimePurchaseOfferDetails ?. formattedPrice }
156
+ { iosProduct . displayName } - { iosProduct . displayPrice }
153
157
</ Text >
154
158
< Button
155
159
title = "Buy"
156
160
onPress = { ( ) => {
157
161
requestPurchase ( {
158
- skus : [ item . id ] ,
162
+ sku : product . id ,
159
163
} ) ;
160
164
} }
161
165
/>
162
166
</ View >
163
167
) ;
164
168
}
165
169
166
- if ( isProductIos ( item ) ) {
170
+ if ( isProductAndroid ( product ) ) {
167
171
return (
168
- < View key = { item . id } style = { { gap : 12 } } >
172
+ < View key = { product . title } style = { { gap : 12 } } >
169
173
< Text >
170
- { item . displayName } - { item . displayPrice }
174
+ { product . title } -{ ' ' }
175
+ { product . oneTimePurchaseOfferDetails ?. formattedPrice }
171
176
</ Text >
172
177
< Button
173
178
title = "Buy"
174
179
onPress = { ( ) => {
175
180
requestPurchase ( {
176
- sku : item . id ,
181
+ skus : [ product . id ] ,
177
182
} ) ;
178
183
} }
179
184
/>
180
185
</ View >
181
186
) ;
182
187
}
188
+
189
+ return null ;
183
190
} ) }
184
191
185
192
< Text style = { { fontSize : 20 } } > Subscriptions</ Text >
186
- { subscriptions . map ( ( item ) => {
187
- if ( isSubscriptionProductAndroid ( item ) ) {
188
- return item . subscriptionOfferDetails ?. map ( ( offer ) => (
189
- < View key = { offer . offerId } style = { { gap : 12 } } >
193
+ { subscriptions . map ( ( subscription ) => {
194
+ if ( isSubscriptionProductAndroid ( subscription ) ) {
195
+ return subscription . subscriptionOfferDetails ?. map ( ( offer ) => (
196
+ < View
197
+ key = { offer . offerId ?? subscription . id }
198
+ style = { { gap : 12 } }
199
+ >
190
200
< Text >
191
- { item . title } -{ ' ' }
201
+ { subscription . title } -{ ' ' }
192
202
{ offer . pricingPhases . pricingPhaseList
193
203
. map ( ( ppl ) => ppl . billingPeriod )
194
204
. join ( ',' ) }
@@ -197,11 +207,11 @@ export default function App() {
197
207
title = "Subscribe"
198
208
onPress = { ( ) => {
199
209
requestSubscription ( {
200
- skus : [ item . id ] ,
210
+ skus : [ subscription . id ] ,
201
211
...( offer . offerToken && {
202
212
subscriptionOffers : [
203
213
{
204
- sku : item . id ,
214
+ sku : subscription . id ,
205
215
offerToken : offer . offerToken ,
206
216
} ,
207
217
] ,
@@ -213,21 +223,23 @@ export default function App() {
213
223
) ) ;
214
224
}
215
225
216
- if ( isSubscriptionProductIos ( item ) ) {
226
+ if ( isSubscriptionProductIos ( subscription ) ) {
217
227
return (
218
- < View key = { item . id } style = { { gap : 12 } } >
228
+ < View key = { subscription . id } style = { { gap : 12 } } >
219
229
< Text >
220
- { item . displayName } - { item . displayPrice }
230
+ { subscription . displayName } - { subscription . displayPrice }
221
231
</ Text >
222
232
< Button
223
233
title = "Subscribe"
224
234
onPress = { ( ) => {
225
- requestSubscription ( { sku : item . id } ) ;
235
+ requestSubscription ( { sku : subscription . id } ) ;
226
236
} }
227
237
/>
228
238
</ View >
229
239
) ;
230
240
}
241
+
242
+ return null ;
231
243
} ) }
232
244
</ View >
233
245
) }
@@ -252,7 +264,6 @@ const styles = StyleSheet.create({
252
264
} ,
253
265
buttonsWrapper : {
254
266
padding : 24 ,
255
-
256
267
gap : 8 ,
257
268
} ,
258
269
buttonView : {
0 commit comments