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:

Prop	Type	Description	Default
data	Array of SlideData	The data for the slides.	Required
deactiveColor	string	The color of the inactive dots.	'#e8f1fe'
activeColor	string	The color of the active dot.	'#2871e3'
onDone	function	Callback fired after the onboarding is completed.	None
nextLabel	string OR ReactNode	Label for the 'Next' button.	'Next'
doneLabel	string OR ReactNode	Label for the 'Done' button.	'Done'
bottomContainerStyle	StyleProp	Custom style prop for the button container.	None
buttonColor	string	The color of the navigation button text.	'#2871e3'
titleStyle	StyleProp	Custom style prop for the slide title.	None
descriptionStyle	StyleProp	Custom style prop for the slide description.	None
textContainerStyle	StyleProp	Custom style prop for the text container of each slide.	None
imageStyle	StyleProp	Custom style prop for the slide images.	None

Important Note

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

License

MIT