In-app purchase integration

[Jonathanlau92]

Hi all,

I am trying to build a react native app with appstore inapp purchase integration to it, but I'm facing difficulty in the integration, mainly not being able to use getProducts()

To summarize, I've built a context API method for IAP following this tutorial, https://soshace.com/build-real-world-react-native-app-10-setup-in-app-purchase-in-ios/, and called it on useEffect() in my app.js

However, when I console.log my IAP with getProducts(), I am getting a response of {"_U": 0, "_V": 0, "_W": null, "_X": null}

Could anybody help me with this issue? I've set up my paid app on the app store connect as well with in-app purchase.

---

context.js

import React, { createContext, useState, useContext } from 'react';
import * as RNIap from 'react-native-iap';
import { Alert, Platform } from 'react-native'
export const IAPContext = createContext();

const itemSkus = Platform.select({
    ios: [
        'download.will.premium'
    ],
    android: [
       ''
    ]
 });

export const IAPProvider = ({ children }) => {
    const [purchased, setPurchased] = useState(true);
    const [products, setProducts] = useState({})
    const initIAp = async () => {
        try {
            const isReady = await RNIap.initConnection();
            if (isReady) {
                console.log("Before products: ", RNIap.getProducts(itemSkus))
                console.log("Itemskus: ", itemSkus)
                const products = await RNIap.getProducts(itemSkus);
                // if (Platform.OS === 'android') {
                //     const subscription = await RNIap.getSubscriptions(itemSkus);
                //     products.push(subscription[0])
                // }
                console.log("initial product: ",products)
                setProducts({ products });
                console.log(products)
            }
        } catch (err) {
            console.warn(err); // standardized err.code and err.message available
        }
    }
    return (
        <IAPContext.Provider value={{ 
            initIAp,
            products
        }}>
            {children}
        </IAPContext.Provider>
    );
}

app.js

import React, { useContext, useEffect, useState } from "react";
import { IAPContext } from "../context/IAPContext";

const App = () => {
  const { initIAp } = useContext(IAPContext);

  useEffect(() => {
    initIAp()
  }, [])

return (
    <SafeAreaView style={{flex:1}}>
      <NavigationContainer>
        {user ? <AppStack /> : <AuthStack />}
      </NavigationContainer>
    </SafeAreaView>
  );

When console.log, this is what was return:

Before products:  {"_U": 0, "_V": 0, "_W": null, "_X": null}
Itemskus:  ["download.will.premium"]

Thank you so much in advanced. Been stuck for a few days now...

[Haider-Ali-7]

I'm in same situation as you. What version were you using? How did you resolve it?

I'm using these versions:

"react": "17.0.2",
"react-native": "0.66.4",
"react-native-iap": "^10.0.0",