react-native-onboard-tutorial

npmpackage.info

Gathering detailed insights and metrics for react-native-onboard-tutorial

Other packages similar to react-native-onboard-tutorial

react-native-onboard

2.6.0

Delightful and fully customizable onboarding elements for React Native.

react-native-app-onboard

0.1.9

React Native App Onboard is a customizable, easy-to-use, and efficient library for creating compelling onboarding experiences for your React Native applications. It provides smooth, fluid transitions and animations, with a focus on simplicity and usabilit

react-native-onboard-carousel

0.0.13

A react native customizable onboarding component

react-native-step-tutorial

1.0.9

A lightweight and customizable React Native tutorial/onboarding overlay library that guides users through your app’s UI using step-by-step highlights, tooltips, and walkthroughs. Easily define tutorial steps, highlight specific components, and provide con

Gathering detailed insights and metrics for react-native-onboard-tutorial

Prop	Description	Default
`tutorial`	Mandatory - Information about the state of the tutorial. For details see [`types.ts	Tutorial`]('./lib/types.d.ts').
`onEvent`	A function `(eventName:step	complete, info: { from: Step, to: Step }) => void`.

Prop	Description	Default
`stepId`	Mandatory - The identifier attached to the step that this component represents.	None
`text`	Overrides the text for this step.	Text on the step in the tutorial.
`onEnter`	A function invoked when the step completes, function will be invoked with an event with this structure `{ direction:forward	backward, step:Step }`. See [`TutorialStepComponent.onExit`]('./lib/types.d.ts') for definition.
`onExit`	A function invoked when the step completes, function will be invoked with an event with this structure `{ direction:forward	backward, step:Step }`. See [`TutorialStepComponent.onExit`]('./lib/types.d.ts') for definition.

Prop	Description	Default
`containerStyle`	Overrides the style on the `View` component wrapping the `Text` component.	None
`textStyle`	Overrides the style on the `Text` component.	None

Prop	Description	Default
`containerStyle`	Overrides the style on the `View` component wrapping the `Text` component.	None
`textProps`	Overrides the props on the `Text` component.	None
`stepFilter`	A function that allows more control over whether or not this component will display. Simply return true to show the component, or false to hide the component in response to the current step. `(step: Step) => boolean`	None

Prop	Description	Default
`backText`	Override the back button text.	`Back`
`backStyle`	Overrides the props on the `Text` component.	None
`backTextProps`	Props to pass to the `Text` component	None
`nextText`	Override the next button text.	`Next`
`nextStyle`	Overrides the props on the `Text` component.	None
`nextTextProps`	Props to pass to the `Text` component	None
`skipText`	Override the skip button text.	`Skip`
`skipStyle`	Overrides the props on the `Text` component.	None
`skipTextProps`	Props to pass to the `Text` component	None
`containerStyle`	Overrides the style on the `View` component wrapping the controls `	None

Other packages similar to react-native-onboard-tutorial

Other packages similar to react-native-onboard-tutorial

Installations

Developer Guide

Yes

CommonJS

12.22.7

6.14.15

Pull Requests

0

9

0

9

Issues

0

0

0

Releases

Languages

Developer

jgking2

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

Getting Started

Demo

Usage

Create Tutorial Object

Provide the tutorial to the App

API

Hooks

useTutorial()

useActiveStep()

useStepListener((current:ActiveStep, previous:ActiveStep)=>void)

useStep(stepId:string)

Components

<TutorialProvider/>

<TutorialStep/>

<TutorialHighlight/>

<TutorialText/>

<TutorialTextOutlet/>

<TutorialControls/>

10

9

0

0

0

0

0

0

0

0

0

0

2.3

/10

`useTutorial()`

`useActiveStep()`

`useStepListener((current:ActiveStep, previous:ActiveStep)=>void)`

`useStep(stepId:string)`

`<TutorialProvider/>`

`<TutorialStep/>`

`<TutorialHighlight/>`

`<TutorialText/>`

`<TutorialTextOutlet/>`

`<TutorialControls/>`