React Native Integration

Use the React Native plugin when a React Native application needs DriveMetaData SDK initialization, event metadata submission, and deep-link background data retrieval.

Install

npm install react-native-drivemetadata

Import

import {sdkInit, sendTags, getBackgroundData} from 'react-native-drivemetadata';

Initialize

Initialize once when the app starts:

import {useEffect, useState} from 'react';

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

  useEffect(() => {
    sdkInit(1234, 'client_token', 5678)
      .then(setResult)
      .catch((error) => console.error('SDK initialization error:', error));
  }, []);

  return null;
}

Parameter	Description
clientId	DriveMetaData client identifier.
token	React Native/mobile client token.
appId	DriveMetaData app identifier.

Send Metadata

const tags = {
  userDetails: {
    first_name: 'Amit',
    last_name: 'Gupta',
    mobile: '+15555550123'
  },
  userIdentifier: {
    email: '[email protected]'
  }
};

sendTags(tags, 'user_registration')
  .then((response) => console.log('Tags sent successfully:', response))
  .catch((error) => console.error('Error sending tags:', error));

Handle Deep Links

import {Linking} from 'react-native';
import {useEffect} from 'react';
import {getBackgroundData} from 'react-native-drivemetadata';

useEffect(() => {
  const handleDeepLink = (event: {url: string}) => {
    getBackgroundData(event.url)
      .then((data) => console.log('Background data:', data))
      .catch((error) => console.error('Error fetching background data:', error));
  };

  const subscription = Linking.addEventListener('url', handleDeepLink);

  return () => {
    subscription.remove();
  };
}, []);

Full Example

import {sdkInit, sendTags, getBackgroundData} from 'react-native-drivemetadata';
import {Text, View, Linking} from 'react-native';
import {useEffect, useState} from 'react';

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

  useEffect(() => {
    sdkInit(1234, 'client_token', 5678)
      .then(setResult)
      .catch((error) => console.error('SDK initialization error:', error));

    sendTags(
      {
        userDetails: {
          first_name: 'Dev',
          last_name: 'iOS',
          mobile: '+15555550123'
        }
      },
      'user_registration'
    )
      .then((response) => console.log('Tags sent successfully:', response))
      .catch((error) => console.error('Error sending tags:', error));
  }, []);

  useEffect(() => {
    const handleDeepLink = (event: {url: string}) => {
      getBackgroundData(event.url)
        .then((data) => console.log('Background data:', data))
        .catch((error) => console.error('Error fetching background data:', error));
    };

    const subscription = Linking.addEventListener('url', handleDeepLink);
    return () => subscription.remove();
  }, []);

  return (
    <View>
      <Text>Result: {result}</Text>
    </View>
  );
}

Notes

• Requesting IDFA permission is platform-specific and should follow your iOS ATT consent flow.
• Use mobile client credentials only.
• Do not send secrets or payment card data in event payloads.