User Onboarding

Overview

The LMUserOnboardingScreen is designed to provide users the interface to set up their profile which includes their username and an optional profile picture.

GitHub Files:

• userOnboardingScreen

Without Custom Styles

With Custom Styles

Props

These props allow interaction handling and functional configuration of the UserOnboardingScreen:

Interaction Callbacks

Prop Name	Type	Description
onCTAButtonClickedProp	Function	Triggered when the user taps the CTA button during onboarding.
onPickProfileImageClickedProp	Function	Triggered when the user taps to pick a profile image from the gallery.

Feature Configuration

Prop Name	Type	Description	Required
userNameMaxCharacterLimit	number	Maximum character limit for the username.
createScreenTitle	string	Title text for the user creation screen.	✅
createScreenSubtitle	string	Subtitle for the user creation screen.
createScreenHeaderTitle	string	Header title for the user creation screen.
createScreenCtaButtonText	string	CTA button text on the user creation screen.
editScreenTitle	string	Title text for the user edit screen.
editScreenSubtitle	string	Subtitle text for the user edit screen.
editScreenHeaderTitle	string	Header title for the user edit screen.
editScreenCtaButtonText	string	CTA button text on the user edit screen.
addPicturePrompt	string	Prompt message for adding a picture.
maxPictureSizePrompt	string	Message for maximum picture size.
userNameInputBoxLabel	string	Label for the username input box.

Usage Example

• In your App.tsx, create a Stack.Navigatorin the NavigationContainer wrapped by LMOverlayProvider.
• Add LMUserOnboardingScreen or added your own custom implmentation of it as a Stack screen in your NavigationContainer.

Step 1: Create Custom Screen and Wrapper

import React from "react";
import {
  UniversalFeedContextProvider,
  UserOnboardingContextProvider,
} from "../context";
import UserOnboardingScreen from "../screens/userOnboardingScreen";
import { useUserOnboardingContext } from "../context/userOnboardingContext";

function CustomUserOnboardingScreen() {
  const { onCTAButtonClicked, onPickProfileImageClicked } =
    useUserOnboardingContext();
  const customOnCTAButtonClickedHandler = () => {
    console.log("before");
    onCTAButtonClicked();
    console.log("after");
  };
  const customOnPickProfileImageClickedHandler = () => {
    console.log("before");
    onPickProfileImageClicked();
    console.log("after");
  };
  return (
    <UserOnboardingScreen
      userNameMaxCharacterLimit={25}
      createScreenHeaderTitle={"Create User Profile"}
      editScreenHeaderTitle={"Edit User Profile"}
      onCTAButtonClickedProp={customOnCTAButtonClickedHandler}
      onPickProfileImageClickedProp={customOnPickProfileImageClickedHandler}
    />
  );
}

export default function UserOnboardingScreenWrapper({
  navigation,
  route,
}: any) {
  return (
    <UserOnboardingContextProvider navigation={navigation} route={route}>
      <CustomUserOnboardingScreen />
    </UserOnboardingContextProvider>
  );
}

Step 2: Add the above created Wrapper to the navigation stack

import {
  LMFeedPollResult,
  LMOverlayProvider,
  STYLES,
} from "@likeminds.community/feed-rn-core";
import { USER_ONBOARDING_SCREEN } from "@likeminds.community/feed-rn-core/constants/screenNames";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

export const App = () => {
  const Stack = createNativeStackNavigator();
  const userOnboardingScreenStyles = {
    userNameInputBoxStyle: {
      placeholderText: "Enter your username",
    },
    ctaButtonStyle: {
      backgroundColor: "purple",
      borderRadius: 3,
    },
    ctaButtonTextStyle: {
      color: "white",
    },
    pickImageIconStyles: {
      color: "black",
    },
    pickImageButtonStyles: {
      backgroundColor: "white",
    },
  };

  // user onboarding screen customisation
  if (userOnboardingScreenStyles) {
    STYLES.setOnBoardingScreenStyles(userOnboardingScreenStyles);
  }

  return (
    <NavigationContainer ref={navigationRef} independent={true}>
      <LMOverlayProvider
        myClient={myClient} // pass in the LMFeedClient created
        apiKey={apiKey} // pass in the API Key generated
        userName={userName} // pass in the logged-in user's name
        userUniqueId={userUniqueID} // pass in the logged-in user's uuid
        isUserOnboardingRequired={true} // pass a boolean whether user onboarding is required or not
      >
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen
            name={USER_ONBOARDING_SCREEN}
            component={UserOnboardingScreenWrapper}
            options={{
              headerShown: false,
            }}
          />
        </Stack.Navigator>
      </LMOverlayProvider>
    </NavigationContainer>
  );
};