npx create-expo-app@latest premium-routes
cd premium-routes

npx expo install expo-dev-client
eas build --profile development --platform ios
# or: eas build --profile development --platform android

npx expo install react-native-purchases react-native-purchases-ui

// app/_layout.tsx
import { useEffect } from 'react';
import { Platform } from 'react-native';
import { Stack } from 'expo-router';
import Purchases, { LOG_LEVEL } from 'react-native-purchases';

const API_KEYS = {
  apple: 'appl_xxxxxxxxxxxxxxxxxxxxxxxx',
  google: 'goog_xxxxxxxxxxxxxxxxxxxxxxxx',
};

export default function RootLayout() {
  useEffect(() => {
    Purchases.setLogLevel(LOG_LEVEL.VERBOSE); // call before configure

    if (Platform.OS === 'ios') {
      Purchases.configure({ apiKey: API_KEYS.apple });
    } else if (Platform.OS === 'android') {
      Purchases.configure({ apiKey: API_KEYS.google });
    }
  }, []);

  return <Stack />;
}

// hooks/useProAccess.ts
import { useEffect, useState } from 'react';
import Purchases, { CustomerInfo } from 'react-native-purchases';

export const ENTITLEMENT_ID = 'pro';

export function useProAccess() {
  const [isPro, setIsPro] = useState(false);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    let active = true;

    // A single function reference, reused for the initial read,
    // the listener, and the cleanup.
    const update = (info: CustomerInfo) => {
      if (active) {
        setIsPro(typeof info.entitlements.active[ENTITLEMENT_ID] !== 'undefined');
      }
    };

    // 1) Read the current state once.
    Purchases.getCustomerInfo()
      .then((info) => { if (active) update(info); })
      .catch((e) => console.warn('getCustomerInfo failed', e))
      .finally(() => { if (active) setIsReady(true); });

    // 2) Subscribe to future changes (purchases, renewals, restores).
    Purchases.addCustomerInfoUpdateListener(update);

    // 3) Clean up: stop pending state updates and remove the SAME reference.
    return () => {
      active = false;
      Purchases.removeCustomerInfoUpdateListener(update);
    };
  }, []);

  return { isPro, isReady };
}

app/
  _layout.tsx          # root Stack: RevenueCat config + the route guard
  (tabs)/
    _layout.tsx        # Tabs: Home + Settings (always visible)
    index.tsx          # Home (free) with an "Unlock Premium" button
    settings.tsx       # Settings (free) with a "Restore Purchases" button
  (premium)/
    _layout.tsx        # Stack for premium-only screens
    analytics.tsx      # premium screen, gated by the "pro" entitlement
hooks/
  useProAccess.ts      # from Step 4

// app/(premium)/_layout.tsx
import { Stack } from 'expo-router';

export default function PremiumLayout() {
  return <Stack />;
}

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="settings" options={{ title: 'Settings' }} />
    </Tabs>
  );
}

// app/_layout.tsx (guard added)
import { Stack } from 'expo-router';
import { useProAccess } from '../hooks/useProAccess';

export default function RootLayout() {
  const { isPro } = useProAccess();

  return (
    <Stack>
      {/* Always available */}
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />

      {/* Only mounted while the user holds the "pro" entitlement */}
      <Stack.Protected guard={isPro}>
        <Stack.Screen name="(premium)" options={{ headerShown: false }} />
      </Stack.Protected>
    </Stack>
  );
}

// app/(tabs)/index.tsx
import { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { useRouter } from 'expo-router';
import RevenueCatUI, { PAYWALL_RESULT } from 'react-native-purchases-ui';
import { useProAccess, ENTITLEMENT_ID } from '../../hooks/useProAccess';

export default function Home() {
  const router = useRouter();
  const { isPro } = useProAccess();
  const [pendingUnlock, setPendingUnlock] = useState(false);

  const unlockPremium = async () => {
    // Shows the paywall only if the entitlement is missing.
    const result = await RevenueCatUI.presentPaywallIfNeeded({
      requiredEntitlementIdentifier: ENTITLEMENT_ID,
    });

    if (result === PAYWALL_RESULT.PURCHASED || result === PAYWALL_RESULT.RESTORED) {
      // Express intent. Do NOT navigate yet: the guard flips asynchronously
      // when the listener fires, so the route may not be mounted this tick.
      setPendingUnlock(true);
    }
  };

  // Navigate only once isPro has actually committed and the route is mounted.
  // This avoids a race where router.push targets a still-protected route and
  // gets redirected straight back to the tabs.
  useEffect(() => {
    if (pendingUnlock && isPro) {
      setPendingUnlock(false);
      router.replace('/analytics'); // group segment "(premium)" is not part of the URL
    }
  }, [pendingUnlock, isPro, router]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 24, gap: 16 }}>
      <Text>Free content for everyone.</Text>
      <Button title="Unlock Premium" onPress={unlockPremium} />
    </View>
  );
}

import Purchases from 'react-native-purchases';
import { ENTITLEMENT_ID } from '../../hooks/useProAccess';

async function buyPro() {
  const offerings = await Purchases.getOfferings();
  const pkg = offerings.current?.availablePackages[0];
  if (!pkg) return;

  try {
    const { customerInfo } = await Purchases.purchasePackage(pkg);
    if (typeof customerInfo.entitlements.active[ENTITLEMENT_ID] !== 'undefined') {
      // Unlocked. The listener will also pick this up and flip the guard.
    }
  } catch (e: any) {
    if (!e.userCancelled) {
      // Show a real error; userCancelled just means the user backed out.
      console.warn('Purchase failed', e);
    }
  }
}

// app/(tabs)/settings.tsx
import { View, Button } from 'react-native';
import Purchases from 'react-native-purchases';

export default function Settings() {
  const restore = async () => {
    try {
      await Purchases.restorePurchases();
      // No navigation needed: the listener flips the guard if access was restored.
    } catch (e) {
      console.warn('Restore failed', e);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
      <Button title="Restore Purchases" onPress={restore} />
    </View>
  );
}

// app/_layout.tsx (final)
import { useEffect } from 'react';
import { Platform } from 'react-native';
import { Stack, SplashScreen } from 'expo-router';
import Purchases, { LOG_LEVEL } from 'react-native-purchases';
import { useProAccess } from '../hooks/useProAccess';

const API_KEYS = {
  apple: 'appl_xxxxxxxxxxxxxxxxxxxxxxxx',
  google: 'goog_xxxxxxxxxxxxxxxxxxxxxxxx',
};

// Run once at module load, BEFORE any component renders. Configuring here (not
// inside an effect) guarantees the SDK is ready before the hook's first
// getCustomerInfo() call, because a child's effects run before its parent's.
SplashScreen.preventAutoHideAsync();
Purchases.setLogLevel(LOG_LEVEL.VERBOSE);
if (Platform.OS === 'ios') {
  Purchases.configure({ apiKey: API_KEYS.apple });
} else if (Platform.OS === 'android') {
  Purchases.configure({ apiKey: API_KEYS.google });
}

// When a protected route is blocked, redirect to the tabs.
export const unstable_settings = { anchor: '(tabs)' };

export default function RootLayout() {
  const { isPro, isReady } = useProAccess();

  useEffect(() => {
    if (isReady) SplashScreen.hideAsync();
  }, [isReady]);

  // Hold the splash until the first entitlement check resolves.
  if (!isReady) return null;

  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Protected guard={isPro}>
        <Stack.Screen name="(premium)" options={{ headerShown: false }} />
      </Stack.Protected>
    </Stack>
  );
}