# new InappProductsApi()

Example

externalCodeSetup.inappProductsHooksApi.METHOD_NAME

# setIAPAreDisabledComponent(IAPDisabledMessageComponent)

Parameters:

Example

externalCodeSetup.inappProductsHooksApi.setIAPAreDisabledComponent((props) => <Text> IAP Purchases are disabled </Text>)

# setProductsListComponent(ProductsListComponent)

Parameters:

Example

Show specific products for a certain user while maintaining the default buddyboss components and styling

...

//Import BuddyBoss components...
import { ProductsList } from "@src/components/inAppPurchases/ProductList";
import ScreenHeader from "@src/components/ScreenHeader";
import { isMainNavigator } from "@src/utils/configUtils";
import { backButton } from "@src/utils";
import { getBottomTabBarHeight } from "@src/navigators/AppBottomTabBar";
import { correctBottomSafeArea } from "@src/styles/global";
export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.inappProductsHooksApi.setProductsListComponent((props) => {

   const { navigation, screenProps } = props;
   const { t, global, colors, calcFontSize } = screenProps;

   //Display 1 product for a specific user
   const productsToDisplay = props.storeProductPairs && props.user.id == 1 ? [props.storeProductPairs[0]] : props.storeProductPairs

   const mainNavigator = isMainNavigator(navigation);

   const headerLeft = useMemo(
     () =>
       !mainNavigator
         ? backButton({
           navigation,
           styles: { marginLeft: 0 },
           headerColor: colors.headerIconColor,
           text: t("common:back"),
           textStyle: global.headerText
         })
         : null,
     [mainNavigator]
   );

   const headerTitle = <Text style={global.appHeaderTitle} numberOfLines={1}>
     {t("productsScreen:title")}
   </Text>;

   return <View
     style={{
       flex: 1,
       backgroundColor: colors.bodyBg,
       paddingBottom:
         mainNavigator && Platform.OS === "ios"
           ? getBottomTabBarHeight() +
           correctBottomSafeArea(insets.bottom) -
           10
           : 0
     }}
   >
     <ScreenHeader
       global={global}
       colors={colors}
       headerLeft={headerLeft}
       headerTitle={headerTitle}
	        style={[
         global.header,
         {
           borderBottomColor: colors.borderColor,
           borderBottomWidth: StyleSheet.hairlineWidth,
           backgroundColor: colors.headerBg
         }
       ]}
     />
     <Text style={{ paddingVertical: 10 }}> Hey {props.user.name}! Check out these latest deals for you </Text>
     <ProductsList
       {...props}
       storeProductPairs={productsToDisplay} //Customize products to display
     />
   </View>
 });
}

const getStyles = (colors, calcFontSize) =>
 StyleSheet.create({
   htmlViewContainer: {
     paddingHorizontal: 16,
     paddingTop: 20,
     alignItems: "center"
   }
 });