fetchProducts failing on 14.x

[Richard-HeadCoach]

I feel the should be an issue report, but I don't have the option so over to the wise people in the forum

RN 0.81.4

"react-native-iap": "^14.4.1",
"react-native-nitro-modules": "^0.29.6",

The call

useEffect(() => {
if (connected) {
fetchProducts({ skus: productIds, type: 'subs' });
}
}, [connected, fetchProducts]);

results in the warning

react-native-iap] Unknown iOS product type "auto-renewable-subscription", defaulting to NonConsumable.

I have checked using the manage options in developer->sandbox-apple-ID and can purchase a subscription so I know my subscriptions are available in the sandbox store. However, the code below fails because no products are retuned from the fetchProduct call

Here is my full code

import React, { useEffect, useState } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Linking,
Platform,
Pressable,
} from 'react-native';
import { useIAP, getStorefrontIOS } from 'react-native-iap';
import CustomModal from '@components/Modals/CustomModal';
import { WINDOW_HEIGHT, WINDOW_WIDTH } from '@styles/commonStyles';
import { AppleReceiptValidationResponse } from '@interfaces/ApiResponse.type';
import { SOME_RECEIPT_VALIDATION_ACTION } from '@redux/actions/subscription.action'; // anonymized
import { useDispatch } from 'react-redux';
import DeviceInfo from 'react-native-device-info';

const productIds = [
'com.exampleapp.sub.monthly', // anonymized
'com.exampleapp.sub.annual', // anonymized
];

interface SubscriptionPurchaseModalProps {
visible: boolean;
onClose: () => void;
}

const SubscriptionPurchaseModal: React.FC = ({
visible,
onClose,
}) => {
const dispatch = useDispatch();
const [isUSStorefront, setIsUSStorefront] = useState(false);
const [purchaseStatus, setPurchaseStatus] = useState<null | 'success' | 'error'>(null);

const {
connected,
products,
fetchProducts,
requestPurchase,
validateReceipt,
} = Platform.OS === 'ios'
? useIAP({
onPurchaseSuccess: async (purchase) => {
console.log('🟢 onPurchaseSuccess fired:', purchase);

      try {
        await new Promise<AppleReceiptValidationResponse>((resolve, reject) => {
          if (!purchase.id) {
            reject(new Error('No purchase id found'));
            return;
          }
          dispatch({
            type: SOME_RECEIPT_VALIDATION_ACTION, // anonymized
            payload: { receiptData: purchase.id },
            meta: { resolve, reject },
          });
        });

        console.log('🟢 Receipt validated successfully');
        setPurchaseStatus('success');
      } catch (error) {
        console.error('🔴 Validation failed:', error);
        setPurchaseStatus('error');
      }
    },
    onPurchaseError: (error) => {
      console.error('🔴 onPurchaseError fired:', error);
      setPurchaseStatus('error');
    },
  })
: {
    connected: false,
    products: [],
    fetchProducts: async () => {
      if (Platform.OS === 'ios') console.log('⚠️ wrong fetchProducts called');
    },
    requestPurchase: async () => {},
    validateReceipt: async () => {},
  };

// Storefront check
useEffect(() => {
if (Platform.OS === 'ios') {
const fetchStorefront = async () => {
try {
const sf = await getStorefrontIOS();
console.log('📦 Storefront =', sf);
setIsUSStorefront(sf === 'USA');
} catch (e) {
console.warn('⚠️ Failed to get storefront', e);
}
};
fetchStorefront();
}
}, []);

useEffect(() => {
console.log('📦 Runtime bundle ID:', DeviceInfo.getBundleId());
}, []);

useEffect(() => {
console.log('isUsStoreFront =', isUSStorefront);
}, [isUSStorefront]);

useEffect(() => {
console.log('📦 products state updated =', JSON.stringify(products, null, 2));
}, [products]);

useEffect(() => {
console.log('connected =', connected);

if (connected) {
  console.log('🔵 Fetching subscriptions...');
  fetchProducts({ skus: productIds, type: 'subs' });
}

}, [connected, fetchProducts]);

const handleAppleSubscribe = async (productId: string) => {
if (Platform.OS !== 'ios') return;
try {
console.log('🔵 requestPurchase called for', productId);
await requestPurchase({
request: { ios: { sku: productId } },
type: 'subs',
});
} catch (err) {
console.warn('🔴 Purchase request error', err);
}
};

const handleExternalSubscribe = () => {
Linking.openURL('https://example.com/pricing'); // anonymized
};

const openTermsLink = () => Linking.openURL('https://example.com/terms'); // anonymized
const openPrivacyLink = () => Linking.openURL('https://example.com/privacy'); // anonymized
const openAppleEulaLink = () =>
Linking.openURL('https://www.apple.com/legal/internet-services/itunes/dev/stdeula');

return (


{/* Purchase success */}
{purchaseStatus === 'success' && (
<View style={{ alignItems: 'center' }}>
<Text style={{ textAlign: 'center', marginBottom: 10, color: 'green', fontWeight: '600' }}>
✅ Subscription successful!{'\n'}
It may take a short while to activate as Apple webhooks process your purchase.


Close


)}

    {/* Purchase error */}
    {purchaseStatus === 'error' && (
      <View style={{ alignItems: 'center' }}>
        <Text style={{ textAlign: 'center', marginBottom: 10, color: 'red', fontWeight: '600' }}>
          ❌ Payment failed.{'\n'}
          Please try again later.
        </Text>
        <TouchableOpacity style={styles.subscribeButton} onPress={onClose}>
          <Text style={styles.buttonText}>Close</Text>
        </TouchableOpacity>
      </View>
    )}

    {/* Default subscription UI */}
    {purchaseStatus === null && (
      <>
        <Text style={styles.title}>Subscribe for Training!</Text>
        <Text style={styles.desc}>
          Unlock all features and strategies to improve your performance.
        </Text>

        {Platform.OS === 'ios' && (
          <>
            {connected ? (
              products.length > 0 ? (
                products.map((p) => (
                  <TouchableOpacity
                    key={p.id}
                    style={styles.subscribeButton}
                    onPress={() => handleAppleSubscribe(p.id)}
                  >
                    <Text style={styles.buttonText}>{p.title}</Text>
                    <Text style={styles.descText}>{p.description}</Text>
                    <Text style={styles.priceText}>{p.displayPrice}</Text>
                  </TouchableOpacity>
                ))
              ) : (
                <Text style={styles.desc}>No subscriptions are currently available.</Text>
              )
            ) : (
              <Text style={styles.desc}>Unable to connect to App Store.</Text>
            )}

            <View style={styles.termsContainer}>
              <View style={styles.termsInnerContainer}>
                <Pressable onPress={openTermsLink}>
                  <Text style={styles.link}>Terms and Conditions</Text>
                </Pressable>
                <Pressable onPress={openPrivacyLink}>
                  <Text style={styles.link}>Privacy Policy</Text>
                </Pressable>
                <Pressable onPress={openAppleEulaLink}>
                  <Text style={styles.link}>Apple Standard EULA</Text>
                </Pressable>
              </View>
            </View>
          </>
        )}

        {((Platform.OS === 'ios' && isUSStorefront) || Platform.OS === 'android') && (
          <>
            {Platform.OS === 'ios' && <Text style={styles.divider}>---- OR ----</Text>}
            <TouchableOpacity style={styles.subscribeButton} onPress={handleExternalSubscribe}>
              <Text style={styles.buttonText}>Subscribe on Website</Text>
              <Text style={styles.priceText}>Best value available</Text>
            </TouchableOpacity>
          </>
        )}
      </>
    )}
  </View>
</CustomModal>

);
};

export default SubscriptionPurchaseModal;

const styles = StyleSheet.create({
card: {
backgroundColor: '#fff',
padding: WINDOW_WIDTH * 0.06,
borderRadius: WINDOW_WIDTH * 0.05,
alignItems: 'center',
},
title: {
fontSize: WINDOW_WIDTH * 0.05,
fontWeight: '700',
marginBottom: WINDOW_HEIGHT * 0.01,
textAlign: 'center',
},
desc: {
fontSize: WINDOW_WIDTH * 0.036,
textAlign: 'center',
marginBottom: WINDOW_HEIGHT * 0.025,
color: '#333',
},
subscribeButton: {
width: '100%',
backgroundColor: '#007AFF',
paddingVertical: WINDOW_HEIGHT * 0.014,
paddingHorizontal: WINDOW_WIDTH * 0.1,
borderRadius: WINDOW_WIDTH * 0.03,
alignItems: 'center',
marginBottom: WINDOW_HEIGHT * 0.02,
},
buttonText: {
color: '#fff',
fontSize: WINDOW_WIDTH * 0.042,
fontWeight: '700',
textAlign: 'center',
},
descText: {
color: '#fff',
fontSize: WINDOW_WIDTH * 0.025,
marginTop: WINDOW_HEIGHT * 0.004,
},
priceText: {
color: '#fff',
fontSize: WINDOW_WIDTH * 0.036,
marginTop: WINDOW_HEIGHT * 0.004,
},
divider: {
fontSize: WINDOW_WIDTH * 0.035,
fontWeight: '600',
color: '#555',
marginVertical: WINDOW_HEIGHT * 0.015,
},
termsContainer: {
flexDirection: 'row',
alignItems: 'flex-start',
marginTop: WINDOW_WIDTH * 0.05,
},
termsInnerContainer: {
flexDirection: 'column',
justifyContent: 'flex-start',
},
link: {
fontFamily: 'Quicksand_Regular',
color: '#000',
opacity: 0.8,
textDecorationLine: 'underline',
textAlign: 'left',
marginBottom: WINDOW_HEIGHT * 0.01,
},
});

[hyochan]

That warning about auto-renewable-subscription is just noise from our mapping layer — not the reason you’re getting no products. On iOS, fetchProducts just returns whatever StoreKit 2 gives us. If the array is empty, it usually means the App Store Connect setup isn’t complete.

Common causes:

• Paid Apps Agreement / tax & banking not fully accepted
• Product IDs don’t exactly match your bundle ID
• Product not marked Cleared for Sale or storefront (e.g. USA) not included
• In-app purchase capability not enabled in Xcode
• Testing on Simulator (needs real device)

👉 Please double-check your setup against our guide:
https://www.openiap.dev/docs/ios-setup

Once those conditions are met, fetchProducts will start returning your subscriptions.

[Richard-HeadCoach]

Thanks for the reply

I can access the subscriptions from the manage option on the developer->sandbox Apple account, so I know they are there and working.

As they are part of an app that has not been approved then they are in Waiting For Review state, but they are accessible from the device.

[jslok]

Also having trouble with subscriptions. fetchProducts is not finding my subscription that is active and working even on v13. Not seeing any error or warning though.

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

    const initializeIAP = async () => {
      try {
        // Get both products and subscriptions
        //fetchProducts({ skus: [lifetimeId], type: 'in-app' })
        fetchProducts({ skus: ['monthly_1'], type: 'subs' })
      } catch (error) {
        console.error('Error initializing IAP:', error)
      }
    }

    initializeIAP()
  }, [connected])

[Richard-HeadCoach]

Hi, is type 'subs' or 'subscriptions'? I've been using 'subs', maybe that is why my subscriptions aren't being fetched?

[jslok]

'subs' is right. Sorry I hijacked your thread. I'm unsure about your issue.

[Richard-HeadCoach]

Hijack away, it's all searchable on the end 😂

[jslok]

Great to hear it works when fetching separately. I just tested the type: 'all' path and you’re right — the mapping was incorrect and everything was getting pushed into subscriptions. That flag was experimental and didn’t have full coverage. Thanks for the heads-up!

I’ve fixed it and published [email protected]. From 14.4.7+:

• products ⇒ in-app products only (consumable/non-consumable)
• subscriptions ⇒ subscription items only

Please upgrade and try again:

# npm
npm i react-native-iap@^14.4.7
# yarn
yarn add react-native-iap@^14.4.7
# pnpm
pnpm add react-native-iap@^14.4.7

await fetchProducts({ skus: productIds, type: 'all' });
// Now check `products` vs `subscriptions` from useIAP state

If you still see any mixing after upgrading, share the SKUs and a debug log and I’ll take another look. Thanks again!

I updated, but still seeing everything go into subscriptions instead of split by products and subscriptions. Tried to enable debug mode but looks like setDebugMode has been removed.

[hyochan]

@jslok The problem is that Android itself doesn't distinguish in-app or subs type itself. I've managed to parse this in ts side so hopefully this will work in 14.4.8. Sorry for inconvenience again!

[Richard-HeadCoach]

@hyochan - I am still struggling to get the products[] to update. I have turned on the debug in storekit and can see the subscription is pulled from the sandbox correctly, but products array is not being updated.

[RnIap] fetchProducts.native result: [{"type":"subs","id":"com.headcoachapp.sub.monthly_individual"}]

[hyochan]

@Richard-HeadCoach I can't help you without specific information. Did you go over example codes either?

[Richard-HeadCoach]

Yes, I've reviewed the example code dozens of times... I can't see a difference in my code compared to the example code.

I am on RN 0.81.4, "react-native-iap": "^14.4.1", and "react-native-nitro-modules": "^0.29.6". I am using XCode 16.2 with platform: ios '16.0'

This whole code is self-contained, so there is no other reference to iap in the code apart from the component below. I am not using an IapProvider as I believe that was removed for 13 onwards.

I know that the product is fetched from Apple as I see the [RnIap] message I included above. I am just not seeing products being updated.

`

import React, { useEffect, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Linking,
  Platform,
  Pressable,
} from 'react-native';
import { useIAP, getStorefrontIOS } from 'react-native-iap';
import CustomModal from '@components/Modals/CustomModal';
import { WINDOW_HEIGHT, WINDOW_WIDTH } from '@styles/commonStyles';
import { AppleReceiptValidationResponse } from '@interfaces/ApiResponse.type';
import { VALIDATE_APPLE_RECEIPT_ACTION } from '@redux/actions/subscription.action';
import { useDispatch } from 'react-redux';
import DeviceInfo from 'react-native-device-info';

const productIds = [
  'com.example.sub.monthly_individual',
];

interface SubscriptionPurchaseModalProps {
  visible: boolean;
  onClose: () => void;
}

const SubscriptionPurchaseModal: React.FC<SubscriptionPurchaseModalProps> = ({
  visible,
  onClose,
}) => {
  const dispatch = useDispatch();
  const [isUSStorefront, setIsUSStorefront] = useState(false);
  const [purchaseStatus, setPurchaseStatus] = useState<null | 'success' | 'error'>(null);

  const {
    connected,
    products,
    fetchProducts,
    requestPurchase,
    finishTransaction,
  } = Platform.OS === 'ios'
      ? useIAP({
        onPurchaseSuccess: async (purchase) => {
          console.log('onPurchaseSuccess fired:', purchase);

          try {
            // Validate with backend
            await new Promise<AppleReceiptValidationResponse>((resolve, reject) => {
              if (!purchase.id) {
                reject(new Error('No purchase id found'));
                return;
              }
              dispatch({
                type: VALIDATE_APPLE_RECEIPT_ACTION,
                payload: { receiptData: purchase.purchaseToken },
                meta: { resolve, reject },
              });
            });

            if (finishTransaction) {
              console.log('Receipt validated successfully');
              await finishTransaction({ purchase, isConsumable: false });
            }
            setPurchaseStatus('success');
          } catch (error) {
            console.error('Validation failed:', error);
            setPurchaseStatus('error');
          }
        },

        onPurchaseError: (error) => {
          console.error('onPurchaseError fired:', error);
          setPurchaseStatus('error');
        },
      })
      : {
        connected: false,
        products: [],
        fetchProducts: async () => {
          if (Platform.OS === 'ios') console.log('⚠️ wrong fetchProducts called');
        },
        requestPurchase: async () => { },
      };


  // Storefront check
  useEffect(() => {
    if (Platform.OS === 'ios') {
      const fetchStorefront = async () => {
        try {
          const sf = await getStorefrontIOS();
          console.log('Storefront =', sf);
          setIsUSStorefront(sf === 'USA');
        } catch (e) {
          console.warn('Failed to get storefront', e);
        }
      };
      fetchStorefront();
    }
  }, []);


  useEffect(() => {
    console.log('Runtime bundle ID:', DeviceInfo.getBundleId());
  }, []);


  // Log storefront changes
  useEffect(() => {
    console.log('isUsStoreFront =', isUSStorefront);
  }, [isUSStorefront]);


  // Fetch products once connected
  useEffect(() => {
    console.log('connected =', connected);

    if (connected) {
      console.log('Fetching subscriptions...');
      fetchProducts({ skus: productIds, type: 'subs' });
    }
  }, [connected, fetchProducts]);


  // Log products whenever they change
  useEffect(() => {
    console.log('products state updated =', JSON.stringify(products, null, 2));
  }, [products]);


  const handleAppleSubscribe = async (productId: string) => {
    if (Platform.OS !== 'ios') return;
    try {
      console.log('requestPurchase called for', productId);
      await requestPurchase({
        request: { ios: { sku: productId } },
        type: 'subs',
      });
    } catch (err) {
      console.warn('Purchase request error', err);
    }
  };


  const handleExternalSubscribe = () => {
    Linking.openURL('https://www.example.com/pricing');
  };

  const openTermsLink = () => Linking.openURL('https://www.example.com/terms');
  const openPrivacyLink = () => Linking.openURL('https://www.example.com/privacy');
  const openAppleEulaLink = () =>
    Linking.openURL('https://www.apple.com/legal/internet-services/itunes/dev/stdeula');

  return (
    <CustomModal
      visible={visible}
      onBackdropPress={onClose}
      onBackButtonPress={onClose}
      backdropColor="black"
    >
      <View style={styles.card}>
        {/* Purchase success */}
        {purchaseStatus === 'success' && (
          <View style={{ alignItems: 'center' }}>
            <Text style={{ textAlign: 'center', marginBottom: 10, color: 'green', fontWeight: '600' }}>
              ✅ Subscription successful!{'\n'}
              It may take a short while to activate as Apple webhooks process your purchase.
            </Text>
            <TouchableOpacity style={styles.subscribeButton} onPress={onClose}>
              <Text style={styles.buttonText}>Close</Text>
            </TouchableOpacity>
          </View>
        )}

        {/* Purchase error */}
        {purchaseStatus === 'error' && (
          <View style={{ alignItems: 'center' }}>
            <Text style={{ textAlign: 'center', marginBottom: 10, color: 'red', fontWeight: '600' }}>
              ❌ Payment failed.{'\n'}
              Please try again later.
            </Text>
            <TouchableOpacity style={styles.subscribeButton} onPress={onClose}>
              <Text style={styles.buttonText}>Close</Text>
            </TouchableOpacity>
          </View>
        )}

        {/* Default subscription UI */}
        {purchaseStatus === null && (
          <>
            <Text style={styles.title}>Subscribe for Brain Training!</Text>
            <Text style={styles.desc}>
              Unlock all features and strategies to improve your performance.
            </Text>

            {Platform.OS === 'ios' && (
              <>
                {connected ? (
                  products.length > 0 ? (
                    products.map((p) => (
                      <TouchableOpacity
                        key={p.id}
                        style={styles.subscribeButton}
                        onPress={() => handleAppleSubscribe(p.id)}
                      >
                        <Text style={styles.buttonText}>{p.title}</Text>
                        <Text style={styles.descText}>{p.description}</Text>
                        <Text style={styles.priceText}>{p.displayPrice}</Text>
                      </TouchableOpacity>
                    ))
                  ) : (
                    <Text style={styles.desc}>No subscriptions are currently available.</Text>
                  )
                ) : (
                  <Text style={styles.desc}>Unable to connect to App Store.</Text>
                )}

                <View style={styles.termsContainer}>
                  <View style={styles.termsInnerContainer}>
                    <Pressable onPress={openTermsLink}>
                      <Text style={styles.link}>Terms and Conditions</Text>
                    </Pressable>
                    <Pressable onPress={openPrivacyLink}>
                      <Text style={styles.link}>Privacy Policy</Text>
                    </Pressable>
                    <Pressable onPress={openAppleEulaLink}>
                      <Text style={styles.link}>Apple Standard EULA</Text>
                    </Pressable>
                  </View>
                </View>
              </>
            )}

            {((Platform.OS === 'ios' && isUSStorefront) || Platform.OS === 'android') && (
              <>
                {Platform.OS === 'ios' && <Text style={styles.divider}>---- OR ----</Text>}
                <TouchableOpacity style={styles.subscribeButton} onPress={handleExternalSubscribe}>
                  <Text style={styles.buttonText}>Subscribe on Website</Text>
                  <Text style={styles.priceText}>Best value available</Text>
                </TouchableOpacity>
              </>
            )}
          </>
        )}
      </View>
    </CustomModal>
  );
};

export default SubscriptionPurchaseModal;

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    padding: WINDOW_WIDTH * 0.06,
    borderRadius: WINDOW_WIDTH * 0.05,
    alignItems: 'center',
  },
  title: {
    fontSize: WINDOW_WIDTH * 0.05,
    fontWeight: '700',
    marginBottom: WINDOW_HEIGHT * 0.01,
    textAlign: 'center',
  },
  desc: {
    fontSize: WINDOW_WIDTH * 0.036,
    textAlign: 'center',
    marginBottom: WINDOW_HEIGHT * 0.025,
    color: '#333',
  },
  subscribeButton: {
    width: '100%',
    backgroundColor: '#007AFF',
    paddingVertical: WINDOW_HEIGHT * 0.014,
    paddingHorizontal: WINDOW_WIDTH * 0.1,
    borderRadius: WINDOW_WIDTH * 0.03,
    alignItems: 'center',
    marginBottom: WINDOW_HEIGHT * 0.02,
  },
  buttonText: {
    color: '#fff',
    fontSize: WINDOW_WIDTH * 0.042,
    fontWeight: '700',
    textAlign: 'center',
  },
  descText: {
    color: '#fff',
    fontSize: WINDOW_WIDTH * 0.025,
    marginTop: WINDOW_HEIGHT * 0.004,
  },
  priceText: {
    color: '#fff',
    fontSize: WINDOW_WIDTH * 0.036,
    marginTop: WINDOW_HEIGHT * 0.004,
  },
  divider: {
    fontSize: WINDOW_WIDTH * 0.035,
    fontWeight: '600',
    color: '#555',
    marginVertical: WINDOW_HEIGHT * 0.015,
  },
  termsContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginTop: WINDOW_WIDTH * 0.05,
  },
  termsInnerContainer: {
    flexDirection: 'column',
    justifyContent: 'flex-start',
  },
  link: {
    fontFamily: 'Quicksand_Regular',
    color: '#000',
    opacity: 0.8,
    textDecorationLine: 'underline',
    textAlign: 'left',
    marginBottom: WINDOW_HEIGHT * 0.01,
  },
});

`

[hyochan]

@Richard-HeadCoach The main issue is that when you call

fetchProducts({ skus: productIds, type: 'subs' });

the results go into subscriptions, not products.
That’s why your console shows fetched items but the UI stays empty.

✅ Fix:

const { connected, products, subscriptions, fetchProducts } = useIAP(...);

and render:

subscriptions.map((s) => (
  <TouchableOpacity key={s.id} onPress={() => handleAppleSubscribe(s.id)}>
    <Text>{s.title}</Text>
    <Text>{s.displayPrice}</Text>
  </TouchableOpacity>
))

Your fetchProducts call is already correct — no need to change its syntax.

Also, check the official example here:
👉 https://hyochan.github.io/expo-iap/docs/examples/subscription-flow
It shows that fetchProducts({ skus, type: 'subs' }) fills the subscriptions array.

[Richard-HeadCoach]

Ah, man, thank you SO much... Really appreciate you indulging me!

[hyochan]

You're very welcome 😊
No worries at all — happy to help!