Onboarding


Onboarding Configuration (app/onboardingScreen.jsx)
- Content: Configure
onboardingDataarray with image, title, and description for each screen. - Images: Add onboarding images to
assets/images/onboarding/directory. - Completion Handler: Modify
handleOnboardingDonefor 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.