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

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

Yarn

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.

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

Refresh Token

The Accounts SDK only returns an access token, not a refresh token. If a user has logged in and getToken() 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. 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 UI login state.

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
region - Server deployment region
marketDomain - Country for Retail SDK configuration
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;
  region?: Region;
  marketDomain?: MarketDomain;
  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.

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 set unmountOnBlur in the screen options prop to true, as the deep link is triggered on Ticket SDK mount.

<Tab.Screen
  name="My Events"
  component={MyEvents}
  options={{
    unmountOnBlur: true,
  }}
/>

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.

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
not pass topLabelText and/or topLabelText at all to show modules default values
pass empty strings in topLabelText and/or topLabelText to hide the labels

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.

Demo

Platform	Default view	Custom view	Empty strings
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>

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

Name		Name	Last commit message	Last commit date
Latest commit History 134 Commits
.github		.github
.yarn		.yarn
__tests__		__tests__
android		android
docs		docs
example		example
ios		ios
src		src
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.nvmrc		.nvmrc
.watchmanconfig		.watchmanconfig
.yarnrc.yml		.yarnrc.yml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
jest-setup.ts		jest-setup.ts
lefthook.yml		lefthook.yml
package.json		package.json
react-native-ticketmaster-ignite.podspec		react-native-ticketmaster-ignite.podspec
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json
turbo.json		turbo.json
yarn.lock		yarn.lock

License

ticketmaster/react-native-ticketmaster-ignite

Folders and files

Latest commit

History

Repository files navigation

react-native-ticketmaster-ignite

Installation

NPM

Yarn

Expo

Setting up iOS

Setting up Android

TM scheme

Multi Scheme

allowBackup in AndroidManifest

Set dataBinding to true

Set the minSdkVersion

Setting up Expo

Usage

IgniteProvider

The region property

The marketDomain property

The eventHeaderType property

The autoUpdate prop

AccountsSDK

useIgnite

Refresh Token

Reconfigure Accounts SDK

TicketsSdkModal (iOS only)

TicketsSdkEmbedded

Ticket Deep Links

Secure Entry View

RetailSDK

Events Purchase

Venue PrePurchase

Attraction PrePurchase

Discovery API

Prebuilt Modules

Customising Prebuilt Modules

Custom Labels

Custom Images

Demo

Analytics

Running the example app

Environment variables

About

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases 34

Packages 0

Contributors 4

Languages

The `region` property

The `marketDomain` property

The `eventHeaderType` property

The `autoUpdate` prop

Running the example app  

Packages