Skip to main content

Installation and Initialization

Add the Metric SDK Package to Your Project​

Before you can initialize the SDK and perform verifications, you need to add the Metric SDK package to your project. Use one of the following commands depending on your package manager:

yarn add react-native-metric-lite
Package details

NPM Package.

Already using react-native-metric-sdk?

Alias the old name to this package in your package.json. No source changes are needed.

Before

"dependencies": {
  "react-native-metric-sdk": "^0.2.0"
}

After

"dependencies": {
  "react-native-metric-sdk": "npm:react-native-metric-lite@^0.3.5"
}

Then run npm install. Your existing import ... from "react-native-metric-sdk" statements keep working, types included.

Usage​

Initialization​

To use the SDK, initialize it with your client ID and secret key:

import MetricSDK from "react-native-metric-lite";

const metric = new MetricSDK({
  clientId: "your-client-id",
  secretKey: "your-secret-key",
});

Example​

import { useState } from "react";
import { View, Button, Text, TextInput } from "react-native";
import MetricSDK, { type VerificationData } from "react-native-metric-lite";

const metric = new MetricSDK({
  clientId: "your-client-id",
  secretKey: "your-secret-key",
});

const App = () => {
  const [modalComponent, setModalComponent] = useState<JSX.Element | null>(null);
  const [token, setToken] = useState("");
  const [userData, setUserData] = useState<VerificationData>();

  const handleVerifyToken = async () => {
    try {
      const { VerificationModal } = await metric.initiateTokenVerification(
        token,
        (data) => {
          if (data) {
            setUserData(data);
          }
          setModalComponent(null);
        }, // Callback to close the modal
        { showCloseButton: true } // Optional: set to false to hide the built-in close button
      );

      setModalComponent(VerificationModal);
    } catch (err) {
      console.error("Error:", err instanceof Error ? err.message : err);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <View style={{}}>
        <Text>Token:</Text>
        <TextInput
          style={{
            width: 200,
            height: 40,
            paddingHorizontal: 8,
            borderColor: "#000",
            borderWidth: 1.5,
          }}
          value={token}
          onChangeText={setToken}
        />
      </View>
      <Button title="Verify Token" onPress={handleVerifyToken} />
      {userData && (
        <>
          <Text>name: {userData?.customer_name}</Text>
          <Text>sid: {userData?.suid}</Text>
        </>
      )}
      {ModalComponent}
    </View>
  );
};

export default App;