Skip to Content
FeaturesOnboarding

Onboarding

Onboarding Screen 1Onboarding Screen 2

Onboarding Configuration (app/onboardingScreen.jsx)

  • Content: Configure onboardingData array with image, title, and description for each screen.
  • Images: Add onboarding images to assets/images/onboarding/ directory.
  • Completion Handler: Modify handleOnboardingDone for post-onboarding navigation.

Example (onboardingScreen.jsx)

import { useUserData } from "./providers/userDataProvider"; const onboardingData = [ { image: require("../assets/images/onboarding/screen1.jpg"), title: "Ready to Launch", description: "Start building your app instantly with pre-configured payments, database, push notifications and components.", }, { image: require("../assets/images/onboarding/screen2.jpg"), title: "Built-in Services", description: "RevenueCat for payments, Appwrite for backend services, and Expo notifications - all integrated and ready to use out of the box.", }, { image: require("../assets/images/onboarding/screen3.jpg"), title: "Beautiful Components", description: "Leverage a rich library of reusable components designed to look great and speed up your development. Build polished screens with ease.", }, ]; const handleOnboardingDone = async () => { await finishOnboarding(); };

Usage

Onboarding is enabled by default in app/(tabs)/_layout.jsx. You can remove it there if not needed.