react-native-ticketmaster-ignite
v2.3.0
Published
React Native wrapper for the Ticketmaster Ignite SDK
Downloads
940
Maintainers
Readme
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
Setting up iOS
Edit the Podfile
and set the platform to 15.0
platform :ios, '15.0'
cd
into theios
directory and runpod 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
containsxmlns:tools="http://schemas.android.com/tools"
- add
tools:replace="android:allowBackup
to theapplication
<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
.
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 inIgniteProvider
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 authenticationskipUpdate
- Set value totrue
to prevent a rerender after successful authentication (⚠️ warning: if set totrue
,isLoggedIn
,isLoggingIn
andmemberInfo
will not automatically update and you will have to callgetMemberInfo
andgetIsLoggedIn
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 isfalse
.)
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 accountclientName
- Company nameprimaryColor
- Company brand coloronSuccess
- a callback that fires after successful Accounts SDK configurationonLoginSuccess
- a callback that fires after successful loginskipAutoLogin
- Set value totrue
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 totrue
to prevent a rerender after successful authentication (⚠️ warning: if set totrue
,isLoggedIn
,isLoggingIn
andmemberInfo
will not automatically update and you will have to callgetMemberInfo
andgetIsLoggedIn
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 isfalse
.)
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);
}
};
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
You will need an API key for this app to run, you can get one here Developer Account.
For the Retail SDK (PrePurchase and Purchase) views, you will need 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