react-native-ticketmaster-ignite

This library serves as a wrapper for the 3 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 (see the setting variables paragraph below).

Installation

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

--- or ---

yarn add react-native-ticketmaster-ignite

Expo

npx expo install react-native-ticketmaster-ignite

Setting up iOS

Edit the Podfile and set the platform to 15.0

platform :ios, '15.0'

• cd into the ios directory and run pod install

Setting up Android

TM scheme

In your project go to android/app/src/main/res/values/strings.xml and add this snippet:

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

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

Multi Scheme

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

<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>

You can set up to 5 schemes

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

<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>

Set dataBinding to true

In android/app/build.gradle add:

android {
  ...
    buildFeatures {
        dataBinding = true
    }
  ...
}

Set the minSdkVersion

In android/build.gradle set the minSdkVersion to 26 and set the compileSdkVersion to 35.

Setting up Expo

If you are using an expo managed workflow you can 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.

Props required in options are:

• apiKey
• clientName
• primaryColor

Additional available props are:

• region
• 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 options prop also accepts a region property 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 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 on app launch. (⚠️ warning: if set to false, authState's isLoggedIn, memberInfo and isConfigured will not automatically update and you will have to call getMemberInfo and getIsLoggedIn manually after app restarts. 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>

AccountsSDK

Exposes the following functions:

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

useIgnite

To handle authentication in a React Native app you can either use the Accounts SDK module mentioned above directly 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

isConfigured becomes true after the SDK has successfully configured and the local storage isLoggedIn value and memberInfo response data have both been retrieved from by the SDK. This makes it useful to condition for any splash screen, loading spinners or animations during app launch.

Example:

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

const {
  login,
  logout,
  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 data types per platform. iOS returns a string and Android returns an object. See Android object type below:

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

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

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() accepts a similar object here are the shapes below:

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

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

Reconfigure Accounts SDK

If you want to switch between different API keys within one app, 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.

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
• onSuccess - a callback that fires after successful Accounts SDK configuration
• onLoginSuccess - a callback that fires after successful login
• 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.
• 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;
  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.

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.

SecureEntryView (Android only)

Replace SECURE_ENTRY_TOKEN with a token for a secure entry barcode.

Example:

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

<View>
  <SecureEntryAndroid token="SECURE_ENTRY_TOKEN" />
</View>

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&extensions=ticketmaster&size=200&page=${page}&locale=en-us&view=internal&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,
    },
    venueConcessionsModule: {
      enabled: true,
      orderButtonCallback: () => {},
      walletButtonCallback: () => {},
    },
    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. This library currently does not support prebuilt module customization.

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>

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

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 attraction or venue ID's which you can get that from the Discovery API. For the purpose of initial testing you can use the below.

Replace "someApiKey" with the API key from your Ticketmaster Developer Account. 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.

API_KEY=someApiKey
CLIENT_NAME=clientName
PRIMARY_COLOR=#026cdf
DEMO_EVENT_ID=1100607693B119D8
DEMO_ATTRACTION_ID=2873404
DEMO_VENUE_ID=KovZpZAEdntA