Skip to main content

Getting started

This guide will walk you through the process of setting up a chat application using LikeMinds Chat SDK with a two-layer architecture: Core Integration layer and Data layer.

Prerequisites​

Before you begin, make sure you have the following installed:

  • Node.js and npm (Node Package Manager).
  • React Native CLI.
  • Xcode (for iOS development).
  • Android Studio (for Android development).
  • LikeMinds API Key: Sign up on the LikeMinds dashboard and obtain an API key for your application.

Step-by-Step Integration Guide​

Follow these steps to integrate the LikeMinds Chat SDK into your React Native application using NPM:

Step 1 - Adding Dependencies​

LikeMinds Chat SDK requires several peer dependencies to take advantage of all out-of-the-box features. While most packages support auto-linking, it's recommended to follow the installation instructions for each package to ensure proper setup.

# Add LikeMinds Chat React Native SDK
npm install @likeminds.community/chat-rn-core@latest @likeminds.community/chat-rn@latest

# Set up react native firebase for notifications (if not already done)
npm install @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native

# Add react navigation dependencies (if not already installed)
npm install @react-navigation/material-top-tabs @react-navigation/native @react-navigation/native-stack @react-navigation/stack react-native-safe-area-context react-native-screens

# Add the listed dependencies
npm install @react-native-community/datetimepicker @react-native/babel-preset@0.74.0 @shopify/flash-list @types/react-native-video aws-sdk buffer diff@5.1.0 firebase moment react-native-blob-util react-native-compressor react-native-create-thumbnail react-native-device-info react-native-gesture-handler react-native-image-crop-tools react-native-image-picker react-native-linear-gradient react-native-media-console react-native-pager-view react-native-pdf-thumbnail react-native-permissions react-native-reanimated react-native-shimmer-placeholder react-native-swiper-flatlist react-native-tab-view react-native-uuid react-native-video realm@11.10.2 rn-emoji-keyboard react-native-document-picker react-native-svg @react-native-community/netinfo

# Install Pods (iOS only)
npx pod-install

Add Optional Dependencies​

Giphy​

Enables the full GIPHY experience directly to your app with the GIPHY SDK.

npm install @giphy/react-native-sdk

Audio Player​

Installing this package allows you to play the voice note attachments in the chat.

npm install react-native-track-player

Slider​

Installing this package allows you to interact with the slider of voice note attachments in the chat.

npm install @react-native-community/slider

Lottie​

Installing this package will allow your users to see audio record animation.

npm install lottie-react-native

Audio Recorder​

Installing this package will allow your users to record voice note.

npm install react-native-audio-recorder-player

Copying messages​

Adds ability to copy messages to the clipboard.

npm install @react-native-clipboard/clipboard

Step 2 - Setup LikeMinds Chat​

To start using the package, import the initMyClient() method in your App.tsx or App.js file, this methods takes in 3 optional parameters

ParameterTypeDescription
filterStateMessageConversationState[]An optional array of Conversation State to filter state messages.
shareLogsWithLMbooleanDetermines whether error logs should be shared with LikeMinds.
onErrorHandler(exception: string, stackTrace: LMStackTrace) => voidA callback function executed when an error occurs.
import { initMyClient } from "@likeminds.community/chat-rn-core";

export const lmChatClient = initMyClient();
// To initiate user session, follow step 3
tip

To check how to filter state Messages, Navigate to this doc

tip

If you are using the AI Chatbot theme, please go to the dashboard and follow these steps

  1. Open your LikeMinds Admin Dashboard.
  2. Navigate to the AI Chatbot Section.
  3. Follow the steps promoted on the section.

Step 3 - Initiate User Session​

You have successfully initiated LMChatClient, now all you need to do is inflate the Chat Screen based on one of the themes below.

ThemeDescription
COMMUNITYDesigned for community-based use cases such as group chats.
NETWORKINGTailored for networking scenarios, focusing on direct messages (DMs).
COMMUNITY_HYBRIDCombines features of community and networking for both group chats and DMs.
  • Provide the API Key directly to the LikeMinds Chat SDK to initiate a user session.
  • Pass the following parameters to <LMOverlayProvider /> from @likeminds.community/chat-rn-core:
    • apiKey
    • userName
    • uuid
    • theme
import {
  LMOverlayProvider,
  initMyClient,
  Themes
} from "@likeminds.community/chat-rn-core";
import { LMCoreCallbacks } from "@likeminds.community/chat-rn-core/ChatSX/setupChat";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const App = () => {
  const [myClient, setMyClient] = useState<any>();
  const apiKey = "<YOUR_API_KEY>";
  const userName = "<USER_NAME>";
  const uuid = "<USER_ID>";
  const theme = <"SDK_THEME">

  useEffect(() => {
    async function generateClient() {
      // Initiate LMChatClient as described in step 2
      const res: any = initMyClient();
      setMyClient(res);
    }
    generateClient();
  }, []);

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      {userName && uuid && apiKey && myClient ? (
        <LMOverlayProvider
          myClient={myClient}
          apiKey={apiKey}
          userName={userName}
          userUniqueId={uuid}
          theme={theme}
        >
          {/* Follow step 4 to add navigation logic after user is successfully initiated with LM servers */}
        </LMOverlayProvider>
      ) : null}
    </GestureHandlerRootView>
  );
};

export default App;
tip

For enhanced security, you can use Server Side User Authentication to initiate user sessions through your own server.

Step 4 - Configure Navigation​

Set up the navigation for your application using React Navigation. Create a StackNavigator in your App.js or equivalent file:

import React from "react";
import { Platform } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import {
  CarouselScreen,
  CreatePollScreen,
  ImageCropScreen,
  PollResult,
  VideoPlayer,
  ExploreFeed,
  HomeFeed,
  LMOverlayProvider,
  ReportScreen,
  ImageScreen,
  ViewParticipants,
  AddParticipants,
  DmAllMembers,
  SearchInChatroom,
  CommunityChatScreen,
  ScreenName,
  FileUploadScreenWrapper,
  ChatroomScreenWrapper,
} from "@likeminds.community/chat-rn-core";

const Stack = createStackNavigator();

const App = () => {
  return (
    <>
      <NavigationContainer>
        {/* Navigation logic to be added after user is initiated as described in step 3 */}
        <Stack.Navigator initialRouteName={ScreenName.CommunityChatScreen}>
          <Stack.Screen
            name={ScreenName.CommunityChatScreen}
            component={CommunityChatScreen}
          />
          <Stack.Screen
            name={ScreenName.SearchInChatroom}
            component={SearchInChatroom}
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
              headerShown: false,
            }}
          />
          <Stack.Screen
            name={ScreenName.ExploreFeed}
            component={ExploreFeed}
            initialParams={{
              backIconPath: "",
              filterIconPath: "",
              participantsIconPath: "",
              totalMessagesIconPath: "",
              joinButtonPath: "",
              joinedButtonPath: "",
            }}
          />
          <Stack.Screen
            name={ScreenName.Chatroom}
            component={ChatroomScreenWrapper}
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
            }}
          />
          <Stack.Screen
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
            }}
            name={ScreenName.FileUpload}
            component={FileUploadScreenWrapper}
            initialParams={{
              backIconPath: "", // add your back icon path here
              imageCropIcon: "", // add your image crop icon path here
            }}
          />
          <Stack.Screen name={ScreenName.VideoPlayer} component={VideoPlayer} />
          <Stack.Screen
            options={{ gestureEnabled: false }}
            name={ScreenName.CarouselScreen}
            component={CarouselScreen}
            initialParams={{
              backIconPath: "", // add your back icon path here
            }}
          />
          <Stack.Screen
            options={{ gestureEnabled: false }}
            name={ScreenName.PollResult}
            component={PollResult}
          />
          <Stack.Screen
            name={ScreenName.CreatePollScreen}
            component={CreatePollScreen}
          />
          <Stack.Screen
            options={{ headerShown: false }}
            name={ScreenName.ImageCropScreen}
            component={ImageCropScreen}
          />
          <Stack.Screen name={ScreenName.Report} component={ReportScreen} />
          <Stack.Screen name={ScreenName.ImageScreen} component={ImageScreen} />
          <Stack.Screen
            name={ScreenName.ViewParticipants}
            component={ViewParticipants}
          />
          <Stack.Screen
            name={ScreenName.AddParticipants}
            component={AddParticipants}
          />
          <Stack.Screen
            name={ScreenName.DmAllMembers}
            component={DmAllMembers}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

export default App;

Step 5 - Add Chatbot Button to your Screen (Optional)​

note

Add AI Assistant to LikeMinds: Follow this tutorial to add Assistant to LikeMinds Dashboard before proceeding with these steps.

1. Add AI Chatbot Button to your Screen​

Create a new screen or use an existing one in your application (e.g., Home Screen). Add the <LMChatAIButton /> component imported from the @likeminds.community/chat-rn-core package. Pass the required props (apiKey, userName, and uuid) to the component.

HomeScreen.tsx
import { LMChatAIButton } from "@likeminds.community/chat-rn-core";

const HomeScreen = () => {
  return (
    <>
      {/* Your existing screen content */}
      <LMChatAIButton
        apiKey="<API_KEY>"
        userName="<USER_NAME>"
        uuid="<USER_ID>"
      />
    </>
  );
};

2. Wrap your Screen with LMChatBotOverlayProvider​

Wrap the above screen with <LMChatBotOverlayProvider/> and pass the myClient instance initialized in Step 2

App.tsx
import {
  LMChatBotOverlayProvider
} from "@likeminds.community/chat-rn-core";

const Stack = createStackNavigator();

<LMChatBotOverlayProvider myClient={myClient}>
  <Stack.Navigator>
    <Stack.Screen
      name={"<HOME_SCREEN_NAME>"}
      component={"<HOME_SCREEN_COMPONENT>"}
    />
  <Stack.Navigator/>
</LMChatBotOverlayProvider>

3. Add Navigation for other screens​

Set up the navigation for your application using React Navigation. Create a StackNavigator in your App.js or equivalent file:

App.tsx
import React from "react";
import { Platform } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import {
  LMChatAIBotInitiaitionScreen,
  ImageCropScreen,
  SearchInChatroom,
  FileUploadScreenWrapper,
  ChatroomScreenWrapper,
} from "@likeminds.community/chat-rn-core";

const Stack = createStackNavigator();

enum ScreenName {
  Chatroom = "Chatroom",
  FileUpload = "FileUpload",
  ImageCropScreen = "ImageCropScreen",
  SearchInChatroom = "SearchInChatroom",
  ChatBotInitiateScreen = "ChatBotInitiateScreen",
}

const App = () => {
  return (
    <>
      <NavigationContainer>
        {/* Navigation logic to be added after user is initiated as described in step 3 */}
        <Stack.Navigator>
          <Stack.Screen
            name={ScreenName.ChatBotInitiateScreen}
            component={LMChatAIBotInitiaitionScreen}
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
              headerShown: false,
            }}
          />
          <Stack.Screen
            name={ScreenName.SearchInChatroom}
            component={SearchInChatroom}
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
              headerShown: false,
            }}
          />
          <Stack.Screen
            name={ScreenName.Chatroom}
            component={ChatroomWrapperScreen}
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
            }}
          />
          <Stack.Screen
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
            }}
            name={ScreenName.FileUpload}
            component={FileUploadScreenWrapper}
            initialParams={{
              backIconPath: "", // add your back icon path here
              imageCropIcon: "", // add your image crop icon path here
            }}
          />
          <Stack.Screen
            options={{ headerShown: false }}
            name={ScreenName.ImageCropScreen}
            component={ImageCropScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

export default App;