Feature: Onboarding
Relevant source files
The following files were used as context for generating this wiki page:
The onboarding system in eefashiondesign is designed to introduce new users to the application's core functionalities and provide ongoing guidance. It is composed of two primary parts: a one-time introductory slideshow (OnboardingScreen) shown on the first launch, and an on-demand, contextual tutorial system (TutorialOverlay) that can be triggered by the user at any time.
The system's state, specifically whether the initial onboarding has been completed, is persisted in the device's local storage. This ensures that users only see the introductory slides once.
App Launch and Onboarding Logic
On application startup, App.js orchestrates the decision of whether to show the OnboardingScreen or the main application interface. This logic is governed by the onboardingCompleted flag retrieved from the global useAppStore.
Sources: App.js:460-468, src/screens/OnboardingScreen.js:58
App Launch Flow
The following diagram illustrates the application's launch sequence and how it determines which screen to display to the user.
This diagram shows the conditional rendering logic at the root of the application based on the onboardingCompleted state.
Sources: App.js:460-468
Initial Onboarding (OnboardingScreen)
This component is a full-screen, multi-slide introduction to the application's key features. It is implemented using a horizontal FlatList to create a swipeable interface.
Sources: src/screens/OnboardingScreen.js
Core Functionality
- Slideshow: Displays a series of informational slides defined in the
onboardingDataarray. - Pagination: An animated pagination indicator shows the user's progress through the slides.
- Navigation:
- A "Next" button advances to the next slide.
- On the final slide, the button text changes to "Get Started".
- A "Skip" button is available to bypass the onboarding process entirely.
- State Update: Upon completion or skipping, it calls
setOnboardingCompleted(true)to update the global state and prevent the onboarding screen from showing again.
Component Interaction Flow
This diagram details the user interactions and subsequent actions within the OnboardingScreen.
This sequence diagram illustrates the flow of events when a user interacts with the OnboardingScreen.
Sources: src/screens/OnboardingScreen.js:53-70
Onboarding Slide Configuration
The content for each slide is hardcoded in an array named onboardingData within OnboardingScreen.js.
| Property | Type | Description |
|---|---|---|
id | string | A unique identifier for the slide. |
title | string | The main heading for the slide. |
description | string | A brief description of the feature being highlighted. |
icon | string | The name of the MaterialCommunityIcons icon to display. |
color | array | An array of two color strings for the icon's background gradient. |
Sources: src/screens/OnboardingScreen.js:20-45
Ongoing Tutorial System
Beyond the initial onboarding, the app includes a system for on-demand tutorials, which is managed by useTutorialStore and rendered via the TutorialOverlay component. While the TutorialOverlay.js file itself was not fully provided in the context, its integration is visible in App.js and HomeScreen.js.
Sources: App.js:471, src/features/home/screens/HomeScreen.js:314
Triggering the Tutorial
The tutorial can be initiated from various points in the app. For example, the HomeScreen includes a "Tutorial" quick action button.
// src/features/home/screens/HomeScreen.js:314
{
icon: <MaterialCommunityIcons name="school" size={24} color="#fff" />,
label: 'Tutorial',
color: '#A8E6CF',
action: () => startTutorial(),
},
The startTutorial() action, imported from useTutorialStore, sets a global state flag (showTutorial) to true. The root App component listens to this flag and displays the TutorialOverlay when it is true.
Sources: App.js:461, App.js:471, src/features/home/screens/HomeScreen.js:130
Tutorial Trigger Flow
The following diagram shows how a user action on the HomeScreen leads to the display of the TutorialOverlay.
This diagram outlines the state change and component rendering sequence for the on-demand tutorial.
Sources: App.js:461, 471, src/features/home/screens/HomeScreen.js:130, 314
Tutorial Steps Configuration
The steps for the tutorial are defined in src/config/constants.js within the TUTORIAL_STEPS array. This centralized configuration allows for easy management of the tutorial flow.
| Property | Type | Description |
|---|---|---|
id | number | A unique identifier for the tutorial step. |
screen | string | The target screen for this step of the tutorial. |
title | string | The text to be displayed for the tutorial step. |
completed | boolean | The initial completion status of the step. |
Sources: src/config/constants.js:203-209
State Persistence
The completion status of the initial onboarding is a critical piece of state that needs to persist across app sessions. This is handled by storing a boolean flag in the device's local storage (likely AsyncStorage).
The key used for this storage is defined in src/config/constants.js and confirmed in SECURITY_AND_CLEANUP_FIXES.md.
- Storage Key:
ONBOARDING_COMPLETED - Value:
trueonce the user finishes or skips theOnboardingScreen.
Sources: src/config/constants.js:116, SECURITY_AND_CLEANUP_FIXES.md