khadinakbarlabs/expo-mobile-app-builder/design-paywall

[Today]──────[Day 5: reminder]──────[Day 7: charge]
   ↑                                       ↑
Full access                          $49.99/year

import RevenueCatUI, { PAYWALL_RESULT } from 'react-native-purchases-ui';
async function presentPaywall() {
  const result = await RevenueCatUI.presentPaywall({
    requiredEntitlementIdentifier: 'pro',
  });
  if (result === PAYWALL_RESULT.PURCHASED) {
    // grant access
  }
}

import { useEffect, useState } from 'react';
import Purchases, { PurchasesOffering } from 'react-native-purchases';
function PaywallScreen() {
  const [offerings, setOfferings] = useState<PurchasesOffering | null>(null);
  const [selectedPackage, setSelectedPackage] = useState(null);
  useEffect(() => {
    Purchases.getOfferings().then((o) => {
      setOfferings(o.current);
      setSelectedPackage(o.current?.annual);
    });
  }, []);
  const purchase = async () => {
    if (!selectedPackage) return;
    try {
      const { customerInfo } = await Purchases.purchasePackage(selectedPackage);
      if (customerInfo.entitlements.active['pro']) {
        // grant
      }
    } catch (e) { /* show error */ }
  };
  const restore = async () => {
    const customerInfo = await Purchases.restorePurchases();
    // check entitlements
  };
  return (
    <ScrollView>
      <Image source={require('@/assets/paywall-hero.png')} />
      <Text style={styles.headline}>The only food log that finishes itself</Text>
      <Text style={styles.subhead}>47,000 meals logged this week</Text>
      {offerings?.availablePackages.map((pkg) => (
        <PackageRow
          key={pkg.identifier}
          package={pkg}
          selected={selectedPackage?.identifier === pkg.identifier}
          onPress={() => setSelectedPackage(pkg)}
        />
      ))}
      <TrialTimelineGraphic />
      <Button title="Start 3-day free trial" onPress={purchase} />
      <View style={styles.trustRow}>
        <Pressable onPress={restore}><Text>Restore</Text></Pressable>
        <Link href="https://...">Terms</Link>
        <Link href="https://...">Privacy</Link>
      </View>
    </ScrollView>
  );
}