React Native Walkthrough  

Walkthrough

> _NOTE: This library is currently under development, and should primarly be considered as being in a beta stage._

React Native Walkthrough is an app-wide walkthrough library, with a minimal footprint.

$3

``
yarn add react-native-walkthrough
`

$3

- WalkthroughProvider component
- WalkthroughElement component
- startWalkthrough function
- dispatchWalkthroughEvent function
- goToWalkthroughElementWithId function


#### WalkthroughProvider

First, you will need to wrap your entire app in the WalkthroughProvider component (no props or additional config required)

`js
import { WalkthroughProvider } from 'react-native-walkthrough';

render() {
return (



)
}
`

#### WalkthroughElement

When you wish to highlight something as a part of a Walkthrough, you simply wrap the component in a WalkthroughElement and give it a unique id.

`js
import { WalkthroughElement } from 'react-native-walkthrough';

// just add this!
style={styles.profileButton}
onPress={() => navigate('Profile', {name: 'Jane'})}
>
{"Go to Jane's profile"}


`

This library utilizes react-native-walkthrough-tooltip to render the content bubbles that point to a WalkthroughElement. You can edit the content of the tooltip in the walkthrough guide, or by providing the optional content prop directly on the WalkthroughElement component.

#### startWalkthrough

Function that accepts a walkthrough guide array and begins the walkthrough by setting the current element as the first element from the walkthrough guide array. Learn about walkthrough guides here

`js
import { startWalkthrough } from 'react-native-walkthrough';

import profileWalkthrough from '../guides/profileWalkthrough';

onPress={() => startWalkthrough(profileWalkthrough)}
>
{"Show me how to view a profile"}

`

#### dispatchWalkthroughEvent

Function that accepts a string event name. Walkthrough events are used to wait-then-show the next element in a walkthrough. Add a triggerEvent to the walkthrough element in a guide, then be sure to dispatch the walkthrough event when it occurs to trigger the tooltip to be displayed.

`js
import { NavigationEvents } from 'react-navigation';
import { dispatchWalkthroughEvent } from 'react-native-walkthrough';

render (

onDidFocus={() => dispatchWalkthroughEvent('profile-focus')}
/>
...

)
`

#### goToWalkthroughElementWithId

Function that accepts a string element id. Finds the first element in the current walkthrough with a matching id and sets that element as the current element.

`js
import { goToWalkthroughElementWithId } from 'react-native-walkthrough';


onPress={() => goToWalkthroughElementWithId('step-3')}
>
{"Skip to next step"}


`

$3

A walkthrough guide is simply an array of objects, where each object correlates to a WalkthroughElement. Each element object in the guide must have an id and content to display in the tooltip bubble.

#### Example guide
`js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
tooltipView: {
paddingHorizontal: 24,
paddingVertical: 8,
},
tooltipText: {
color: 'black',
fontSize: 18,
},
});

const makeTooltipContent = text => (

{text}

);

export default [
{
id: 'profile-button',
content: makeTooltipContent('Tap here to view a profile'),
},
{
id: 'profile-name',
content: makeTooltipContent("Here is the user's name"),
placement: 'bottom',
triggerEvent: 'profile-focus',
},
];
`

#### Guide values

|Key|Type|Required|Description|
|---|----|-----|----|
|content|function/Element| YES | This is the view displayed in the tooltip popover bubble |
|id|string|YES|id string that matches the corresponding WalkthroughElement|
|placement|string|NO | Determines placement of tooltip in relation to the element it is wrapping
|possibleOutcomes|array|NO|An array of objects with keys (event, action) that creates event listeners for multiple events to provide the ability to have an outcome tree that responds to a user's actions (listens to events dispatched via dispatchWalkthroughEvent|
|tooltipProps|object|NO|additional props to customize the tooltip functionality and style
|triggerEvent|string|NO|string event id, this element will not appear until the triggerEvent is dispatched via dispatchWalkthroughEvent


> To learn more about placement options and all the options for tooltipProps view the react-native-walkthrough-tooltip` README