React Native wrapper for the Ticketmaster Ignite SDK, inspired by Ticketmaster's React Native demo integration. This module can be added to a React Native project without needing to write any native code.
Install the library:
npm install @squidcloud/react-native-ticketmaster
Beyond pod install
, there's no configuration necessary!
Modify your android/app/build.gradle configuration:
android {
...
buildFeatures {
dataBinding = true
}
}
Modify your android/build.gradle configuration:
allprojects {
repositories {
...
jcenter()
}
}
This package almost works with the Expo managed workflow, but not quite. Currently, there are two issues on Android that prevent using with module with a generated android
project.
- The underlying Ticketmaster SDKs use
jcenter()
, which is not included by default in the generatedandroid/build.gradle
. - The underlying Ticketmaster SDKs require the
dataBinding
feature, which must be added to theandroid/app/build.gradle
.
There is an open issue with Ticketmaster tracking ways to improve the SDK so that it can be used with the Expo managed workflow.
If you're using the Expo bare workflow, simply follow the React Native steps above.
The TicketmasterProvider
wraps your app with a context that enables all other Ticketmaster actions.
// in your entry file like `App.js`
import { TicketmasterProvider } from "@squidcloud/react-native-ticketmaster";
// in your render function
return (
<TicketmasterProvider
options={{
apiKey: "API_KEY",
clientName: "CLIENT_NAME",
}}
>
<App />
</TicketmasterProvider>
);
Here you must pass your Ticketmaster API Key, as well as the name of the client (which will be displayed on the Ticketmaster "Sign In" screen).
The useTicketmaster
hooks exposes the following:
-
isLoggedIn: boolean
- Whether a user is currently authenticated with the Ticketmaster SDK. -
memberInfo: Object
- The information about that member, such as email and member ID. -
login: () => Promise<void>
- Prompts the user to log in to Ticketmaster, unless they're already logged in. -
logout: () => Promise<void>
- Logs the user out of Ticketmaster, unless they're already logged out. -
getToken: () => Promise<string | null>
- Returns the current access token of a logged-in user, or null. -
refreshToken: () => Promise<string | null>
- Refreshed the token for a logged-in user. Returns the new token, or null.
import { useTicketmaster } from "@squidcloud/react-native-ticketmaster";
const { isLoggedIn, memberInfo, login, logout, getToken, refreshToken } =
useTicketmaster();
This component uses the Ticketmaster Tickets SDK to show the user's tickets (or the Sign In screen if the user is not authenticated).
Due to how the native SDKs work, the component has slightly different behavior on Android and iOS.
The component is rendered as an embedded view, and can be rendered directly.
import { TicketsSdk } from "@squidcloud/react-native-ticketmaster";
// in your render function
return (
<View style={{ flex: 1 }}>
<TicketsSdk />
</View>
);
On iOS rendering the component will trigger a modal that shows the tickets (or "Sign In" screen). In this case, it's recommended to attach the rendering of the component to a user action:
import { TicketsSdk } from "@squidcloud/react-native-ticketmaster";
const MyPage = () => {
const [showModal, setShowModal] = useState(false);
const onPress = () => {
// On iOS, the Tickets view is a native modal, so we show it and then reset the state.
// This ensures that pressing the button will display the modal again after it's been
// dismissed.
setShowModal(true);
setTimeout(() => {
setShowModal(false);
}, 500);
};
return (
<>
<TouchableOpacity onPress={onPress}>
<Text>Tickets</Text>
</TouchableOpacity>
{showModal && (
<View>
<TicketsSdk />
</View>
)}
</>
);
};
This component uses the Ticketmaster Retail SDK to start a purchase flow. Similar to the TicketSdk
above, the behavior of the component varies between iOS and Android.
On Android, the presentPurchase
function can be used to start the Purchase activity. The function takes an eventId
as a prop.
import { useTicketmaster } from "@squidcloud/react-native-ticketmaster";
const MyPage = () => {
const { presentPurchase } = useTicketmaster();
return <Button onPress={() => presentPurchase(eventId)} title="Purchase" />;
};
On iOS, Follow the guidance from the TicketsSdk
to properly render the component, with one exception - the component takes an eventId
as a prop.
import { PurchaseSdk } from "@squidcloud/react-native-ticketmaster";
return <PurchaseSdk eventId={eventId} />;
This component uses the Ticketmaster Retail SDK to start a prepurchase flow. Similar to the TicketSdk
and PurchaseSdk
above, the behavior of the component varies between iOS and Android.
On Android, the presentPrePurchase
function can be used to start the PrePurchase activity. The function takes an attractionId
as a prop.
import { useTicketmaster } from "@squidcloud/react-native-ticketmaster";
const MyPage = () => {
const { presentPrePurchase } = useTicketmaster();
return (
<Button
onPress={() => presentPrePurchase(attractionId)}
title="PrePurchase"
/>
);
};
On iOS, follow the guidance from the TicketsSdk
to properly render the component, with one exception - the component takes an attractionId
as a prop.
import { PrePurchaseSdk } from "@squidcloud/react-native-ticketmaster";
return <PrePurchaseSdk attractionId={attractionId} />;