Skip to main content

Getting Started

The LikeMinds React Native Feed SDK empowers you to integrate personalized and engaging feeds into your app, enhancing user experiences and driving user engagement. This guide will walk you through the steps to get started with the LikeMinds React Native Feed SDK and set up a dynamic feed in your application.

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)
  • Generate API key from LikeMinds Dashboard

Step-by-Step Integration Guide​

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

Step 1 - Installation​

LikeMinds Feed 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 Feed React Native SDK​

npm install @likeminds.community/feed-rn-core@1.13.3 @likeminds.community/feed-rn@1.5.2

Setup 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-screens react-native-safe-area-context react-native-pager-view

Add the listed dependencies​

npm install @react-native-async-storage/async-storage@1.23.1 @react-native-community/datetimepicker@8.0.1 @react-native-community/netinfo@11.3.0 diff@5.1.0 react-native-create-thumbnail react-native-device-info@10.13.1 react-native-document-picker@9.1.0 react-native-file-viewer@2.1.5 react-native-gesture-handler@2.14.0 react-native-image-picker@7.1.0 react-native-image-zoom-viewer@3.0.1 react-native-pager-view@6.1.4 react-native-slider@0.11.0 react-native-swiper-flatlist@3.2.3 react-native-tab-view@3.5.0 react-native-toast-message@2.2.0 @types/react-native-video@5.0.14 react-native-video react-native-compressor react-native-svg react-native-circular-progress

Install Pods (iOS only)​

npx pod-install

Step 2 - Initiate LMFeedClient​

  1. To start using the package, import the initMyClient() method in your App.tsx or App.js file.
import { initMyClient } from "@likeminds.community/feed-rn-core";

export const lmFeedClient = initMyClient();

// To initiate user session, follow step 3

Step 3 - Initiate User Session​

You have successfully initiated LMFeedClient, now all you need to do is inflate Universal Feed Screen.

  • Provide the API Key directly to the LikeMinds Feed SDK to initiate a user session.
  • Pass the following parameters to <LMOverlayProvider /> from @likeminds.community/feed-rn-core:
    • apiKey
    • userName
    • uuid
  • If userName is not to be provided, set the isUserOnboardingRequired prop to true to onboard the user, allowing them to provide their own userName
import {
  LMOverlayProvider,
  initMyClient,
} from "@likeminds.community/feed-rn-core";
import {LMFeedClient} from '@likeminds.community/feed-rn';
import { LMCoreCallbacks } from "@likeminds.community/feed-rn-core/setupFeed";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const App = () => {
  const [myClient, setMyClient] = useState<LMFeedClient>();
  const apiKey = "<YOUR_API_KEY>";
  const userName = "<USER_NAME>";
  const uuid = "<USER_ID>";
  const onboardUser = <"BOOLEAN">;

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

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

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 { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import {
  UNIVERSAL_FEED,
  POST_DETAIL,
  CREATE_POST,
  CAROUSEL_SCREEN,
  POST_LIKES_LIST,
  LMOverlayProvider,
  CarouselScreen,
  LMFeedPollResult,
  NOTIFICATION_FEED,
  LMSocialFeedPostDetailScreen,
  LMCreatePollScreen,
  LMLikesScreen,
  LMNotificationScreen,
  LMTopicFeedScreen,
  LMSocialFeedScreen,
  LMUserOnboardingScreen,
  LMSocialFeedSearchScreenWrapper,
} from "@likeminds.community/feed-rn-core";
import {
  CREATE_POLL_SCREEN,
  POLL_RESULT,
  TOPIC_FEED,
  USER_ONBOARDING_SCREEN,
  SEARCH_SCREEN
} from "@likeminds.community/feed-rn-core/constants/screenNames";
import LMSocialFeedCreateScreen from "@likeminds.community/feed-rn-core/wrappers/socialFeedCreateWrapper";
import { FeedType } from "@likeminds.community/feed-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 screenOptions={{ headerShown: false }}>
          <Stack.Screen
            name={USER_ONBOARDING_SCREEN}
            component={LMUserOnboardingScreen}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name={UNIVERSAL_FEED}
            component={LMSocialFeedScreen}
            initialParams={{
              feedType: FeedType.UNIVERSAL_FEED,
            }}
          />
          <Stack.Screen
            name={POST_DETAIL}
            component={LMSocialFeedPostDetailScreen}
          />
          <Stack.Screen
            name={CREATE_POST}
            component={LMSocialFeedCreateScreen}
          />
          <Stack.Screen name={POST_LIKES_LIST} component={LMLikesScreen} />
          <Stack.Screen
            name={TOPIC_FEED}
            component={LMTopicFeedScreen}
            options={{ headerShown: true }}
          />
          <Stack.Screen
            name={NOTIFICATION_FEED}
            component={LMNotificationScreen}
          />
          <Stack.Screen
            options={{ gestureEnabled: false }}
            name={CAROUSEL_SCREEN}
            component={CarouselScreen}
          />
          <Stack.Screen
            name={POLL_RESULT}
            component={LMFeedPollResult}
            options={{
              gestureEnabled: false,
            }}
          />
          <Stack.Screen
            name={CREATE_POLL_SCREEN}
            component={LMCreatePollScreen}
          />
          <Stack.Screen
            name={SEARCH_SCREEN}
            component={LMSocialFeedSearchScreenWrapper}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

export default App;