Skip to main content

​
Prebuilt Onboarding Pages

You will have 5 prebuilt onboarding pages.
Onboarding 1Onboarding 2Onboarding 3Onboarding 4Onboarding 5

​
Onboarding Components

​
Usage

Onboarding basically work with these data:
If you want to change the title and descriptions, follow this steps:
1
Go to the i18n/locales/en-US.ts file and create the onboarding key.
onboarding: {
  title1: 'Onboarding 1',
  desc1: 'Onboarding 1 description',
  title2: 'Onboarding 2',
  desc2: 'Onboarding 2 description',
  title3: 'Onboarding 3',
  desc3: 'Onboarding 3 description',
},
2
Go to the Onboarding Slide and import translation.
components/common/onboarding/onboarding-slide.tsx
import { useTranslation } from 'react-i18next';
3
Thats it! You don’t need to write single line of code.
data/Onboarding.ts
export const onboardingData: OnboardingItem[] = [
  {
    id: '1',
    title: 'onboarding.title1',
    description: 'onboarding.desc1',
    lottie: require('@/assets/lotties/onboarding.json'),
    // If you want to use an image instead of a lottie, uncomment the following lines 👇
    // Lottie and Image can not work together. You need to choose one of them.   
    // image: require('@/assets/images/logo.png'),
  },
  ...
];
You can even add 20 onboarding slides. You don’t have any limitation.
Go to the data/Onboarding.ts file to add your own onboarding images and animations.