​
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 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.

​
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 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.