Onboarding

Prebuilt Onboarding Components

Setup your onboarding flow

Here's a guide on how to add an onboarding screen to the onboarding flow. All of the components are already defined for you. Just duplicate one of the examples to get started.

This example will walk you through adding a form step that askss for the user's age

Step 1 - Add your field

In OnboardingProvider.tsx, there's a type called OnboardingInfo. Add the field you want to collact data for. In this case, age.

Note, the data type should usually be a string. For multi-select form steps, it should be a string array (string[])

OnboardingProvider.tsx

export type OnboardingInfo = {
  isOnboardingCompleted: boolean,
  name: string,
  experience: string,
  skills: string[],
  role: string,
  age: string // <- Add this line. Should be string[] when using multi-select
}

In the same file, set the initial value of age. It could be an empty string, or some initial value

OnboardingProvider.tsx

export const initialOnboardingInfo : OnboardingInfo = {
  isOnboardingCompleted: false,
  name: "",
  role: "",
  skills: [],
  experience: "",
  age: "" // <- Add this line
}

Step 2 - Create the onboarding component

Create your onboarding form screen by copying one of the existing ones

All the examples are located in components/pages/onboarding.Duplicate the file based on the instructions below. In this example, we'll use TextInput, but the same steps apply for any form step

Reference the photo at the top of this page to decide which onboarding component you want to use. Once you have decided which one to use, copy the appropriate file based on the following table:

• Informative → ExampleInformative.tsx

• Text Input → ExampleTextInput.tsx

• Picker Wheel → ExamplePickerWheel.tsx

• Multi Select → ExampleMultiSelect.tsx

• Single Select → ExampleSingleSelect.tsx

• Ratings → ExampleRating.tsx

Duplicate the file and name it something appropriate. In this case, I'll name it ExampleAge.tsx

Also, rename the component in the new file

ExampleAge.tsx

export default function ExampleAge (props: FormStepComponentProps)

Step 3 - Add your component to the form

Open the file app/content/onboarding/index.tsx. This is where the onboarding form is located. Add your component to the steps variable.

const steps : FormStep[] = [
  // ... Previous form steps
  {
    component: ExampleAge // <- Add your component here
  }
]

Step 4 - Adjust your component

Go back to your component (components/pages/onboarding/ExampleAge.tsx) and change the values as needed

First, update the key variable to the field you created in step 1. This tells us which field in the onboarding data this screen is targeting

ExampleAge.tsx

const key : keyof OnboardingInfo = "age" // <- Change this to the field you made in step 1

Next, update the title and subtitle as needed

ExampleAge.tsx

return (
  <TextInputFormStep
    title="Age" // <- Change as needed
    subtitle="How old are you" // <- Change as needed
    // ... Other props
  />
)

Optionally, you can add validation to the input if needed

ExampleAge.tsx

const onPressNext = async () => {
  // Make sure the value is a number
  if (isNaN(parseInt(value))) {
    SafeAlert("Error", "Please enter a valid number")
    return
  }

  moveToNextStep()
}

Step 5 - Done

Now , you can access your onboarding data using the hook

const { onboardingInfo } = useOnboardingContext()

export default function Component() {
  const { onboardingInfo, isOnboardingInitialized } = useOnboardingContext()
  console.log(onboardingInfo)
  // Output: 
  // {
  //   isOnboardingCompleted: false,
  //   name: "",
  //   role: "",
  //   skills: [],
  //   experience: "",
  //   age: ""
  // }

  // ...
}

Custom Onboarding Components

You can also create your own custom onboarding compoennts if the included ones don't meet your needs

Guide coming soon. Please message in telegram with any questions

Resetting LocalStorage

To reset the onboarding information, you can reset the local storage through a buttin in the settings page of the app.

Or run this line of code: and refresh the app

OnboardingProvider.tsx

  // Uncomment this and refresh the app to test from an empty localstorage
  AsyncStorage.clear()