react-native-pixalate-collect

A React Native package for Pixalate data collection that works with both React Native CLI and Expo.

Features

• ✅ Compatible with React Native CLI and Expo
• ✅ Automatic session and visitor tracking
• ✅ Geolocation support (with fallback)
• ✅ Persistent storage using AsyncStorage
• ✅ TypeScript support
• ✅ Component and Hook APIs

Installation

For Expo projects:

npx expo install @react-native-async-storage/async-storage expo-location

For React Native CLI projects:

npm install @react-native-async-storage/async-storage @react-native-community/geolocation
# or
yarn add @react-native-async-storage/async-storage @react-native-community/geolocation

# For iOS
cd ios && pod install && cd ..

Install the package:

If using as a local package:

npm install ./react-native-pixalate-collect
# or
yarn add ./react-native-pixalate-collect

Usage

Using the Component

import React from 'react';
import { PixalateCollect } from 'react-native-pixalate-collect';

export default function App() {
  return (
    <>
      <PixalateCollect
        networkcode="23269931309"
        partnerId="n/a"
        current_domain="http://sorbet-supply.test"
        clientId="ask.askaianything.ai"
        onSuccess={(payload) => console.log('Data sent:', payload)}
        onError={(error) => console.error('Error:', error)}
      />
      {/* Your app content */}
    </>
  );
}

Using the Hook

import React from 'react';
import { usePixalateCollect } from 'react-native-pixalate-collect';

export default function MyScreen() {
  const { collectData } = usePixalateCollect({
    networkcode: "23269931309",
    partnerId: "n/a",
    current_domain: "http://sorbet-supply.test",
    clientId: "ask.askaianything.ai",
    pageUri: "app://my-screen",
    autoCollect: true, // Automatically collect on mount
    onSuccess: (payload) => console.log('Data sent:', payload),
    onError: (error) => console.error('Error:', error),
  });

  // Manually trigger collection
  const handleButtonPress = () => {
    collectData('app://custom-page');
  };

  return (
    // Your component JSX
  );
}

Props/Config

PixalateCollect Component Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | networkcode | string | Yes | - | Network code | | partnerId | string | No | "n/a" | Partner ID | | current_domain | string | Yes | - | API endpoint domain | | clientId | string | No | "ask.askaianything.ai" | Client ID | | onError | (error: Error) => void | No | - | Error callback | | onSuccess | (payload: any) => void | No | - | Success callback |

usePixalateCollect Hook Config

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | networkcode | string | Yes | - | Network code | | partnerId | string | No | "n/a" | Partner ID | | current_domain | string | Yes | - | API endpoint domain | | clientId | string | No | "ask.askaianything.ai" | Client ID | | pageUri | string | No | "app://main" | Page URI | | autoCollect | boolean | No | true | Auto collect on mount | | onError | (error: Error) => void | No | - | Error callback | | onSuccess | (payload: any) => void | No | - | Success callback |

Hook Return Value

| Method | Type | Description | |--------|------|-------------| | collectData | (customPageUri?: string) => Promise<void> | Manually trigger data collection |

Permissions

iOS (Info.plist)

For React Native CLI, add to ios/YourApp/Info.plist:

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to provide better analytics</string>

For Expo, add to app.json:

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "We need your location to provide better analytics"
      }
    }
  }
}

Android (AndroidManifest.xml)

For React Native CLI, add to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

For Expo, add to app.json:

{
  "expo": {
    "android": {
      "permissions": [
        "ACCESS_FINE_LOCATION",
        "ACCESS_COARSE_LOCATION"
      ]
    }
  }
}

Data Collected

The package collects and sends the following data:

• browserAgent: User agent string
• clientId: Client identifier
• networkcode: Network code
• partnerId: Partner ID
• pageUri: Current page URI
• sessionId: Session identifier
• sessionTime: Session timestamp
• visitorId: Visitor identifier (persists for 365 days)
• visitorTime: Visitor timestamp
• supplyType: Always "Mobile_Web" for React Native
• mobileLatitude: Device latitude (if permission granted)
• mobileLongitude: Device longitude (if permission granted)

Notes

• Session data persists until app is uninstalled or cleared
• Visitor data persists for 365 days
• Location is optional and will be null if permission is denied
• The package automatically handles both Expo and React Native CLI location APIs
• If location permissions are not granted, the package will still send data without location

License

MIT