SlideShowThe Slideshow component is used to navigate through a series of 2-5 steps, in a linear way and mostly used for FTE and onboarding flows. The flow can be informative only or fully actionable. The user can navigate between steps by using a swiping gesture or by tapping on the next button. The Page Control (Footer) in the bottom bar provides orientation by presenting the total amount of steps, and by indicating the current step. The Slideshow can be displayed in a full screen or be part of a screen.

Overview

Usage Examples

Component Footer

Step	Default	Centered/Stacked
Initial Step Only "Next" button and swipe are available
Middle Step Users can navigate back with swipe or buttons
Last Step Finalising button text is changed accordingly

Specs

Transition

Inward Elements Transition Time 1s
Illustration X Transition: 2*Width of the screen
Texts X Transition: Width of the screen

Outward Elements Transition Time .5s
Illustration X Transition: 2*Width of the screen
Illustration Alpha: to 0;
Texts X Transition: Width of the screen
Texts Alpha: to 0;

Steps to Last Step Transit of the button Width Transition Time 0.25s
Text Alpha Transition Time 0.25s, delay 0.25s

Paging Items Width Transition Time 0.25s
Text Alpha Transition Time 0.25s, delay 0.25s

Animation Ease Parameters X1: 0.25 Y1: 0.1 - X2: 0.25 Y2: 1

UX Guidelines

Component Alignment

Aligned to top When using the top alignment layout, pay attention to proper spacing above the Slideshow to avoid incorrect layouts - such as Title too close to the topBar.

Aligned to center All the content of the Slideshow is aligned to the center.
More common in FTEs and onboarding flows. Centered or “stacked” footer is more appropriate for such cases.

Do’s & Don'ts

Text Length It’s recommended to keep the content of the Title and Subtitle short. 
The title should be no longer than 2 rows, and no more than 3 rows for the Subtitle. This ensures that all content can fit in the screen without being cut. Also, this is more “safe” for smaller devices and when translating to different languages.

Dev

APIThis is the list of additional props for the component

backgroundColor

string

The screen's background color

centerFooter

boolean

When passed, will render a custom footer with centered buttons

children

ReactNode

Children components

mainButton

ButtonProps

The main button (if passed will replace the next button when centerFooter is false)

onBackPress

() => void

A callback to be invoked when the back button was pressed

onEndReached

(action: ActionType) => void

A callback to be invoked when user reach the end of the slide show by 'next' button (iOS - also by left scroll)

onNextPress

() => void

A callback to be invoked when the next button was pressed

onPageChanged

(index: number, meta: {previousPage: number}) => void

A callback to be invoked when carousel's page is changed

overlayView

JSX.Element

Element to be display on top of the carousel

pageControlColor

string

Page control object color override

pageControlInactiveColor

string

Page control object inactive color override

testID

string

Component Test Id