@ticmakers-react-native/onboarding
Version:
TIC Makers - React Native Onboarding
819 lines (462 loc) • 17.4 kB
Markdown
[@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}
___