2. Metric SDK Installation and Initialization

2.1 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

yarn add react-native-metric-africa

npm

npm install react-native-metric-africa

Package details

NPM Package.

Android

2.2 Initialize the SDK

To begin using the SDK to perform verifications, you first need to initialize the SDK. You would need your client key and secret key to proceed with this process;

App.tsx

import {
  initMetricSdkAndroid,
} from 'react-native-metric-africa';

// ...

export default function App() {
  const [result, setResult] = useState<string | undefined>();

  useEffect(() => {
      initMetricSdkAndroid(client_id, client_secret, company_name, brand_color, logo_url, isDev)
        .then((res) =>
          setResult(res)
        );
  }, []);

  return <></>;
}

info

Check out how to generate your public id and secret key.

Initialization Parameters

• client_id: Your Client ID or Public ID
• client_secret: Your Client Secret
• company_name: Your company name.
• brand_color: A hex code representing the brand color of your company.
• logo_url: The logo url of your company.
• isDev: Determines whether the current environment is a production environment or a development one.

2.3 Initiate a Verification

After initializing the SDK, you can start verifications using a generated token:

App.tsx

import {
  initVerificationAndroid,
  initMetricSdkAndroid,
=} from 'react-native-metric-africa';

// ...

export default function App() {
  const [result, setResult] = useState<string | undefined>();

  useEffect(() => {
      initMetricSdkAndroid(client_id, client_secret, appName, brand_color, logo_url, isDev)
        .then(() => {
          initVerificationAndroid(token);
            .then((res) =>
              //...
            )
            .catch((e) => {
              //...
            });
        }
      );
  }, []);

  return <></>;
}

info

Check out how to generate tokens.

tip

Refer here for detailed explanations of each verification failure result.

2.4 Complete Example

Here's a complete example of how to use the SDK in your App.tsx:

App.tsx

import {
  initVerificationAndroid,
  initMetricSdkAndroid,
} from 'react-native-metric-africa';

// ...

export default function App() {
  const [result, setResult] = useState<string | undefined>();

  useEffect(() => {
    initMetricSdkAndroid(client_id, client_secret, "", "", "", false)
    .then((res) => {
      setResult(res)
    });
  }, []);

  return (
    <View style={styles.container}>
      <Text>Result: {result}</Text>
      <TouchableOpacity
        onPress={() => {
            initVerificationAndroid(token);
            .then((res) => console.log(res))
            .catch((e) => {
              console.log(e);
            });
        }}
      >
        <Text>Start Launcher</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

iOS

2.2 Initialize the SDK

To begin using the SDK to perform verifications, you first need to initialize the SDK. You would need your client key and secret key to proceed with this process;

App.tsx

import {
  initializeIOS
} from 'react-native-metric-africa';

// ...

export default function App() {
  const [result, setResult] = useState<string | undefined>();

  useEffect(() => {
    initializeIOS(clientID, clientSecret).then((res) => {
        setResult(res)
    });
  }, []);

  return <></>;
}

info

Check out how to generate your public id and secret key.

2.3 Initiate a Verification

After initializing the SDK, you can start verifications using a generated token:

App.tsx

import {
  startMetricLauncherIOS,
  initializeIOS,
} from 'react-native-metric-africa';

// ...

export default function App() {
  const [result, setResult] = useState<string | undefined>();

  useEffect(() => {
    initializeIOS(clientID, clientSecret).then(() => {
      startMetricLauncherIOS(token, logo_url, brand_color, isDev)
        .then((res) => {
          //...
        })
        .catch((e) => {
          //...
        });
    });
  }, []);

  return <></>;
}

Initiation Parameters

• token: A single use token string which you generate.
• logo_url: The logo url of your company.
• brand_color: A hex code representing the brand color of your company.
• isDev: Determines whether the current environment is a production environment or a development one.

info

Check out how to generate tokens.

tip

Refer here for detailed explanations of each verification failure result.

2.4 Complete Example

Here's a complete example of how to use the SDK in your App.tsx:

App.tsx

import {
  startMetricLauncherIOS,
  initializeIOS,
} from 'react-native-metric-africa';

// ...

export default function App() {
  const [result, setResult] = useState<string | undefined>();

  useEffect(() => {
      initializeIOS(clientID, clientSecret).then((res) => setResult(res));
  }, []);

  return (
    <View style={styles.container}>
      <Text>Result: {result}</Text>
      <TouchableOpacity
        onPress={() => {
            startMetricLauncherIOS(token, undefined, undefined, false)
            .then((res) => console.log(res))
            .catch((e) => {
                console.log(e);
            });
        }}
      >
        <Text>Start Launcher</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});