Skip to main content

How To Integrate Sdk In Expo Managed Workflow

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 in an Expo managed project. To leverage the full capabilities, including native features, the integration requires using a custom development client. This guide will cover how to set this up along with the SDK integration.

Prerequisites​

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

  • Node.js and npm (Node Package Manager)
  • Expo CLI and EAS 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@latest @likeminds.community/feed-rn@latest

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​

npx expo 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 react-native-tab-view

Add Expo libraries, don't install if already installed​

npx expo install expo-build-properties expo-dev-client expo-image-picker expo-document-picker expo-video-thumbnails

Add the listed dependencies, don't install if already installed​

npm install @react-native-async-storage/async-storage@1.23.1 @react-native-community/datetimepicker@8.2.0 @react-native-community/netinfo@11.4.1 @react-native-community/slider@4.5.5 diff@7.0.0 lodash@4.17.21 react-native-svg@15.11.1 react-native-circular-progress@1.4.1 react-native-device-info@10.13.1 react-native-compressor@1.11.0 react-native-file-viewer@2.1.5 @types/react-native-video@5.0.14 react-native-image-zoom-viewer@3.0.1 react-native-swiper-flatlist@3.2.5 react-native-toast-message@2.2.1 react-native-video@6.12.0 string.prototype.matchall@4.0.12

Add The Listed Plugins​

"plugins": [
    ...
    "expo-router",
    "@react-native-firebase/app",
    "@react-native-firebase/messaging",
    [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          },
          "android": {
            "extraMavenRepos": [
              "../../node_modules/@notifee/react-native/android/libs"
            ]
          }
        }
      ]
]

Step 2 - Initialize LMFeedClient and User Session​

Once the SDK is installed, initiate the LMFeedClient and start a user session.

  • 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,
  LMCoreCallbacks
} from "@likeminds.community/feed-rn-core";
import {LMFeedClient} from '@likeminds.community/feed-rn';
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { useEffect, useState } from "react";

const LikeMindsFeedSDK = () => {
  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 LikeMindsFeedSDK;
tip

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

Step 3 - Configure Navigation​

Set up the navigation for your application using React Navigation

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,
  CREATE_POLL_SCREEN,
  POLL_RESULT,
  TOPIC_FEED,
  USER_ONBOARDING_SCREEN,
  SEARCH_SCREEN,
  LMSocialFeedCreateScreen,
  FeedType
} from "@likeminds.community/feed-rn-core";

const Stack = createStackNavigator();

const LikeMindsFeedSDK = () => {
  return (
    <>
        {/* Navigation logic to be added after user is initiated as described in step 2 */}
        <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>
    </>
  );
};

export default LikeMindsFeedSDK;

Step 4 - Create A Developmental Build On Local Machine​

For Android

npx expo run:android

For iOS

npx expo run:ios