Skip to main content

Getting started

This Getting started will walk you through the process of setting up a chat application using 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 Dependency​

LikeMinds Chat SDK has a number of peer dependencies that are required to take advantage of all of the out of the box features. It is suggested you follow the install instructions for each package to ensure it is properly setup. Most if not all of the required packages now support auto-linking so setup should be minimal.

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

## Setup up react native firebase for notifications, don't setup if it's already done. Do checkout react native firebase docs
npm install @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native

## Add react navigation dependencies, don't install if 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;

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

This step is only required for accessing the AI chatbot via a FAB icon.

1. Set Up Your Screen​

  • Create a new screen or use an existing one in your application i.e Home Screen.
  • Add the <LMChatAIButton /> component imported from the @likeminds.community/chat-rn-core package in that screen.
HomeScreen.tsx
import {
  LMChatAIButton
} from "@likeminds.community/chat-rn-core";

const HomeScreen = () => {
  return (
    {/* JSX of your app screen i.e Home Screen */}
    .
    .
    .
    {/* Add the LMChatAIButton component */}
    <LMChatAIButton
      apiKey={"<API_KEY>"}
      userName={"<USER_NAME>"}
      uuid={"<USER_ID>"}
    />
  )
}

2. Wrap Your Screen​

  • Wrap the above screen with <LMChatBotOverlayProvider/> and pass the myClient instance initialized in step 3
app.tsx
import {
  LMChatBotOverlayProvider
} from "@likeminds.community/chat-rn-core";

<LMChatBotOverlayProvider myClient={myClient}>
  <Stack.Navigator>
    <Stack.Screen
      name={"<HOME_SCREEN_NAME>"}
      component={"<HOME_SCREEN_COMPONENT>"}
    />
    {/* Add this along side other screens set up in step 4 */}
  <Stack.Navigator/>
</LMChatBotOverlayProvider>