🚀 react-native-target-kit

A zero-boilerplate, type-safe React Native SDK for Adobe Target & Adobe Journey Optimizer (AJO) Decisioning.

Integrate Adobe Target personalization, optional Firebase Remote Config dynamic mbox routing, and custom UI components with simple, declarative slots:

<TargetSlot selectorId="p1" />

📦 Features

• 🎯 Declarative Target Slot: Simply <TargetSlot selectorId="p1" /> — no manual manager or proposition plumbing required.
• 🔥 Dynamic Remote Config Mapping: Remap mbox scopes to screen placements on the fly using Firebase Remote Config, REST API, or static config.
• 🚀 Zero-Config Direct Scope Support: Don't use Remote Config? Pass mboxes directly: <TargetSlot scope="mbox_db_444" />.
• 🎨 Custom Component Registry: Register any custom React Native component (RendererRegistry.register('credit_card', MyCard)), or use headless render-props.
• 📦 1-Call Network Batching: Multiple target slots on a screen are automatically consolidated into a single Adobe Edge request.
• 🛡️ Schema Validation & Fallback Safety: Validates JSON payloads at runtime and gracefully renders bundled fallbacks if offline.
• 📊 Automated Impression & Click Tracking: Automatically triggers displayed() proposition impression on mount and tapped() interaction metrics on press.

🛠️ Installation

npm install react-native-target-kit
# or
yarn add react-native-target-kit

Peer Dependencies

Ensure the Adobe Experience Platform SDK is installed in your app:

npm install @adobe/react-native-aepcore @adobe/react-native-aepedge @adobe/react-native-aepoptimize

(Optional — if using Firebase Remote Config):

npm install @react-native-firebase/app @react-native-firebase/remote-config

⚡ Quick Start

1. Initialize Placements (App Startup)

Option A: With Firebase Remote Config

import { TargetKit } from 'react-native-target-kit';
import remoteConfig, { getValue } from '@react-native-firebase/remote-config';

export async function initTargeting() {
  const rc = remoteConfig();
  await rc.fetchAndActivate();

  // Hydrate mapping: { "DashboardScreen": { "p1": "mbox_db_444" } }
  const config = getValue(rc, 'target_config').asString();
  if (config) {
    TargetKit.syncFromRemoteConfig(config);
  }
}

Option B: Without Firebase (Static Mappings or Custom API)

import { TargetKit } from 'react-native-target-kit';

// Hydrate static mapping directly in code:
TargetKit.hydrate('DashboardScreen', {
  p1: 'mbox_db_444',
  hero_banner: 'mbox_home_hero',
});

2. Place Target Slots in Your Screens

Wrap your screen with <TargetProvider> and place <TargetSlot>:

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { TargetProvider, TargetSlot } from 'react-native-target-kit';
import { initTargeting } from './targetSetup';

export function DashboardScreen() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    initTargeting().then(() => setReady(true));
  }, []);

  if (!ready) return <ActivityIndicator />;

  return (
    <TargetProvider screen="DashboardScreen">
      <View style={{ flex: 1, padding: 16 }}>
        <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Dashboard</Text>

        {/* Dynamic Target Placement (resolves via placement key) */}
        <TargetSlot selectorId="p1" />

        {/* Or direct mbox scope (no registry setup needed) */}
        <TargetSlot scope="mbox_special_offer" />
      </View>
    </TargetProvider>
  );
}

🎨 Built-in & Banking UI Renderers

react-native-target-kit includes a suite of pixel-perfect enterprise renderers auto-registered on import:

1. General Renderers

• banner (BannerRenderer): Image banner with headlines and CTA button.
• carousel (CarouselRenderer): Horizontal card carousel with auto-play.
• text_block (TextBlockRenderer): Styled text card.
• cta_deeplink (CtaRenderer): Action button.

2. 🏦 Enterprise Banking Renderers Suite (HDFC / ICICI / Axis Style)

• credit_card_offer (CreditCardOfferRenderer): Pre-approved luxury card with credit limit, perks, and 60-second digital claim CTA.
• deposit_offer (DepositOfferRenderer): High-yield Fixed Deposit / Savings booster with interest rate badge and maturity return preview.
• bill_reminder_offer (BillReminderRenderer): BBPS utility bill reminder with due-date alert and dynamic cashback tag.
• rewards_summary_offer (RewardsSummaryRenderer): Privilege reward points balance, expiring alert, and 1:1 partner redemption chips.
• wealth_sip_offer (WealthSipRenderer): Mutual fund micro-SIP recommendation with annualized CAGR returns and 80C tax saving.
• instant_loan_offer (InstantLoanRenderer): 100% paperless pre-approved insta-loan with monthly EMI calculation.

🎯 Mode 4: Screen Mode (Selective Component Replacement)

Wrap your screen's content with <TargetSlot>. Only the component with an id matching Target's selectorId is replaced with the personalized banking renderer; all other components render their default native UI!

<TargetSlot selectorId="p1">
  <BankingCreditCard id="card-preapproved-banner" ... />
  <BankingDepositCard id="deposit-interest-card" ... />
  <BankingBillReminder id="bill-payment-strip" ... />
  <BankingRewardsCard id="rewards-loyalty-card" ... />
  <BankingWealthCard id="wealth-sip-card" ... />
</TargetSlot>

🎨 Custom UI Renderers

You can also register any custom component for your own custom componentType:

🎛️ Headless / Render Props

Need full control over the slot layout? Use render props:

<TargetSlot selectorId="p1">
  {({ envelope, loading, onTapped }) => {
    if (loading) return <ActivityIndicator />;
    if (!envelope) return <Text>No offer available</Text>;

    return (
      <TouchableOpacity onPress={onTapped}>
        <Text style={{ fontSize: 18 }}>{envelope.payload.headline}</Text>
      </TouchableOpacity>
    );
  }}
</TargetSlot>

📊 Analytics & Telemetry

react-native-target-kit automatically handles interaction tracking:

• Impression Tracking: Automatically triggers item.displayed(proposition) when an offer renders on screen.
• Click Tracking: Automatically triggers item.tapped(proposition) when a user taps an offer or invokes onTapped().

📜 License

MIT © react-native-target-kit contributors