├── .commitlintrc.json ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── .release-it.json ├── .watchmanconfig ├── LICENSE ├── docs ├── .nojekyll ├── README.md ├── interfaces │ ├── IOverlayComponentProps.md │ ├── IUseWalkthroughStep.md │ ├── IWalkthroughCallback.md │ ├── IWalkthroughContext.md │ ├── IWalkthroughFunctions.md │ ├── IWalkthroughProvider.md │ ├── IWalkthroughStep.md │ └── IWalkthroughStepMask.md └── modules.md ├── package-lock.json ├── package.json ├── src └── index.tsx ├── tsconfig.build.json └── tsconfig.json /.commitlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"], 3 | "rules": { 4 | "header-max-length": [0, "always", 150], 5 | "subject-case": [0, "always", "sentence-case"], 6 | "type-enum": [ 7 | 2, 8 | "always", 9 | [ 10 | "ci", 11 | "chore", 12 | "docs", 13 | "feat", 14 | "fix", 15 | "perf", 16 | "refactor", 17 | "revert", 18 | "style", 19 | "test" 20 | ] 21 | ] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | web-build/ 3 | 4 | # generated by bob 5 | lib/ 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: "@react-native-community", 4 | parser: "@typescript-eslint/parser", 5 | plugins: ["import", "eslint-plugin-import", "@typescript-eslint"], 6 | settings: { 7 | "import/resolver": { 8 | node: { 9 | extensions: [ 10 | ".js", 11 | ".jsx", 12 | ".ts", 13 | ".tsx", 14 | ".d.ts", 15 | ".android.js", 16 | ".android.jsx", 17 | ".android.ts", 18 | ".android.tsx", 19 | ".ios.js", 20 | ".ios.jsx", 21 | ".ios.ts", 22 | ".ios.tsx", 23 | ".web.js", 24 | ".web.jsx", 25 | ".web.ts", 26 | ".web.tsx", 27 | ], 28 | }, 29 | }, 30 | }, 31 | rules: { 32 | quotes: [ 33 | "error", 34 | "double", 35 | { 36 | avoidEscape: true, 37 | }, 38 | ], 39 | "max-len": ["error", 120], 40 | "@typescript-eslint/ban-ts-comment": 2, 41 | "@typescript-eslint/no-explicit-any": 2, 42 | "@typescript-eslint/explicit-module-boundary-types": 0, 43 | "react/jsx-filename-extension": ["error", { extensions: [".tsx"] }], 44 | "react-native/no-unused-styles": 2, 45 | "react-native/split-platform-components": 2, 46 | "react-native/no-inline-styles": 0, 47 | "react-native/no-color-literals": 0, 48 | "react-native/no-raw-text": 0, 49 | "import/no-extraneous-dependencies": 2, 50 | "import/extensions": ["error", "never", { svg: "always" }], 51 | "import/no-named-as-default-member": 2, 52 | "import/order": ["error", { "newlines-between": "always" }], 53 | "import/no-duplicates": 2, 54 | "import/no-useless-path-segments": 2, 55 | "import/no-cycle": 2, 56 | "import/prefer-default-export": 0, 57 | "import/no-anonymous-default-export": 0, 58 | "import/named": 0, 59 | "@typescript-eslint/no-empty-interface": 0, 60 | "import/namespace": 0, 61 | "import/default": 0, 62 | "import/no-named-as-default": 0, 63 | "import/no-unused-modules": 0, 64 | "import/no-deprecated": 0, 65 | "@typescript-eslint/indent": 0, 66 | "react-hooks/rules-of-hooks": 2, 67 | "react-hooks/exhaustive-deps": [ 68 | "error", 69 | { additionalHooks: "(useMemoOne)" }, 70 | ], 71 | "jest/no-identical-title": 2, 72 | "jest/valid-expect": 2, 73 | camelcase: 2, 74 | "prefer-destructuring": 2, 75 | "no-nested-ternary": 2, 76 | }, 77 | }; 78 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | .gitignore 5 | 6 | # XDE 7 | .expo/ 8 | 9 | web-build/ 10 | 11 | # VSCode 12 | .vscode/ 13 | .history/ 14 | 15 | jsconfig.json 16 | tsconfig.tsbuildinfo 17 | 18 | # Xcode 19 | # 20 | build/ 21 | *.pbxuser 22 | !default.pbxuser 23 | *.mode1v3 24 | !default.mode1v3 25 | *.mode2v3 26 | !default.mode2v3 27 | *.perspectivev3 28 | !default.perspectivev3 29 | xcuserdata 30 | *.xccheckout 31 | *.moved-aside 32 | DerivedData 33 | *.hmap 34 | *.ipa 35 | *.xcuserstate 36 | project.xcworkspace 37 | 38 | # Android/IJ 39 | # 40 | .idea 41 | .gradle 42 | local.properties 43 | 44 | # node.js 45 | # 46 | node_modules/ 47 | npm-debug.log 48 | yarn-debug.log 49 | yarn-error.log 50 | 51 | # BUCK 52 | buck-out/ 53 | \.buckd/ 54 | android/app/libs 55 | android/keystores/debug.keystore 56 | 57 | # generated by bob 58 | lib/ 59 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Node Modules 2 | **/node_modules 3 | node_modules 4 | # Example 5 | example 6 | # Assets 7 | Assets 8 | assets 9 | # ios stuff 10 | **/.gitignore 11 | .gitignore 12 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/** -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "jsxBracketSameLine": false, 4 | "singleQuote": false, 5 | "trailingComma": "all", 6 | "tabWidth": 2, 7 | "semi": true 8 | } 9 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "git": { 3 | "commitMessage": "chore: release ${version}", 4 | "tagName": "v${version}" 5 | }, 6 | "npm": { 7 | "publish": true 8 | }, 9 | "github": { 10 | "release": true 11 | }, 12 | "plugins": { 13 | "@release-it/conventional-changelog": { 14 | "preset": "angular" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": [ 3 | ".git", 4 | "node_modules" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Tribefy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # React Native Interactive Walkthrough 2 | 3 | [![Version](https://img.shields.io/github/package-json/v/tribefyhq/react-native-interactive-walkthrough)][package] 4 | [![MIT Licence](https://img.shields.io/github/license/tribefyhq/react-native-interactive-walkthrough)][license] 5 | [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/) 6 | 7 | 8 | A cross-platform interactive walkthrough library for React Native that is performant, simple, extensible, and works with Expo. 9 | 10 | There are many libraries out there, but I kept running into architectural road blocks. I needed a library that would: 11 | 12 | 1) Allow me to measure where items are and put tooltips relative to those locations 13 | 2) Easily allow me to jump between steps 14 | 3) Expose multiple parts of the screen for the tutorial 15 | 4) Allow different parts of the tutorial to be clickable (or not) 16 | 5) Work cross-platform without the need to link libraries and fast. 17 | 18 | Out of this need, a new library was born. 19 | 20 | Please keep in mind that this library is currently under development, and should primarly be considered as being in a beta stage. 21 | 22 | ## Demo 23 | 24 | Here is a demo being used in production: 25 | 26 | https://user-images.githubusercontent.com/525212/147407154-d7374b9a-c370-4e75-a269-ecd225b4bbbc.mp4 27 | 28 | ## Features 29 | 30 | 1) [Fast] Smoother animations using LayoutAnimation which is ran natively on both Android and iOS 31 | 2) [Flexible] The ability to press in the highlighted area (or not). 32 | 3) [Functional] Ability to have multiple parts of the screen showing for a single step, with one interactable and the other not. 33 | 4) Overlay is fully customizable and you are given the position of the overlay area so you can position relative to the masks. 34 | 5) No wrapping HOC, passing props into children, etc. Just basic callbacks and context from react native. 35 | 6) Programmatic stop / start / goTo functions accessible in any component using React context 36 | 7) The ability to override the positioning to fine tune or add padding around certain exposed masks. 37 | 8) Hardware back button support on Android (with the ability to disable) 38 | 9) No dependencies besides react and react-native, lodash.sortBy, and react-native-safe-area-context 39 | 10) When mask is not pressable through, you can specify an onPress event. You can also specify onPress background as well. 40 | 11) Pass in a useIsFocused function so that the walkthrough automatically hides itself incase the user redirects away via push notifications or other code. 41 | 42 | ## React Native Compatibility 43 | 44 | This library will likely work with most versions of React Native, but keep in mind that it was built with `0.64.3` of React Native. 45 | 46 | *It will also work with Expo apps as well since there is no library linking required.* 47 | 48 | | `react-native-interactive-walkthrough` Version | Required React Native Version | 49 | | ------------------------------- | ----------------------------- | 50 | | `1.x.x` | `>= 0.63` | 51 | 52 | ## Installation 53 | 54 | Open a Terminal in the project root and run: 55 | 56 | ```sh 57 | yarn add react-native-interactive-walkthrough 58 | ``` 59 | 60 | Make sure you've also have installed`react-native-safe-area-view` with version >= 3.0.0 61 | ```sh 62 | yarn add react-native-safe-area-view 63 | ``` 64 | 65 | Use the `enableExperimentalLayoutAnimation` helper somewhere on bootup to make sure we can use LayoutAnimations. 66 | 67 | ```ts 68 | import {enableExperimentalLayoutAnimation} from "react-native-interactive-walkthrough" 69 | 70 | enableExperimentalLayoutAnimation(); 71 | ``` 72 | 73 | ## Usage 74 | 75 | First you need to wrap the root of your app with the `WalkthroughProvider`. 76 | 77 | ```js 78 | import * as React from 'react'; 79 | import { WalkthroughProvider } from 'react-native-interactive-walkthrough'; 80 | import MyAwesomeApp from './src/MyAwesomeApp'; 81 | 82 | export default function App() { 83 | return ( 84 | 88 | 89 | 90 | ); 91 | } 92 | ``` 93 | 94 | Now you can use `useWalkthroughStep` to create your steps within the components. 95 | 96 | ```ts 97 | import {useWalkthroughStep} from "react-native-interactive-walkthrough" 98 | 99 | export default function HomeScreen() { 100 | 101 | const {isWalkthroughOn, isReady, start} = useWalkthroughStep({ 102 | number: 1, 103 | OverlayComponent: WelcomeMessageOverlay, 104 | fullScreen: true, 105 | }); 106 | 107 | const {onLayout} = useWalkthroughStep({ 108 | number: 2, 109 | enableHardwareBack: true, 110 | OverlayComponent: NearbyUsersOverlay, 111 | }); 112 | 113 | useEffect( 114 | () => { 115 | start(); 116 | }, 117 | [], 118 | ) 119 | 120 | return ( 121 | 122 | 123 | 124 | Here is my app! 125 | 126 | 127 | 128 | ); 129 | } 130 | ``` 131 | 132 | An overlay component can look like this: 133 | 134 | ```ts 135 | const WelcomeMessageOverlay = ({next}: IOverlayComponentProps) => { 136 | return 137 | 138 | 139 | Let's take a quick tour! 140 | 141 | 146 | 147 | 148 | }; 149 | ``` 150 | 151 | Or you can position it be relative to any element on your screen: 152 | 153 | ```ts 154 | const NearbyUsersOverlay = ({next, previous, step: {mask}}: IOverlayComponentProps) => 155 | ; 163 | ``` 164 | 165 | The code is relatively short and readable. If you use TS, the interfaces are very straightforward. 166 | 167 | We've generated [docs](modules.md) from the TS interfaces to make it easy to go through the code. 168 | 169 | ## Contributing 170 | 171 | This app is currently being used in the Tribefy app (tribefy.com). 172 | 173 | We're looking for maintainers, so if you are interested please contact open-source@tribefy.com. 174 | 175 | 176 | 177 | [build-badge]: https://img.shields.io/circleci/project/github/satya164/react-native-interactive-walkthrough/main.svg?style=flat-square 178 | [build]: https://circleci.com/gh/satya164/react-native-interactive-walkthrough 179 | [version-badge]: https://img.shields.io/npm/v/react-native-interactive-walkthrough.svg?style=flat-square 180 | [package]: https://www.npmjs.com/package/react-native-interactive-walkthrough 181 | [license-badge]: https://img.shields.io/npm/l/react-native-interactive-walkthrough.svg?style=flat-square 182 | [license]: https://opensource.org/licenses/MIT 183 | -------------------------------------------------------------------------------- /docs/interfaces/IOverlayComponentProps.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](../README.md) / [Exports](../modules.md) / IOverlayComponentProps 2 | 3 | # Interface: IOverlayComponentProps 4 | 5 | ## Hierarchy 6 | 7 | - [`IWalkthroughContext`](IWalkthroughContext.md) 8 | 9 | ↳ **`IOverlayComponentProps`** 10 | 11 | ## Table of contents 12 | 13 | ### Properties 14 | 15 | - [allSteps](IOverlayComponentProps.md#allsteps) 16 | - [backdropColor](IOverlayComponentProps.md#backdropcolor) 17 | - [currentStepNumber](IOverlayComponentProps.md#currentstepnumber) 18 | - [currentSteps](IOverlayComponentProps.md#currentsteps) 19 | - [debug](IOverlayComponentProps.md#debug) 20 | - [isReady](IOverlayComponentProps.md#isready) 21 | - [isWalkthroughOn](IOverlayComponentProps.md#iswalkthroughon) 22 | - [step](IOverlayComponentProps.md#step) 23 | - [transitionDuration](IOverlayComponentProps.md#transitionduration) 24 | 25 | ### Methods 26 | 27 | - [animateNextLayoutChange](IOverlayComponentProps.md#animatenextlayoutchange) 28 | - [goTo](IOverlayComponentProps.md#goto) 29 | - [next](IOverlayComponentProps.md#next) 30 | - [previous](IOverlayComponentProps.md#previous) 31 | - [registerStep](IOverlayComponentProps.md#registerstep) 32 | - [setBackdropColor](IOverlayComponentProps.md#setbackdropcolor) 33 | - [setTransitionDuration](IOverlayComponentProps.md#settransitionduration) 34 | - [start](IOverlayComponentProps.md#start) 35 | - [stop](IOverlayComponentProps.md#stop) 36 | - [updateStep](IOverlayComponentProps.md#updatestep) 37 | - [useIsFocused](IOverlayComponentProps.md#useisfocused) 38 | 39 | ## Properties 40 | 41 | ### allSteps 42 | 43 | • **allSteps**: [`IWalkthroughStep`](IWalkthroughStep.md)[] 44 | 45 | #### Inherited from 46 | 47 | [IWalkthroughContext](IWalkthroughContext.md).[allSteps](IWalkthroughContext.md#allsteps) 48 | 49 | #### Defined in 50 | 51 | [index.tsx:81](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L81) 52 | 53 | ___ 54 | 55 | ### backdropColor 56 | 57 | • **backdropColor**: `string` 58 | 59 | #### Inherited from 60 | 61 | [IWalkthroughContext](IWalkthroughContext.md).[backdropColor](IWalkthroughContext.md#backdropcolor) 62 | 63 | #### Defined in 64 | 65 | [index.tsx:82](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L82) 66 | 67 | ___ 68 | 69 | ### currentStepNumber 70 | 71 | • **currentStepNumber**: `number` 72 | 73 | #### Inherited from 74 | 75 | [IWalkthroughContext](IWalkthroughContext.md).[currentStepNumber](IWalkthroughContext.md#currentstepnumber) 76 | 77 | #### Defined in 78 | 79 | [index.tsx:88](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L88) 80 | 81 | ___ 82 | 83 | ### currentSteps 84 | 85 | • **currentSteps**: [`IWalkthroughStep`](IWalkthroughStep.md)[] 86 | 87 | #### Inherited from 88 | 89 | [IWalkthroughContext](IWalkthroughContext.md).[currentSteps](IWalkthroughContext.md#currentsteps) 90 | 91 | #### Defined in 92 | 93 | [index.tsx:80](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L80) 94 | 95 | ___ 96 | 97 | ### debug 98 | 99 | • **debug**: `boolean` 100 | 101 | #### Inherited from 102 | 103 | [IWalkthroughContext](IWalkthroughContext.md).[debug](IWalkthroughContext.md#debug) 104 | 105 | #### Defined in 106 | 107 | [index.tsx:85](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L85) 108 | 109 | ___ 110 | 111 | ### isReady 112 | 113 | • **isReady**: `boolean` 114 | 115 | #### Inherited from 116 | 117 | [IWalkthroughContext](IWalkthroughContext.md).[isReady](IWalkthroughContext.md#isready) 118 | 119 | #### Defined in 120 | 121 | [index.tsx:87](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L87) 122 | 123 | ___ 124 | 125 | ### isWalkthroughOn 126 | 127 | • **isWalkthroughOn**: `boolean` 128 | 129 | #### Inherited from 130 | 131 | [IWalkthroughContext](IWalkthroughContext.md).[isWalkthroughOn](IWalkthroughContext.md#iswalkthroughon) 132 | 133 | #### Defined in 134 | 135 | [index.tsx:86](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L86) 136 | 137 | ___ 138 | 139 | ### step 140 | 141 | • **step**: [`IWalkthroughStep`](IWalkthroughStep.md) 142 | 143 | #### Defined in 144 | 145 | [index.tsx:105](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L105) 146 | 147 | ___ 148 | 149 | ### transitionDuration 150 | 151 | • **transitionDuration**: `number` 152 | 153 | #### Inherited from 154 | 155 | [IWalkthroughContext](IWalkthroughContext.md).[transitionDuration](IWalkthroughContext.md#transitionduration) 156 | 157 | #### Defined in 158 | 159 | [index.tsx:83](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L83) 160 | 161 | ## Methods 162 | 163 | ### animateNextLayoutChange 164 | 165 | ▸ **animateNextLayoutChange**(`duration?`): `any` 166 | 167 | #### Parameters 168 | 169 | | Name | Type | 170 | | :------ | :------ | 171 | | `duration?` | `number` | 172 | 173 | #### Returns 174 | 175 | `any` 176 | 177 | #### Inherited from 178 | 179 | [IWalkthroughContext](IWalkthroughContext.md).[animateNextLayoutChange](IWalkthroughContext.md#animatenextlayoutchange) 180 | 181 | #### Defined in 182 | 183 | [index.tsx:84](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L84) 184 | 185 | ___ 186 | 187 | ### goTo 188 | 189 | ▸ **goTo**(`number`): `any` 190 | 191 | #### Parameters 192 | 193 | | Name | Type | 194 | | :------ | :------ | 195 | | `number` | `number` | 196 | 197 | #### Returns 198 | 199 | `any` 200 | 201 | #### Inherited from 202 | 203 | [IWalkthroughContext](IWalkthroughContext.md).[goTo](IWalkthroughContext.md#goto) 204 | 205 | #### Defined in 206 | 207 | [index.tsx:73](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L73) 208 | 209 | ___ 210 | 211 | ### next 212 | 213 | ▸ **next**(): `any` 214 | 215 | #### Returns 216 | 217 | `any` 218 | 219 | #### Inherited from 220 | 221 | [IWalkthroughContext](IWalkthroughContext.md).[next](IWalkthroughContext.md#next) 222 | 223 | #### Defined in 224 | 225 | [index.tsx:72](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L72) 226 | 227 | ___ 228 | 229 | ### previous 230 | 231 | ▸ **previous**(): `any` 232 | 233 | #### Returns 234 | 235 | `any` 236 | 237 | #### Inherited from 238 | 239 | [IWalkthroughContext](IWalkthroughContext.md).[previous](IWalkthroughContext.md#previous) 240 | 241 | #### Defined in 242 | 243 | [index.tsx:74](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L74) 244 | 245 | ___ 246 | 247 | ### registerStep 248 | 249 | ▸ **registerStep**(`step`): `any` 250 | 251 | #### Parameters 252 | 253 | | Name | Type | 254 | | :------ | :------ | 255 | | `step` | [`IWalkthroughStep`](IWalkthroughStep.md) | 256 | 257 | #### Returns 258 | 259 | `any` 260 | 261 | #### Inherited from 262 | 263 | [IWalkthroughContext](IWalkthroughContext.md).[registerStep](IWalkthroughContext.md#registerstep) 264 | 265 | #### Defined in 266 | 267 | [index.tsx:68](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L68) 268 | 269 | ___ 270 | 271 | ### setBackdropColor 272 | 273 | ▸ **setBackdropColor**(`color`): `any` 274 | 275 | #### Parameters 276 | 277 | | Name | Type | 278 | | :------ | :------ | 279 | | `color` | `string` | 280 | 281 | #### Returns 282 | 283 | `any` 284 | 285 | #### Inherited from 286 | 287 | [IWalkthroughContext](IWalkthroughContext.md).[setBackdropColor](IWalkthroughContext.md#setbackdropcolor) 288 | 289 | #### Defined in 290 | 291 | [index.tsx:76](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L76) 292 | 293 | ___ 294 | 295 | ### setTransitionDuration 296 | 297 | ▸ **setTransitionDuration**(`duration`): `any` 298 | 299 | #### Parameters 300 | 301 | | Name | Type | 302 | | :------ | :------ | 303 | | `duration` | `number` | 304 | 305 | #### Returns 306 | 307 | `any` 308 | 309 | #### Inherited from 310 | 311 | [IWalkthroughContext](IWalkthroughContext.md).[setTransitionDuration](IWalkthroughContext.md#settransitionduration) 312 | 313 | #### Defined in 314 | 315 | [index.tsx:75](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L75) 316 | 317 | ___ 318 | 319 | ### start 320 | 321 | ▸ **start**(): `any` 322 | 323 | #### Returns 324 | 325 | `any` 326 | 327 | #### Inherited from 328 | 329 | [IWalkthroughContext](IWalkthroughContext.md).[start](IWalkthroughContext.md#start) 330 | 331 | #### Defined in 332 | 333 | [index.tsx:70](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L70) 334 | 335 | ___ 336 | 337 | ### stop 338 | 339 | ▸ **stop**(): `any` 340 | 341 | #### Returns 342 | 343 | `any` 344 | 345 | #### Inherited from 346 | 347 | [IWalkthroughContext](IWalkthroughContext.md).[stop](IWalkthroughContext.md#stop) 348 | 349 | #### Defined in 350 | 351 | [index.tsx:71](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L71) 352 | 353 | ___ 354 | 355 | ### updateStep 356 | 357 | ▸ **updateStep**(`identifier`, `step`): `any` 358 | 359 | #### Parameters 360 | 361 | | Name | Type | 362 | | :------ | :------ | 363 | | `identifier` | `any` | 364 | | `step` | `Partial`<[`IWalkthroughStep`](IWalkthroughStep.md)\> | 365 | 366 | #### Returns 367 | 368 | `any` 369 | 370 | #### Inherited from 371 | 372 | [IWalkthroughContext](IWalkthroughContext.md).[updateStep](IWalkthroughContext.md#updatestep) 373 | 374 | #### Defined in 375 | 376 | [index.tsx:69](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L69) 377 | 378 | ___ 379 | 380 | ### useIsFocused 381 | 382 | ▸ `Optional` **useIsFocused**(): `boolean` 383 | 384 | #### Returns 385 | 386 | `boolean` 387 | 388 | #### Inherited from 389 | 390 | [IWalkthroughContext](IWalkthroughContext.md).[useIsFocused](IWalkthroughContext.md#useisfocused) 391 | 392 | #### Defined in 393 | 394 | [index.tsx:89](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L89) 395 | -------------------------------------------------------------------------------- /docs/interfaces/IUseWalkthroughStep.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](../README.md) / [Exports](../modules.md) / IUseWalkthroughStep 2 | 3 | # Interface: IUseWalkthroughStep 4 | 5 | ## Hierarchy 6 | 7 | - `PartialBy`<`IUseWalkthroughStepStrict`, ``"identifier"`` \| ``"overlayComponentKey"`` \| ``"measureMask"``\> 8 | 9 | ↳ **`IUseWalkthroughStep`** 10 | 11 | ## Table of contents 12 | 13 | ### Properties 14 | 15 | - [OverlayComponent](IUseWalkthroughStep.md#overlaycomponent) 16 | - [enableHardwareBack](IUseWalkthroughStep.md#enablehardwareback) 17 | - [fullScreen](IUseWalkthroughStep.md#fullscreen) 18 | - [identifier](IUseWalkthroughStep.md#identifier) 19 | - [layoutAdjustments](IUseWalkthroughStep.md#layoutadjustments) 20 | - [layoutLock](IUseWalkthroughStep.md#layoutlock) 21 | - [maskAllowInteraction](IUseWalkthroughStep.md#maskallowinteraction) 22 | - [number](IUseWalkthroughStep.md#number) 23 | - [onPressBackdrop](IUseWalkthroughStep.md#onpressbackdrop) 24 | - [onPressMask](IUseWalkthroughStep.md#onpressmask) 25 | - [overlayComponentKey](IUseWalkthroughStep.md#overlaycomponentkey) 26 | - [overlayComponentProps](IUseWalkthroughStep.md#overlaycomponentprops) 27 | 28 | ### Methods 29 | 30 | - [measureMask](IUseWalkthroughStep.md#measuremask) 31 | - [onBackground](IUseWalkthroughStep.md#onbackground) 32 | - [onFinish](IUseWalkthroughStep.md#onfinish) 33 | - [onStart](IUseWalkthroughStep.md#onstart) 34 | 35 | ## Properties 36 | 37 | ### OverlayComponent 38 | 39 | • `Optional` **OverlayComponent**: `ComponentType`<[`IOverlayComponentProps`](IOverlayComponentProps.md)\> 40 | 41 | #### Inherited from 42 | 43 | PartialBy.OverlayComponent 44 | 45 | #### Defined in 46 | 47 | [index.tsx:124](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L124) 48 | 49 | ___ 50 | 51 | ### enableHardwareBack 52 | 53 | • `Optional` **enableHardwareBack**: `boolean` \| `EnableHardwareBackFunction` 54 | 55 | #### Inherited from 56 | 57 | PartialBy.enableHardwareBack 58 | 59 | #### Defined in 60 | 61 | [index.tsx:130](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L130) 62 | 63 | ___ 64 | 65 | ### fullScreen 66 | 67 | • `Optional` **fullScreen**: `boolean` 68 | 69 | #### Inherited from 70 | 71 | PartialBy.fullScreen 72 | 73 | #### Defined in 74 | 75 | [index.tsx:125](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L125) 76 | 77 | ___ 78 | 79 | ### identifier 80 | 81 | • `Optional` **identifier**: `string` 82 | 83 | #### Inherited from 84 | 85 | PartialBy.identifier 86 | 87 | #### Defined in 88 | 89 | [index.tsx:121](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L121) 90 | 91 | ___ 92 | 93 | ### layoutAdjustments 94 | 95 | • `Optional` **layoutAdjustments**: `ILayoutAdjustments` 96 | 97 | #### Inherited from 98 | 99 | PartialBy.layoutAdjustments 100 | 101 | #### Defined in 102 | 103 | [index.tsx:126](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L126) 104 | 105 | ___ 106 | 107 | ### layoutLock 108 | 109 | • `Optional` **layoutLock**: `boolean` 110 | 111 | #### Inherited from 112 | 113 | PartialBy.layoutLock 114 | 115 | #### Defined in 116 | 117 | [index.tsx:129](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L129) 118 | 119 | ___ 120 | 121 | ### maskAllowInteraction 122 | 123 | • `Optional` **maskAllowInteraction**: `boolean` 124 | 125 | #### Inherited from 126 | 127 | PartialBy.maskAllowInteraction 128 | 129 | #### Defined in 130 | 131 | [index.tsx:547](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L547) 132 | 133 | ___ 134 | 135 | ### number 136 | 137 | • **number**: `number` 138 | 139 | #### Inherited from 140 | 141 | PartialBy.number 142 | 143 | #### Defined in 144 | 145 | [index.tsx:120](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L120) 146 | 147 | ___ 148 | 149 | ### onPressBackdrop 150 | 151 | • `Optional` **onPressBackdrop**: `OnPressWithContextType` 152 | 153 | #### Inherited from 154 | 155 | PartialBy.onPressBackdrop 156 | 157 | #### Defined in 158 | 159 | [index.tsx:135](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L135) 160 | 161 | ___ 162 | 163 | ### onPressMask 164 | 165 | • `Optional` **onPressMask**: `OnPressWithContextType` 166 | 167 | #### Inherited from 168 | 169 | PartialBy.onPressMask 170 | 171 | #### Defined in 172 | 173 | [index.tsx:134](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L134) 174 | 175 | ___ 176 | 177 | ### overlayComponentKey 178 | 179 | • `Optional` **overlayComponentKey**: `string` 180 | 181 | #### Inherited from 182 | 183 | PartialBy.overlayComponentKey 184 | 185 | #### Defined in 186 | 187 | [index.tsx:122](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L122) 188 | 189 | ___ 190 | 191 | ### overlayComponentProps 192 | 193 | • `Optional` **overlayComponentProps**: `any` 194 | 195 | #### Inherited from 196 | 197 | PartialBy.overlayComponentProps 198 | 199 | #### Defined in 200 | 201 | [index.tsx:123](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L123) 202 | 203 | ## Methods 204 | 205 | ### measureMask 206 | 207 | ▸ `Optional` **measureMask**(): `any` 208 | 209 | #### Returns 210 | 211 | `any` 212 | 213 | #### Inherited from 214 | 215 | PartialBy.measureMask 216 | 217 | #### Defined in 218 | 219 | [index.tsx:137](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L137) 220 | 221 | ___ 222 | 223 | ### onBackground 224 | 225 | ▸ `Optional` **onBackground**(): `any` 226 | 227 | #### Returns 228 | 229 | `any` 230 | 231 | #### Inherited from 232 | 233 | PartialBy.onBackground 234 | 235 | #### Defined in 236 | 237 | [index.tsx:133](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L133) 238 | 239 | ___ 240 | 241 | ### onFinish 242 | 243 | ▸ `Optional` **onFinish**(`props`): `any` 244 | 245 | #### Parameters 246 | 247 | | Name | Type | 248 | | :------ | :------ | 249 | | `props` | [`IWalkthroughCallback`](IWalkthroughCallback.md) | 250 | 251 | #### Returns 252 | 253 | `any` 254 | 255 | #### Inherited from 256 | 257 | PartialBy.onFinish 258 | 259 | #### Defined in 260 | 261 | [index.tsx:132](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L132) 262 | 263 | ___ 264 | 265 | ### onStart 266 | 267 | ▸ `Optional` **onStart**(`props`): `any` 268 | 269 | #### Parameters 270 | 271 | | Name | Type | 272 | | :------ | :------ | 273 | | `props` | [`IWalkthroughCallback`](IWalkthroughCallback.md) | 274 | 275 | #### Returns 276 | 277 | `any` 278 | 279 | #### Inherited from 280 | 281 | PartialBy.onStart 282 | 283 | #### Defined in 284 | 285 | [index.tsx:131](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L131) 286 | -------------------------------------------------------------------------------- /docs/interfaces/IWalkthroughCallback.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](../README.md) / [Exports](../modules.md) / IWalkthroughCallback 2 | 3 | # Interface: IWalkthroughCallback 4 | 5 | ## Table of contents 6 | 7 | ### Properties 8 | 9 | - [time](IWalkthroughCallback.md#time) 10 | 11 | ## Properties 12 | 13 | ### time 14 | 15 | • **time**: `Date` 16 | 17 | #### Defined in 18 | 19 | [index.tsx:109](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L109) 20 | -------------------------------------------------------------------------------- /docs/interfaces/IWalkthroughContext.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](../README.md) / [Exports](../modules.md) / IWalkthroughContext 2 | 3 | # Interface: IWalkthroughContext 4 | 5 | ## Hierarchy 6 | 7 | - [`IWalkthroughFunctions`](IWalkthroughFunctions.md) 8 | 9 | ↳ **`IWalkthroughContext`** 10 | 11 | ↳↳ [`IOverlayComponentProps`](IOverlayComponentProps.md) 12 | 13 | ## Table of contents 14 | 15 | ### Properties 16 | 17 | - [allSteps](IWalkthroughContext.md#allsteps) 18 | - [backdropColor](IWalkthroughContext.md#backdropcolor) 19 | - [currentStepNumber](IWalkthroughContext.md#currentstepnumber) 20 | - [currentSteps](IWalkthroughContext.md#currentsteps) 21 | - [debug](IWalkthroughContext.md#debug) 22 | - [isReady](IWalkthroughContext.md#isready) 23 | - [isWalkthroughOn](IWalkthroughContext.md#iswalkthroughon) 24 | - [transitionDuration](IWalkthroughContext.md#transitionduration) 25 | 26 | ### Methods 27 | 28 | - [animateNextLayoutChange](IWalkthroughContext.md#animatenextlayoutchange) 29 | - [goTo](IWalkthroughContext.md#goto) 30 | - [next](IWalkthroughContext.md#next) 31 | - [previous](IWalkthroughContext.md#previous) 32 | - [registerStep](IWalkthroughContext.md#registerstep) 33 | - [setBackdropColor](IWalkthroughContext.md#setbackdropcolor) 34 | - [setTransitionDuration](IWalkthroughContext.md#settransitionduration) 35 | - [start](IWalkthroughContext.md#start) 36 | - [stop](IWalkthroughContext.md#stop) 37 | - [updateStep](IWalkthroughContext.md#updatestep) 38 | - [useIsFocused](IWalkthroughContext.md#useisfocused) 39 | 40 | ## Properties 41 | 42 | ### allSteps 43 | 44 | • **allSteps**: [`IWalkthroughStep`](IWalkthroughStep.md)[] 45 | 46 | #### Defined in 47 | 48 | [index.tsx:81](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L81) 49 | 50 | ___ 51 | 52 | ### backdropColor 53 | 54 | • **backdropColor**: `string` 55 | 56 | #### Defined in 57 | 58 | [index.tsx:82](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L82) 59 | 60 | ___ 61 | 62 | ### currentStepNumber 63 | 64 | • **currentStepNumber**: `number` 65 | 66 | #### Defined in 67 | 68 | [index.tsx:88](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L88) 69 | 70 | ___ 71 | 72 | ### currentSteps 73 | 74 | • **currentSteps**: [`IWalkthroughStep`](IWalkthroughStep.md)[] 75 | 76 | #### Defined in 77 | 78 | [index.tsx:80](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L80) 79 | 80 | ___ 81 | 82 | ### debug 83 | 84 | • **debug**: `boolean` 85 | 86 | #### Defined in 87 | 88 | [index.tsx:85](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L85) 89 | 90 | ___ 91 | 92 | ### isReady 93 | 94 | • **isReady**: `boolean` 95 | 96 | #### Defined in 97 | 98 | [index.tsx:87](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L87) 99 | 100 | ___ 101 | 102 | ### isWalkthroughOn 103 | 104 | • **isWalkthroughOn**: `boolean` 105 | 106 | #### Defined in 107 | 108 | [index.tsx:86](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L86) 109 | 110 | ___ 111 | 112 | ### transitionDuration 113 | 114 | • **transitionDuration**: `number` 115 | 116 | #### Defined in 117 | 118 | [index.tsx:83](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L83) 119 | 120 | ## Methods 121 | 122 | ### animateNextLayoutChange 123 | 124 | ▸ **animateNextLayoutChange**(`duration?`): `any` 125 | 126 | #### Parameters 127 | 128 | | Name | Type | 129 | | :------ | :------ | 130 | | `duration?` | `number` | 131 | 132 | #### Returns 133 | 134 | `any` 135 | 136 | #### Defined in 137 | 138 | [index.tsx:84](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L84) 139 | 140 | ___ 141 | 142 | ### goTo 143 | 144 | ▸ **goTo**(`number`): `any` 145 | 146 | #### Parameters 147 | 148 | | Name | Type | 149 | | :------ | :------ | 150 | | `number` | `number` | 151 | 152 | #### Returns 153 | 154 | `any` 155 | 156 | #### Inherited from 157 | 158 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[goTo](IWalkthroughFunctions.md#goto) 159 | 160 | #### Defined in 161 | 162 | [index.tsx:73](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L73) 163 | 164 | ___ 165 | 166 | ### next 167 | 168 | ▸ **next**(): `any` 169 | 170 | #### Returns 171 | 172 | `any` 173 | 174 | #### Inherited from 175 | 176 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[next](IWalkthroughFunctions.md#next) 177 | 178 | #### Defined in 179 | 180 | [index.tsx:72](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L72) 181 | 182 | ___ 183 | 184 | ### previous 185 | 186 | ▸ **previous**(): `any` 187 | 188 | #### Returns 189 | 190 | `any` 191 | 192 | #### Inherited from 193 | 194 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[previous](IWalkthroughFunctions.md#previous) 195 | 196 | #### Defined in 197 | 198 | [index.tsx:74](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L74) 199 | 200 | ___ 201 | 202 | ### registerStep 203 | 204 | ▸ **registerStep**(`step`): `any` 205 | 206 | #### Parameters 207 | 208 | | Name | Type | 209 | | :------ | :------ | 210 | | `step` | [`IWalkthroughStep`](IWalkthroughStep.md) | 211 | 212 | #### Returns 213 | 214 | `any` 215 | 216 | #### Inherited from 217 | 218 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[registerStep](IWalkthroughFunctions.md#registerstep) 219 | 220 | #### Defined in 221 | 222 | [index.tsx:68](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L68) 223 | 224 | ___ 225 | 226 | ### setBackdropColor 227 | 228 | ▸ **setBackdropColor**(`color`): `any` 229 | 230 | #### Parameters 231 | 232 | | Name | Type | 233 | | :------ | :------ | 234 | | `color` | `string` | 235 | 236 | #### Returns 237 | 238 | `any` 239 | 240 | #### Inherited from 241 | 242 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[setBackdropColor](IWalkthroughFunctions.md#setbackdropcolor) 243 | 244 | #### Defined in 245 | 246 | [index.tsx:76](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L76) 247 | 248 | ___ 249 | 250 | ### setTransitionDuration 251 | 252 | ▸ **setTransitionDuration**(`duration`): `any` 253 | 254 | #### Parameters 255 | 256 | | Name | Type | 257 | | :------ | :------ | 258 | | `duration` | `number` | 259 | 260 | #### Returns 261 | 262 | `any` 263 | 264 | #### Inherited from 265 | 266 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[setTransitionDuration](IWalkthroughFunctions.md#settransitionduration) 267 | 268 | #### Defined in 269 | 270 | [index.tsx:75](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L75) 271 | 272 | ___ 273 | 274 | ### start 275 | 276 | ▸ **start**(): `any` 277 | 278 | #### Returns 279 | 280 | `any` 281 | 282 | #### Inherited from 283 | 284 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[start](IWalkthroughFunctions.md#start) 285 | 286 | #### Defined in 287 | 288 | [index.tsx:70](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L70) 289 | 290 | ___ 291 | 292 | ### stop 293 | 294 | ▸ **stop**(): `any` 295 | 296 | #### Returns 297 | 298 | `any` 299 | 300 | #### Inherited from 301 | 302 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[stop](IWalkthroughFunctions.md#stop) 303 | 304 | #### Defined in 305 | 306 | [index.tsx:71](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L71) 307 | 308 | ___ 309 | 310 | ### updateStep 311 | 312 | ▸ **updateStep**(`identifier`, `step`): `any` 313 | 314 | #### Parameters 315 | 316 | | Name | Type | 317 | | :------ | :------ | 318 | | `identifier` | `any` | 319 | | `step` | `Partial`<[`IWalkthroughStep`](IWalkthroughStep.md)\> | 320 | 321 | #### Returns 322 | 323 | `any` 324 | 325 | #### Inherited from 326 | 327 | [IWalkthroughFunctions](IWalkthroughFunctions.md).[updateStep](IWalkthroughFunctions.md#updatestep) 328 | 329 | #### Defined in 330 | 331 | [index.tsx:69](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L69) 332 | 333 | ___ 334 | 335 | ### useIsFocused 336 | 337 | ▸ `Optional` **useIsFocused**(): `boolean` 338 | 339 | #### Returns 340 | 341 | `boolean` 342 | 343 | #### Defined in 344 | 345 | [index.tsx:89](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L89) 346 | -------------------------------------------------------------------------------- /docs/interfaces/IWalkthroughFunctions.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](../README.md) / [Exports](../modules.md) / IWalkthroughFunctions 2 | 3 | # Interface: IWalkthroughFunctions 4 | 5 | ## Hierarchy 6 | 7 | - **`IWalkthroughFunctions`** 8 | 9 | ↳ [`IWalkthroughContext`](IWalkthroughContext.md) 10 | 11 | ## Table of contents 12 | 13 | ### Methods 14 | 15 | - [goTo](IWalkthroughFunctions.md#goto) 16 | - [next](IWalkthroughFunctions.md#next) 17 | - [previous](IWalkthroughFunctions.md#previous) 18 | - [registerStep](IWalkthroughFunctions.md#registerstep) 19 | - [setBackdropColor](IWalkthroughFunctions.md#setbackdropcolor) 20 | - [setTransitionDuration](IWalkthroughFunctions.md#settransitionduration) 21 | - [start](IWalkthroughFunctions.md#start) 22 | - [stop](IWalkthroughFunctions.md#stop) 23 | - [updateStep](IWalkthroughFunctions.md#updatestep) 24 | 25 | ## Methods 26 | 27 | ### goTo 28 | 29 | ▸ **goTo**(`number`): `any` 30 | 31 | #### Parameters 32 | 33 | | Name | Type | 34 | | :------ | :------ | 35 | | `number` | `number` | 36 | 37 | #### Returns 38 | 39 | `any` 40 | 41 | #### Defined in 42 | 43 | [index.tsx:73](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L73) 44 | 45 | ___ 46 | 47 | ### next 48 | 49 | ▸ **next**(): `any` 50 | 51 | #### Returns 52 | 53 | `any` 54 | 55 | #### Defined in 56 | 57 | [index.tsx:72](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L72) 58 | 59 | ___ 60 | 61 | ### previous 62 | 63 | ▸ **previous**(): `any` 64 | 65 | #### Returns 66 | 67 | `any` 68 | 69 | #### Defined in 70 | 71 | [index.tsx:74](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L74) 72 | 73 | ___ 74 | 75 | ### registerStep 76 | 77 | ▸ **registerStep**(`step`): `any` 78 | 79 | #### Parameters 80 | 81 | | Name | Type | 82 | | :------ | :------ | 83 | | `step` | [`IWalkthroughStep`](IWalkthroughStep.md) | 84 | 85 | #### Returns 86 | 87 | `any` 88 | 89 | #### Defined in 90 | 91 | [index.tsx:68](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L68) 92 | 93 | ___ 94 | 95 | ### setBackdropColor 96 | 97 | ▸ **setBackdropColor**(`color`): `any` 98 | 99 | #### Parameters 100 | 101 | | Name | Type | 102 | | :------ | :------ | 103 | | `color` | `string` | 104 | 105 | #### Returns 106 | 107 | `any` 108 | 109 | #### Defined in 110 | 111 | [index.tsx:76](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L76) 112 | 113 | ___ 114 | 115 | ### setTransitionDuration 116 | 117 | ▸ **setTransitionDuration**(`duration`): `any` 118 | 119 | #### Parameters 120 | 121 | | Name | Type | 122 | | :------ | :------ | 123 | | `duration` | `number` | 124 | 125 | #### Returns 126 | 127 | `any` 128 | 129 | #### Defined in 130 | 131 | [index.tsx:75](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L75) 132 | 133 | ___ 134 | 135 | ### start 136 | 137 | ▸ **start**(): `any` 138 | 139 | #### Returns 140 | 141 | `any` 142 | 143 | #### Defined in 144 | 145 | [index.tsx:70](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L70) 146 | 147 | ___ 148 | 149 | ### stop 150 | 151 | ▸ **stop**(): `any` 152 | 153 | #### Returns 154 | 155 | `any` 156 | 157 | #### Defined in 158 | 159 | [index.tsx:71](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L71) 160 | 161 | ___ 162 | 163 | ### updateStep 164 | 165 | ▸ **updateStep**(`identifier`, `step`): `any` 166 | 167 | #### Parameters 168 | 169 | | Name | Type | 170 | | :------ | :------ | 171 | | `identifier` | `any` | 172 | | `step` | `Partial`<[`IWalkthroughStep`](IWalkthroughStep.md)\> | 173 | 174 | #### Returns 175 | 176 | `any` 177 | 178 | #### Defined in 179 | 180 | [index.tsx:69](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L69) 181 | -------------------------------------------------------------------------------- /docs/interfaces/IWalkthroughProvider.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](../README.md) / [Exports](../modules.md) / IWalkthroughProvider 2 | 3 | # Interface: IWalkthroughProvider 4 | 5 | ## Hierarchy 6 | 7 | - `Partial`<`Pick`<[`IWalkthroughContext`](IWalkthroughContext.md), ``"useIsFocused"`` \| ``"transitionDuration"`` \| ``"backdropColor"`` \| ``"animateNextLayoutChange"`` \| ``"debug"``\>\> 8 | 9 | ↳ **`IWalkthroughProvider`** 10 | 11 | ## Table of contents 12 | 13 | ### Properties 14 | 15 | - [backdropColor](IWalkthroughProvider.md#backdropcolor) 16 | - [children](IWalkthroughProvider.md#children) 17 | - [debug](IWalkthroughProvider.md#debug) 18 | - [enableExperimentalLayoutAnimation](IWalkthroughProvider.md#enableexperimentallayoutanimation) 19 | - [transitionDuration](IWalkthroughProvider.md#transitionduration) 20 | 21 | ### Methods 22 | 23 | - [animateNextLayoutChange](IWalkthroughProvider.md#animatenextlayoutchange) 24 | - [useIsFocused](IWalkthroughProvider.md#useisfocused) 25 | 26 | ## Properties 27 | 28 | ### backdropColor 29 | 30 | • `Optional` **backdropColor**: `string` 31 | 32 | #### Inherited from 33 | 34 | Partial.backdropColor 35 | 36 | #### Defined in 37 | 38 | [index.tsx:82](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L82) 39 | 40 | ___ 41 | 42 | ### children 43 | 44 | • `Optional` **children**: `any` 45 | 46 | #### Defined in 47 | 48 | [index.tsx:411](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L411) 49 | 50 | ___ 51 | 52 | ### debug 53 | 54 | • `Optional` **debug**: `boolean` 55 | 56 | #### Inherited from 57 | 58 | Partial.debug 59 | 60 | #### Defined in 61 | 62 | [index.tsx:85](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L85) 63 | 64 | ___ 65 | 66 | ### enableExperimentalLayoutAnimation 67 | 68 | • `Optional` **enableExperimentalLayoutAnimation**: `boolean` 69 | 70 | #### Defined in 71 | 72 | [index.tsx:410](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L410) 73 | 74 | ___ 75 | 76 | ### transitionDuration 77 | 78 | • `Optional` **transitionDuration**: `number` 79 | 80 | #### Inherited from 81 | 82 | Partial.transitionDuration 83 | 84 | #### Defined in 85 | 86 | [index.tsx:83](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L83) 87 | 88 | ## Methods 89 | 90 | ### animateNextLayoutChange 91 | 92 | ▸ `Optional` **animateNextLayoutChange**(`duration?`): `any` 93 | 94 | #### Parameters 95 | 96 | | Name | Type | 97 | | :------ | :------ | 98 | | `duration?` | `number` | 99 | 100 | #### Returns 101 | 102 | `any` 103 | 104 | #### Inherited from 105 | 106 | Partial.animateNextLayoutChange 107 | 108 | #### Defined in 109 | 110 | [index.tsx:84](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L84) 111 | 112 | ___ 113 | 114 | ### useIsFocused 115 | 116 | ▸ `Optional` **useIsFocused**(): `boolean` 117 | 118 | #### Returns 119 | 120 | `boolean` 121 | 122 | #### Inherited from 123 | 124 | Partial.useIsFocused 125 | 126 | #### Defined in 127 | 128 | [index.tsx:89](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L89) 129 | -------------------------------------------------------------------------------- /docs/interfaces/IWalkthroughStep.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](../README.md) / [Exports](../modules.md) / IWalkthroughStep 2 | 3 | # Interface: IWalkthroughStep 4 | 5 | ## Table of contents 6 | 7 | ### Properties 8 | 9 | - [OverlayComponent](IWalkthroughStep.md#overlaycomponent) 10 | - [enableHardwareBack](IWalkthroughStep.md#enablehardwareback) 11 | - [fullScreen](IWalkthroughStep.md#fullscreen) 12 | - [identifier](IWalkthroughStep.md#identifier) 13 | - [layoutAdjustments](IWalkthroughStep.md#layoutadjustments) 14 | - [layoutLock](IWalkthroughStep.md#layoutlock) 15 | - [mask](IWalkthroughStep.md#mask) 16 | - [number](IWalkthroughStep.md#number) 17 | - [onPressBackdrop](IWalkthroughStep.md#onpressbackdrop) 18 | - [onPressMask](IWalkthroughStep.md#onpressmask) 19 | - [overlayComponentKey](IWalkthroughStep.md#overlaycomponentkey) 20 | - [overlayComponentProps](IWalkthroughStep.md#overlaycomponentprops) 21 | 22 | ### Methods 23 | 24 | - [measureMask](IWalkthroughStep.md#measuremask) 25 | - [onBackground](IWalkthroughStep.md#onbackground) 26 | - [onFinish](IWalkthroughStep.md#onfinish) 27 | - [onStart](IWalkthroughStep.md#onstart) 28 | 29 | ## Properties 30 | 31 | ### OverlayComponent 32 | 33 | • `Optional` **OverlayComponent**: `ComponentType`<[`IOverlayComponentProps`](IOverlayComponentProps.md)\> 34 | 35 | #### Defined in 36 | 37 | [index.tsx:124](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L124) 38 | 39 | ___ 40 | 41 | ### enableHardwareBack 42 | 43 | • `Optional` **enableHardwareBack**: `boolean` \| `EnableHardwareBackFunction` 44 | 45 | #### Defined in 46 | 47 | [index.tsx:130](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L130) 48 | 49 | ___ 50 | 51 | ### fullScreen 52 | 53 | • `Optional` **fullScreen**: `boolean` 54 | 55 | #### Defined in 56 | 57 | [index.tsx:125](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L125) 58 | 59 | ___ 60 | 61 | ### identifier 62 | 63 | • **identifier**: `string` 64 | 65 | #### Defined in 66 | 67 | [index.tsx:121](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L121) 68 | 69 | ___ 70 | 71 | ### layoutAdjustments 72 | 73 | • `Optional` **layoutAdjustments**: `ILayoutAdjustments` 74 | 75 | #### Defined in 76 | 77 | [index.tsx:126](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L126) 78 | 79 | ___ 80 | 81 | ### layoutLock 82 | 83 | • `Optional` **layoutLock**: `boolean` 84 | 85 | #### Defined in 86 | 87 | [index.tsx:129](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L129) 88 | 89 | ___ 90 | 91 | ### mask 92 | 93 | • **mask**: [`IWalkthroughStepMask`](IWalkthroughStepMask.md) 94 | 95 | #### Defined in 96 | 97 | [index.tsx:136](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L136) 98 | 99 | ___ 100 | 101 | ### number 102 | 103 | • **number**: `number` 104 | 105 | #### Defined in 106 | 107 | [index.tsx:120](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L120) 108 | 109 | ___ 110 | 111 | ### onPressBackdrop 112 | 113 | • `Optional` **onPressBackdrop**: `OnPressWithContextType` 114 | 115 | #### Defined in 116 | 117 | [index.tsx:135](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L135) 118 | 119 | ___ 120 | 121 | ### onPressMask 122 | 123 | • `Optional` **onPressMask**: `OnPressWithContextType` 124 | 125 | #### Defined in 126 | 127 | [index.tsx:134](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L134) 128 | 129 | ___ 130 | 131 | ### overlayComponentKey 132 | 133 | • **overlayComponentKey**: `string` 134 | 135 | #### Defined in 136 | 137 | [index.tsx:122](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L122) 138 | 139 | ___ 140 | 141 | ### overlayComponentProps 142 | 143 | • `Optional` **overlayComponentProps**: `any` 144 | 145 | #### Defined in 146 | 147 | [index.tsx:123](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L123) 148 | 149 | ## Methods 150 | 151 | ### measureMask 152 | 153 | ▸ **measureMask**(): `any` 154 | 155 | #### Returns 156 | 157 | `any` 158 | 159 | #### Defined in 160 | 161 | [index.tsx:137](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L137) 162 | 163 | ___ 164 | 165 | ### onBackground 166 | 167 | ▸ `Optional` **onBackground**(): `any` 168 | 169 | #### Returns 170 | 171 | `any` 172 | 173 | #### Defined in 174 | 175 | [index.tsx:133](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L133) 176 | 177 | ___ 178 | 179 | ### onFinish 180 | 181 | ▸ `Optional` **onFinish**(`props`): `any` 182 | 183 | #### Parameters 184 | 185 | | Name | Type | 186 | | :------ | :------ | 187 | | `props` | [`IWalkthroughCallback`](IWalkthroughCallback.md) | 188 | 189 | #### Returns 190 | 191 | `any` 192 | 193 | #### Defined in 194 | 195 | [index.tsx:132](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L132) 196 | 197 | ___ 198 | 199 | ### onStart 200 | 201 | ▸ `Optional` **onStart**(`props`): `any` 202 | 203 | #### Parameters 204 | 205 | | Name | Type | 206 | | :------ | :------ | 207 | | `props` | [`IWalkthroughCallback`](IWalkthroughCallback.md) | 208 | 209 | #### Returns 210 | 211 | `any` 212 | 213 | #### Defined in 214 | 215 | [index.tsx:131](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L131) 216 | -------------------------------------------------------------------------------- /docs/interfaces/IWalkthroughStepMask.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](../README.md) / [Exports](../modules.md) / IWalkthroughStepMask 2 | 3 | # Interface: IWalkthroughStepMask 4 | 5 | ## Table of contents 6 | 7 | ### Properties 8 | 9 | - [allowInteraction](IWalkthroughStepMask.md#allowinteraction) 10 | - [height](IWalkthroughStepMask.md#height) 11 | - [width](IWalkthroughStepMask.md#width) 12 | - [x](IWalkthroughStepMask.md#x) 13 | - [y](IWalkthroughStepMask.md#y) 14 | 15 | ## Properties 16 | 17 | ### allowInteraction 18 | 19 | • `Optional` **allowInteraction**: `boolean` 20 | 21 | #### Defined in 22 | 23 | [index.tsx:64](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L64) 24 | 25 | ___ 26 | 27 | ### height 28 | 29 | • **height**: `number` 30 | 31 | #### Defined in 32 | 33 | [index.tsx:63](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L63) 34 | 35 | ___ 36 | 37 | ### width 38 | 39 | • **width**: `number` 40 | 41 | #### Defined in 42 | 43 | [index.tsx:62](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L62) 44 | 45 | ___ 46 | 47 | ### x 48 | 49 | • **x**: `number` 50 | 51 | #### Defined in 52 | 53 | [index.tsx:60](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L60) 54 | 55 | ___ 56 | 57 | ### y 58 | 59 | • **y**: `number` 60 | 61 | #### Defined in 62 | 63 | [index.tsx:61](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L61) 64 | -------------------------------------------------------------------------------- /docs/modules.md: -------------------------------------------------------------------------------- 1 | [react-native-interactive-walkthrough](README.md) / Exports 2 | 3 | # react-native-interactive-walkthrough 4 | 5 | ## Table of contents 6 | 7 | ### Interfaces 8 | 9 | - [IOverlayComponentProps](interfaces/IOverlayComponentProps.md) 10 | - [IUseWalkthroughStep](interfaces/IUseWalkthroughStep.md) 11 | - [IWalkthroughCallback](interfaces/IWalkthroughCallback.md) 12 | - [IWalkthroughContext](interfaces/IWalkthroughContext.md) 13 | - [IWalkthroughFunctions](interfaces/IWalkthroughFunctions.md) 14 | - [IWalkthroughProvider](interfaces/IWalkthroughProvider.md) 15 | - [IWalkthroughStep](interfaces/IWalkthroughStep.md) 16 | - [IWalkthroughStepMask](interfaces/IWalkthroughStepMask.md) 17 | 18 | ### Variables 19 | 20 | - [WalkthroughProvider](modules.md#walkthroughprovider) 21 | 22 | ### Functions 23 | 24 | - [enableExperimentalLayoutAnimation](modules.md#enableexperimentallayoutanimation) 25 | - [useWalkthrough](modules.md#usewalkthrough) 26 | - [useWalkthroughStep](modules.md#usewalkthroughstep) 27 | 28 | ## Variables 29 | 30 | ### WalkthroughProvider 31 | 32 | • **WalkthroughProvider**: `ForwardRefExoticComponent`<[`IWalkthroughProvider`](interfaces/IWalkthroughProvider.md) & `RefAttributes`<[`IWalkthroughFunctions`](interfaces/IWalkthroughFunctions.md)\>\> 33 | 34 | #### Defined in 35 | 36 | [index.tsx:413](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L413) 37 | 38 | ## Functions 39 | 40 | ### enableExperimentalLayoutAnimation 41 | 42 | ▸ `Const` **enableExperimentalLayoutAnimation**(): `void` 43 | 44 | #### Returns 45 | 46 | `void` 47 | 48 | #### Defined in 49 | 50 | [index.tsx:29](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L29) 51 | 52 | ___ 53 | 54 | ### useWalkthrough 55 | 56 | ▸ `Const` **useWalkthrough**(): [`IWalkthroughContext`](interfaces/IWalkthroughContext.md) 57 | 58 | #### Returns 59 | 60 | [`IWalkthroughContext`](interfaces/IWalkthroughContext.md) 61 | 62 | #### Defined in 63 | 64 | [index.tsx:538](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L538) 65 | 66 | ___ 67 | 68 | ### useWalkthroughStep 69 | 70 | ▸ `Const` **useWalkthroughStep**(`__namedParameters`): `Object` 71 | 72 | #### Parameters 73 | 74 | | Name | Type | 75 | | :------ | :------ | 76 | | `__namedParameters` | [`IUseWalkthroughStep`](interfaces/IUseWalkthroughStep.md) | 77 | 78 | #### Returns 79 | 80 | `Object` 81 | 82 | | Name | Type | 83 | | :------ | :------ | 84 | | `allSteps` | [`IWalkthroughStep`](interfaces/IWalkthroughStep.md)[] | 85 | | `backdropColor` | `string` | 86 | | `currentStepNumber` | `number` | 87 | | `currentSteps` | [`IWalkthroughStep`](interfaces/IWalkthroughStep.md)[] | 88 | | `debug` | `boolean` | 89 | | `isReady` | `boolean` | 90 | | `isVisible` | `boolean` | 91 | | `isWalkthroughOn` | `boolean` | 92 | | `onLayout` | (`event`: `any`) => `void` | 93 | | `onMeasure` | (`_`: `any`, `__`: `any`, `width`: `any`, `height`: `any`, `x`: `any`, `y`: `any`) => `void` | 94 | | `step` | [`IWalkthroughStep`](interfaces/IWalkthroughStep.md) | 95 | | `transitionDuration` | `number` | 96 | | `animateNextLayoutChange` | (`duration?`: `number`) => `any` | 97 | | `goTo` | (`number`: `number`) => `any` | 98 | | `next` | () => `any` | 99 | | `previous` | () => `any` | 100 | | `registerStep` | (`step`: [`IWalkthroughStep`](interfaces/IWalkthroughStep.md)) => `any` | 101 | | `setBackdropColor` | (`color`: `string`) => `any` | 102 | | `setTransitionDuration` | (`duration`: `number`) => `any` | 103 | | `start` | () => `any` | 104 | | `stop` | () => `any` | 105 | | `updateStep` | (`identifier`: `any`, `step`: `Partial`<[`IWalkthroughStep`](interfaces/IWalkthroughStep.md)\>) => `any` | 106 | | `useIsFocused?` | () => `boolean` | 107 | 108 | #### Defined in 109 | 110 | [index.tsx:555](https://github.com/tribefyhq/react-native-walkthrough/blob/d3e0653/src/index.tsx#L555) 111 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-interactive-walkthrough", 3 | "version": "1.0.15", 4 | "description": "Create interactive walkthroughs and onboarding tutorials in react-native.", 5 | "main": "lib/commonjs/index.js", 6 | "react-native": "src/index.tsx", 7 | "module": "lib/module/index.js", 8 | "types": "lib/typescript/index.d.ts", 9 | "files": [ 10 | "src", 11 | "lib" 12 | ], 13 | "scripts": { 14 | "test": "jest", 15 | "typescript": "tsc --noEmit", 16 | "lint": "eslint --ext .js,.ts,.tsx .", 17 | "release": "release-it", 18 | "example": "yarn --cwd example", 19 | "bootstrap": "yarn example && yarn", 20 | "prepare": "bob build" 21 | }, 22 | "publishConfig": { 23 | "registry": "https://registry.npmjs.org/" 24 | }, 25 | "author": "Aryk Grosz ", 26 | "license": "MIT", 27 | "repository": { 28 | "type": "git", 29 | "url": "git+https://github.com/tribefyhq/react-native-interactive-walkthrough.git" 30 | }, 31 | "homepage": "https://github.com/tribefyhq/react-native-interactive-walkthrough#readme", 32 | "bugs": { 33 | "url": "https://github.com/tribefyhq/react-native-interactive-walkthrough/issues" 34 | }, 35 | "keywords": [ 36 | "walkthrough", 37 | "copilot", 38 | "intro", 39 | "tour", 40 | "tribefy", 41 | "react", 42 | "rn", 43 | "react-native", 44 | "javascript", 45 | "tutorial" 46 | ], 47 | "devDependencies": { 48 | "@commitlint/config-conventional": "^13.1.0", 49 | "@expo/vector-icons": "^12.0.5", 50 | "@release-it/conventional-changelog": "^3.0.1", 51 | "@types/react": "^17.0.15", 52 | "@types/react-native": "0.64.12", 53 | "babel-jest": "^27.0.6", 54 | "babel-preset-react-native": "^4.0.0", 55 | "commitlint": "^13.1.0", 56 | "eslint": "^7.31.0", 57 | "eslint-config-satya164": "^3.1.10", 58 | "eslint-plugin-react-native-globals": "^0.1.2", 59 | "husky": "^4.2.5", 60 | "jest": "^27.0.6", 61 | "prettier": "^2.3.2", 62 | "react": "~16.13.1", 63 | "react-native": "~0.63.4", 64 | "react-native-builder-bob": "^0.18.1", 65 | "react-native-pager-view": "^5.0.12", 66 | "react-native-safe-area-context": "^3.3.2", 67 | "release-it": "^14.10.1", 68 | "typedoc": "^0.22.10", 69 | "typedoc-plugin-markdown": "^3.11.8", 70 | "typescript": "^4.3.5" 71 | }, 72 | "dependencies": { 73 | "lodash.sortby": "^4.7.0" 74 | }, 75 | "peerDependencies": { 76 | "react": ">= 16.x.x", 77 | "react-native": ">=0.63.x", 78 | "react-native-safe-area-context": ">= 3.x.x" 79 | }, 80 | "husky": { 81 | "hooks": { 82 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", 83 | "pre-commit": "yarn lint && yarn typescript" 84 | } 85 | }, 86 | "jest": { 87 | "preset": "react-native", 88 | "modulePathIgnorePatterns": [ 89 | "/example/node_modules", 90 | "/lib/" 91 | ] 92 | }, 93 | "react-native-builder-bob": { 94 | "source": "src", 95 | "output": "lib", 96 | "targets": [ 97 | "commonjs", 98 | "module", 99 | [ 100 | "typescript", 101 | { 102 | "project": "tsconfig.build.json" 103 | } 104 | ] 105 | ] 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | useEffect, 3 | useRef, 4 | useState, 5 | useContext, 6 | useCallback, 7 | useImperativeHandle, 8 | forwardRef, 9 | useMemo, 10 | useLayoutEffect, 11 | } from "react"; 12 | import { 13 | BackHandler, 14 | LayoutAnimation, 15 | Platform, 16 | UIManager, 17 | View, 18 | ViewStyle, 19 | Keyboard, 20 | TouchableWithoutFeedback, 21 | } from "react-native"; 22 | import { useSafeAreaFrame } from "react-native-safe-area-context"; 23 | import sortBy from "lodash/sortBy"; 24 | 25 | const isAndroid = Platform.OS === "android"; 26 | 27 | // Convenience method to enable this if it's not already enabled in your app. 28 | // https://reactnative.dev/docs/layoutanimation.html#easeineaseout 29 | const enableExperimentalLayoutAnimation = () => { 30 | if (isAndroid && UIManager.setLayoutAnimationEnabledExperimental) { 31 | UIManager.setLayoutAnimationEnabledExperimental(true); 32 | } 33 | }; 34 | 35 | const useKeyboard = () => { 36 | const [isKeyboardVisible, setKeyboardVisible] = useState(false); 37 | 38 | useEffect(() => { 39 | const keyboardDidShowListener = Keyboard.addListener( 40 | "keyboardDidShow", 41 | () => setKeyboardVisible(true), 42 | ); 43 | const keyboardDidHideListener = Keyboard.addListener( 44 | "keyboardDidHide", 45 | () => setKeyboardVisible(false), 46 | ); 47 | 48 | return () => { 49 | keyboardDidHideListener.remove(); 50 | keyboardDidShowListener.remove(); 51 | }; 52 | }, []); 53 | 54 | return isKeyboardVisible; 55 | }; 56 | 57 | type PartialBy = Omit & Partial>; 58 | 59 | interface IWalkthroughStepMask { 60 | x: number; 61 | y: number; 62 | width: number; 63 | height: number; 64 | allowInteraction?: boolean; 65 | } 66 | 67 | interface IWalkthroughFunctions { 68 | registerStep: (step: IWalkthroughStep) => any; 69 | updateStep: (identifier, step: Partial) => any; 70 | start: () => any; 71 | stop: () => any; 72 | next: () => any; 73 | goTo: (number: number) => any; 74 | previous: () => any; 75 | setTransitionDuration: (duration: number) => any; 76 | setBackdropColor: (color: string) => any; 77 | } 78 | 79 | interface IWalkthroughContext extends IWalkthroughFunctions { 80 | currentSteps: IWalkthroughStep[]; 81 | allSteps: IWalkthroughStep[]; 82 | backdropColor: string; 83 | transitionDuration: number; 84 | animateNextLayoutChange: (duration?: number) => any; 85 | debug: boolean; 86 | isWalkthroughOn: boolean; 87 | isReady: boolean; 88 | currentStepNumber: number; 89 | useIsFocused?: () => boolean; 90 | } 91 | 92 | interface ILayoutAdjustments { 93 | minX?: number; 94 | minY?: number; 95 | maxX?: number; 96 | maxY?: number; 97 | 98 | addX?: number; 99 | addY?: number; 100 | addWidth?: number; 101 | addHeight?: number; 102 | x?: number; 103 | y?: number; 104 | width?: number; 105 | height?: number; 106 | addPadding?: number; 107 | } 108 | 109 | interface IOverlayComponentProps extends IWalkthroughContext { 110 | step: IWalkthroughStep; // pass through the step as well 111 | } 112 | 113 | interface IWalkthroughCallback { 114 | time: Date; 115 | } 116 | 117 | type EnableHardwareBackFunction = ( 118 | props?: Pick, 119 | ) => any; 120 | type OnPressWithContextType = (context?: IWalkthroughContext) => any; 121 | // TS will complain that we don't hav ea value in createContext but we actually want it null if not inside the provider. 122 | // @ts-ignore 123 | const WalkthroughContext = React.createContext(); 124 | interface IWalkthroughStep { 125 | number: number; 126 | identifier: string; 127 | overlayComponentKey: string; 128 | // Pass through props to pass into the component. Make sure the props object does not remove keys or change order, 129 | // as it will cause an error when checking for a chance in values amongst the object values. 130 | overlayComponentProps?: any; 131 | OverlayComponent?: React.ComponentType; 132 | fullScreen?: boolean; 133 | layoutAdjustments?: ILayoutAdjustments; 134 | // Only allow the onLayout to get set once. This is useful on for example, scrollable containers where the position 135 | // on the page can change when you scroll. 136 | layoutLock?: boolean; 137 | enableHardwareBack?: boolean | EnableHardwareBackFunction; // android only - Pass in the step number to go back to that step 138 | onStart?: (props: IWalkthroughCallback) => any; 139 | onFinish?: (props: IWalkthroughCallback) => any; 140 | onBackground?: () => any; 141 | onPressMask?: OnPressWithContextType; 142 | onPressBackdrop?: OnPressWithContextType; 143 | mask: IWalkthroughStepMask; 144 | computedMask?: IWalkthroughStepMask; 145 | measureMask: () => any; 146 | } 147 | 148 | interface IOverlayProps { 149 | key: string; 150 | style: ViewStyle; 151 | onPress?: OnPressWithContextType; 152 | } 153 | const createLogger = (debug) => (number: number, str: string) => 154 | debug ? console.log(`[WT][${number}]: ${str}`) : undefined; 155 | const WalkthroughDisplayer = () => { 156 | const context = useContext(WalkthroughContext); 157 | const { 158 | currentSteps, 159 | currentStepNumber, 160 | backdropColor, 161 | transitionDuration, 162 | animateNextLayoutChange, 163 | isWalkthroughOn, 164 | previous, 165 | goTo, 166 | debug, 167 | } = context; 168 | 169 | const logStep = createLogger(debug); 170 | 171 | const lastStepsRef = useRef([]); 172 | 173 | if (isAndroid) { 174 | const isKeyboardOpen = useKeyboard(); 175 | useEffect( 176 | () => 177 | isWalkthroughOn 178 | ? BackHandler.addEventListener("hardwareBackPress", () => { 179 | if (isKeyboardOpen) { 180 | return false; 181 | } else { 182 | const backEnabled = currentSteps.filter( 183 | (s) => s.enableHardwareBack, 184 | ); 185 | if (backEnabled.length) { 186 | const functions = backEnabled 187 | .map((s) => s.enableHardwareBack) 188 | .filter( 189 | (x) => typeof x === "function", 190 | ) as EnableHardwareBackFunction[]; 191 | if (!functions.length) { 192 | // if no function was specified, just do the default previous 193 | functions.push(() => previous()); 194 | } 195 | functions.forEach((f) => f({ goTo, previous })); 196 | } 197 | 198 | return true; // return true to block the back button which we always do when the walkthrough is on. 199 | } 200 | }).remove 201 | : () => undefined, 202 | [isWalkthroughOn, isKeyboardOpen, currentSteps, previous, goTo], 203 | ); 204 | } 205 | 206 | useLayoutEffect( 207 | () => { 208 | const time = new Date(); 209 | // Only mark finish if we are advancing to the next step (going backwards doesn't count as marking off this step). 210 | // Or if we are at the end and currentStepNumber is undefined 211 | if ( 212 | lastStepsRef.current.length && 213 | (typeof currentStepNumber !== "number" || 214 | lastStepsRef.current[0].number < currentStepNumber) 215 | ) { 216 | logStep( 217 | lastStepsRef.current[0].number, 218 | `Finished at ${time.getTime()}`, 219 | ); 220 | lastStepsRef.current.forEach((step) => step.onFinish?.({ time })); 221 | } 222 | 223 | if (currentSteps.length) { 224 | animateNextLayoutChange(transitionDuration); 225 | 226 | logStep(currentStepNumber, `Started at ${time.getTime()}`); 227 | currentSteps.forEach((step) => { 228 | step.onStart?.({ time }); 229 | step.measureMask(); 230 | }); 231 | } 232 | 233 | lastStepsRef.current = currentSteps; 234 | }, 235 | // Need to do it based on currentSteps, since that changes when screens mount and things get added to the steps. 236 | [currentSteps.map((s) => s.identifier).join("|")], 237 | ); 238 | 239 | const overlayProps = useMemo( 240 | () => { 241 | // We build the views from top to bottom 242 | const sortedCurrentSteps: IWalkthroughStep[] = sortBy( 243 | currentSteps, 244 | (step) => step.mask.y, 245 | ); 246 | const arr: IOverlayProps[] = []; 247 | let markerY = 0; 248 | 249 | sortedCurrentSteps.forEach((step, i) => { 250 | const computedMask = step.computedMask; 251 | 252 | // Rectange on the top across the whole screen 253 | arr.push({ 254 | key: `topRect-${i}`, 255 | onPress: step.onPressBackdrop, 256 | style: { 257 | backgroundColor: backdropColor, 258 | top: markerY, 259 | left: 0, 260 | right: 0, 261 | height: computedMask.y - markerY, 262 | ...(debug ? { borderWidth: 1, borderColor: "red" } : {}), 263 | }, 264 | }); 265 | // Rectange on the left side. 266 | arr.push({ 267 | key: `leftRect-${i}`, 268 | onPress: step.onPressBackdrop, 269 | style: { 270 | backgroundColor: backdropColor, 271 | top: computedMask.y, 272 | left: 0, 273 | width: computedMask.x, 274 | height: computedMask.height, 275 | ...(debug ? { borderWidth: 1, borderColor: "blue" } : {}), 276 | }, 277 | }); 278 | // Rectange on the right side. 279 | arr.push({ 280 | key: `rightRect-${i}`, 281 | onPress: step.onPressBackdrop, 282 | style: { 283 | backgroundColor: backdropColor, 284 | top: computedMask.y, 285 | left: computedMask.x + computedMask.width, 286 | right: 0, 287 | height: computedMask.height, 288 | ...(debug ? { borderWidth: 1, borderColor: "green" } : {}), 289 | }, 290 | }); 291 | // The bottom rectange up to the next component (or bottom of the screen) 292 | const nextStep = 293 | i + 1 < sortedCurrentSteps.length 294 | ? sortedCurrentSteps[i + 1] 295 | : undefined; 296 | if (!nextStep) { 297 | const top = computedMask.y + computedMask.height; 298 | arr.push({ 299 | // We only have one of these (at the end) so want to give this the same key so it can be reused in the animation. 300 | key: `bottomRect`, 301 | onPress: step.onPressBackdrop, 302 | style: { 303 | backgroundColor: backdropColor, 304 | top, 305 | left: 0, 306 | right: 0, 307 | bottom: 0, 308 | ...(debug ? { borderWidth: 1, borderColor: "orange" } : {}), 309 | }, 310 | }); 311 | } 312 | 313 | // If we aren't allowing interaction on the highlighted region, then just put a view over that as well so its not pressable. 314 | if (!computedMask.allowInteraction) { 315 | arr.push({ 316 | key: `coverRect-${i}`, 317 | onPress: step.onPressMask, 318 | style: { 319 | top: computedMask.y, 320 | left: computedMask.x, 321 | width: computedMask.width, 322 | height: computedMask.height, 323 | // on Android (not sure if all), if we have an empty View without a background, it will not take the 324 | // touchevents. Rather then experimenting with wrapping it with TouchableWithoutFeedback, etc, we simply 325 | // give it an *extremely* subtle background that's essentially not noticeable. This helps it steal the touch events. 326 | ...(isAndroid 327 | ? { backgroundColor: "#FFFFFF01", opacity: 0.1 } 328 | : {}), 329 | // Add a background color so in testing you can see that there is something over it. 330 | ...(debug 331 | ? { 332 | borderWidth: 1, 333 | borderColor: "forestgreen", 334 | backgroundColor: "#0000FF33", 335 | } 336 | : {}), 337 | }, 338 | }); 339 | } 340 | markerY = computedMask.y + computedMask.height; 341 | }); 342 | return arr; 343 | }, 344 | [currentSteps, backdropColor, debug], 345 | ); 346 | 347 | return ( 348 | <> 349 | {overlayProps.map(({ key, onPress, style }) => { 350 | let content = ( 351 | 352 | ); 353 | 354 | if (onPress) { 355 | content = ( 356 | onPress(context)} 359 | > 360 | {content} 361 | 362 | ); 363 | } 364 | 365 | return content; 366 | })} 367 | {currentSteps.map((s) => 368 | s.OverlayComponent ? ( 369 | 375 | ) : null, 376 | )} 377 | 378 | ); 379 | }; 380 | 381 | const defaultAnimateNextLayoutChange = (duration: number) => 382 | LayoutAnimation.configureNext({ 383 | duration, 384 | create: { 385 | type: LayoutAnimation.Types.easeInEaseOut, 386 | property: LayoutAnimation.Properties.opacity, 387 | }, 388 | update: { 389 | type: LayoutAnimation.Types.easeInEaseOut, 390 | property: LayoutAnimation.Properties.scaleXY, 391 | }, 392 | }); 393 | 394 | interface IWalkthroughProvider 395 | extends Partial< 396 | Pick< 397 | IWalkthroughContext, 398 | | "useIsFocused" 399 | | "transitionDuration" 400 | | "backdropColor" 401 | | "animateNextLayoutChange" 402 | | "debug" 403 | > 404 | > { 405 | enableExperimentalLayoutAnimation?: boolean; 406 | children?: any; 407 | } 408 | const WalkthroughProvider = forwardRef< 409 | IWalkthroughFunctions, 410 | IWalkthroughProvider 411 | >( 412 | ( 413 | { 414 | useIsFocused = () => true, 415 | transitionDuration: _transitionDuration = 300, 416 | backdropColor: _backdropColor = "#000000DA", 417 | animateNextLayoutChange = defaultAnimateNextLayoutChange, 418 | enableExperimentalLayoutAnimation: _enableExperimentalLayoutAnimation, 419 | debug, 420 | children, 421 | }, 422 | ref, 423 | ) => { 424 | const [transitionDuration, setTransitionDuration] = 425 | useState(_transitionDuration); 426 | const [backdropColor, setBackdropColor] = useState(_backdropColor); 427 | const [steps, setSteps] = useState([]); 428 | const [currentStepNumber, setCurrentStepNumber] = useState(); 429 | 430 | const isWalkthroughOn = Boolean(typeof currentStepNumber === "number"); 431 | const isReady = useMemo(() => steps.some((s) => s.number === 1), [steps]); 432 | 433 | if (_enableExperimentalLayoutAnimation) { 434 | useEffect(enableExperimentalLayoutAnimation, []); 435 | } 436 | 437 | const currentSteps = useMemo( 438 | () => 439 | isWalkthroughOn 440 | ? steps.filter((s) => s.number === currentStepNumber) 441 | : [], 442 | [isWalkthroughOn, currentStepNumber, steps], 443 | ); 444 | 445 | const registerStep = useCallback( 446 | (step) => 447 | setSteps((steps) => 448 | sortBy( 449 | [step, ...steps.filter((s) => s.identifier !== step.identifier)], 450 | "number", 451 | ), 452 | ), 453 | [], 454 | ); 455 | 456 | const updateStep = useCallback( 457 | (identifier, step) => 458 | setSteps((steps) => { 459 | const oldStep = steps.find((s) => s.identifier === identifier); 460 | return sortBy( 461 | [ 462 | { ...oldStep, ...step }, 463 | ...steps.filter((s) => s.identifier !== identifier), 464 | ], 465 | "number", 466 | ); 467 | }), 468 | [], 469 | ); 470 | 471 | const next = useCallback( 472 | () => setCurrentStepNumber((x) => (x || 0) + 1), 473 | [setCurrentStepNumber], 474 | ); 475 | 476 | const previous = useCallback( 477 | () => setCurrentStepNumber((x) => (x ? x - 1 : 0)), 478 | [setCurrentStepNumber], 479 | ); 480 | 481 | const goTo: IWalkthroughFunctions["goTo"] = setCurrentStepNumber; 482 | 483 | const start = useCallback(() => { 484 | if (steps.length) { 485 | const step = steps[0]; // already ordered so take the first one 486 | setCurrentStepNumber(step.number); 487 | } 488 | }, [steps, setCurrentStepNumber]); 489 | 490 | const stop = useCallback( 491 | () => setCurrentStepNumber(undefined), 492 | [steps, setCurrentStepNumber], 493 | ); 494 | 495 | const functions: IWalkthroughFunctions = { 496 | registerStep, 497 | updateStep, 498 | start, 499 | stop, 500 | next, 501 | previous, 502 | goTo, 503 | setTransitionDuration, 504 | setBackdropColor, 505 | }; 506 | 507 | useImperativeHandle(ref, () => functions); 508 | 509 | return ( 510 | 525 | {children} 526 | {/*@aryk - If we have no steps registered, don't mount the displayer */} 527 | {Boolean(steps.length) && } 528 | 529 | ); 530 | }, 531 | ); 532 | 533 | const useWalkthrough = () => { 534 | const context = useContext(WalkthroughContext); 535 | if (!context) { 536 | throw "Make sure that this is called as a child of WalkthroughProvider."; 537 | } 538 | return context; 539 | }; 540 | 541 | interface IUseWalkthroughStepStrict extends Omit { 542 | maskAllowInteraction?: boolean; 543 | } 544 | interface IUseWalkthroughStep 545 | extends PartialBy< 546 | IUseWalkthroughStepStrict, 547 | "identifier" | "overlayComponentKey" | "measureMask" 548 | > {} 549 | 550 | const useWalkthroughStep = ({ 551 | fullScreen, 552 | identifier, 553 | number, 554 | ...props 555 | }: IUseWalkthroughStep) => { 556 | const context = useWalkthrough(); 557 | 558 | const targetRef = useRef(); 559 | 560 | // On unmount, make sure to empty the targetRef. It might still be stored in the "steps" on the WalkthroughProvider. 561 | useEffect( 562 | () => () => { 563 | targetRef.current = undefined; 564 | }, 565 | [], 566 | ); 567 | 568 | // Better to provide an identifier, especially if you have multiple overlays at a single Step, then this 569 | // won't work. 570 | identifier = identifier || number.toString(); 571 | 572 | const { 573 | registerStep, 574 | allSteps, 575 | currentStepNumber, 576 | debug, 577 | stop, 578 | useIsFocused, 579 | } = context; 580 | 581 | const step = useMemo( 582 | () => allSteps.find((s) => s.identifier === identifier), 583 | [identifier, allSteps], 584 | ); 585 | 586 | // We want the step to be registered if the props change so that the render item reflects the new overlayComponentProps 587 | useEffect( 588 | () => { 589 | if (step && props.overlayComponentProps) { 590 | registerStep({ 591 | ...step, 592 | overlayComponentProps: props.overlayComponentProps, 593 | }) 594 | } 595 | }, 596 | // Do not include step or any other dependency, will cause an infinite loop 597 | Object.values(props.overlayComponentProps || {}), 598 | ) 599 | 600 | const isFocused = useIsFocused(); 601 | const wasVisibleRef = useRef(false); 602 | useEffect( 603 | () => { 604 | if (currentStepNumber === number) { 605 | if (isFocused) { 606 | wasVisibleRef.current = true; 607 | // If we had this step visible on a screen, but now for some reason not anymore (maybe they navigated for a notification) 608 | // then we basically reset the tutorial and stop it so it doesn't stay on the screen as they navigate. 609 | } else if (wasVisibleRef.current) { 610 | stop(); 611 | } 612 | // When the walkthrough is stopped, we need to reset this flag. 613 | } else if (currentStepNumber === undefined) { 614 | wasVisibleRef.current = false; 615 | } 616 | }, 617 | [currentStepNumber, isFocused] 618 | ); 619 | 620 | // https://stackoverflow.com/a/64882955/7180620 621 | const registerStepWithProps = useCallback( 622 | (maskProps: IWalkthroughStepMask) => { 623 | const { maskAllowInteraction, ...stepProps } = propsRef.current; 624 | logStep(stepProps.number, `Setting mask: ${JSON.stringify(maskProps)}`); 625 | 626 | const mask: IWalkthroughStepMask = { 627 | allowInteraction: maskAllowInteraction, 628 | ...maskProps, 629 | }; 630 | 631 | let step: IWalkthroughStep = { 632 | ...stepProps, 633 | mask, 634 | computedMask: mask, // default, overwrite in next block maybe... 635 | }; 636 | 637 | if (step.layoutAdjustments) { 638 | const la = step.layoutAdjustments; 639 | step = { 640 | ...step, 641 | computedMask: { 642 | allowInteraction: mask.allowInteraction, 643 | x: Math.min(Math.max(la.minX || -Number.POSITIVE_INFINITY, (la.x ?? step.mask.x) + (la.addX ?? -(la.addPadding || 0))), Number.POSITIVE_INFINITY), 644 | y: Math.min(Math.max(la.minY || -Number.POSITIVE_INFINITY, (la.y ?? step.mask.y) + (la.addY ?? -(la.addPadding || 0))), Number.POSITIVE_INFINITY), 645 | width: 646 | (la.width ?? step.mask.width) + 647 | (la.addWidth ?? (la.addPadding || 0) * 2), 648 | height: 649 | (la.height ?? step.mask.height) + 650 | (la.addHeight ?? (la.addPadding || 0) * 2), 651 | }, 652 | } 653 | } 654 | 655 | registerStep(step); 656 | }, 657 | [registerStep], 658 | ); 659 | 660 | const onMeasure = useCallback( 661 | (_, __, width, height, x, y) => 662 | registerStepWithProps({ width, height, x, y }), 663 | [registerStepWithProps], 664 | ); 665 | 666 | const logStep = createLogger(debug); 667 | 668 | const propsRef = useRef(); 669 | useEffect(() => { 670 | propsRef.current = { 671 | identifier, 672 | number, 673 | measureMask: () => { 674 | if (targetRef.current) { 675 | targetRef.current.measure((_, __, width, height, x, y) => { 676 | const newPosition = 677 | step && 678 | // If component is unmounted, then this will be undefined 679 | width && 680 | height && 681 | x && 682 | y && 683 | (step.mask.x !== x || 684 | step.mask.y !== y || 685 | step.mask.width !== width || 686 | step.mask.height !== height); 687 | 688 | if (newPosition) { 689 | registerStepWithProps({ width, height, x, y }); 690 | } 691 | }); 692 | } 693 | }, 694 | overlayComponentKey: identifier, 695 | ...props, 696 | }; 697 | }); 698 | 699 | const { width, height } = useSafeAreaFrame(); 700 | 701 | useEffect( 702 | () => { 703 | if (fullScreen && width && height) { 704 | // We basically put a line at the bottom of the screen so that we blank out the whole screen. 705 | registerStepWithProps({ x: 0, y: height, width, height }); 706 | } 707 | }, 708 | [fullScreen, registerStepWithProps, width, height], 709 | ); 710 | 711 | const layoutLockRef = useRef(false); 712 | const onLayout = useCallback( 713 | (event) => { 714 | if (!layoutLockRef.current) { 715 | targetRef.current = event.target; // store it to measure later 716 | event.target.measure(onMeasure); 717 | } 718 | layoutLockRef.current = props.layoutLock; 719 | }, 720 | [onMeasure, props.layoutLock], 721 | ); 722 | 723 | return { 724 | ...context, 725 | isVisible: number === currentStepNumber, 726 | onLayout, 727 | onMeasure, 728 | step, 729 | }; 730 | }; 731 | 732 | export { 733 | enableExperimentalLayoutAnimation, 734 | IWalkthroughStepMask, 735 | IWalkthroughFunctions, 736 | IWalkthroughContext, 737 | IOverlayComponentProps, 738 | IWalkthroughStep, 739 | IWalkthroughProvider, 740 | WalkthroughProvider, 741 | IUseWalkthroughStep, 742 | useWalkthrough, 743 | useWalkthroughStep, 744 | IWalkthroughCallback, 745 | }; 746 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "exclude": [] 4 | } 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@tribefy/react-native-walkthrough": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "declaration": true, 10 | "esModuleInterop": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "importsNotUsedAsValues": "error", 13 | "jsx": "react", 14 | "lib": ["esnext", "dom"], 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "noFallthroughCasesInSwitch": true, 18 | "noImplicitAny": false, 19 | "noImplicitReturns": true, 20 | "noImplicitUseStrict": false, 21 | "noStrictGenericChecks": false, 22 | "noUnusedLocals": true, 23 | "noUnusedParameters": true, 24 | "resolveJsonModule": true, 25 | "skipLibCheck": true, 26 | "strict": false, 27 | "target": "esnext" 28 | }, 29 | "exclude": ["lib/**/*"] 30 | } 31 | --------------------------------------------------------------------------------