_layout.tsx

import DrawerNavigation from "@/components/DrawerNavigation";

export default function RootLayout() {
  return (
     <DrawerNavigation />
  );
}

DrawerContent.tsx

import {
  DrawerContentScrollView,
  DrawerItem,
  DrawerContentComponentProps,
} from "@react-navigation/drawer";
import { View, Linking } from "react-native";

export default function DrawerContent(props: DrawerContentComponentProps) {
  const handleFeedbackPress = async () => {
    const email = EMAIL;
    const subject = encodeURIComponent("Slip Feedback");

    try {
      await Linking.openURL(`mailto:${email}?subject=${subject}`);
    } catch (error) {
      console.error("Error opening email:", error);
    }
  };

  return (
    <DrawerContentScrollView
      {...props}
      contentContainerStyle={{
        justifyContent: "space-between",
        flex: 1,
      }}
    >
      <View>
        <DrawerItem
          label="Workout"
          onPress={() => props.navigation.navigate("index")}
          labelStyle={{
            fontSize: 18,
          }}
        />
          <DrawerItem
            label="Unlock Pro"
            onPress={() => props.navigation.navigate("upgrade")}
            labelStyle={{
              fontSize: 18,
            }}
          />
      </View>
      <View>
        <DrawerItem
          label="Send feedback"
          onPress={handleFeedbackPress}
          labelStyle={{
            fontSize: 18,
          }}
        />
      </View>
    </DrawerContentScrollView>
  );
}

DrawerNavigation.tsx

import { Drawer } from "expo-router/drawer";
import DrawerContent from "@/components/DrawerContent";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function DrawerNavigation() {
  return (
    <GestureHandlerRootView>
      <Drawer drawerContent={DrawerContent}>
        <Drawer.Screen
          name="index"
          key="index"
          options={{
            drawerLabel: "Workout",
            title: "",
            headerShown: true,
            headerTransparent: true,
            headerTintColor: "white",
          }}
        />
        <Drawer.Screen
          name="upgrade"
          key="upgrade"
          options={{
            drawerLabel: "Unlock Pro",
            title: "",
            headerShown: true,
            headerTransparent: true,
            headerTintColor: "white",
          }}
        />
      </Drawer>
    </GestureHandlerRootView>
  );
}

package.json

{
  "name": "slip",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-native-picker/picker": "2.7.5",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/native": "^6.0.2",
    "expo": "~51.0.12",
    "expo-av": "~14.0.5",
    "expo-build-properties": "~0.12.3",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.16",
    "expo-font": "~12.0.7",
    "expo-linking": "~6.3.1",
    "expo-router": "^3.5.18",
    "expo-secure-store": "~13.0.1",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "^1.12.1",
    "expo-system-ui": "~3.0.6",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.2",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-purchases": "^7.28.1",
    "react-native-purchases-ui": "^7.28.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.1",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true
}

Paywall.tsx

import { View, Alert } from "react-native";
import RevenueCatUI from "react-native-purchases-ui";
import { router } from "expo-router";

export default function Paywall() {
  return (
    <View
      style={{ flex: 1 }}
    >
      <RevenueCatUI.Paywall
        onPurchaseCompleted={() => {
          console.log("Purchase completed successfully");

          router.push("/");
          Alert.alert("Purchase success!");
        }}
      />
    </View>
  );
}

upgrade.tsx

import Paywall from "@/components/Paywall";

export default function UpgradePage() {
  return <Paywall />;
}