[@ticmakers-react-native/onboarding](../README.md) > ["Onboarding/index.d"](../modules/_onboarding_index_d_.md) > [IOnboardingProps](../interfaces/_onboarding_index_d_.ionboardingprops.md)

# Interface: IOnboardingProps

Interface to define the props of the Onboarding component

*__interface__*: IOnboardingProps

## Hierarchy

**IOnboardingProps**

## Index

### Properties

* [DoneComponent](_onboarding_index_d_.ionboardingprops.md#donecomponent)
* [DotComponent](_onboarding_index_d_.ionboardingprops.md#dotcomponent)
* [NextComponent](_onboarding_index_d_.ionboardingprops.md#nextcomponent)
* [PrevComponent](_onboarding_index_d_.ionboardingprops.md#prevcomponent)
* [SkipComponent](_onboarding_index_d_.ionboardingprops.md#skipcomponent)
* [allowFontScalingButtons](_onboarding_index_d_.ionboardingprops.md#allowfontscalingbuttons)
* [allowFontScalingText](_onboarding_index_d_.ionboardingprops.md#allowfontscalingtext)
* [backgroundColorAnim](_onboarding_index_d_.ionboardingprops.md#backgroundcoloranim)
* [bottomBarHeight](_onboarding_index_d_.ionboardingprops.md#bottombarheight)
* [bottomBarHighlight](_onboarding_index_d_.ionboardingprops.md#bottombarhighlight)
* [bottomBarStyle](_onboarding_index_d_.ionboardingprops.md#bottombarstyle)
* [containerStyle](_onboarding_index_d_.ionboardingprops.md#containerstyle)
* [controlStatusBar](_onboarding_index_d_.ionboardingprops.md#controlstatusbar)
* [currentPage](_onboarding_index_d_.ionboardingprops.md#currentpage)
* [defaultPages](_onboarding_index_d_.ionboardingprops.md#defaultpages)
* [doneLabel](_onboarding_index_d_.ionboardingprops.md#donelabel)
* [donePosition](_onboarding_index_d_.ionboardingprops.md#doneposition)
* [doneStyle](_onboarding_index_d_.ionboardingprops.md#donestyle)
* [dotColorSelected](_onboarding_index_d_.ionboardingprops.md#dotcolorselected)
* [dotSelectedStyle](_onboarding_index_d_.ionboardingprops.md#dotselectedstyle)
* [dotsColor](_onboarding_index_d_.ionboardingprops.md#dotscolor)
* [dotsPosition](_onboarding_index_d_.ionboardingprops.md#dotsposition)
* [dotsSize](_onboarding_index_d_.ionboardingprops.md#dotssize)
* [dotsStyle](_onboarding_index_d_.ionboardingprops.md#dotsstyle)
* [flatlistProps](_onboarding_index_d_.ionboardingprops.md#flatlistprops)
* [headerContainerStyle](_onboarding_index_d_.ionboardingprops.md#headercontainerstyle)
* [height](_onboarding_index_d_.ionboardingprops.md#height)
* [hideDone](_onboarding_index_d_.ionboardingprops.md#hidedone)
* [hideDots](_onboarding_index_d_.ionboardingprops.md#hidedots)
* [hideNext](_onboarding_index_d_.ionboardingprops.md#hidenext)
* [hideSkip](_onboarding_index_d_.ionboardingprops.md#hideskip)
* [imageContainerStyle](_onboarding_index_d_.ionboardingprops.md#imagecontainerstyle)
* [nextLabel](_onboarding_index_d_.ionboardingprops.md#nextlabel)
* [nextPosition](_onboarding_index_d_.ionboardingprops.md#nextposition)
* [nextStyle](_onboarding_index_d_.ionboardingprops.md#nextstyle)
* [onChangePage](_onboarding_index_d_.ionboardingprops.md#onchangepage)
* [onDone](_onboarding_index_d_.ionboardingprops.md#ondone)
* [onSkip](_onboarding_index_d_.ionboardingprops.md#onskip)
* [pages](_onboarding_index_d_.ionboardingprops.md#pages)
* [paginationProps](_onboarding_index_d_.ionboardingprops.md#paginationprops)
* [prevLabel](_onboarding_index_d_.ionboardingprops.md#prevlabel)
* [prevPosition](_onboarding_index_d_.ionboardingprops.md#prevposition)
* [prevStyle](_onboarding_index_d_.ionboardingprops.md#prevstyle)
* [previousPage](_onboarding_index_d_.ionboardingprops.md#previouspage)
* [skipLabel](_onboarding_index_d_.ionboardingprops.md#skiplabel)
* [skipPosition](_onboarding_index_d_.ionboardingprops.md#skipposition)
* [skipStyle](_onboarding_index_d_.ionboardingprops.md#skipstyle)
* [skipToPage](_onboarding_index_d_.ionboardingprops.md#skiptopage)
* [statusBarStyle](_onboarding_index_d_.ionboardingprops.md#statusbarstyle)
* [subtitleStyle](_onboarding_index_d_.ionboardingprops.md#subtitlestyle)
* [titleStyle](_onboarding_index_d_.ionboardingprops.md#titlestyle)
* [transitionAnimationDuration](_onboarding_index_d_.ionboardingprops.md#transitionanimationduration)
* [usePrevious](_onboarding_index_d_.ionboardingprops.md#useprevious)
* [width](_onboarding_index_d_.ionboardingprops.md#width)

---

## Properties

<a id="donecomponent"></a>

### `<Optional>` DoneComponent

**● DoneComponent**: *`TypeComponent`*

*Defined in Onboarding/index.d.ts:101*

A React-Native component to replace the done button

*__type__*: {TypeComponent}

___
<a id="dotcomponent"></a>

### `<Optional>` DotComponent

**● DotComponent**: *`TypeComponent`*

*Defined in Onboarding/index.d.ts:107*

A React-Native component to replace the pagination dot

*__type__*: {TypeComponent}

___
<a id="nextcomponent"></a>

### `<Optional>` NextComponent

**● NextComponent**: *`TypeComponent`*

*Defined in Onboarding/index.d.ts:113*

A React-Native component to replace the next button

*__type__*: {TypeComponent}

___
<a id="prevcomponent"></a>

### `<Optional>` PrevComponent

**● PrevComponent**: *`TypeComponent`*

*Defined in Onboarding/index.d.ts:119*

A React-Native component to replace the previous button

*__type__*: {TypeComponent}

___
<a id="skipcomponent"></a>

### `<Optional>` SkipComponent

**● SkipComponent**: *`TypeComponent`*

*Defined in Onboarding/index.d.ts:125*

A React-Native component to replace the skip button

*__type__*: {TypeComponent}

___
<a id="allowfontscalingbuttons"></a>

### `<Optional>` allowFontScalingButtons

**● allowFontScalingButtons**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:132*

Font scaling can cause troubles with high-resolution screens. You may want to disable it

*__type__*: {boolean}

*__default__*: true

___
<a id="allowfontscalingtext"></a>

### `<Optional>` allowFontScalingText

**● allowFontScalingText**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:139*

Font scaling can cause troubles with high-resolution screens. You may want to disable it

*__type__*: {boolean}

*__default__*: true

___
<a id="backgroundcoloranim"></a>

### `<Optional>` backgroundColorAnim

**● backgroundColorAnim**: *`Value` \| `ValueXY`*

*Defined in Onboarding/index.d.ts:145*

A React-Animated value to define background animation

*__type__*: {(Animated.Value \| Animated.ValueXY)}

___
<a id="bottombarheight"></a>

### `<Optional>` bottomBarHeight

**● bottomBarHeight**: *`undefined` \| `number`*

*Defined in Onboarding/index.d.ts:152*

A number for the height of the bottom bar

*__type__*: {number}

*__default__*: 60

___
<a id="bottombarhighlight"></a>

### `<Optional>` bottomBarHighlight

**● bottomBarHighlight**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:159*

A bool flag indicating whether the bottom bar should be highlighted

*__type__*: {boolean}

*__default__*: true

___
<a id="bottombarstyle"></a>

### `<Optional>` bottomBarStyle

**● bottomBarStyle**: *`TypeStyle`*

*Defined in Onboarding/index.d.ts:165*

Set a custom style to the bottom bar (pagination style)

*__type__*: {TypeStyle}

___
<a id="containerstyle"></a>

### `<Optional>` containerStyle

**● containerStyle**: *`undefined` \| `object`*

*Defined in Onboarding/index.d.ts:171*

Override the default container styles

*__type__*: {object}

___
<a id="controlstatusbar"></a>

### `<Optional>` controlStatusBar

**● controlStatusBar**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:178*

A bool flag indicating whether the status bar should change with the background color

*__type__*: {boolean}

*__default__*: true

___
<a id="currentpage"></a>

### `<Optional>` currentPage

**● currentPage**: *`undefined` \| `number`*

*Defined in Onboarding/index.d.ts:185*

A number to define what is the current page

*__type__*: {number}

*__default__*: 0

___
<a id="defaultpages"></a>

### `<Optional>` defaultPages

**● defaultPages**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:192*

Use 3 pages by default

*__type__*: {boolean}

*__default__*: false

___
<a id="donelabel"></a>

### `<Optional>` doneLabel

**● doneLabel**: *`undefined` \| `string`*

*Defined in Onboarding/index.d.ts:198*

Define a text to show in done button

*__type__*: {string}

___
<a id="doneposition"></a>

### `<Optional>` donePosition

**● donePosition**: *[TypePaginationPosition](../modules/_pagination_index_d_.md#typepaginationposition)*

*Defined in Onboarding/index.d.ts:205*

Define the position where the done button will be displayed

*__type__*: {TypePaginationPosition}

*__default__*: right

___
<a id="donestyle"></a>

### `<Optional>` doneStyle

**● doneStyle**: *`TypeStyle`*

*Defined in Onboarding/index.d.ts:211*

Apply a custom style to the done button

*__type__*: {TypeStyle}

___
<a id="dotcolorselected"></a>

### `<Optional>` dotColorSelected

**● dotColorSelected**: *`undefined` \| `string`*

*Defined in Onboarding/index.d.ts:217*

Apply a custom color to the pagination Dot selected

*__type__*: {string}

___
<a id="dotselectedstyle"></a>

### `<Optional>` dotSelectedStyle

**● dotSelectedStyle**: *`TypeStyle`*

*Defined in Onboarding/index.d.ts:223*

Apply a custom style to the pagination Dot selected

*__type__*: {TypeStyle}

___
<a id="dotscolor"></a>

### `<Optional>` dotsColor

**● dotsColor**: *`undefined` \| `string`*

*Defined in Onboarding/index.d.ts:229*

Apply a custom color to all pagination Dot

*__type__*: {string}

___
<a id="dotsposition"></a>

### `<Optional>` dotsPosition

**● dotsPosition**: *[TypePaginationPosition](../modules/_pagination_index_d_.md#typepaginationposition)*

*Defined in Onboarding/index.d.ts:236*

Define the position where the pagination dots will be displayed

*__type__*: {TypePaginationPosition}

*__default__*: center

___
<a id="dotssize"></a>

### `<Optional>` dotsSize

**● dotsSize**: *`undefined` \| `number`*

*Defined in Onboarding/index.d.ts:242*

Apply a size to the pagination dots

*__type__*: {number}

___
<a id="dotsstyle"></a>

### `<Optional>` dotsStyle

**● dotsStyle**: *`TypeStyle`*

*Defined in Onboarding/index.d.ts:248*

Apply a custom style to the pagination dots

*__type__*: {TypeStyle}

___
<a id="flatlistprops"></a>

### `<Optional>` flatlistProps

**● flatlistProps**: *`undefined` \| `object`*

*Defined in Onboarding/index.d.ts:254*

Additional props for the which holds all the pages

*__type__*: {object}

___
<a id="headercontainerstyle"></a>

### `<Optional>` headerContainerStyle

**● headerContainerStyle**: *`TypeStyle`*

*Defined in Onboarding/index.d.ts:260*

Apply a custom style to the header container

*__type__*: {TypeStyle}

___
<a id="height"></a>

### `<Optional>` height

**● height**: *`undefined` \| `number`*

*Defined in Onboarding/index.d.ts:266*

Define a custom height to the pages

*__type__*: {number}

___
<a id="hidedone"></a>

### `<Optional>` hideDone

**● hideDone**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:273*

Set true for hide the done button

*__type__*: {boolean}

*__default__*: false

___
<a id="hidedots"></a>

### `<Optional>` hideDots

**● hideDots**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:280*

Set true for hide the pagination dots

*__type__*: {boolean}

*__default__*: false

___
<a id="hidenext"></a>

### `<Optional>` hideNext

**● hideNext**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:287*

Set true to hide the next button

*__type__*: {boolean}

*__default__*: false

___
<a id="hideskip"></a>

### `<Optional>` hideSkip

**● hideSkip**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:294*

Set true to hide the skip button

*__type__*: {boolean}

*__default__*: false

___
<a id="imagecontainerstyle"></a>

### `<Optional>` imageContainerStyle

**● imageContainerStyle**: *`undefined` \| `object`*

*Defined in Onboarding/index.d.ts:300*

Override the default image container styles

*__type__*: {object}

___
<a id="nextlabel"></a>

### `<Optional>` nextLabel

**● nextLabel**: *`undefined` \| `string`*

*Defined in Onboarding/index.d.ts:307*

A text to show in the next button

*__type__*: {string}

*__default__*: Next

___
<a id="nextposition"></a>

### `<Optional>` nextPosition

**● nextPosition**: *[TypePaginationPosition](../modules/_pagination_index_d_.md#typepaginationposition)*

*Defined in Onboarding/index.d.ts:314*

Define the position where the next button will be displayed

*__type__*: {TypePaginationPosition}

*__default__*: right

___
<a id="nextstyle"></a>

### `<Optional>` nextStyle

**● nextStyle**: *`TypeStyle`*

*Defined in Onboarding/index.d.ts:320*

Apply a custom style to the next button

*__type__*: {TypeStyle}

___
<a id="onchangepage"></a>

### `<Optional>` onChangePage

**● onChangePage**: *`undefined` \| `function`*

*Defined in Onboarding/index.d.ts:326*

A function that receives the page index as a parameter on page change

*__type__*: {Function}

___
<a id="ondone"></a>

### `<Optional>` onDone

**● onDone**: *`undefined` \| `function`*

*Defined in Onboarding/index.d.ts:332*

A callback that is fired after the Onboarding is completed

*__type__*: {Function}

___
<a id="onskip"></a>

### `<Optional>` onSkip

**● onSkip**: *`undefined` \| `function`*

*Defined in Onboarding/index.d.ts:338*

A callback that is fired if the Onboarding is skipped

*__type__*: {Function}

___
<a id="pages"></a>

###  pages

**● pages**: *[IOnboardingPage](_onboarding_index_d_.ionboardingpage.md)[]*

*Defined in Onboarding/index.d.ts:344*

A array of pages to show in the component

*__type__*: {IOnboardingPage\[\]}

___
<a id="paginationprops"></a>

### `<Optional>` paginationProps

**● paginationProps**: *[IPaginationProps](_pagination_index_d_.ipaginationprops.md)*

*Defined in Onboarding/index.d.ts:350*

Define additional props for the pagination

*__type__*: {IPaginationProps}

___
<a id="prevlabel"></a>

### `<Optional>` prevLabel

**● prevLabel**: *`undefined` \| `string`*

*Defined in Onboarding/index.d.ts:356*

Define a text to show in previous button

*__type__*: {string}

___
<a id="prevposition"></a>

### `<Optional>` prevPosition

**● prevPosition**: *[TypePaginationPosition](../modules/_pagination_index_d_.md#typepaginationposition)*

*Defined in Onboarding/index.d.ts:363*

Define the position where the previous button will be displayed

*__type__*: {TypePaginationPosition}

*__default__*: left

___
<a id="prevstyle"></a>

### `<Optional>` prevStyle

**● prevStyle**: *`TypeStyle`*

*Defined in Onboarding/index.d.ts:369*

Apply a custom style to the previous button

*__type__*: {TypeStyle}

___
<a id="previouspage"></a>

### `<Optional>` previousPage

**● previousPage**: *`undefined` \| `number`*

*Defined in Onboarding/index.d.ts:375*

A number to define what is the previous page

*__type__*: {number}

___
<a id="skiplabel"></a>

### `<Optional>` skipLabel

**● skipLabel**: *`undefined` \| `string`*

*Defined in Onboarding/index.d.ts:382*

A text to show in the skip button

*__type__*: {string}

*__default__*: Skip

___
<a id="skipposition"></a>

### `<Optional>` skipPosition

**● skipPosition**: *[TypePaginationPosition](../modules/_pagination_index_d_.md#typepaginationposition)*

*Defined in Onboarding/index.d.ts:389*

Define the position where the next button will be displayed

*__type__*: {TypePaginationPosition}

*__default__*: left

___
<a id="skipstyle"></a>

### `<Optional>` skipStyle

**● skipStyle**: *`TypeStyle`*

*Defined in Onboarding/index.d.ts:395*

Apply a custom style to the skip button

*__type__*: {TypeStyle}

___
<a id="skiptopage"></a>

### `<Optional>` skipToPage

**● skipToPage**: *`undefined` \| `number`*

*Defined in Onboarding/index.d.ts:401*

Index number of the page that will be displayed when the skip button is pressed

*__type__*: {number}

___
<a id="statusbarstyle"></a>

### `<Optional>` statusBarStyle

**● statusBarStyle**: *[TypeOnboardingStatusBarStyle](../modules/_onboarding_index_d_.md#typeonboardingstatusbarstyle)*

*Defined in Onboarding/index.d.ts:408*

Define a custom status bar style

*__type__*: {TypeOnboardingStatusBarStyle}

*__default__*: default

___
<a id="subtitlestyle"></a>

### `<Optional>` subtitleStyle

**● subtitleStyle**: *`undefined` \| `object`*

*Defined in Onboarding/index.d.ts:414*

Override the default subtitle styles

*__type__*: {object}

___
<a id="titlestyle"></a>

### `<Optional>` titleStyle

**● titleStyle**: *`undefined` \| `object`*

*Defined in Onboarding/index.d.ts:420*

Override the default title styles

*__type__*: {object}

___
<a id="transitionanimationduration"></a>

### `<Optional>` transitionAnimationDuration

**● transitionAnimationDuration**: *`undefined` \| `number`*

*Defined in Onboarding/index.d.ts:427*

The duration in milliseconds for the animation of the background color for the page transition

*__type__*: {number}

*__default__*: 500

___
<a id="useprevious"></a>

### `<Optional>` usePrevious

**● usePrevious**: *`undefined` \| `false` \| `true`*

*Defined in Onboarding/index.d.ts:433*

Use to show the previous button

*__type__*: {boolean}

___
<a id="width"></a>

### `<Optional>` width

**● width**: *`undefined` \| `number`*

*Defined in Onboarding/index.d.ts:439*

Define a custom width to the pages

*__type__*: {number}

___