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)

Step-by-Step Integration Guide

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

Step 1 - Installation

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@1.3.0 @likeminds.community/chat-rn@1.6.0

## 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

# 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 - Initiate LMChatClient

1. To start using the package, import the initMyClient() method in your App.tsx or App.js file.
2. Load your API key into the environment files. After adding the import, initialize initMyClient() with your API key.

import { initMyClient } from "@likeminds.community/feed-rn-core";

export const lmFeedClient = initMyClient();

Step 3 - Initiate User Session

You have successfully initiated LMChatClient, now all you need to do is inflate Homed Feed Screen. You have the option to initiate a user session and navigate to Home Feed Fragment using one of two approaches:

1. With API Key

This approach should be used when you want to manage LikeMinds authentication tokens on frontend. In this case you provide API Key directly to LikeMinds Chat SDK, which will be used to initiate a user session by providing apiKey, userName & userUniqueId to <LMOverlayProvider /> from @likeminds.community/chat-rn-core.

import {
  LMOverlayProvider,
  initMyClient,
} 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>";

  useEffect(() => {
    async function generateClient() {
      const res: any = initMyClient();
      setMyClient(res);
    }
    generateClient();
  }, []);

  return (
    <GestureHandlerRootView>
      {userName && uuid && apiKey && myClient ? (
        <LMOverlayProvider
          myClient={myClient}
          apiKey={apiKey}
          userName={userName}
          userUniqueId={uuid}
        >
          {/* Add navigation container */}
        </LMOverlayProvider>
      ) : null}
    </GestureHandlerRootView>
  );
};

export default App;

2. Without API Key

This approach should be used when you want to manage LikeMinds authentication tokens on your backend server. In this case you eliminate the need to expose your API Key to your client app and your backend server is responsible for calling the initiate API to obtain the accessToken and refreshToken which is passed to <LMOverlayProvider /> from @likeminds.community/chat-rn-core to validate the user session.

1. Create a function to get accessToken and refreshToken from your backend using initiate API

function getTokens() {
  // Your implementation to fetch the LikeMinds authentication tokens
  // Also save these tokens in the initial state of the application as you will be required to pass these tokens to LMClientOverlayProvider.
}

2. Create an instance of LMCoreCallbacks and pass in the necessary callback functions.

info

LMCoreCallbacks takes two arguments:

1. onAccessTokenExpiredAndRefreshed(): This callback is triggered when the provided accessToken expires and is refreshed internally using the refreshToken.
2. onRefreshTokenExpired() This callback is triggered when the provided refreshToken expires. In this case, you need to provide a new accessToken and refreshToken from your backend server using our initiate API.

const lmCoreCallback = new LMCoreCallbacks(
  (accessToken: string, refreshToken: string) => {
    // Handle Access and Refresh token as per your implementation
  },
  async () => {
    // Get New Tokens and return it in the below format
    return {
      accessToken: "YOUR NEW ACCESS TOKEN",
      refreshToken: "YOUR NEW REFRESH TOKEN",
    };
  }
);

3. Add the LMOverlayProvider and pass the accessToken and refreshToken returned in Step 1.

import { LMOverlayProvider } 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 accessToken = "<YOUR_INITIAL_ACCESS_TOKEN>";
  const refreshToken = "<USER_INITIAL_REFRESH_TOKEN>";

  useEffect(() => {
    async function generateClient() {
      const res: any = initMyClient();
      setMyClient(res);
    }
    generateClient();
  }, []);

  const lmCoreCallback = new LMCoreCallbacks(
    (accessToken: string, refreshToken: string) => {
      // Handle Access and Refresh token as per your implementation
    },
    async () => {
      // Get New Tokens and return it in the below format
      return {
        accessToken: "YOUR NEW ACCESS TOKEN",
        refreshToken: "YOUR NEW REFRESH TOKEN",
      };
    }
  );

  return (
    <GestureHandlerRootView>
      <LMOverlayProvider
        myClient={myClient}
        accessToken={accessToken}
        refreshToken={refreshToken}
        callbackClass={lmCoreCallback}
      >
        {/* Add navigation container */}
      </LMOverlayProvider>
    </GestureHandlerRootView>
  );
};

export default App;

tip

By choosing the appropriate method based on your backend infrastructure and security preferences, you can seamlessly integrate the Chat SDK into your application while ensuring secure and efficient session management.

Step 4 - Configure Navigation

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

• Create your chatroom wrapper screen.
• Create your file upload wrapper screen.

import React from "react";
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,
} from "@likeminds.community/chat-rn-core";
import ChatroomWrapperScreen from "<path_to_chatroom_wrapper_screen>";
import FileUploadScreenWrapper from "<path_to_file_upload_wrapper_screen>";

const Stack = createStackNavigator();

const App = () => {
  return (
    <LMOverlayProvider
      lmChatClient={lmChatClient}
      userName={userName}
      userUniqueId={userUniqueId}
      apiKey={apiKey}
      profileImageUrl={profileImageUrl}
      lmChatInterface={lmChatInterface}
    >
      {/* Add your navigation container here */}
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Navigator initialRouteName={"Homefeed"}>
            <Stack.Screen name={"Homefeed"} component={HomeFeed} />
            <Stack.Screen
              name="SearchInChatroom"
              component={SearchInChatroom}
              options={{
                gestureEnabled: Platform.OS === "ios" ? false : true,
                headerShown: false,
              }}
            />
            <Stack.Screen
              name={"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={REPORT} component={ReportScreen} />
            <Stack.Screen name={IMAGE_SCREEN} component={ImageScreen} />
            <Stack.Screen
              name={VIEW_PARTICIPANTS}
              component={ViewParticipants}
            />
            <Stack.Screen name={ADD_PARTICIPANTS} component={AddParticipants} />
            <Stack.Screen name={DM_ALL_MEMBERS} component={DmAllMembers} />
          </Stack.Navigator>
        </Stack.Navigator>
      </NavigationContainer>
    </LMOverlayProvider>
  );
};

export default App;

Step 5 - Configuration

You can filter out the messages you do not wish to show in the chatroom. Just mention the state that you wish to hide. Use the table below for all the available states.

1. Create a array as filterStateMessage.
2. Add all the state you wish to hide inside filterStateMessage and pass this array while creating a instance of lmChatClient.

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

// Initiate the LMChatClient instance
const filterStateMessage = [
  ConversationState.MEMBER_JOINED_OPEN_CHATROOM,
  ConversationState.MEMBER_LEFT_OPEN_CHATROOM,
];
export const lmChatClient = initMyClient(filterStateMessage);

List of Conversations with its state

Conversation	State
NORMAL_MESSAGE	0
FIRST_CONVERSATION	1
MEMBER_JOINED_OPEN_CHATROOM	2
MEMBER_LEFT_OPEN_CHATROOM	3
MEMBER_ADDED_TO_CHATROOM	7
MEMBER_LEFT_SECRET_CHATROOM	8
MEMBER_REMOVED_FROM_CHATROOM	9
POLL	10
ALL_MEMBERS_ADDED	11
TOPIC_CHANGED	12

note

The filterStateMessage array can't be empty, pass atleast one conversation state