how to use in multi component

[WinnieS0728]

according to doc.

we should not use initConnection in multi place.

but useIAP will trigger initConnection

multi screen

if I have ProductScreen and VIPScreen.

I can buy products in ProductScreen and subscribe VIP in VIPScreen.

should I use useIAP in both screen.
or should I create a IAPProvider and initial once and pass everything down to Screen.

const context = createContext();
function IAPProvider({children}) {
    const data = useIAP();

    return <context.Provider value={data}>{children}</context.Provider>;
}

function ProductScreen() {
    // should I do this?
    const {connected, requestProducts} = useIAP();
    // or do this?
    const {connected: connectedFromContext, requestProducts: requestProductsFromContext} = useContext(context);
    return <></>;
}

function VIPScreen() {
    // should I do this?
    const {connected, requestProducts} = useIAP();
    // or do this?
    const {connected: connectedFromContext, requestProducts: requestProductsFromContext} = useContext(context);
    return <></>;
}

if I use useIAP in both screen, will it trigger initConnection twice?
witch is suggest not to do in doc.

different component

what if we use requestProducts to render ProductList
but use requestPurchase in product card.

function ProductList() {
    // should I do this?
    const {connected, products, requestProducts} = useIAP();
    // or do this?
    const {connected: connectedFromContext, products: productsFromContext, requestProducts: requestProductsFromContext} = useContext(context);

    useEffect(() => {
        if (!connected) {
            return;
        }

        requestProducts({
            skus: [],
            type: 'inapp',
        });
    }, [connected, requestProducts]);

    if (!products || products.length === 0) {
        return <Text>loading...</Text>;
    }

    return (
        <View>
            {products.map(product => (
                <ProductCard product_id={product.id} />
            ))}
        </View>
    );
}

function ProductCard({product_id}) {
    // should I do this?
    const {requestPurchase} = useIAP();
    // or do this?
    const {requestPurchase: requestPurchaseFromContext} = useContext(context);

    async function handleBuy() {
        try {
            requestPurchase({
                request: {
                    ios: {
                        sku: product_id,
                        andDangerouslyFinishTransactionAutomaticallyIOS: false,
                    },
                },
            });
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <View>
            <Text>product name</Text>
            <TouchableOpacity onPress={handleBuy}>buy</TouchableOpacity>
        </View>
    );
}

can someone explain how to use this tool in multi place?

[hyochan]

You're slightly misunderstanding how this should work.

According to the docs, the key point is:

---

🛑 Connection Management Issues

❌ Don't initialize the connection repeatedly:

// Wrong - don't initialize for every operation
const purchaseProduct = async (sku) => {
  await initConnection(); // Don't do this
  await requestPurchase({ sku });
  await endConnection(); // Don't do this
};

✅ Maintain a single connection throughout the app lifecycle:

// Correct - use existing connection
const purchaseProduct = async (sku) => {
  if (connected) {
    await requestPurchase({ sku });
  } else {
    console.error('Store not connected');
  }
};

---

✅ Recommended Usage

Using useIAP() in multiple screens is fine as long as it internally prevents multiple initConnection() calls (which it usually does).

You don't need to create a global IAPProvider unless you want to share the same context or data across many components.

---

💡 Intent

Avoid initializing the connection for every action — instead, establish it once and reuse it safely across the app.

[WinnieS0728]

Thank you for your response. I really like this package as it makes handling IAP much more convenient.

We have different opinions within our team and would like to seek more input from others or developers to help us understand better.

My perspective is that each useIAP call should be an independent event with all states being independent (including connection). This is why expo-iap chose to use useState + hooks approach, not context.

However, some of my colleagues believe that each useIAP call will reset the connection. Their evidence is from useIAP.ts, where useEffect triggers initIapWithSubscriptions -> initConnection, so if two useIAP hooks are used simultaneously, it would cause duplicate connections.

like the following image, all useIAP hooks appear on the page at the same time.

I think this is fine and it's the recommended way, because product list has it's own state. and each product card has their own state and it's independent.

other side says all useIAP will trigger useEffect at the same time, so it will cause duplicate connections.

maybe in this case we should create a provider for this Product screen to share data from Product list's useIAP?

Which side is more convincing, or is there something wrong with our understanding?