Skip to content
GuidewayGuideway

Installation

Guideway has two peer dependencies: react-native-reanimated (the spotlight animation) and react-native-svg (the cutout). Install all three together.

Terminal window
npx expo install guideway react-native-reanimated react-native-svg

Configure Reanimated

Section titled “Configure Reanimated”

Reanimated needs its Babel plugin, added as the last plugin in babel.config.js:

// Reanimated 3.x (Expo SDK 53 and earlier):
plugins: ['react-native-reanimated/plugin'],


// Reanimated 4 (Expo SDK 54+) uses worklets:
plugins: ['react-native-worklets/plugin'],

Expo links react-native-svg for you. In a bare app, run npx pod-install for iOS.

Section titled “Safe-area insets (recommended)”

So tooltips clear the notch and home indicator - and so the spotlight lands correctly on Android - pass safe-area insets to the provider. react-native-safe-area-context ships with Expo; in bare apps, install it. Then pass useSafeAreaInsets():

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { TourProvider } from 'guideway';


function App() {
  const insets = useSafeAreaInsets();
  return (
    <TourProvider tours={tours} insets={insets}>
      {/* your app */}
    </TourProvider>
  );
}

Next

Section titled “Next”

Build your first tour in the Quick start.