This is a new React Native project, bootstrapped using @react-native-community/cli.

About this project

This sample application demonstrates how to integrate the LivePerson In-App SDK with a React Native project, using both the iOS SDK and the android SDK.

It provides a guide for integrating the LivePerson In-App SDK, which is distributed via CocoaPods (iOS) and Gradle (Android), into a React Native project. This integration enables real-time messaging capabilities while ensuring platform compatibility and seamless functionality within a React Native environment.

Getting Started

Note: This project is created following the React Native - Environment Setup instructions. React Native version 0.76.0

Project dependencies:

Additional project library dependencies:

• @react-native-async-storage/async-storage used for storing required variables such as accountNumber, appInstallIdentifier, engagementInfo, etc.
• react-native-notifications handles push notifications for the app.

Supported functionality

1. Main functionalities included in the React Native sample app:

• initLPMessaging: Initializes the SDK with account number and appInstallIdentifier.
• Monitoring (getEngagement/ sendSDE): Enables consumer monitoring and engagement flows.
• showConversation: Displays the messaging window.
• logoutLPMessaging: Clears the current user's data before a new user logs in on the same device or logs out the current user.
• Handling Push Notifications: Includes registerPushNotifications and handlePush for push notification support.
• Callback indexes: Keeps the host app updated on conversation-related events.

Note: Check our official iOS SDK and android SDK documentation for more information.

2. We implemented lpbridge.ts as an interface file that serves as a TypeScript wrapper for interacting with native platform functionalities. Its primary purpose is to facilitate communication between the React Native JavaScript/TypeScript layer and the native code (Objective-C/Swift for iOS, Java/Kotlin for Android).

Getting Started

1. Clone the repository to your local machine.

2. Navigate to the project root folder and install dependencies:

npm install

Step 1: Configure inapp configurations

1. Enable mobile inapp SDK for your Liveperson account:

• Community Guide
• Developer guide for iOS SDK and the android SDK.

2. Navigate to view\AppData.ts and configure the following settings:

Unauthenticated Flow

export const accNum = ''; // Your LivePerson Account
export const appId = ''; // Mobile in-app Application ID for the account
export const pageIdKey = 'pageId'; // Keep this value
export const campaignInfoKey = 'campaignInfo'; // Keep this value
export const consumerID = undefined; // Set as undefined
export const issuer = undefined; // Set as undefined
export const jwtValue = ''; // Leave blank

Authenticated Flow

export const accNum = ''; // Your LivePerson Account
export const appId = ''; // Mobile in-app Application ID for the account
export const pageIdKey = 'pageId'; // Keep this value
export const campaignInfoKey = 'campaignInfo'; // Keep this value
export const consumerID = ''; // Set your consumer ID
export const issuer = ''; // Set if needed; otherwise, leave as undefined
export const jwtValue = ''; // For demo purposes, provide a JWT with a longer lifespan

Step 2: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npx
npx react-native start

Step 3: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

Make sure that adb tools are installed and their path is specified correctly. If adb has been successfully installed, connect your real device using USB-cable or using Wi-Fi or start emulator. Once any device is connected, run a command below.

npx react-native run-android

For iOS

# using npx
npx react-native run-ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Step 4: Modifying your App (JavaScript - React Native Side: UI & Logic)

1. Modifying UI Components:

• Update files located in the view/ folder in your preferred text editor.

2. Modifying LivePerson SDK Interface Files:

• Modify files under the following directories:
  • bridges/
  • bridges/enums/
  • bridges/interfaces/

3. Handling Push Notifications:

• Check the useEffect hook inside App.tsx for push notification handling logic.

Step 5: Modifying your App (Native iOS Side: Objective-C/Swift)

Install Dependencies

1. Navigate to the ios folder and run the following commands:

# From the project root folder, navigate to the "ios" folder
cd ios

# Install Ruby dependencies (only once)
bundle install

# Install CocoaPods dependencies
bundle exec pod install

Open and Edit iOS Project in Xcode

2. After installing dependencies, navigate back to the root folder and open the iOS project in Xcode:

# From the "ios" folder, navigate back to the root folder
cd ..

# Open and edit iOS-related files in Xcode
xed ios

Run the Project

3. Once your changes are done, you can run the project on the simulator or an actual device.

   Note: If you add additional dependencies to package.json, you will typically need to rebuild the project to ensure everything is linked properly. You can do this by running npm install or yarn install and then executing pod install again in the ios directory.

   Note: If you are only making changes to JavaScript/TypeScript or modifying the UI, you can run the project directly to see the changes without rebuilding the native code.

Step 6: Modifying your App (Native Android Side: Java/Kotlin)

To modify native side of your react-native project, open an android fold in Android Studio and sync a project. This project has external dependencies of react native app(like bridging bounding) and some Android-native implementation(like push registration and push messsages handling).

Note: current project uses korlin version 1.9.24 and gradle version 8.10.2. Please, keep your Android Studio up to date or check compatibility version here.

Congratulations! 🎉

You've successfully run and modified your React Native App. 🥳