First time slide customizations - React Native

Customize the Viewer onboarding slide in a React Native app. Override copy, colors, and built-in gesture instruction text.

For the concept, default slide, and platform support, see Viewer onboarding slide.

Before you start

• Initialize the React Native SDK before you set player styles.
• The firstTimeSlide property lives on BlazeStoryPlayerStyle.
• Background colors use BlazeColor. On Android, set colorFileName; on iOS, set colorName.
• The React Native SDK does not expose the customs instruction array. Customize the built-in forward, pause, backward, and transition rows only.

Set a global default

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

const storyPlayerStyle: BlazeStoryPlayerStyle = {
  firstTimeSlide: {
    show: true,
    mainTitle: { text: 'Welcome to stories' },
    subtitle: { text: 'Swipe and tap to explore highlights' },
    backgroundColor: {
      colorFileName: 'first_time_background', // Android color resource
      colorName: '#1A1A1A', // iOS color
    },
    cta: {
      title: 'Got it',
      backgroundColor: { colorName: '#FFFFFF' },
      textColor: { colorName: '#000000' },
    },
    instructions: {
      forward: {
        headerText: { text: 'Next page' },
        descriptionText: { text: 'Tap the right side of the screen' },
      },
    },
  },
};

BlazeSDK.setDefaultStoryPlayerStyle(storyPlayerStyle);

Scope the style to one widget

Pass blazeStoryPlayerStyle (or firstTimeSlideAppearance on widget theme objects) when you mount a stories widget. See React Native widgets for widget-level theme examples.

Related story player branding

Use the first-time slide when you need an onboarding moment before playback. Use BlazeStoryPlayerTitleImageStyle when you need a small circular image in the story player header, next to the story title.

The title image can use a dynamic image from titleImageUrl or a static image. Supported React Native SDK version: 1.18.0 or later.

Related API reference

• BlazeStoryPlayerFirstTimeSlideStyle
• BlazeStoryPlayerFirstTimeSlideInstructionsStyle
• BlazeFirstTimeSlideTextStyle
• BlazeFirstTimeSlideCTAStyle
• BlazeFirstTimeSlideInstructionStyle