Introduction

This is an example page showcasing how we can use the screens, widgets, analytics and sdk functions to use single channel as community in your app. The following steps help you launch Community in your app using LikeMinds React Native Chat SDK:

Step 1: Getting Started

Follow the Getting Started section to install dependency required along with creation of lmChatClient for interaction with data layer.

Step 2: Use of LMOverlayProvider

Create a component which will get rendered on switching to Community tab and import the LMOverlayProvider from the core layer which we have just installed in getting started step, and use it by providing all required props. The LMOverlayProvider will be the highest level screen and it will wrap all other screens.

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

function CommunityScreen(): React.JSX.Element {
  return (
    <LMOverlayProvider
      lmChatClient={lmChatClient}
      userName={userName}
      userUniqueId={userUniqueId}
      profileImageUrl={profileImageUrl}
      lmChatInterface={lmChatInterface}
    >
      {/* Add navigation container */}
    </LMOverlayProvider>
  );
}

export default CommunityScreen;

Step 3: Creation of Customisable screens

Create customisable Chatroom and FileUpload screens.

Creation of ChatroomScreen:

We have divided Chatroom into different sub-components like ChatroomHeader, MessageList, MessageInput etc. These customisations can be passed as a prop to the respective sub-components. All the sub-components are then wrapped by a ChatRoom component.

Here,

ChatroomHeader deals with rendering and customisations of the header shown at top of Chatroom.
MessageList deals with rendering and customisations of the list of messages which is shown in the Chatroom.
MessageInput deals with rendering and customisations of the input box which is shown in the Chatroom.

import {
  ChatRoom,
  ChatroomHeader,
  MessageList,
  MessageInput,
} from "@likeminds.community/chat-rn-core";

export function ChatroomScreen() {
  return (
    <ChatRoom>
      <ChatroomHeader />
      <MessageList />
      <MessageInput />
    </ChatRoom>
  );
}

Customising ChatroomScreen:

The sample code below allows you to customise the ChatroomScreen

import {
  ChatRoom,
  ChatroomHeader,
  MessageList,
  MessageInput,
  useChatroomContext,
} from "@likeminds.community/chat-rn-core";

export function ChatroomScreen() {
  const showChatroomTopic = false; // showChatroomTopic boolean is used to either displaying or hiding the chatroom topic
  const showViewParticipants = true; // showViewParticipants boolean is used to either displaying or hiding the view participants option
  const showMuteNotifications = true; // showMuteNotifications boolean is used to either displaying or hiding the mute notifications option
  const { muteNotifications, setChatroomTopic } = useChatroomContext();

  // overriding muteNotifications method to add some before or after functionality
  const customMuteNotifications = async () => {
    console.log("before custom mute notifications");
    await muteNotifications();
    console.log("after custom mute notifications");
  };
  // overriding setChatroomTopic method to add some before or after functionality
  const customSetChatroomTopic = async () => {
    console.log("before custom chatroom topic");
    const response = await setChatroomTopic(); // we can also get the new chatroom topic conversation as a response and use it
    console.log("response from custom chatroom topic", response);
  };

  return (
    <ChatRoom
      showViewParticipants={showViewParticipants}
      showMuteNotifications={showMuteNotifications}
      setChatroomTopic={customSetChatroomTopic}
      muteNotifications={customMuteNotifications}
    >
      <ChatroomHeader />
      <MessageList showChatroomTopic={showChatroomTopic} />
      <MessageInput />
    </ChatRoom>
  );
}

Step 4: Creation of ChatroomScreenWrapper

ChatroomScreenWrapper wraps the ChatroomScreen into a Chat component and returns it.

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

export function ChatroomScreenWrapper() {
  return (
    <Chat>
      <ChatroomScreen />
    </Chat>
  );
}

Step 5: Creation of FileUploadWrapper

FileUploadWrapper wraps the FileUpload into ChatroomContextProvider and returns it.

import { FileUpload } from "@likeminds.community/chat-rn-core";
import { ChatroomContextProvider } from "@likeminds.community/chat-rn-core/ChatSX/context";

export function FileUploadScreenWrapper() {
  return (
    <ChatroomContextProvider>
      <FileUpload />
    </ChatroomContextProvider>
  );
}

Next, install the below dependencies for creation of a StackNavigator

npm install @react-navigation/native @react-navigation/native-stack;

After installing the above dependencies, create a RootNavigation file with navigationRef exported from it, which later will be used for navigation purposes.

RootNavigation.js :

import {
  StackActions,
  createNavigationContainerRef,
} from "@react-navigation/native";

export const navigationRef = createNavigationContainerRef();

// to navigate from one screen to another
export function navigate(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

// to push one screen in the stack over another
export function push(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.current?.dispatch(StackActions.push(name, params));
  }
}

// to pop one screen in the stack
export function pop() {
  if (navigationRef.isReady()) {
    navigationRef.current?.dispatch(StackActions.pop());
  }
}

// to get recent routes in the navigation stack
export function getRecentRoutes() {
  if (navigationRef.isReady()) {
    return navigationRef.getRootState();
  }
}

Now, create a StackNavigator which will enable to navigate between different screens imported from @likeminds.community/chat-rn-core.

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {
  CarouselScreen,
  CreatePollScreen,
  ImageCropScreen,
  PollResult,
  VideoPlayer,
  LMOverlayProvider,
} from "@likeminds.community/chat-rn-core";
import { navigationRef } from "./RootNavigation";

const Stack = createNativeStackNavigator();

function CommunityScreen(): React.JSX.Element {
  const chatroomId = ""; // pass in the chatroom id of chatroom to be displayed
  return (
    <LMOverlayProvider
      lmChatClient={lmChatClient}
      userName={userName}
      userUniqueId={userUniqueId}
      profileImageUrl={profileImageUrl}
    >
      <NavigationContainer ref={navigationRef} independent={true}>
        <Stack.Navigator>
          <Stack.Screen
            name="Chatroom"
            component={ChatroomScreenWrapper}
            initialParams={{
              chatroomID: chatroomId,
            }}
          />
          <Stack.Screen
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
            }}
            name={"FileUpload"}
            component={FileUploadScreenWrapper}
            initialParams={{
              backIconPath: "", // add your back icon path here
              imageCropIcon: "", // add your image crop icon path here
            }}
          />
          <Stack.Screen name={"VideoPlayer"} component={VideoPlayer} />
          <Stack.Screen
            options={{ gestureEnabled: false }}
            name={"CarouselScreen"}
            component={CarouselScreen}
          />
          <Stack.Screen
            options={{ gestureEnabled: false }}
            name={"PollResult"}
            component={PollResult}
          />
          <Stack.Screen
            name={"CreatePollScreen"}
            component={CreatePollScreen}
          />
          <Stack.Screen
            options={{ headerShown: false }}
            name={"ImageCropScreen"}
            component={ImageCropScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </LMOverlayProvider>
  );
}

export default CommunityScreen;

Step 7: Overriding of Callbacks

You can also override few exposed callbacks with custom logic as below:

import {
  LMChatCallbacks,
  LMChatroomCallbacks,
  NavigateToProfileParams,
  NavigateToGroupDetailsParams,
} from "@likeminds.community/chat-rn-core";

// Override callBacks with custom logic
class CustomCallbacks implements LMChatCallbacks, LMChatroomCallbacks {
  navigateToProfile(params: NavigateToProfileParams) {
    // Override navigateToProfile with custom logic
  }

  navigateToHomePage() {
    // Override navigateToHomePage with custom logic
  }

  onEventTriggered(eventName: string, eventProperties?: Map<string, string>) {
    // Override onEventTriggered with custom logic
  }

  navigateToGroupDetails(params: NavigateToGroupDetailsParams) {
    // Override navigateToGroupDetails with custom logic
  }
}

// Creation of object for above overrided class
const lmChatInterface = new CustomCallbacks();

Pass in the lmChatInterface object created to LMOverlayProvider as well.

return (
  <LMOverlayProvider
    lmChatClient={lmChatClient}
    userName={userName}
    userUniqueId={userUniqueId}
    profileImageUrl={profileImageUrl}
    lmChatInterface={lmChatInterface} // add this line in LMOverlayProvider props
  >
    {/* Add navigation container */}
  </LMOverlayProvider>
);

Step 8: Customisations

You can customise the components and screens as well by overriding the setting the styles as below:

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

function CommunityScreen(): React.JSX.Element {
  const themeStyles = {
    hue: 10,
    fontColor: "black",
    primaryColor: "green",
    secondaryColor: "green",
    lightBackgroundColor: "#d7f7ed",
  };

  if (themeStyles) {
    STYLES.setTheme(themeStyles);
  }

  const chatroomHeaderStyles = {
    chatroomNameHeaderStyle: {
      color: "white",
      fontSize: 18,
      fontFamily: "NunitoSans-Bold",
    },
    chatroomSubHeaderStyle: {
      color: "white",
      fontSize: 13,
    },
  };

  if (chatroomHeaderStyles) {
    STYLES.setChatroomHeaderStyle(chatroomHeaderStyles);
  }

  return(
    // return code as above
  )
}

export default CommunityScreen;

In this way, we can override all other customsations available listed in MessageInputBox, Message and ReactionList section inside Components in Widgets.

Introduction

Step 1: Getting Started​

Step 2: Use of LMOverlayProvider​

Step 3: Creation of Customisable screens​

Creation of ChatroomScreen:​

Customising ChatroomScreen:​

Step 4: Creation of ChatroomScreenWrapper​

Step 5: Creation of FileUploadWrapper​

Step 6: Navigation Setup​

Step 7: Overriding of Callbacks​

Step 8: Customisations​