Chatbot Initialization Screen

Overview

The LMChatbotInitializationScreen component(Screen) acts as a splash screen while a chatroom with a user and AI Chatbot is being initialized and created.

Styling Customizations

Property	Type	Description
previewTextStyle	TextStyle	Styling for the preview text.
parentViewStyle	ViewStyle	Styling for the parent/root <View>.

Props

Property	Type	Description	Optional
navigation	StackNavigationProp	The navigation prop for stack-based navigation.
route	RouteProp	The route object provided by the navigator.
animationToShowPath	Object	The object specifying the animation path.	✔️
previewText	string	The preview text to display.	✔️
animationToShowUrl	string	The URL hosting lottie JSON file.	✔️
lottieAnimationStyle	ViewStyle	The style for the Lottie animation.	✔️

Usage Example

Step 1: Create a wrapper component

• In your App.tsx, create a Stack.Navigatorin the NavigationContainer wrapped byLMChatBotOverlayProvider.
• Create a wrapper component i.e ChatbotInitScreenWrapper for LMChatbotInitializationScreen imported from @likeminds.community/chat-rn-core.

ChatbotInitScreenWrapper.tsx

import {
  LMChatbotInitializationScreen
} from "@likeminds.community/chat-rn-core";

function ChatbotInitScreenWrapper({ navigation, route }) {
  return (
    <LMChatbotInitializationScreen
      navigation={navigation}
      route={route}
      previewText="<YOUR_CUSTOM_PREVIEW_TEXT>"
      animationToShowPath={require("path/to/lottie/JSON")}
      lottieAnimationStyle={
        {
          // pass ViewStyle Object
        }
      }
    />
  );
}

Step 2: Add the above created wrapper as a Stack Screen

• Add ChatbotInitScreenWrapper as a Stack screen in your NavigationContainer.
• Create chatBotInitiateScreenStyles and call the setChatbotInitScreenStyle to set the customisations related to styling.

App.tsx

import {
  LMChatbotInitializationScreen
  STYLES,
  LMChatBotOverlayProvider
} from "@likeminds.community/chat-rn-core";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {
  CHATBOT_INITIATE_SCREEN
} from '@likeminds.community/chat-rn-core/ChatSX/constants/Screens';

export const App = () => {
  const Stack = createNativeStackNavigator();
  const chatBotInitiateScreenStyles = {
    previewTextStyle: {
        // Pass TextStyle Object
    },
    parentViewStyle: {
        // Pass ViewStyle Object
    },
  };

  if (chatBotInitiateScreenStyles) {
    STYLES.setChatbotInitScreenStyle(chatBotInitiateScreenStyles);
  }

  return (
    <LMChatBotOverlayProvider
      myClient={myClient} // pass in the LMChatClient created
    >
      <NavigationContainer ref={navigationRef} independent={true}>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen
            options={{ gestureEnabled: false }}
            name={CHATBOT_INITIATE_SCREEN}
            component={ChatbotInitScreenWrapper}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </LMOverlayProvider>
  );
};