A/B Testing React Native SDK

# 1. .npmrc in your project root: @abrova packages come from Abrova Center
@abrova:registry=https://center.abrova.ir/api/packages/abrova/npm/

# 2. Install
npm install @abrova/ab-testing-react-native@^0.2.3

yarn add @abrova/ab-testing-react-native@^0.2.3

npm install @react-native-async-storage/async-storage

cd ios && pod install && cd ..

import AbrovaAbTesting from '@abrova/ab-testing-react-native';

// Calls YOUR backend, which mints the token with your server secret.
// Returns null while no one is signed in.
async function fetchAbrovaToken(): Promise<string | null> {
  if (!yourSessionToken) return null;
  const res = await fetch('https://your-api.example.com/abrova-token', {
    method: 'POST',
    headers: { Authorization: `Bearer ${yourSessionToken}` }, // your app's own login session
  });
  return (await res.json()).token;
}

// Initialize the SDK
await AbrovaAbTesting.init({
  apiKey: 'YOUR_API_KEY',
  tokenProvider: fetchAbrovaToken, // required for variants, events and flags
  debug: __DEV__,                  // Enable debug logging in development
  // flushInterval: 10000,         // Your own send interval in ms. Leave it out to follow the console
  maxQueueSize: 100,               // Maximum events to queue
});

// Set the signed-in user (optional with a user token: the token says who the user is)
await AbrovaAbTesting.setUserId('user-123');
await AbrovaAbTesting.setUserAttributes({
  plan: 'premium',
  country: 'US',
});

import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import AbrovaAbTesting from '@abrova/ab-testing-react-native';

// fetchAbrovaToken() calls your backend — see above.

function App() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    const initSDK = async () => {
      try {
        await AbrovaAbTesting.init({
          apiKey: 'YOUR_API_KEY',
          tokenProvider: fetchAbrovaToken,
          debug: __DEV__,
        });

        await AbrovaAbTesting.setUserId('user-123');
      } catch (error) {
        console.error('AbrovaAbTesting init error:', error);
      } finally {
        setIsReady(true);
      }
    };

    initSDK();

    // Listen for events
    const unsubError = AbrovaAbTesting.on('error', (event) => {
      console.error('AbrovaAbTesting error:', event.data);
    });

    return () => {
      unsubError();
    };
  }, []);

  if (!isReady) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return <MainNavigator />;
}

export default App;

curl -X POST https://auth.abrova.ir/users/token \
  -H "x-api-key: $ABROVA_API_KEY" \
  -H "x-server-secret: $ABROVA_SERVER_SECRET" \
  -H "Content-Type: application/json" \
  -d '{"userId": "user-123", "expiresIn": 3600}'
# → { "token": "eyJhbGciOi…", "userId": "user-123", "expiresIn": 3600, "expiresAt": "…" }

AbrovaAbTesting.isAwaitingUserToken;             // true while it waits
AbrovaAbTesting.onAwaitingUserToken(() => {});   // called each time it starts waiting; returns an unsubscribe function
AbrovaAbTesting.on('userTokenReady', () => {});  // a token arrived: read variants again

// After sign-in
await AbrovaAbTesting.refreshUserToken();        // with a tokenProvider: asks it again now
await AbrovaAbTesting.setUserToken(token);       // without one: hand the token over

// After sign-out
await AbrovaAbTesting.clearUserId();             // or setUserToken(null)

useEffect(() => {
  const load = async () => setVariant(await AbrovaAbTesting.getVariant('checkout-style', 'control'));
  load();
  return AbrovaAbTesting.on('userTokenReady', load);
}, []);

import AbrovaAbTesting from '@abrova/ab-testing-react-native';

// Get variant (with optional default)
const variant = await AbrovaAbTesting.getVariant(
  'checkout-button-color',
  'control'  // returned while there is no user token, or when the service
             // cannot be reached and nothing is cached
);

// Use the variant
switch (variant) {
  case 'Variant B':
    showNewCheckout();
    break;
  default:
    showOriginalCheckout();
}

// Get variant config (set in the Abrova dashboard)
const config = await AbrovaAbTesting.getVariantConfig('checkout-button-color');

const buttonText = config?.buttonText ?? 'Buy Now';
const buttonColor = config?.buttonColor ?? '#6B7280';

// Track when user sees the experiment
await AbrovaAbTesting.trackView('experiment-key');

// Track click
await AbrovaAbTesting.trackClick('experiment-key');

// Track conversion with value
await AbrovaAbTesting.trackConversion('experiment-key', 300000);

// Track custom event
await AbrovaAbTesting.trackCustomEvent('experiment-key', 'button_hover', {
  duration_ms: 1500,
  element: 'cta_button',
});

await AbrovaAbTesting.trackAddToCart('experiment-key', 300000, 'sku-123', { quantity: 2 });
await AbrovaAbTesting.trackRemoveFromCart('experiment-key', 300000, 'sku-123');
await AbrovaAbTesting.trackBeginCheckout('experiment-key', 1500000, { coupon: 'SAVE10' });
await AbrovaAbTesting.trackPurchase('experiment-key', 1250000, 'txn-789', { currency: 'Toman' });

await AbrovaAbTesting.trackScroll('experiment-key', 75.0, { page: 'product' });
await AbrovaAbTesting.trackFormSubmit('experiment-key', 'signup_form');
await AbrovaAbTesting.trackSearch('experiment-key', 'search query', { results: 42 });
await AbrovaAbTesting.trackShare('experiment-key', 'twitter');

await AbrovaAbTesting.trackVideoStart('experiment-key', 'video-001');
await AbrovaAbTesting.trackVideoComplete('experiment-key', 'video-001');

await AbrovaAbTesting.trackSignUp('experiment-key', 'google');
await AbrovaAbTesting.trackLogin('experiment-key', 'email');
await AbrovaAbTesting.trackLogout('experiment-key');

import { EventType } from '@abrova/ab-testing-react-native';

await AbrovaAbTesting.trackEvent(
  'experiment-key',
  EventType.CUSTOM,
  'page_load_time',
  2.3,
  { page: '/checkout', cached: false }
);

// Check if feature is enabled
const isDarkMode = await AbrovaAbTesting.isFeatureEnabled('dark-mode');

if (isDarkMode) {
  enableDarkTheme();
}

// Get feature value (string, number, JSON, etc.)
const maxUpload = await AbrovaAbTesting.getFeatureValue('max-upload-size', 10);

// Get all feature flags
const flags = await AbrovaAbTesting.getFeatureFlags();
flags.forEach((flag) => {
  console.log(`${flag.key}: enabled=${flag.enabled}, rollout=${flag.rolloutPercentage}%`);
});

// Refresh flags from server
await AbrovaAbTesting.refreshFeatureFlags();

// Set user ID (e.g., after login)
await AbrovaAbTesting.setUserId('user-123');

// Sign the user out: drop their data, token and unsent events
await AbrovaAbTesting.clearUserId();

// Get current user ID
const userId = await AbrovaAbTesting.getUserId();

// Set user attributes for targeting
await AbrovaAbTesting.setUserAttributes({
  plan: 'premium',
  country: 'US',
  age: 25,
  platform: 'react-native',
});

// Listen for experiment assignments
const unsub1 = AbrovaAbTesting.on('experimentAssigned', (event) => {
  console.log('Assigned:', event.data);
});

// Listen for experiments refresh
const unsub2 = AbrovaAbTesting.on('experimentsRefreshed', (event) => {
  console.log('Experiments refreshed:', event.data);
});

// Listen for feature flag updates
const unsub3 = AbrovaAbTesting.on('featureFlagsRefreshed', (event) => {
  console.log('Feature flags refreshed');
});

// Listen for sync events
const unsub4 = AbrovaAbTesting.on('syncCompleted', (event) => {
  console.log('Sync:', event.data);
});

// Listen for errors
const unsub5 = AbrovaAbTesting.on('error', (event) => {
  console.error('Error:', event.data);
});

// The SDK started waiting for a user token / a token arrived
const unsub6 = AbrovaAbTesting.on('awaitingUserToken', () => {
  console.log('Waiting for sign-in');
});
const unsub7 = AbrovaAbTesting.on('userTokenReady', () => {
  console.log('User token ready: read variants again');
});

// Cleanup in useEffect
useEffect(() => {
  return () => {
    unsub1();
    unsub2();
    unsub3();
    unsub4();
    unsub5();
    unsub6();
    unsub7();
  };
}, []);

// Refresh experiments from server
await AbrovaAbTesting.refreshExperiments();

// Get all experiments
const experiments = await AbrovaAbTesting.getExperiments();

// Flush pending events immediately
// (the SDK also sends queued events when the app goes to the background)
await AbrovaAbTesting.flush();

// Wipe all SDK state, including unsent events. You must call init() again afterwards.
// To sign a user out, call clearUserId() instead.
await AbrovaAbTesting.reset();

import React, { useEffect, useState } from 'react';
import {
  View, Text, TouchableOpacity, StyleSheet,
  ActivityIndicator,
} from 'react-native';
import AbrovaAbTesting from '@abrova/ab-testing-react-native';

// fetchAbrovaToken() calls your backend — see Initialization.

function CheckoutScreen() {
  const [variant, setVariant] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const orderTotal = 1000000;

  useEffect(() => {
    const init = async () => {
      await AbrovaAbTesting.init({
        apiKey: 'YOUR_API_KEY',
        tokenProvider: fetchAbrovaToken,
        debug: __DEV__,
      });
      await AbrovaAbTesting.setUserId('user-123');

      const v = await AbrovaAbTesting.getVariant('checkout-style', 'control');
      setVariant(v);
      setLoading(false);

      await AbrovaAbTesting.trackView('checkout-style');
    };
    init();
  }, []);

  const handleCheckout = async () => {
    await AbrovaAbTesting.trackClick('checkout-style');
    await AbrovaAbTesting.trackConversion('checkout-style', orderTotal);
    console.log('Checkout completed!');
  };

  if (loading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  const buttonColor = variant === 'Variant B' ? '#22C55E' : '#6B7280';

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Order Summary</Text>
      <Text style={styles.total}>Total: ${orderTotal.toFixed(2)}</Text>

      <TouchableOpacity
        style={[styles.button, { backgroundColor: buttonColor }]}
        onPress={handleCheckout}
      >
        <Text style={styles.buttonText}>Complete Purchase</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#fff' },
  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 16 },
  total: { fontSize: 18, color: '#6B7280', marginBottom: 32 },
  button: { padding: 16, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: '#fff', fontSize: 18, fontWeight: '600' },
});

export default CheckoutScreen;