Skip to content

docs: update react native sdk docs with the latest changes #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: update react native sdk docs with the latest changes #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
280 changes: 96 additions & 184 deletions content/docs/react-native/installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,26 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
{ href: 'https://www.npmjs.com/package/@reclaimprotocol/inapp-rn-sdk', imgSrc: 'https://img.shields.io/npm/v/%40reclaimprotocol%2Finapp-rn-sdk.svg', alt: 'NPM Version' },
]} />

## Get an API Key
Setup your project using the [Get API Key guide](/api-key).
## Prerequisites

Before installing the SDK, ensure you have:

- A [Reclaim account](https://dev.reclaimprotocol.org/explore) with an app created
- Your app credentials: app ID and app secret
- A provider ID added to your app in [Reclaim Devtools](https://dev.reclaimprotocol.org/explore)

If you haven't set these up yet, follow the [Get API Key guide](/api-key).

## Examples

See complete working examples:
- [React Native Example](https://github.com/reclaimprotocol/reclaim-inapp-reactnative-sdk/tree/main/samples/example_new_arch) - for standard React Native projects
- [Expo Example](https://github.com/reclaimprotocol/reclaim-inapp-reactnative-sdk/tree/main/samples/example_expo) - for Expo projects

---

# Using Expo

## Installation

```package-install
Expand All @@ -26,90 +41,94 @@ npx expo install @reclaimprotocol/inapp-rn-sdk

## Setup

Expo users can skip the native configuration changes by adding the Reclaim InApp Config Plugin. To do so merge the following code to the plugins section of your `app.json`, `app.config.js`, or `app.config.ts` file:
Add the Reclaim InApp Config Plugin to your `app.json`, `app.config.js`, or `app.config.ts`:

```diff
{
// .. other plugin options (removed for brevity)
"plugins": [
"expo-router",
// Add the following in the plugins section:
+ "@reclaimprotocol/inapp-rn-sdk",
[
"expo-splash-screen",
{
"image": "./assets/images/splash-icon.png",
"imageWidth": 200,
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}
]
// ... other plugins (removed for brevity)
],
// .. other options (removed for brevity)
// ... other plugins
]
}
```

Note: This module contains custom native code which is NOT supported by Expo Go
<Callout type="warn">
This module contains custom native code and is **NOT supported by Expo Go**. You'll need to create a development build.
</Callout>

If you're using Expo without EAS, run the following commands:
## Building

```
# For iOS
<Tabs items={['Without EAS', 'With EAS']}>
<Tab value="Without EAS">
```bash
# iOS
npx expo prebuild
npx expo run:ios

# For Android
# Android
npx expo prebuild
npx expo run:android
```
</Tab>

If you're using Expo with EAS, create a new build:

```
# For online builds
<Tab value="With EAS">
```bash
# Online builds
npx eas-cli build --profile development

# For local builds
# Local builds
npx eas-cli build --profile development --local
```
</Tab>
</Tabs>

## iOS Performance Fix

When running on iOS physical devices, add this environment variable to prevent performance issues:

1. Open your project in Xcode
2. Edit Scheme → Run → Arguments tab
3. Add environment variable:
- **Key**: `GODEBUG`
- **Value**: `asyncpreemptoff=1`

# Without using Expo
---

# Without Using Expo

## Installation

```package-install
npm install @reclaimprotocol/inapp-rn-sdk
```

#### Alternative: Install from git source
Alternatively, install directly from GitHub:

```package-install
```bash
npm install git+https://github.com/reclaimprotocol/reclaim-inapp-reactnative-sdk.git
```

## Setup
## Android Setup

### Android Setup
### 1. Add Activity to AndroidManifest.xml

Add the following to your `android/app/src/main/AndroidManifest.xml` file under the `<application>` tag:
Add this inside the `<application>` tag in `android/app/src/main/AndroidManifest.xml`:

```xml
<activity
android:name="org.reclaimprotocol.inapp_sdk.ReclaimActivity"
android:theme="@style/Theme.ReclaimInAppSdk.LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
/>
<activity
android:name="org.reclaimprotocol.inapp_sdk.ReclaimActivity"
android:theme="@style/Theme.ReclaimInAppSdk.LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
/>
```

add the following to the end of settings.gradle:
### 2. Add Repositories

Add these repositories to your `android/settings.gradle`:

<Tabs items={['Groovy', 'Kotlin']}>
```groovy tabs="Groovy"
```groovy
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
String flutterStorageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
Expand All @@ -127,171 +146,64 @@ dependencyResolutionManagement {
}
```

```kotlin tabs="Kotlin"
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
val flutterStorageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
val reclaimStorageUrl = System.env.RECLAIM_STORAGE_BASE_URL ?: "https://reclaim-inapp-sdk.s3.ap-south-1.amazonaws.com/android/repo"
repositories {
google()
mavenCentral()
maven("$reclaimStorageUrl")
maven("$flutterStorageUrl/download.flutter.io")
}
}
```
<Callout>
If the above doesn't work, try adding the repositories to your root `build.gradle` or app-level `build.gradle` in the `allprojects` section.
</Callout>

</Tabs>

(Ignore if already added in `settings.gradle` from above)
or alternatively add the following repositories to the relevant repositories block:
## iOS Setup

### 1. Set Minimum iOS Version

<Tabs items={['Groovy', 'Kotlin']}>
```groovy tabs="Groovy"
String flutterStorageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
String reclaimStorageUrl = System.env.RECLAIM_STORAGE_BASE_URL ?: "https://reclaim-inapp-sdk.s3.ap-south-1.amazonaws.com/android/repo"
// ...
maven {
url "$reclaimStorageUrl"
}
maven {
url "$flutterStorageUrl/download.flutter.io"
}
```
Ensure your `ios/Podfile` has iOS 13.0 or higher:

```kotlin tabs="Kotlin"
val flutterStorageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
val reclaimStorageUrl = System.env.RECLAIM_STORAGE_BASE_URL ?: "https://reclaim-inapp-sdk.s3.ap-south-1.amazonaws.com/android/repo"
// ...
maven("$reclaimStorageUrl")
maven("$flutterStorageUrl/download.flutter.io")
```ruby
platform :ios, '13.0'
```

</Tabs>

### iOS Setup

1. Make sure to have a platform declaration for your project in your `Podfile` with version 13.0 or higher.
### 2. Install Pods

```ruby
platform :ios, '13.0' # or platform :ios, min_ios_version_supported
```bash
cd ios/
pod install
```

Ignore if you already have this declaration in your `Podfile`.
### 3. Fix Performance on Physical Devices

2. Add the following to your `Podfile` to override SDK dependency:
Add this environment variable in your Xcode scheme to prevent performance issues on physical devices:

- This step is only required when facing issues with the resolved pod dependency.
- You can override the version of dependency when you wish to use a specific version of the SDK.
- You can add a declaration in your `Podfile` to install the SDK from cocoapods, or from a specific git tag, head, commit, or branch.
1. Open `*.xcworkspace` in Xcode
2. Edit Scheme → Run → Arguments
3. Add environment variable:
- **Key**: `GODEBUG`
- **Value**: `asyncpreemptoff=1`

<Tabs items={['Cocoapods (Recommended)', 'Git Tag', 'Git Head', 'Git Commit', 'Git Branch']}>
```ruby tabs="Cocoapods (Recommended)"
# Cocoapods is the recommended way to install the SDK.
pod 'ReclaimInAppSdk', '~> 0.6.0'
```
## Advanced iOS Setup

```ruby tabs="Git Tag"
pod 'ReclaimInAppSdk', :git => 'https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk.git', :tag => '0.6.0'
```
<Accordions>
<Accordion title="Override Pod Dependency Version (Optional)">

```ruby tabs="Git Head"
pod 'ReclaimInAppSdk', :git => 'https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk.git'
```
If you need to use a specific version of the iOS SDK, you can override it in your `Podfile`:

```ruby tabs="Git Commit"
pod 'ReclaimInAppSdk', :git => 'https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk.git', :commit => 'eeb5a5484a5927217065e5c988fab8201cb2db2e'
**From CocoaPods (Recommended):**
```ruby
pod 'ReclaimInAppSdk', '~> 0.18.0'
```

```ruby tabs="Git Branch"
pod 'ReclaimInAppSdk', :git => 'https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk.git', :branch => 'main'
**From Git Tag:**
```ruby
pod 'ReclaimInAppSdk', :git => 'https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk.git', :tag => '0.18.0'
```

</Tabs>

- After adding the dependency, your podfile may look like this:

**From Git HEAD:**
```ruby
platform :ios, '13.0'

# ... some podfile content (removed for brevity)

target 'InappRnSdkExample' do
config = use_native_modules!

use_react_native!(
:path => config[:reactNativePath],
:app_path => "#{Pod::Config.instance.installation_root}/.."
)

# This is the line that you may need to add in your podfile.
pod 'ReclaimInAppSdk', '~> 0.6.0'

pre_install do |installer|
system("cd ../../ && npx bob build --target codegen")
end

# ... rest of the podfile. (removed for brevity)
pod 'ReclaimInAppSdk', :git => 'https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk.git'
```

3. Run `pod install` inside the `ios/` directory of your project.

```sh
After adding, run:
```bash
cd ios/
pod install
```

#### Fixing performance issues on IOS physical devices

Your app performance will be severely impacted when you run debug executable on a physical device. Fixing this requires a simple change in your Xcode project xcscheme.

<Accordions>
<Accordion title="Method 1: Update Environment Variables for XCScheme (Recommended)">

1. Open your project in Xcode.
2. Click on the project target.
3. Click on the **Scheme** dropdown.

<img src="https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk/raw/53a19f88c8d90df485a60dc20190f740cd9fd108/Screenshots/Install/10.png" alt="Edit current xcscheme in Xcode" width="500" />

4. Click on the **Edit Scheme** button.
5. Click on the **Run** tab.
6. Click on the **Arguments** tab and check the **Environment Variables** section.

<img src="https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk/raw/53a19f88c8d90df485a60dc20190f740cd9fd108/Screenshots/Install/12.png" alt="Enable Debug executable in Xcode" width="500" />

7. Add the following environment variable:
- Key: `GODEBUG`
- Value: `asyncpreemptoff=1`
8. Click on the **Close** button in the dialog and build the project.
9. Run the app on a physical device.

</Accordion>
<Accordion title="Method 2: Disable 'Debug executable'">

This method is **not recommended** but could be useful if you don't want to add environment variables to the xcscheme.

1. Open your project in Xcode.
2. Click on the project target.
3. Click on the **Scheme** dropdown.

<img src="https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk/raw/53a19f88c8d90df485a60dc20190f740cd9fd108/Screenshots/Install/10.png" alt="Edit current xcscheme in Xcode" width="500" />

4. Click on the **Edit Scheme** button.
5. Click on the **Run** tab.
6. Uncheck the **Debug executable** checkbox.

<img src="https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk/raw/53a19f88c8d90df485a60dc20190f740cd9fd108/Screenshots/Install/11.png" alt="Enable Debug executable in Xcode" width="500" />

</Accordion>
</Accordions>


## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
Loading