AppInform React Native SDK

A React Native library that provides a simple Hello component.

Installation

React Native does not allow indirect imports so declared peer-dependencies should be installed. Currently recommend installing through yarn.

yarn add app-inform-react-native-sdk react-native-webview react-native-safe-area-context react-native-device-info react-native-loading-spinner-overlay

Usage

import React from 'react';
import { App as AppInform } from 'app-inform-react-native-sdk';


function App() {
  return (
    <AppInform
      appId="APP_ID"
      userId="USER-ID"
      identify={{
        email: '',
      }}
    />
  );
}

AppInform Setup

To properly configure AppInform with your React Native application, you need to set up the Bundle Identifier in your AppInform dashboard.

Step 1: Get Your Bundle Identifier

This SDK uses react-native-device-info to automatically retrieve your app's bundle identifier for secure authentication. The bundle ID is sent with every authentication request.

For more information about bundle identifiers, refer to the react-native-device-info documentation.

Step 2: Configure AppInform Dashboard

1. Navigate to App Configuration:

   • Go to your AppInform dashboard
   • Select your app (APP_ID) from the apps list
   • Click on the Settings tab

2. Enter the Group ID:

   • In the Settings tab, locate the Group ID input field
   • Enter the exact bundle identifier from Step 1
   • Save your configuration

Important: The Group ID must match your app's bundle identifier exactly. This is used for secure authentication between your app and AppInform.

Troubleshooting

To find your bundle identifier, check your app's android/app/build.gradle (Android) or ios/YourApp/Info.plist (iOS) files.

For additional debugging, the SDK logs the request data in Dev Tools. When you access your app's Dev Tools console, you'll see a console.log that includes the request body with a groupId field - this is the bundle identifier that the SDK is sending to our service.

AppInform Provider Approach

Recommended for users who want to customize their guides execution through customizable triggers. The SDK provides a built-in AppInformProvider that makes it easy to trigger guides throughout your app.

Using the Built-in Provider

import { AppInformProvider } from 'app-inform-react-native-sdk';

<AppInformProvider
  appId="APP_ID"
  userId="USER-ID"
  identify={{
    email: '',
  }}
>
  <YourAppContent />
</AppInformProvider>

Usage

import { useAppInform } from 'app-inform-react-native-sdk';

const appInform = useAppInform();

// On view render
useEffect(() => {
  appInform?.triggerAppInform('mounted');
}, [appInform]);

// Custom triggers
<Button onPress={() => appInform?.triggerAppInform('clicked')} />

Development

Building the library

npm run prepare

Setup the app

Before starting, make sure you have the dependencies installed

In the root folder

yarn install
yarn prepare

and then

ios:

yarn dev:setup && yarn dev:setup-ios

android:

yarn dev:setup

In order to run the app

ios:

yarn dev:ios

android:

yarn dev:android

Currently making changes on the root is not triggering the changes on the example app's so you need to

yarn prepare

and then

ios:

yarn dev:reset-ios

android:

yarn dev:reset

now run the app as described below

Running the example app

# Start Metro bundler
npm run dev

# Run on Android
npm run dev:android

# Run on iOS
npm run dev:ios

Project Structure

• src/ - Source code for the library
• lib/ - Built library files (generated)
• example/ - Example React Native app for testing the library (react-native-test-app)