# React Native iOS using React Navigation
>[!NOTE]
>**Expo SDK** 41-49 using React Navigation 5+ is supported. See dedicated [Expo integration instructions](/ios/pnddocs/expo_rn-ios.md).
>[!IMPORTANT]
>We support a codeless solution for React Native 0.6-0.72 using react-navigation 5+.
## Step 1. Install the Pendo SDK
1. In the **root folder of your project**, add Pendo using one of your package managers:
```shell
#example with npm
npm install --save rn-pendo-sdk
#example with yarn
yarn add rn-pendo-sdk
```
2. In the **iOS folder**, run the following command:
```shell script
pod install
```
3. **Modify Javascript minification**
When bundling for production, React Native minifies class and function names to reduce the size of the bundle. This means there is no access to the original component names that are used for the codeless solution.
In the application **metro.config.js**, add the following statements in the transformer:
```javascript
module.exports = {
transformer: {
// ...
minifierConfig: {
keep_classnames: true, // Preserve class names
keep_fnames: true, // Preserve function names
mangle: {
keep_classnames: true, // Preserve class names
keep_fnames: true, // Preserve function names
}
}
}
}
```
## Step 2. Pendo SDK integration
>[!NOTE]
>The `API Key` can be found in your Pendo Subscription Settings in App Details.
1. In the application **main file (App.js/.ts/.tsx)**, add the following code:
```typescript
import { PendoSDK, NavigationLibraryType } from 'rn-pendo-sdk';
function initPendo() {
const navigationOptions = {library: NavigationLibraryType.ReactNavigation};
const pendoKey = 'YOUR_API_KEY_HERE';
//note the following API will only setup initial configuration, to start collect analytics use startSession
PendoSDK.setup(pendoKey, navigationOptions);
}
initPendo();
```
2. Initialize Pendo where your visitor is being identified (e.g. login, register, etc.).
```typescript
const visitorId = 'VISITOR-UNIQUE-ID';
const accountId = 'ACCOUNT-UNIQUE-ID';
const visitorData = {'Age': '25', 'Country': 'USA'};
const accountData = {'Tier': '1', 'Size': 'Enterprise'};
PendoSDK.startSession(visitorId, accountId, visitorData, accountData);
```
3. In the file where the `NavigationContainer` is created.
Import `WithPendoReactNavigation`:
```typescript
import {WithPendoReactNavigation} from 'rn-pendo-sdk'
```
Wrap `NavigationContainer` with `WithPendoReactNavigation` HOC
```typescript
const PendoNavigationContainer = WithPendoReactNavigation(NavigationContainer);
```
replace `NavigationContainer` tag with `PendoNavigationContainer` tag
```typescript
{/* Rest of your app code */}
```
**Notes:**
**visitorId**: a user identifier (e.g. John Smith)
**visitorData**: the user metadata (e.g. email, phone, country, etc.)
**accountId**: an affiliation of the user to a specific company or group (e.g. Acme inc.)
**accountData**: the account metadata (e.g. tier, level, ARR, etc.)
>[!TIP]
>To begin a session for an anonymous visitor, pass ```null``` or an empty string ```''``` as the visitor id. You can call the `startSession` API more than once and transition from an anonymous session to an identified session (or even switch between multiple identified sessions).
## Step 3. Mobile device connectivity for tagging and testing
>[!NOTE]
>The `Scheme ID` can be found in your Pendo Subscription Settings in App Details.
These steps enable page tagging
and guide testing capabilities.
1. Add Pendo URL scheme to **info.plist** file:
Under App Target > Info > URL Types, create a new URL by clicking the + button.
Set **Identifier** to pendo-pairing or any name of your choosing.
Set **URL Scheme** to `YOUR_SCHEME_ID`.
2. To enable pairing from the device:
a. If using AppDelegate, add or modify the **openURL** function:
Swift Instructions - Click to expand or collapse
```swift
import Pendo
...
func application(_ app: UIApplication,open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
if url.scheme?.range(of: "pendo") != nil {
PendoManager.shared().initWith(url)
return true
}
// your code here...
return true
}
```
Objective-C Instructions - Click to expand or collapse
```objective-c
#import
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options {
if ([[url scheme] containsString:@"pendo"]) {
[[PendoManager sharedManager] initWithUrl:url];
return YES;
}
// your code here ...
return YES;
}
```
b. If using SceneDelegate, add or modify the **openURLContexts** function:
Swift Instructions - Click to expand or collapse
```swift
import Pendo
...
func scene(_ scene: UIScene, openURLContexts URLContexts: Set) {
if let url = URLContexts.first?.url, url.scheme?.range(of: "pendo") != nil {
PendoManager.shared().initWith(url)
}
}
```
Objective-C Instructions - Click to expand or collapse
```objectivec
- (void)scene:(UIScene *)scene openURLContexts:(nonnull NSSet *)URLContexts {
NSURL *url = [[URLContexts allObjects] firstObject].URL;
if ([[url scheme] containsString:@"pendo"]) {
[[PendoManager sharedManager] initWithUrl:url];
}
// your code here ...
}
```
## Step 4. Verify installation
1. Test using Xcode:
Run the app while attached to Xcode.
Review the Xcode console and look for the following message:
`Pendo Mobile SDK was successfully integrated and connected to the server.`
2. In the Pendo UI, go to Settings>Subscription Settings.
3. Select the **Applications** tab and then your application.
4. Select the Install Settings tab and follow the instructions under Verify Your Installation to ensure you have successfully integrated the Pendo SDK.
5. Confirm that you can see your app as Integrated under subscription settings.
## Developer documentation
- API documentation available [here](/api-documentation/rn-apis.md).
- Sample app with Pendo SDK integrated available here.
## Troubleshooting
- For technical issues, please [review open issues](https://github.com/pendo-io/pendo-mobile-sdk/issues) or [submit a new issue](https://github.com/pendo-io/pendo-mobile-sdk/issues).
- Release notes can be found [here](https://developers.pendo.io/category/mobile-sdk/).
- For additional documentation, visit our [Help Center Mobile Section](https://support.pendo.io/hc/en-us/categories/4403654621851-Mobile).