@convep_mobilogy/react-native-qms-plugin

A React Native plugin that provides QMS (Quality Management System) components and APIs for defect management, dashboard visualization, and QMS workflow operations.

Installation

Install using npm:

npm install @convep_mobilogy/react-native-qms-plugin

Or using Yarn:

yarn add @convep_mobilogy/react-native-qms-plugin

iOS Setup

Autolinking should set up everything automatically.

1. Navigate to your iOS folder:

cd ios
pod install

Android Setup

Autolinking should set up everything automatically, but you need to add the private Maven repo and enable core library desugaring.

1. In android/build.gradle, add the Maven repo:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://www.jitpack.io") }

        maven {
            url = uri("https://raw.githubusercontent.com/ConvepMobilogy/QMS_framework/main/maven-repo")
        }
    }
}

2. In android/app/build.gradle, enable core library desugaring inside dependencies:

dependencies {
    // ...
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.4")
}

3. In android/app/build.gradle, enable core library desugaring inside android:

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_11
        targetCompatibility JavaVersion.VERSION_11
        coreLibraryDesugaringEnabled true
    }
}

Usage

Use QmsDashboardView to render the native QMS screen.

import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { QmsDashboardView } from '@convep_mobilogy/react-native-qms-plugin';

export default function App() {
  const [showQms, setShowQms] = React.useState(false);

  const clientID = '<ClientID>';
  const clientCode = '<CompanyCode>';
  const userToken = '<UserToken>';

  return (
    <View style={styles.container}>
      {showQms ? (
        <QmsDashboardView
          style={styles.container}
          clientID={clientID}
          clientCode={clientCode}
          userToken={userToken}
          onClose={() => setShowQms(false)}
          onAnalyticsScreen={(screenName, screenClass) => {
            console.log('screen:', screenName, screenClass);
          }}
          onAnalyticsEvent={(eventName, params) => {
            console.log('event:', eventName, params);
          }}
        />
      ) : (
        <View style={styles.center}>
          <Button title="Open QMS" onPress={() => setShowQms(true)} />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  center: { flex: 1, justifyContent: 'center', gap: 12, paddingHorizontal: 24 },
});

Props

QmsDashboardView Props

Inherits React Native View styling through the style prop.

style

Layout and styling for the React Native wrapper view.

| Type | Default | | --- | --- | | StyleProp<ViewStyle> | undefined |

Example:

<QmsDashboardView style={{ flex: 1 }} />

clientID iOS Android

QMS client ID used to start an authenticated dashboard session.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView clientID="123" />

clientCode iOS Android

Company code used with clientID and userToken.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView clientCode="CONVEP" />

userToken iOS Android

User authentication token used by the native QMS SDK.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView userToken="user-auth-token" />

onClose iOS Android

Called when the native QMS dashboard closes.

| Type | Default | | --- | --- | | (event?: unknown) => void | undefined |

Example:

<QmsDashboardView onClose={() => setShowQms(false)} />

onAnalyticsScreen iOS Android

Called when the native SDK reports a screen view.

| Type | Default | | --- | --- | | (screenName?: string, screenClass?: string) => void | undefined |

Example:

<QmsDashboardView
  onAnalyticsScreen={(screenName, screenClass) => {
    console.log('screen:', screenName, screenClass);
  }}
/>

onAnalyticsEvent iOS Android

Called when the native SDK reports an analytics event.

| Type | Default | | --- | --- | | (eventName?: string, params?: Record<string, unknown> | null) => void | undefined |

Example:

<QmsDashboardView
  onAnalyticsEvent={(eventName, params) => {
    console.log('event:', eventName, params);
  }}
/>

onLocate Android

Called when the Android SDK emits a location event.

| Type | Default | | --- | --- | | (lat?: string, lng?: string) => void | undefined |

Example:

<QmsDashboardView
  onLocate={(lat, lng) => {
    console.log('location:', lat, lng);
  }}
/>

themeColor iOS Android

Primary theme color override. Use a hex color string supported by the native SDK.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView themeColor="#00A6A6" />

headerThemeColor iOS Android

Convenience color override applied to both header text and header icons unless headerTextColor or headerIconColor is provided separately.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView headerThemeColor="#FFFFFF" />

headerTextColor iOS Android

Header text color override.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView headerTextColor="#111827" />

headerIconColor iOS Android

Header icon color override.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView headerIconColor="#111827" />

accentColor iOS Android

Accent color override for supported native SDK elements.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView accentColor="#F59E0B" />

fontFamily iOS Android

Custom font family name passed to the native SDK.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView fontFamily="Montserrat" />

payload iOS Android

Optional data payload forwarded to the native dashboard. Android uses showQmsWithPayload when the payload is not empty.

| Type | Default | | --- | --- | | Record<string, unknown> | null | null |

Example:

<QmsDashboardView
  payload={route?.params?.notificationData ?? null}
/>

ClientID iOS Android

Backwards-compatible alias for clientID.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView ClientID="123" />

ClientCode iOS Android

Backwards-compatible alias for clientCode.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView ClientCode="CONVEP" />

user_token iOS Android

Backwards-compatible alias for userToken.

| Type | Default | | --- | --- | | string | '' |

Example:

<QmsDashboardView user_token="user-auth-token" />

Notification Usage

Client apps must receive FCM notifications and decide how to route them. QMS SDK notifications can be identified from the data payload with origin: 'QMS-SDK'.

Example QMS notification payload:

{
  "message": {
    "notification": {
      "android": {},
      "body": "Test body",
      "title": "Test title"
    },
    "sentTime": 1769490551181,
    "data": {
      "type": "issues_complete",
      "show_in_foreground": "1",
      "plan_id": "136",
      "id_number": "800201065157",
      "origin": "QMS-SDK"
    }
  }
}

Foreground Notifications

When the app receives a foreground QMS SDK notification, forward it to the native SDK with QmsPlugin.emitInAppNotification(payload).

import messaging from '@react-native-firebase/messaging';
import { QmsPlugin } from '@convep_mobilogy/react-native-qms-plugin';

const isQmsSdkNotification = (data?: Record<string, unknown>) =>
  data?.origin === 'QMS-SDK';

const unsubscribeOnMessage = messaging().onMessage(async (message) => {
  if (!isQmsSdkNotification(message.data)) {
    return;
  }

  QmsPlugin.emitInAppNotification({
    title: message.notification?.title,
    body: message.notification?.body,
    data: message.data,
  });
});

Background Notification Press

When the app is in the background or killed, the client should handle notification presses. If the notification data has origin: 'QMS-SDK', navigate to the screen that renders QmsDashboardView.

import messaging from '@react-native-firebase/messaging';

const isQmsSdkNotification = (data?: Record<string, unknown>) =>
  data?.origin === 'QMS-SDK';

const navigateFromNotification = async (data?: Record<string, unknown>) => {
  if (!isQmsSdkNotification(data)) {
    return;
  }

  // Replace this with your app route name that renders QmsDashboardView.
  navigationRef.current?.navigate('Dashboard', {
    notificationData: data ?? {},
  });
};

const unsubscribeNotificationOpened = messaging().onNotificationOpenedApp(
  async (message) => {
    await navigateFromNotification(message.data);
  }
);

const initialMessage = await messaging().getInitialNotification();
if (initialMessage) {
  await navigateFromNotification(initialMessage.data);
}

If your app requires login before opening QMS, check the stored login state first. If the user is logged in, navigate to the QMS dashboard route. If not, navigate to login and open QmsDashboardView after authentication succeeds.

Background Message Handler

Register a background message handler in your app entry file, such as index.js. This handles data received while the app is in the background, but navigation from a notification tap should still be handled with onNotificationOpenedApp and getInitialNotification.

import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import App from './App';
import { name as appName } from './app.json';

messaging().setBackgroundMessageHandler(async (message) => {
  console.log('FCM background message:', {
    title: message.notification?.title,
    body: message.notification?.body,
    data: message.data,
  });
});

AppRegistry.registerComponent(appName, () => App);

InAppNotificationPayload Props

title

Notification title. If omitted, the native call receives Notification.

| Type | Default | | --- | --- | | string | 'Notification' |

Example:

QmsPlugin.emitInAppNotification({
  title: 'Test title',
});

body

Notification body text.

| Type | Default | | --- | --- | | string | '' |

Example:

QmsPlugin.emitInAppNotification({
  body: 'Test body',
});

data

Optional notification data payload forwarded to native when supported.

| Type | Default | | --- | --- | | Record<string, unknown> | null |

Example:

QmsPlugin.emitInAppNotification({
  data: {
    type: 'issues_complete',
    show_in_foreground: '1',
    plan_id: '136',
    id_number: '800201065157',
    origin: 'QMS-SDK',
  },
});

License

MIT © Convep