0

I have the following code:

function Paywall({ onPress }) {

const getPrice = async () => {
    try {
        const offerings = await Purchases.getOfferings();
        if (offerings.current !== null && offerings.current.availablePackages.length !== 0) {
            console.log("OFFERING");
            console.log(offerings.current.monthly);
        }
    } catch (e) {
        console.log(e);
    }

    return offerings
}

useEffect(() => {
    getPrice()
})

return (
    <View style={styles.container}>
        <View style={styles.priceContainer}>
            <Text style={styles.headerText}>£9.99</Text>
            <Text style={styles.perMonthText}>per month</Text>
        </View>
        <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.button} onPress={onPress}>
                <Text style={styles.buttonText}>Subscribe for £9.99 / month</Text>
            </TouchableOpacity>
        </View>
    </View>
  );
}

My log is bringing back:

{"identifier": "$rc_monthly", "offeringIdentifier": "sale", "packageType": "MONTHLY", "product": {"currency_code": "GBP", "description": "All Access", "discounts": null, "identifier": "app_499_1m", "introPrice": {"cycles": null, "period": null, "periodNumberOfUnits": null, "periodUnit": null, "price": null, "priceString": null}, "intro_price": null, "intro_price_cycles": null, "intro_price_period": null, "intro_price_period_number_of_units": null, "intro_price_period_unit": null, "intro_price_string": null, "price": 11.99, "price_string": "£11.99", "title": "All Access (App NAME)"}}

How can I display the price_string in my <Text>

<Text style={styles.headerText}>£9.99</Text>
Gurmukh Singh
  • 1,875
  • 3
  • 24
  • 62

2 Answers2

1

You have to make sure it is defined and then access the key:

<Text style={styles.headerText}>{offerings?.current?.monthly?.product?.price_string}</Text>
MWO
  • 2,627
  • 2
  • 10
  • 25
0

DO IT LIKE THIS

const getPrice = async () => {
  try {
    const offerings = await Purchases.getOfferings();
    if (offerings.current !== null && offerings.current.availablePackages.length !== 0) {
      console.log("OFFERING");
      console.log(offerings.current.monthly);
      setPriceTitle(offerings.current.monthly.product.priceString)
    }
  } catch (e) {
    console.log(e);
  }
}

useEffect(() => {
  getPrice()
}, [priceTitle])

return (
  <View style={styles.container}>
    <View style={styles.priceContainer}>
      <Text style={styles.headerText}>{priceTitle}</Text>
      <Text style={styles.perMonthText}>per month</Text>
    </View>
    <View style={styles.buttonContainer}>
      <TouchableOpacity style={styles.button} onPress={onPress}>
        <Text style={styles.buttonText}>Subscribe for {priceTitle} / month</Text>
      </TouchableOpacity>
    </View>
  </View>
);

}

salisuabubakar
  • 1