react-native-app-onboard

React Native App Onboard is a customizable, easy-to-use, and efficient library for creating compelling onboarding experiences for your React Native applications. It provides smooth, fluid transitions and animations, with a focus on simplicity and usability.

Expo Snack example

Installation

yarn add react-native-app-onboard

Usage

import React from 'react';
import { Onboarding } from 'react-native-app-onboard';

const App = () => {
  return (
    <Onboarding
      pages={[
        {
          backgroundColor: '#140E17',
          image: <Image source={require('./images/image1.png')} />,
          title: 'Find petcare around your location',
          subtitle:
            'Just turn on your location and you will find the nearest pet care you wish.',
        },
        {
          backgroundColor: '#140E17',
          image: <Image source={require('./images/image2.png')} />,
          title: 'Let us give the best treatment',
          subtitle: 'Get the best treatment for your animal with us',
        },
        {
          backgroundColor: '#140E17',
          image: <Image source={require('./images/image3.png')} />,
          title: 'Book appointment with us!',
          subtitle: 'What do you think? book our veterinarians now',
        },
      ]}
      onDone={() => console.log('Onboarding completed')}
    />
  );
};

export default App;

Props

Page Type

Each Page object in the pages prop should conform to the following structure:

Example Page Object

{
  "title": "Welcome to Our App",
  "subtitle": "This is where your journey begins.",
  "image": <ImageComponent />,
  "backgroundColor": "#FFFFFF",
  "color": "#000000",
  "width": 300,
  "containerStyle": {},
  "imageContainerStyle": {},
  "titleContainerStyle": {},
  "titleStyle": {},
  "subtitleStyle": {}
}

Using the Onboarding Hook

To manage the state and navigation of the onboarding flow more effectively, you can utilize the custom useOnboarding hook. This hook provides a convenient way to access and modify the onboarding state, including the current page, whether scrolling is enabled, and functions to navigate through the onboarding screens.

Features Provided by the useOnboarding Hook

• currentPage: A state variable that tracks the current onboarding screen the user is viewing.
• setCurrentPage: A function to update the current page state.
• scrollEnabled: A boolean state that indicates whether the user can scroll through the onboarding screens.
• enableScroll: A function to enable or disable scrolling.
• flatListRef: A ref object for the underlying FlatList component, allowing for programmatic control of the scroll position.
• numberOfScreens: The total number of screens in the onboarding sequence.
• nextPage: A function to navigate to the next page in the onboarding sequence.
• scrollTo: A function that scrolls to a specific page in the onboarding flow.
• progress: A value representing the user's progress through the onboarding screens.
• isDone: A boolean state that indicates whether the user has completed the onboarding process.

Example Usage

Here's how you can use the useOnboarding hook within an onboarding screen component:

import React from 'react';
import { View, Button } from 'react-native';
import { useOnboarding } from './OnboardingContext';

const OnboardingScreen = () => {
  const { nextPage, isDone } = useOnboarding();

  return (
    <View>
      {/* Your screen content goes here */}
      <Button
        title={isDone ? 'Finish' : 'Next'}
        onPress={nextPage}
      />
    </View>
  );
};

export default OnboardingScreen;

Expo Snack Examples

Using the custom footer component:

Expo Snack

Using the custom page,

you can provide a custom component for each page by passing the components as children to the Onboarding component:

Expo Snack

Acknowledgements

This component library draws inspiration from the react-native-onboarding-swiper package.

We thank the creators and contributors of react-native-onboarding-swiper for their work, which has been a valuable reference in the development of this library.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library