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.

Sample app

The public React Native sample app shows a working Experiences SDK integration: SDK initialization, Stories, Moments, and Videos widgets, and the player entry points. Use it as the reference implementation for every feature on these pages. To build it on your machine, see Run the sample app.

For all sample apps across platforms, see Sample apps.

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 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.

forceLayoutDirection is an initialization-time option only: it takes effect when the SDK is initialized and can't be changed afterward.

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 () => {
    };
  }, []);

React Native: Android setup

The Experiences SDK Android library is hosted on GitHub Packages. GitHub Packages requires you to authenticate to download an Android library (public or private) hosted there. This requirement might change in future releases.

Step 1: Generate a personal access token for GitHub

Log in to your GitHub account.

Go to Settings > Developer settings > Personal access tokens > Generate new token.

Select the read:packages scope and generate the token. After you generate it, copy your new personal access token. You can't view it again: the only option is to generate a new token.

For more information, see the GitHub personal access token instructions.

Step 2: Store your GitHub personal access token details

In the root of your Android project, open the gradle.properties file.

Add gradle.properties to .gitignore to keep the token private.

Add the following properties:

gprUsr=GITHUB_USERID
gprKey=PERSONAL_ACCESS_TOKEN
  • Replace GITHUB_USERID with your personal or organization GitHub user ID.
  • Replace PERSONAL_ACCESS_TOKEN with the token you generated in Step 1.

React Native: iOS setup

In the iOS environment, follow these steps:

Add the source dependencies to the top 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

Go to the ios folder and run:

pod install

Alternatively, you can run:

bundle exec pod install

Run the sample app

The React Native sample app lives in the Blaze-Sample-App folder of the repository.

  1. Clone the repository and open the Blaze-Sample-App folder.

  2. Store your GitHub token in android/gradle.properties, as described in Step 1 and Step 2.

  3. Install the dependencies:

    yarn

  4. In the ios folder, install the pods:

    bundle install
bundle exec pod install

  5. In src/App.tsx, replace <API_KEY> with your WSC Sports API key.

  6. Start Metro from the Blaze-Sample-App folder:

    yarn start

  7. Build the app from Xcode (open ios/BlazeReactNativeExampleApp.xcworkspace) or from Android Studio (open the android folder).

The home screen shows the Stories, Moments, and Videos widgets. For the Videos widget code, see Videos widgets.

React Native: Expo plugin integration

If your app uses Expo, you can add the Experiences SDK plugin, which integrates the SDK into your app.

Step 1: Generate a personal access token for GitHub

Follow Step 1 of the Android setup.

Step 2: Update your app.json file

Add the plugin as follows:

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

If you don't provide gprUsr and gprKey, the plugin tries to read them from the GPR_USER and GPR_API_KEY environment variables.

Updated 20 days ago

Did this page help you?