react-native-ticketmaster-ignite

This library serves as a wrapper for the three Ticketmaster Ignite SDK's: Accounts, Retail and Tickets.

In order to use the library, setup a developer account with Ticketmaster by contacting [email protected]. When your account is activated you will receive an API key and scheme that you'll need to use to finish the setup.

Installation

NPM

npm install --save react-native-ticketmaster-ignite

Yarn

yarn add react-native-ticketmaster-ignite

Expo

npx expo install react-native-ticketmaster-ignite

If your project is an Expo Managed Workflow project then skip the "Setting up iOS" and "Setting up Android" sections and go straight to the Setting up Expo section

Setting up iOS

Edit the Podfile and set the platform to 17.0

platform :ios, '17.0'

• cd into the ios directory and run pod install

Setting up Android

TM scheme

The scheme is used formulate a deeplink which will be used by the Ticketmaster login activity to deeplink back to your app after login.

In your project go to android/app/src/main/res/values/strings.xml and if you are on Modern Accounts/Archtics add this snippet:

<string name="app_tm_modern_accounts_scheme">samplescheme</string>

And if you are on Sport XR add this snippet:

<string name="app_tm_sportxr_scheme">samplescheme</string>

Replace samplescheme with your scheme - you can find it in your Ticketmaster developer app settings.

Multi Scheme

If you have multiple schemes you can add them using the following format:

Modern Accounts/Archtics

<string name="app_tm_modern_accounts_scheme">samplescheme1</string>
<string name="app_tm_modern_accounts_scheme_2">samplescheme2</string>
<string name="app_tm_modern_accounts_scheme_3">samplescheme3</string>
<string name="app_tm_modern_accounts_scheme_4">samplescheme4</string>
<string name="app_tm_modern_accounts_scheme_5">samplescheme5</string>

SportXR

<string name="app_tm_sportxr_scheme">samplescheme1</string>
<string name="app_tm_sportxr_scheme_2">samplescheme2</string>
<string name="app_tm_sportxr_scheme_3">samplescheme3</string>
<string name="app_tm_sportxr_scheme_4">samplescheme4</string>
<string name="app_tm_sportxr_scheme_5">samplescheme5</string>

You can set up to 10 Archtics or 10 SportXR schemes in total

allowBackup in AndroidManifest

Open the AndroidManifest.xml file and:

• make sure that the manifest contains xmlns:tools="http://schemas.android.com/tools"
• add tools:replace="android:allowBackup" to the application tag

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          package="com.yourpackage">

    <application tools:replace="android:allowBackup">
      <activity>
      ...
      </activity>
    </application>
</manifest>

If you notice login issues on Android, such as the login UI hanging once the sign in button has been pressed or Couldn't generated a ModernAccounts object seen in the logs in Android Studio add tools:remove="android:taskAffinity" to the application tag, rebuild the app and try logging in again.

Set dataBinding and coreLibraryDesugaringEnabled to true

In android/app/build.gradle add:

android {
  ...
    buildFeatures {
        dataBinding = true
    }

    compileOptions {
      // Flag to enable support for the new language APIs
      coreLibraryDesugaringEnabled true
    }
  ...
}

dependencies {
  ...
    coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:2.1.3'
  ...
}

Set the minSdkVersion

In android/build.gradle set the minSdkVersion to 28 and set the compileSdkVersion to 36.

Setting up Expo

If you are using an expo managed workflow you should ignore the iOS and Android setup sections above and use a config plugin to update your native files. See here for an example config plugin written for an expo app that uses this library

Usage

react-native-ticketmaster-ignite exports the following modules:

• IgniteProvider
• AccountsSDK
• TicketsSdkModal (iOS only)
• TicketsSdkEmbedded
• RetailSDK
• useIgnite

IgniteProvider

This is the only module that must be implemented for the library to work correctly. The purpose of IgniteProvider is to pass the config options to the native code.

Required props in options are:

• apiKey
• clientName
• primaryColor

Optional props in options are:

• region
• marketDomain
• eventHeaderType

In order to use it, wrap your application with the IgniteProvider and pass the API key and client name as a prop:

import { IgniteProvider } from 'react-native-ticketmaster-ignite';

<IgniteProvider
  options={{
    apiKey: API_KEY,
    clientName: CLIENT_NAME,
    primaryColor: PRIMARY_COLOR
  }}
>
    <App />
</IgniteProvider>

The region property

The region property determines the server deployment region the SDK's will connect to. The values can be either US or UK. The default value is US and should be used unless you have specifically been told to set your region to UK.

The marketDomain property

The marketDomain property is used to configure the country that the Retail SDK needs to retrieve attractions, venues and events for. The default value is US

See here for the list of supported market domains.

The eventHeaderType property

The eventHeaderType property accepts one of the following values - NO_TOOLBARS, EVENT_INFO, EVENT_SHARE and EVENT_INFO_SHARE. When the property has not been passed, the IgniteProvider will default to EVENT_INFO_SHARE.

The eventHeaderType property specifies what tools will be available in the header of the event screen:

| Property | Explanation | Demo | |----------|----------|----------| | NO_TOOLBARS | Show no toolbars in Event's header | | | EVENT_INFO | Show only the event info button || | EVENT_SHARE | Show only the event share button || | EVENT_INFO_SHARE | Show both the info and share buttons ||

The autoUpdate prop

autoUpdate is a prop that can be set to false to prevent IgniteProvider from rerendering your app when the auth state changes, as you may want to update and maintain this state with your own logic. (⚠️ warning: if set to false, authState's isLoggedIn, memberInfo and isConfigured will not automatically update so will be unavailable for your app and you will have to call getMemberInfo, getIsLoggedIn and use IgniteAnalytics manually to retrieve auth states and data for your app. The default value is true. See more on authState later on.)

import { IgniteProvider } from 'react-native-ticketmaster-ignite';

<IgniteProvider
  options={{
    apiKey: API_KEY,
    clientName: CLIENT_NAME,
    primaryColor: PRIMARY_COLOR
  }}
  autoUpdate={false}
>
    <App />
</IgniteProvider>

useIgnite

To handle authentication in a React Native app you can either use the AccountsSDK module mentioned in the below section or you can use the useIgnite hook.

The useIgnite hook implements all of the native Accounts SDK methods for easy out of the box use in a React Native apps. It also provides isLoggingIn and an authState object with properties isLoggedIn, memberInfo and isConfigured, these properties update themselves during and after authenticaion.

Once the user authenticates isLoggedIn will remain true after app restarts. On the initial render, isLoggedIn is false and is updated to true when the login state is retrieved from the native SDK's. To avoid an incorrect logged out state on the first render, on your apps home screens you can hide sign in text/UI or use an <ActivityIndicator />/loading UI in that area of the screen while isConfigured is false.

isConfigured becomes true after the Accounts SDK has successfully configured and the local storage isLoggedIn value and memberInfo response data have both been retrieved by the SDK. This makes it useful to condition against any API calls which require OAuth tokens or any UI buttons that trigger Ignite SDK views and methods, as if the Accounts SDK does not configure, auth will not work in any of the SDK's and API calls that require OAuth tokens will fail.

Example:

import { ActivityIndicator, Text } from 'react-native';
import { useIgnite } from 'react-native-ticketmaster-ignite';

const {
  login,
  logout,
  logoutAll,
  getToken,
  getMemberInfo,
  getIsLoggedIn,
  isLoggingIn,
  refreshToken,
  refreshConfiguration,
  authState: { isLoggedIn, memberInfo, isConfigured },
} = useIgnite();

try {
  await login();
} catch (e) {
  console.log('Accounts SDK login error:', (e as Error).message);
}

{
  isLoggingIn && (
    <View style={styles.activityIndicator}>
      <ActivityIndicator color={'blue'} size={'small'} />
    </View>
  );
}

{isLoggedIn && <Text>You are logged in<Text/>}

getToken() and refreshToken() return different properties per native platform. iOS always returns the currently configured API key's access token inside accessToken. See object types below:

Android:

type AuthSource = {
  hostAccessToken?: string;
  archticsAccessToken?: string;
  mfxAccessToken?: string;
  sportXRAccessToken?: string;
  sportXRIdToken?: string;
};

iOS

type iosTokenData = { accessToken: string; sportXRIdToken: string };

You can see the results of getToken(), getMemberInfo() and getIsLoggedIn() in the console when running the example app.

Login/Logout Callbacks

The login() method from the useIgnite hook accepts an object with properties onLogin and skipUpdate:

• onLogin - a callback that fires after successful authentication
• skipUpdate - Set value to true to prevent a rerender after successful authentication (⚠️ warning: if set to true, isLoggedIn, isLoggingIn and memberInfo will not automatically update and you will have to call getMemberInfo and getIsLoggedIn manually. It's recommended you implement AccountsSDK directly and not use this hook if you want complete control of React Native screen and state updates. The default value is false.)

Example:

import { ActivityIndicator } from 'react-native';
import { useIgnite } from 'react-native-ticketmaster-ignite';

const { login } = useIgnite();

const callback = () => {
  console.log('User logged in');
};

try {
  // If skipUpdate is not provided its default value is false
  await login({ onLogin: callback, skipUpdate: false });
} catch (e) {
  console.log('Accounts SDK login error:', (e as Error).message);
}

logout()/logoutAll() accepts a similar object here are the shapes below:

type LoginParams = {
  onLogin?: () => void;
  skipUpdate?: boolean;
};

type LogoutParams = {
  onLogout?: () => void;
  skipUpdate?: boolean;
};

AccountsSDK

Exposes the following functions:

• configureAccountsSDK - Called in IgniteProvider before <App /> is mounted, generally no need to implement this method manually.
• login
• logout
• logoutAll - iOS only
• refreshToken
• getMemberInfo
• getToken - iOS only
• isLoggedIn

If you use AccountsSDK you will need to handle the data return type differences between Swift and Kotlin yourself. It is advised you use auth methods from useIgnite() above instead of using the AccountsSDK module directly.

If you are using the AccountsSDK module and not useIgnite() then getToken() is only for iOS. In your JavaScript methods, to receive an access token or refresh the refresh token always call refreshToken() for Android. For iOS the get token and refresh token logic are seperate.

Refresh Token

The Accounts SDK only returns an access token, not a refresh token. If the user is logged in and getToken() ever returns null, the refresh token may have expired. In this situation you can either call logout() so the user can manually login again to refresh the refresh token and receive a new access token or you can call refreshToken() which will automatically present the login UI to the user (you must use useIgnite's refreshToken() method to trigger this behaviour). If you do not need to use an OAuth access token from the Accounts SDK, you typically do not need to worry about this and can rely on isLoggedIn from useIgnite() to control your login UI state.

On recent versions of the iOS Accounts SDK, it has been observed that on backend server errors getToken() and getMemberInfo() methods are returning TicketmasterFoundation.ConnectionError error... instead of null. In these situations, if the user has previously logged in isLoggedIn from useIgnite() will be true, so isLoggedIn is a good variable to use to control the logged in UI state of the whole application, it also works well in useEffect dep arrays. await getIsLoggedIn() is good to call directly after methods like await login() or await refreshToken() to check/retrieve a boolean which states if the user is logged in which can be used for your own custom variables or conditions in your business logic.

As a fail safe, it may be beneficial to call refreshToken() once on the first log occurrence of TicketmasterFoundation.ConnectionError error... being logged a catch block, in case the user just needs to reauthenticate, but a backend server error should resolve itself after a short period of time (within 5 mins) so a "something went wrong, please try again later" error message to the user may suffice on an occurrence of this error.

To catch TicketmasterFoundation.ConnectionError error 0 logs on app launch see here

Reconfigure Accounts SDK

If you want to switch between different API keys within one app session/during runtime, you can call the refreshConfiguration method provided by the useIgnite() hook. This will also update the API configuration for the Tickets and Retail SDK's if your application uses them. When a user switches API key, they must login once, on newer version of the Ignite SDK's the login screen pops up and the user will SSO into the new configuration, but login always has to be called once. This method automatically calls login after reconfiguration of a new key, see below params on how to skip auto login in case you want to call login yourself.

refreshConfiguration() calls configureAccountsSDK() so it can also be used for general Accounts SDK configuration/if the initial configureAccountsSDK() done by <IgniteProvider/> ever fails in your app.

Example:

import { useIgnite } from 'react-native-ticketmaster-ignite';

try {
  await refreshConfiguration({
    apiKey: 'someApiKey',
    clientName: 'Team 2',
    primaryColor: '#FF0000',
  });
} catch (e) {
  console.log('Account SDK refresh configuration error:', (e as Error).message);
}

The refreshConfiguration() method from the useIgnite accepts the below list of properties (apiKey is the only compulsory param):

• apiKey - An API configuration key from your Ticketmaster developer account
• clientName - Company name
• primaryColor - Company brand color
• region - Server deployment region
• marketDomain - Country for Retail SDK configuration
• eventHeaderType - Tools that will be available in the header of the event screen
• onSuccess - a callback that fires after successful Accounts SDK configuration
• onLoginSuccess - a callback that fires after successful login. login() is called automatically by refreshConfiguration() after it configures the SDK's.
• skipAutoLogin - Set value to true to prevent automatic login after Account SDK configuration, users will need to enter their username and password the first time they login after switching to a new API key configuration. The default value is false. See here for more information about switching between multiple API keys within one app session.
• skipUpdate - Set value to true to prevent a rerender after successful authentication (⚠️ warning: if set to true, isLoggedIn, isLoggingIn and memberInfo will not automatically update and you will have to call getMemberInfo and getIsLoggedIn manually. It's recommended you implement AccountsSDK directly and not use this hook if you want complete control of React Native screen and state updates. The default value is false.)

Here are the types:

type RefreshConfigParams = {
  apiKey: string;
  clientName?: string;
  primaryColor?: string;
  region?: Region;
  marketDomain?: MarketDomain;
  eventHeaderType?: EventHeaderType;
  skipAutoLogin?: boolean;
  skipUpdate?: boolean;
  onSuccess?: () => void;
  onLoginSuccess?: () => void;
};

IgniteProvider always requires an API key so make sure you have set a default/fallback for app launch. This library does not persist API keys, so you will need to persist the users previous team selection to make sure the correct API key is used after app restarts.

A user must login once the first time the app switches to a new API key so login() is called automatically by refreshConfiguration() after it configures the SDK's. To prevent this set skipAutoLogin to true, but login() will need to be called before the user can perform any authenticiated flows within the SDK's or receive auth data like access tokens.

isConfigured being false during the initial user interactions with the UI is an indication that the initial configureAccountsSDK() done by <IgniteProvider/> has failed. You can either assess its value on initial user interaction or call refreshConfiguration() on mount manually, if you end up experiencing issues with the automatic Accounts SDK configuration this library does. Usually the initial call to the library works completely fine.

Example using refreshConfiguration() as the initial method to configure the SDK's:

Inside one of your child components of IgniteProvider

import { useIgnite } from 'react-native-ticketmaster-ignite';

  const {
    refreshConfiguration,
    authState: {isConfigured}
  } = useIgnite()

  useEffect(() => {
    const configureIgniteSdks = async () => {
      if (!isConfigured) {
        try {
          await refreshConfiguration({
            apiKey: 'someApiKey',
            clientName: 'Team 2',
            primaryColor: '#FF0000'
          })
        } catch (e) {
          console.log(
            'Account SDK refresh configuration error:',
            (e as Error).message
          )
        }
      }
    }
    configureIgniteSdks()
  }, [isConfigured, refreshConfiguration])

Switching Teams

You can switch teams using the refreshConfiguration() method mentioned above.

Logout All

iOS logout() only logs out of the currently configured API key. If you have multiple teams in your app and you would like to logout of all teams at once, you can replace logout() with logoutAll() in your code. Android's logout() always logs out of all teams so logoutAll() will behave in the exact same way for Android.

logoutAll() is only useful if your app has multiple teams/API keys within one app.

TicketsSdkModal (iOS only)

Example:

import { Pressable, Text } from 'react-native';
import { TicketsSdkModal } from 'react-native-ticketmaster-ignite';

const [showTicketsSdk, setShowTicketsSdk] = useState(false);

const onShowTicketsSDK = () => {
  setShowTicketsSdk(true);
};

return (
  <>
    <Pressable
      onPress={() => onShowTicketsSDK()}
    >
      <Text>Show Tickets SDK Modal</Text>
    </Pressable>
    <TicketsSdkModal
      showTicketsModal={showTicketsSdk}
      setShowTicketsModal={setShowTicketsSdk}
    />
  </>
);

TicketsSdkEmbedded

import { TicketsSdkEmbedded } from 'react-native-ticketmaster-ignite';

return <TicketsSdkEmbedded style={{ flex: 1 }} />;

React Navigation note: Initially, the altered RN Bottom Tabs View frame height is not available to Native code on iOS, if you notice the embedded SDK view is not fitting inside your RN view with Bottom Tabs on the first render, try adding a 500ms delay to the SDK view:

import { TicketsSdkEmbedded } from 'react-native-ticketmaster-ignite';

return <TicketsSdkEmbedded style={{ height: '100%' }} renderTimeDelay={500}/>;

⚠️  Please note that the renderTimeDelay prop only affects iOS.

React Native New Architecture + React Navigation note: There is a bug with android native UI views when New Architecture mode is switched on where the native UI does not take into account the header height from React Navigation. If this happens in your app you can use the offsetTop prop to add offset to the top of the native UI.

⚠️ Please note that the offsetTop prop only affects Android.

Example:

return <TicketsSdkEmbedded style={{height: '95%', backgroundColor: PRIMARY_COLOR, bottom: 10}} offsetTop={100}/>

backgroundColor & bottom is used to add a backdrop to the <View/> that contains the Tickets SDK view so that it matches your screen header colour. This will prevent any white space if you push the SDK view too far down with offsetTop. Alternatively you can explicitly set your header height to the same value as the offsetTop prop.

Ticket Deep Links

You can call setTicketDeepLink() to setup a deep link to an order by passing the method an order or event ID.

Example:

const { setTicketDeepLink } = useIgnite();

setTicketDeepLink('TICKET_ORDER_OR_EVENT_ID')

You can then navigate to the component/screen which renders the Tickets SDK and the order with the order ID set will show above the My Tickets SDK view.

If you are using React Navigation and you want to do multiple deep links within an app session without the user closing the app, you will need to unmount the RN screen/Tickets SDK component and once remounted the ticket will pop up, as the deep link is triggered on Tickets SDK mount.

To achieve this you can add the below to any screen:

const isFocused = useIsFocused();

if (!isFocused) {
  return null;
}

You can also create your own global state variables to unmount the screen with logic similar to the above and React Navigation also provides a layout prop where you can wrap a screen with a component that contains your custom logic. See more here

Secure Entry View

Replace SECURE_ENTRY_TOKEN with a token for a secure entry barcode.

Example:

import { SecureEntry } from 'react-native-ticketmaster-ignite';

<View>
  <SecureEntry token="SECURE_ENTRY_TOKEN" style={{ flex: 1}} />
</View>

React Navigation note: Initially, the altered RN Bottom Tabs View frame height is not available to Native code on iOS, if you notice the Secure Entry view is not fitting/not rendering in your RN view with Bottom Tabs on the first render, try adding a 100ms delay to the SDK view:

import { SecureEntry } from 'react-native-ticketmaster-ignite';

return <SecureEntry token="SECURE_ENTRY_TOKEN" renderTimeDelay={100}/>;

⚠️  Please note that the renderTimeDelay prop only affects iOS.

React Native New Architecture + React Navigation note: There is a bug with android native UI views when New Architecture mode is switched on where the native UI does not take into account the header height from React Navigation. If this happens in your app you can use the offsetTop prop to add offset to the top of the native UI.

⚠️ Please note that the offsetTop prop only affects Android.

Example:

return <SecureEntry token="SECURE_ENTRY_TOKEN" style={{flex: 1}} offsetTop={100}/>

RetailSDK

Module responsible for the purchase and prepurchase flows in the Retail SDK.

Events Purchase

Purchase flow (also known as Events Details Page or EDP - see more here) should be used for buying single events by their IDs.

Example:

import { RetailSDK } from 'react-native-ticketmaster-ignite';

const onShowPurchase = async () => {
  try {
    RetailSDK.presentPurchase(DEMO_EVENT_ID);
  } catch (e) {
    console.log((e as Error).message);
  }
};

Venue PrePurchase

The venue prepurchase flow (also known as Venue Details Page or VDP - see more here) should be used for showing events for a particular venue. From there, the user will be able to progress with a selected event into the purchase flow.

Example:

import { RetailSDK } from 'react-native-ticketmaster-ignite';

const onShowPrePurchaseVenue = async () => {
  try {
    RetailSDK.presentPrePurchaseVenue(DEMO_VENUE_ID);
  } catch (e) {
    console.log((e as Error).message);
  }
};

Attraction PrePurchase

The attraction prepurchase flow (also known as Attraction Details Page or VDP - see more here) should be used for showing events for a particular attraction, eg. a sports team or musicial. From there, the user will be able to progress with a selected event into the purchase flow.

Example:

import { RetailSDK } from 'react-native-ticketmaster-ignite';

const onShowPrePurchaseAttraction = async () => {
  try {
    RetailSDK.presentPrePurchaseAttraction(DEMO_ATTRACTION_ID);
  } catch (e) {
    console.log((e as Error).message);
  }
};

Discovery API

To get data from the discovery API you can call the API directly in your app. To learn more about the Discovery API see here.

const entityIds = ['K8vZ9171o57', 'K8vZ91718XV'].join(',');

useEffect(() => {
  fetch(
    `https://app.ticketmaster.com/discovery/v2/attractions.json?id=${entityIds}&sort=relevance,desc&size=200&page=${page}&locale=en-us&apikey=${apiKey}`
  )
    .then((response) => response.json())
    .then((data) => {
      console.log(data._embedded.attractions);
    });
}, [entityIds, page, apiKey]);

Prebuilt Modules

To use prebuilt modules, IgniteProvider has a prebuiltModules prop which accepts the following object:

<IgniteProvider
  options={{
    apiKey: API_KEY,
    clientName: CLIENT_NAME,
    primaryColor: PRIMARY_COLOR
  }}
  prebuiltModules={{
    moreTicketActionsModule: {
      enabled: true,
    },
    venueDirectionsModule: {
      enabled: true,
    },
    seatUpgradesModule: {
      enabled: true,
      topLabelText: "test top label", // not required
      bottomLabelText: "test bottom label", // not required
      image: require('../assets/seatUpgradesOverride.png'), // not required
    },
    venueConcessionsModule: {
      enabled: true,
      orderButtonCallback: () => {},
      walletButtonCallback: () => {},
      topLabelText: "test top label", // not required
      bottomLabelText: "test bottom label", // not required
      image: require('../assets/venueConcessionsOverride.png'), // not required
    },
    invoiceModule: {
      enabled: true,
    },
  }}
>
    <App />
</IgniteProvider>

You only need to provide the prebuilt modules you want to display to prebuiltModules. Any module omitted will be set to enabled: false by default. Here is an example of only showing the Venue Directions Module:

 prebuiltModules={{
    venueDirectionsModule: {
      enabled: true,
    },
  }}

To learn more about Prebuilt Modules see here.

Customising Prebuilt Modules

The seatUpgradesModule and venueConcessionsModule can be further customised - you can select the custom labels and images for both sections.

Custom Labels

You can:

• Pass custom topLabelText and/or bottomLabelText to display a custom text
• Pass empty strings in topLabelText and/or topLabelText to hide the labels
• Omit topLabelText and/or topLabelText to show their default values

On Android you can only customise the topLabelText for seatUpgradesModule. If you pass custom bottomLabelText it will only be used on iOS. See the example use cases below.

Custom Images

You can select custom images for seatUpgradesModule and venueConcessionsModule by pulling the image with require() and passing it as a prop. The example app included in this library uses custom images to demo the usage.

| Platform | Default view | Custom view | Empty strings | |----------|----------|----------|----------| | ios | | | | | android | | | |

Custom Modules

You can configure up to 3 buttons as a custom module. Each button accepts a callback function. Currently a header view above the buttons is not available for configuration in this library.

<IgniteProvider
  options={{
    apiKey: API_KEY,
    clientName: CLIENT_NAME,
    primaryColor: PRIMARY_COLOR
  }}
  customModules={{
    button1: {
      enabled: true,
      title: 'My Button 1',
      callback: () => console.log('Button 1 called!'),
    },
    button2: {
      enabled: true,
      title: 'My Button 2',
      callback: () => console.log('Button 2 called!'),
    },
    button3: {
      enabled: true,
      title: 'My Button 3',
      callback: () => console.log('Button 3 called!'),
    },
  }}
>
  <App />
</IgniteProvider>

| iOS | Android| | ------ | ------ | | | | | | |

Analytics

You can send a callback method to IgniteProvider to receive Ignite SDK analytics in your app which you can then send off to your chosen analytics service.

To see the full list of available analytics in this library see: Analytics

import { IgniteProvider, IgniteAnalytics, IgniteAnalyticName } from 'react-native-ticketmaster-ignite';

const igniteAnalytics = async (data: IgniteAnalytics) => {
    const key = Object.keys(data)[0];
    switch (key) {
      case IgniteAnalyticName.PURCHASE_SDK_DID_BEGIN_TICKET_SELECTION_FOR:
        console.log(
          'EDP started for',
          data.purchaseSdkDidBeginTicketSelectionFor.eventName
        );
    }
  };

<IgniteProvider
  options={{
    apiKey: API_KEY,
    clientName: CLIENT_NAME,
    primaryColor: PRIMARY_COLOR
  }}
  analytics={igniteAnalytics}
>
    <App />
</IgniteProvider>

Navigate to a Tickets Tab after purchase

This example uses React Navigation and Redux Toolkit, you'll have to replace those code lines with your chosen navigation and state management methods.

import {
  IgniteAnalytics,
  IgniteAnalyticName,
} from 'react-native-ticketmaster-ignite';
import * as RootNavigation from './RootNavigation';
import { store } from '../redux/store';
import { setExampleValue } from '../redux/slices/example';

const igniteAnalytics = async (data: IgniteAnalytics) => {
  const key = Object.keys(data)[0];
  switch (key) {
    // iOS
    case IgniteAnalyticName.PURCHASE_SDK_DID_END_CHECKOUT_FOR:
      if (
        data.purchaseSdkDidEndCheckoutFor.reason === 'userCompletedPurchase'
      ) {
        store.dispatch(setExampleValue('Random Value')); // Example - Not needed for navigation
        RootNavigation.navigate('BottomTabs', {
          screen: 'MY TICKETS',
        });
      }
      break;
    // Android
    case IgniteAnalyticName.PURCHASE_SDK_MANAGE_MY_TICKETS:
      RootNavigation.navigate('BottomTabs', {
        screen: 'MY TICKETS',
      });
      break;
  }
};

Debugging/Logging

To turn on useful logging to inspect data and for debugging you can turn on logging by passing true to the enableLogs prop on IgniteProvider

<IgniteProvider enableLogs={true}>
  <App />
</IgniteProvider>

Or use callbacks/exceptions/analytics/returned method data to create your own debug logs

Example Accounts SDK configuration callback log example:

  const { refreshConfiguration } = useIgnite()

const onConfigurationSuccess = () =>
  console.log('Accounts SDK configuration successful');

 useEffect(() => {
    const configureIgniteSdks = async () => {
      try {
        await refreshConfiguration({
          apiKey: 'someApiKey',
          clientName: 'Team 2',
          primaryColor: '#FF0000',
          onSuccess: onConfigurationSuccess,
        })
      } catch (e) {
        console.log(
          'Account SDK refresh configuration error:',
          (e as Error).message
        )
      }
    }
    configureIgniteSdks()
  }, [refreshConfiguration])

As the initial Accounts SDK configuration is done for your app via IgniteProvider, any failures in this process will still be logged, as if the Accounts SDK configuration fails then none of the Ignite SDK's will work in your application.

On any logs of TicketmasterFoundation.ConnectionError error see here

Running the example app

To run the demo/example app:

Clone the project and then

cd react-native-ticketmaster-ignite
yarn
cd example/ios
pod install
yarn start

Environment variables

In order to use the library, setup a developer account with Ticketmaster by contacting [email protected].

For the Retail SDK (PrePurchase and Purchase) views, you will need to be provided with your own attraction or venue ID's for events and venue, representatives from [email protected] should be able to help with this. For the purpose of initial testing you can use the below.

Replace "someApiKey" with the API keys from your Ticketmaster Developer Account. (iOS and Android need different API keys, see the example at the end of this section) Replace "clientName" with your company name, for example "My Company Name". You can set this in the options prop of <IgniteProvider>. Replace "#026cdf" with the main color theme of your app.

If running in the example app you can create a .env with these values or update the codebase with your desired values.

API_KEY=someApiKey
CLIENT_NAME=clientName
PRIMARY_COLOR=#026cdf
DEMO_EVENT_ID=1700626DC66F3CA7
DEMO_ATTRACTION_ID=2873404
DEMO_VENUE_ID=KovZpZAEdntA

You need to use a different key for iOS and Android, you can make the value for API_KEY and object API_KEY={KeyName_ios: abcde, KeyName_android: abcdefg} and in your RN code you can use Platform.OS to select the right KeyName to pass to the SDK. Example:

Library choice for environment variables is optional

import Config from 'react-native-config'

const apiKeyJson = JSON.parse(Config.API_KEY)

<IgniteProvider
  options={{
   apiKey:
    apiKeyJson[`KeyName_${Platform.OS}`] || '',
...

Note: If you change the API key in an .env for iOS you need to Product > Clean Build Folder for the change to take affect