react-native-onboard-component v0.1.0

Onboarding Swiper for React Native

A smooth and customizable onboarding swiper/slider for your React Native applications.

Features

• Horizontal swipe to navigate between slides.
• Customizable buttons for navigation.
• Supports both text and custom React components for navigation buttons.
• Customizable styles for title, description, and image.
• Indicator dots to represent the slide position.

Installation

npm install react-native-onboard-component

Or using yarn:

yarn add react-native-onboard-component

Usage

Here's a basic example of how to use the Onboarding Swiper:

import OnboardingSwiper from 'react-native-onboard-component';

const slidesData = [
  {
    image: require('./path-to-image1.png'),
    title: 'Welcome',
    description: 'Description for first slide.',
  },
  // ... Add more slides as needed.
];

function App() {
  return (
    <OnboardingSwiper
      data={slidesData}
      onDone={() => {
        console.log('Onboarding completed!');
      }}
    />
  );
}

export default App;

Props

Here's a list of all the available props:

Important Note

For optimal display, the aspect ratio of images used should be 9:19, i.e., 1080x2280 pixels.

License

MIT