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.10.2 @likeminds.community/feed-rn@1.3.3

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

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.
  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 LMFeedClient, now all you need to do is inflate Universal Feed Screen. You have the option to initiate a user session and navigate to Universal 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 Feed SDK, which will be used to initiate a user session by providing apiKey, userName & uuid to <LMOverlayProvider /> from @likeminds.community/feed-rn-core. Incase the userName is not to be provided, provide the prop isUserOnboardingRequired as true to onboard the user where they can provide their own userName.

import {
  LMOverlayProvider,
  LMFeedClient,
  initMyClient,
} from "@likeminds.community/feed-rn-core";
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() {
      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}
          >
            {/* Add navigation container */}
          </LMOverlayProvider>
        </GestureHandlerRootView>
      ) : null}
    </>
  );
};

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/feed-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.
}
  1. 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",
    };
  }
);
  1. Add the LMOverlayProvider and pass the accessToken and refreshToken returned in Step 1.
import {
  LMOverlayProvider,
  LMFeedClient,
} from "@likeminds.community/feed-rn-core";
import { LMCoreCallbacks } from "@likeminds.community/feed-rn-core/setupFeed";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const App = () => {
  const [myClient, setMyClient] = useState<LMFeedClient>();
  const accessToken = "<YOUR_INITIAL_ACCESS_TOKEN>";
  const refreshToken = "<USER_INITIAL_REFRESH_TOKEN>";
  const onboardUser = <"BOOLEAN">;

  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 style={{ flex: 1 }}>
      <LMOverlayProvider
        myClient={myClient}
        accessToken={accessToken}
        refreshToken={refreshToken}
        callbackClass={lmCoreCallback}
        isUserOnboardingRequired={onboardUser}
      >
        {/* 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 Feed 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:

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,
} from "@likeminds.community/feed-rn-core";
import {
  CREATE_POLL_SCREEN,
  POLL_RESULT,
  TOPIC_FEED,
  USER_ONBOARDING_SCREEN,
} from "@likeminds.community/feed-rn-core/constants/screenNames";
import LMSocialFeedCreateScreen from "@likeminds.community/feed-rn-core/wrappers/socialFeedCreateWrapper";

const Stack = createStackNavigator();

const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Add required props for LMOverlayProvider */}
      <LMOverlayProvider>
        {/* Add your navigation container here */}
        <NavigationContainer>
          <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen
              name={USER_ONBOARDING_SCREEN}
              component={LMUserOnboardingScreen}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name={UNIVERSAL_FEED}
              component={LMSocialFeedScreen}
            />
            <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.Navigator>
        </NavigationContainer>
      </LMOverlayProvider>
    </GestureHandlerRootView>
  );
};

export default App;