Prebuilt Onboarding Pages

You will have 5 prebuilt onboarding pages.

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 find the onboarding key.

2

Change the titles and descriptions inside the onboarding key.

3

You need to translate the title and description for other languages.

4

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.