Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
The following section deals primarily with the code used in capture of live game information for SnapOdds Operator. If your use case requires game odds to be presented, the information captured by SnapOdds Operator is fed into SnapOdds Sports Media to correlate the game odds information, as described in
Verify the SDK is initialized by calling the setupWithClientId method.
Present the SnapOdds Operator UI by using presentOperatorFlowWithConfiguration method.
Handle result in the methods' callback
The sport event that is returned contains the SportRadar Match ID as the property externalId. Several other ID providers like Kambi, Donbest, and more are available on request.
The following code presents the Snap UI and shows the full configuration options.
The returned snapResult object is a Javascript object containing one string value with the key externalId
and another string value with the key snapResultEntry
which is a stringified JSON of the full response object that is returned by the native SDKs.
After a successful snap (and call of the callback) the SnapOdds Operator UI is automatically dismissed.
The navigationBackground and navigationForeground options are ignored on Android and you need to adapt your Android theme accordingly to style the ActionBar.
Although the SnapOdds Operator UI flow asks for camera permissions we recommend doing this in your React Native application before you present the Operator flow to also allow the user to go to the device's system settings in case the permission were denied previously.
In order to be able to ask for the camera permission, your iOS projects needs to define a value for NSCameraUsageDescription in it's Info.plist. Be sure to configure this before using the SnapOdds Operator UI either by modifying your Info.plist manually or by adding the appropriate configuration to your React Native application's configuration (e.g. by adding the following code to your app.json in case you use expo)
In order to initialize Snapscreen, call the following method when your React Native application starts up:
To improve performance, SnapOdds requires basic locational information to be provided. Set the users country and US state information within the SDK using the parameters country and usState:
SnapOdds Operator provides you with the Snapping UI for Snapping Sport Events and returns you all required information about the sport event. After a successful snap you are free to use the result as you wish and present subsequent functionality to the user.
While we currently do not provide a wrapped NPM package for a React Native integration of our SDK, we provide a very simply step-by-step introduction in your project.
First follow the Steps in iOS Installation and Android Installation to integrate the native SDK packages in the your native projects and then see the examples under the SnapOdds Operator and SnapOdds Sport Media section how to integrate the SnapOdds SDK functionality.
In order to use the SnapOdds SDK in your React Native project you need to target at least the following target versions with your application.
iOS 13.0 or later
Android 6.0 or newer (API Level 23)
Requirement:
The following license keys used in the video guide are for trial purposes only:
Client ID: u9jYT9g1q6gTxY8i
Client Secret: RMkiJPYCipP5bbG4YbtqzpdYne1b0hPSDItvq3YV
To customize in the Snap and Odds Display UI use the updateColorConfiguration method provided by our Native Module. The following code snippet shows all available options. Please note that for each color option, you can provide either a single color which is used for both light and dark mode or you can append the suffix -light or -dark to the color name to provide specific colors.
To customize displayed messages in the Snap UI, use the updateSnapUIConfiguration method provided by our Native Module. The following code snippet shows all available options:
All desired customizations must be done prior to presenting the Snap UI.
To customize displayed messages in the Odds Display UI, use the updateOddsUIConfiguration method provided by our Native Module. The following code snippet shows all available options:
All desired customizations must be done prior to present the Snap and Odds Display UI.
Inside your GitHub Account:
Go to Settings -> Developer Settings -> Personal Access Tokens -> Generate new token
Make sure to select the scope read:packages and Generate a token
After the token is generated, be sure to copy your new personal access token. It will not be accessible again. If the key is lost, the only option is to generate a new key.
To configure your token, a github.properties file containing your Github User ID and Personal Access Token must be placed in your project's root directory as shown below:
Alternatively, you can set the environment variables GPR_USER
and GPR_API_KEY
.
Next, define the Github Packages as a repository in the application module's build.gradle by adding the following section:
Additionally in your Android project's application subclass (most likely MainApplication.java) add the new Native Module Package in the method getPackages
To integrate the SnapOdds SDK in your project, open your iOS project's xcworkspace file with Xcode.
To integrate via SwiftPM, add the location of the github repository and the version to your Package.swift file, as shown below:
This can also be done by adding the repository and version through the Xcode UI by selecting your project and adding the SwiftPM package under Package Dependencies.
If your project does not yet contain an Objective-C bridging header, you also need to add a bridging header to make our SDK integration work.
To do so, create a new Header File and name it <project-name>-Bridging-Header.h.
Add the following line to the bridging header:
Then open your target's Build Settings (by navigating to your project, then clicking on the application Target and selecting Build Settings from the top menu.
Search for the setting names Objective-C Bridging Header and set it to the name of your newly created header file.
If your newly created header file is not placed in the same folder as your xcworkspace file, you might need to adapt the settings' value to include the full relative path.
For a working example including the React Native Modules to reuse see our React Native Sample project at
A license key is required to use SnapOdds Sports Operator or Sports Media APIs. You can obtain a license by contacting us at:
To integrate SnapOdds SDK into your Android project, open your Android project in Android Studio. (See for details)
Add the files SnapscreenSDKModule.java and SnapscreenSDKPackage.java from our to your Android project and be sure to change the package of both files according to your own project.
Add the files SnapscreenSDKModule.swift and SnapscreenSDKModuleBridge.h from our provided to your Xcode project.
SnapOdds Sports Media provides a complete flow including the Snapping UI for snapping Sport Events and then displaying all available odds for the recognized sport event.
In order to initialize Snapscreen, call the following method when your React Native application starts up:
To improve performance, SnapOdds requires basic locational information to be provided. Set the users country and US state information within the SDK using the parameters country and usState:
To customize in the Snap UI use the updateColorConfiguration method provided by our Native Module. The following code snippet shows all available options. Please note that for each color option, you can provide either a single color which is used for both light and dark mode or you can append the suffix -light or -dark to the color name to provide specific colors.
To customize displayed messages in the Snap UI use the updateSnapUIConfiguration method provided by our Native Module. The following code snippet shows all available options:
All desired customizations must be done prior to presenting the Snap UI.
Verify the SDK is initialized by calling the setupWithClientId method.
Present the SnapOdds Operator UI by using presentSportMediaFlowWithConfiguration method.
The following code presents the Snap UI and automatically the Odds Display UI afterwards and shows the full configuration options.
After a successful snap (and call of the callback) the Odds Display UI is automatically presented.
The navigationBackground and navigationForeground options are ignored on Android and you need to adapt your Android theme accordingly to style the ActionBar.
Although the SnapOdds Sport Media UI flow asks for camera permissions we recommend doing this in your React Native application before you present the Sport Media flow to also allow the user to go to the device's system settings in case the permission were denied previously.
In order to be able to ask for the camera permission, your iOS projects needs to define a value for NSCameraUsageDescription in it's Info.plist. Be sure to configure this before using the SnapOdds Sport Media UI either by modifying your Info.plist manually or by adding the appropriate configuration to your React Native application's configuration (e.g. by adding the following code to your app.json in case you use expo)