https://github.com/ticketmaster/react-native-ticketmaster-ignite
https://github.com/ticketmaster/react-native-ticketmaster-ignite
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ticketmaster/react-native-ticketmaster-ignite
- Owner: ticketmaster
- License: mit
- Created: 2024-07-10T12:49:16.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-12T12:22:23.000Z (5 months ago)
- Last Synced: 2026-01-12T18:50:58.209Z (5 months ago)
- Language: TypeScript
- Size: 22.2 MB
- Stars: 8
- Watchers: 9
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-ticketmaster-ignite
[](https://www.npmjs.com/package/react-native-ticketmaster-ignite)  [](LICENSE) 
This library serves as a wrapper for the three Ticketmaster Ignite SDK's: [Accounts](https://ignite.ticketmaster.com/docs/accounts-sdk-overview), [Retail](https://ignite.ticketmaster.com/docs/retail-sdk-overview) and [Tickets](https://ignite.ticketmaster.com/docs/tickets-sdk-overview).
In order to use the library, setup a developer account with Ticketmaster by contacting nexus_sdk@ticketmaster.com. 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
```bash
npm install --save react-native-ticketmaster-ignite
```
#### Yarn
```bash
yarn add react-native-ticketmaster-ignite
```
#### Expo
```bash
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](https://github.com/ticketmaster/react-native-ticketmaster-ignite?tab=readme-ov-file#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:
```xml
samplescheme
```
And if you are on Sport XR add this snippet:
```xml
samplescheme
```
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
```xml
samplescheme1
samplescheme2
samplescheme3
samplescheme4
samplescheme5
```
SportXR
```xml
samplescheme1
samplescheme2
samplescheme3
samplescheme4
samplescheme5
```
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
```xml
...
```
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:
```groovy
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](./docs/expo.md) 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:
```typescript
import { IgniteProvider } from 'react-native-ticketmaster-ignite';
```
##### 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](./docs/marketDomains.md) 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.)
```typescript
import { IgniteProvider } from 'react-native-ticketmaster-ignite';
```
#### 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 ``/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:
```tsx
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 && (
);
}
{isLoggedIn && You are logged in}
```
`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:
```typescript
type AuthSource = {
hostAccessToken?: string;
archticsAccessToken?: string;
mfxAccessToken?: string;
sportXRAccessToken?: string;
sportXRIdToken?: string;
};
```
iOS
```typescript
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:
```tsx
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:
```typescript
type LoginParams = {
onLogin?: () => void;
skipUpdate?: boolean;
};
type LogoutParams = {
onLogout?: () => void;
skipUpdate?: boolean;
};
```
#### AccountsSDK
Exposes the following functions:
- `configureAccountsSDK` - Called in `IgniteProvider` before `` 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](https://github.com/ticketmaster/react-native-ticketmaster-ignite?tab=readme-ov-file#reconfigure-accounts-sdk)
#### 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 `` ever fails in your app.
Example:
```tsx
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](https://ignite.ticketmaster.com/v1/docs/switching-teams-without-logging-out) 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:
```typescript
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 `` 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`
```tsx
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:
```typescript
import { Pressable, Text } from 'react-native';
import { TicketsSdkModal } from 'react-native-ticketmaster-ignite';
const [showTicketsSdk, setShowTicketsSdk] = useState(false);
const onShowTicketsSDK = () => {
setShowTicketsSdk(true);
};
return (
<>
onShowTicketsSDK()}
>
Show Tickets SDK Modal
>
);
```
### TicketsSdkEmbedded
```typescript
import { TicketsSdkEmbedded } from 'react-native-ticketmaster-ignite';
return ;
```
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:
```typescript
import { TicketsSdkEmbedded } from 'react-native-ticketmaster-ignite';
return ;
```
⚠️ 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:
```typescript
return
```
`backgroundColor` & `bottom` is used to add a backdrop to the `` 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:
```typescript
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:
```typescript
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](https://reactnavigation.org/docs/upgrading-from-6.x/#the-unmountonblur-option-is-removed-in-favor-of-poptotoponblur-in-bottom-tab-navigator-and-drawer-navigator)
### Secure Entry View
Replace `SECURE_ENTRY_TOKEN` with a token for a secure entry barcode.
Example:
```typescript
import { SecureEntry } from 'react-native-ticketmaster-ignite';
```
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:
```typescript
import { SecureEntry } from 'react-native-ticketmaster-ignite';
return ;
```
⚠️ 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:
```typescript
return
```
### 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](https://ignite.ticketmaster.com/v1/docs/events-detail-page-edp)) should be used for buying single events by their IDs.
Example:
```typescript
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](https://ignite.ticketmaster.com/v1/docs/venue-detail-page-vdp)) 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:
```typescript
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](https://ignite.ticketmaster.com/docs/attraction-detail-page-adp)) 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:
```typescript
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](https://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/).
```typescript
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:
```typescript
{},
walletButtonCallback: () => {},
topLabelText: "test top label", // not required
bottomLabelText: "test bottom label", // not required
image: require('../assets/venueConcessionsOverride.png'), // not required
},
invoiceModule: {
enabled: true,
},
}}
>
```
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:
```typescript
prebuiltModules={{
venueDirectionsModule: {
enabled: true,
},
}}
```
To learn more about Prebuilt Modules see [here](https://ignite.ticketmaster.com/docs/modules-overview).
#### 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.
```typescript
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!'),
},
}}
>
```
Single button example:
```typescript
console.log('Button 1 called!'),
},
}}
>
```
| 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](./docs/analytics.md)
```typescript
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
);
}
};
```
#### Navigate to a Tickets Tab after purchase
This example uses [React Navigation](https://reactnavigation.org/docs/6.x/navigating-without-navigation-prop) and Redux Toolkit, you'll have to replace those code lines with your chosen navigation and state management methods.
```typescript
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`
```typescript
```
Or use callbacks/exceptions/analytics/returned method data to create your own debug logs
Example Accounts SDK configuration callback log example:
```typescript
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](https://github.com/ticketmaster/react-native-ticketmaster-ignite?tab=readme-ov-file#refresh-token)
## Running the example app
To run the demo/example app:
Clone the project and then
```bash
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 nexus_sdk@ticketmaster.com.
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 nexus_sdk@ticketmaster.com 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 ``.
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.
```bash
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
```typescript
import Config from 'react-native-config'
const apiKeyJson = JSON.parse(Config.API_KEY)
**Clean Build Folder** for the change to take affect