rn-app-tour

Animated app tour component for React Native.

Quick start

Install

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):

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

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

See Example/App.tsx for a complete example.

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

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 for a complete example.

Run example

ios

npm run example:ios

android

npm run example:android

License

ISC