# rn-app-tour

> App tour for React Native.

Latest version **1.0.0** (published 2022-08-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install rn-app-tour
pnpm add rn-app-tour
yarn add rn-app-tour
bun add rn-app-tour
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-08-01 |
| First published | 2022-08-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Quentin Gaspard |
| Maintainers | quentin-gprd |
| Keywords | react-native, app-tour |

## Links

- npm: https://www.npmjs.com/package/rn-app-tour
- Repository: https://github.com/QuentinGprd/rn-app-tour
- Homepage: https://github.com/QuentinGprd/rn-app-tour#readme
- Issues: https://github.com/QuentinGprd/rn-app-tour/issues
- npm.io page: https://npm.io/package/rn-app-tour

## Recent versions

- 1.0.0 (latest) — 2022-08-01

## README

# rn-app-tour

[![npm version](https://img.shields.io/npm/v/rn-app-tour)](https://www.npmjs.com/package/rn-app-tour)
[![npm downloads](https://img.shields.io/npm/dw/rn-app-tour)](https://www.npmjs.com/package/rn-app-tour)
[![Build](https://github.com/QuentinGprd/rn-app-tour/actions/workflows/tests.yml/badge.svg)](https://github.com/QuentinGprd/rn-app-tour/actions/workflows/tests.yml)
[![Coverage Status](https://coveralls.io/repos/github/QuentinGprd/rn-app-tour/badge.svg?branch=develop)](https://coveralls.io/github/QuentinGprd/rn-app-tour?branch=develop)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Animated app tour component for React Native.

![demo gif](./docs/demo.gif)

## Quick start

### Install

```sh
yarn add rn-app-tour
# or
npm install rn-app-tour
```

### Usage

Render the `AppTour` component in your app's entry file, as the **LAST CHILD** in the `View` hierarchy (along with any other components that might be rendered there):

```js
// App.tsx
import AppTour from 'rn-app-tour';

export function App(props) {
  return (
    <>
      {/* ... */}
      <AppTour />
    </>
  );
}
```

See [Example/App.tsx](./Example/App.tsx) for a complete example.

Then use it anywhere in your app (even outside React components), by calling any `AppTour` method directly:

```js
import AppTour from 'rn-app-tour';
/* ... */
AppTour.show({
  navigation,
  borderRadiusInPercent: 100,
  modalComponent: appTourModal,
  ref: highlightRef,
  yOffset: 0,
  onBackgroundPress: () => AppTour.hide(),
});
```

See [Example/Screens/HomeScreen.tsx](./Example/Screens/HomeScreen.tsx) for a complete example.

## Run example

### ios

```sh
npm run example:ios
```

### android

```sh
npm run example:android
```

## License

ISC

---
_Source: https://npm.io/package/rn-app-tour · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._