Home
GuidesAPI ReferenceRelease Notes
HomeLog InHome
Guides
Home
  1. SDK React Native

Getting started React Native

Best practice: Initialize the Experiences SDK as early as possible when your app loads (for example, at app startup before you mount widgets). Early initialization improves performance and keeps analytics stable.

Prerequisites

You must get a WSC Sports API key before you begin.

Install the React Native SDK

npm install @wscsports/blaze-rtn-sdk@latest

How to use

Import the SDK

import BlazeSDK, {
  CachingLevel,
  InitOptions,
} from '@wscsports/blaze-rtn-sdk';

SDK configuration

const blazeSdkInitOptions: InitOptions = {
  apiKey: '<API_KEY>',
  cachingSize: 512,
  cachingLevel: CachingLevel.DEFAULT,
  forceLayoutDirection: 'rtl',
  appOverridesCTAHandling: false,
  globalPlayerStoryTheme: storyPlayerRowTheme,
  globalPlayerMomentTheme: momentPlayerRowTheme,
  globalDelegate: globalDelegate,
  playerEntryPointDelegate: entryPointDelegate
};

forceLayoutDirection

Available from React Native SDK 1.20.0. Set forceLayoutDirection to 'ltr' or 'rtl' to force the SDK's own screens — players, widgets, and search — into that layout direction, regardless of the device's system locale. When omitted, the SDK follows the system layout direction.

This is an initialization-time option only: it takes effect when the SDK is initialized and cannot be changed afterwards.

Initialize the SDK

const blazeSDKInit = async () => {
    try {
      const isInitialized = BlazeSDK.isInitialized();
      console.log(isInitialized);
      if (!isInitialized) {
        await BlazeSDK.init(blazeSdkInitOptions);
      }
      setInitialized(true);
    } catch (e) {
      console.log('Init error', e);
      setInitialized(true);
    }
  };

  useEffect(() => {
    blazeSDKInit();

    return () => {
    };
  }, []);

Reactive Native — Android setup

Our Android library is using GitHub Packages.
Currently the GitHub Packages requires us to Authenticate to download an Android Library (Public or Private) hosted on the GitHub Package. This might change for future releases.

Step 1 : Generate a Personal Access Token for GitHub

Login to your GitHub account:

Under Settings -> Developer Settings -> Personal Access Tokens -> Generate new token

Make sure you select the following scopes (“ read:packages”) and Generate a token
After Generating make sure to copy your new personal access token.
You cannot view it again! The only option is to generate a new key.

You can read more on Github personal Access token instructions

Step 2: Store your GitHub — Personal Access Token details

Within your root Android project you can find the gradle.properties file

📘

make sure you add this file to .gitignore , keeping the token private

Add the following properties

gprUsr=GITHUB_USERID
gprKey=PERSONAL_ACCESS_TOKEN
  • Replace GITHUB_USERID with personal / organization Github User ID
  • Replace PERSONAL_ACCESS_TOKEN with the token generated in #Step 1

React Native — iOS setup

In the iOS environment, follow these steps:

Add source dependencies to the top part of your podfile

Sample podfile:

source 'https://cdn.cocoapods.org/'
source 'https://github.com/WSCSports/blaze-specs-ios.git'


# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, 13
prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'WSC RTN Demo Internal' do
  # Comment the next line if you don't want to use dynamic frameworks
  # use_frameworks!
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # Hermes is now enabled by default. Disable by setting this flag to false.
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    :flipper_configuration => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  # Pods for WSC RTN Demo Internal

  target 'WSC RTN Demo InternalTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

In the project's root folder, run:

bundle install

Navigate to the ios folder and execute:

pod install

Alternately you can run

bundle exec pod install

Running the Sample App
Once the setup is complete, you can run the sample app as follows:

Return to the Sample App folder and open Metro:

yarn start

After running the metro, you can run the iOS environment in Xcode,

the Android environment in android studio.

React Native — Expo plugin integration

If you are using Expo in your app, You can add our plugin that will integrate the sdk into your app.

Step 1 : Generate a Personal Access Token for GitHub

Follow this step Github Setup

Step 2: Update your app.json file

Add the plugin as following:

"plugins":
        [
            ...,
            [
                "@wscsports/blaze-rtn-sdk",
                {
                    "gprUsr": "SetYourGithubUserHere",
                    "gprKey": "SetYourGithubTokenHere"
                }
            ]
        ]

If gprUsr and gprKey are not provided it will try to fetch them from Env by keys GPR_USER and GPR_API_KEY.

Updated about 1 month ago

Did this page help you?