Skip to main content

​
What to customize

  • Animations: Replace Lottie files in assets/onboarding/lotties/
  • Text: Update content in lib/i18n/locales/en/onboarding.json and lib/i18n/locales/fr/onboarding.json

​
How to customize

1

Replace animations

  1. Find Lottie animations from LottieFiles or IconScout
  2. Download as .json files
  3. Replace files in assets/onboarding/lotties/
  4. Update filenames in app/onboarding.tsx (lines 22-25)
2

Update text content

Edit both language files with your app’s content:
lib/i18n/locales/en/onboarding.json
{
  "slide1": {
    "title": "Your App Title Here",
    "description": "Describe your app's main benefit"
  },
  "slide2": {
    "title": "Second Feature", 
    "description": "Explain another key feature"
  },
  "slide3": {
    "title": "Third Feature",
    "description": "Highlight another benefit"
  },
  "slide4": {
    "title": "Get Started",
    "description": "Final call to action"
  }
}
Translate the same structure to French in lib/i18n/locales/fr/onboarding.json.
3

Add or remove slides (optional)

Add a slide:
  1. Add Lottie file to assets/onboarding/lotties/
  2. Add filename to app/onboarding.tsx
  3. Add text in both onboarding.json files (e.g., "slide5")
Remove a slide:
  1. Remove Lottie reference from app/onboarding.tsx
  2. Remove text from both onboarding.json files
Your onboarding will automatically update with your new content. Test it by running your app and checking that all animations and text appear correctly.

​
Best practices

Animations: Keep file sizes under 500KB, use consistent style, and choose animations that represent your app’s core features.Text: Keep titles under 40 characters, descriptions to 1-2 sentences, focus on benefits over features, and use action-oriented language.

​
File structure

assets/onboarding/lotties/
├── animation1.json
├── animation2.json
├── animation3.json
└── animation4.json

lib/i18n/locales/
├── en/onboarding.json    ← English text
└── fr/onboarding.json    ← French text