React Native Paper Onboarding

To use PaperOnboarding, provide an array of PaperOnboardingItemType objects to the data prop. Each item represents a slide in the onboarding flow. You can customize the title, description, background color, and provide custom components for images, icons, or content.

import PaperOnboarding, {PaperOnboardingItemType} from "@gorhom/paper-onboarding";

const data: PaperOnboardingItemType[] = [
  {
    title: 'Hotels',
    description: 'All hotels and hostels are sorted by hospitality rating',
    backgroundColor: '#698FB8',
    image: /* IMAGE COMPONENT */,
    icon: /* ICON COMPONENT */,
    content: /* CUSTOM COMPONENT */,
  },
  {
    title: 'Banks',
    description: 'We carefully verify all banks before add them into the app',
    backgroundColor: '#6CB2B8',
    image: /* IMAGE COMPONENT */,
    icon: /* ICON COMPONENT */,
    content: /* CUSTOM COMPONENT */,
  },
  {
    title: 'Stores',
    description: 'All local stores are categorized for your convenience',
    backgroundColor: '#9D8FBF',
    image: /* IMAGE COMPONENT */,
    icon: /* ICON COMPONENT */,
    content: /* CUSTOM COMPONENT */,
  },
];

const Screen = () => {
  const handleOnClosePress = () => console.log('navigate to other screen')
  return (
    <PaperOnboarding
      data={data}
      onCloseButtonPress={handleOnClosePress}
    />
  )
}

The PaperOnboarding component accepts several props to control the behavior and appearance of the onboarding flow:

• data (Required): An array of PaperOnboardingItemType objects defining the slides.
• safeInsets: Safe area insets (e.g., from react-native-safe-area-context). Defaults to {top: 50, bottom: 50, left: 50, right: 50}.
• direction: The pan gesture direction. Accepts 'horizontal' (default) or 'vertical'.
• indicatorSize: The width and height of the indicator. Defaults to 40.
• indicatorBackgroundColor: Background color of the indicator. Defaults to white.
• indicatorBorderColor: Border color of the indicator. Defaults to white.
• titleStyle: Style object to override the title text style for all slides.
• descriptionStyle: Style object to override the description text style for all slides.
• closeButton: A custom component to replace the default close button.
• closeButtonText: Text for the close button. Defaults to close.
• closeButtonTextStyle: Style object for the close button text.
• onCloseButtonPress: Callback function triggered when the close button is pressed.
• onIndexChange: Callback function triggered when the slide index changes.

The metro.config.js in the example/ directory is configured to handle peer dependencies correctly within a monorepo-like structure. It uses watchFolders to include the project root and a resolver configuration to prevent multiple versions of peer dependencies from being loaded.

Specifically, it:

1. Adds the project root to watchFolders.
2. Uses blacklistRE to ignore peer dependency modules located in the root node_modules.
3. Uses extraNodeModules to alias those same peer dependencies to the versions installed within the example/node_modules directory.
4. Configures the transformer with inlineRequires: true for optimized loading.

const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');
const escape = require('escape-string-regexp');
const pak = require('../package.json');

const root = path.resolve(__dirname, '..');

const modules = Object.keys({
  ...pak.peerDependencies,
});

module.exports = {
  projectRoot: __dirname,
  watchFolders: [root],

  resolver: {
    blacklistRE: blacklist(
      modules.map(
        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
      )
    ),
    extraNodeModules: modules.reduce((acc, name) => {
      acc[name] = path.join(__dirname, 'node_modules', name);
      return acc;
    }, {}),
  },

  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

The main PaperOnboarding component accepts PaperOnboardingProps to control the flow and appearance of the onboarding experience.

Properties:

• data: (Required) An array of PaperOnboardingItemType objects representing the pages.
• direction: The pan gesture direction. Can be 'horizontal' or 'vertical'. Defaults to 'horizontal'.
• onIndexChange: A callback function triggered when the current page index changes. Receives the new index as a number.
• safeInsets: Insets for safe area handling (top, bottom, left, right). Defaults to {top: 50, bottom: 50, left: 50, right: 50}.
• Inherited Configs: You can also pass partial configurations for indicators and the close button directly to the main component:
  • indicatorSize: Number for indicator size.
  • indicatorBackgroundColor: Color for indicator background.
  • indicatorBorderColor: Color for indicator border.
  • closeButtonText: Text for the close button.
  • onCloseButtonPress: Callback for when the close button is pressed.

<PaperOnboarding
  data={data}
  direction="horizontal"
  onIndexChange={(index) => console.log(index)}
  indicatorSize={40}
  closeButtonText="Finish"
  onCloseButtonPress={() => handleClose()}
/>

If you provide a custom component to the content property of a PaperOnboardingItemType, it will receive PageContentProps. This allows you to build highly customized slide layouts that react to the onboarding progress.

PageContentProps includes:

• index: The current page index.
• animatedFocus: An Animated.Node<number> representing the focus/progress of the current page, useful for creating parallax or fade effects.
• title, titleStyle, description, descriptionStyle, image: The specific properties defined in the item for that page.

interface MyCustomContent = React.FC<PageContentProps>;

const MyCustomContent: MyCustomContent = ({ index, animatedFocus, title }) => {
  return (
    <View>
      <Animated.Text style={{ opacity: animatedFocus }}>
        {title}
      </Animated.Text>
    </View>
  );
};

// Usage in data:
// { ..., content: MyCustomContent }