React Native Onboard Carousel

Build a cool onboarding in your app fast

GitHub · Demo

Introduction

This library is an onboarding carousel component which can be used for effortless user onboarding and focuses on saving developer time.

Why

• The Onboarding Carousel that Doesn't Suck: Bold and attention-grabbing (use with caution!).
• Level Up Your App Onboarding: Appeals to developers seeking improvement.
• The Missing Piece for Your Onboarding Puzzle: Creates a sense of necessity.

Features

• 🎨 Fully customizable configurations
• 🔧 Load images locally or from the web or design a custom image component
• ✨ Beautiful default UI
• 📦 Lightweight
• 🚀 Works with Expo by default

Install

Install the package from your command line.

With yarn

yarn add react-native-onboard-carousel

With npm

npm install react-native-onboard-carousel

Quick start

Place the Onboard component anywhere in your app. It will automatically take up the entire screen.

import { Image, StyleSheet } from 'react-native';
import Onboard from 'react-native-onboard-carousel';

import image1 from './assets/image1.png';
import image2 from './assets/ipad.jpeg';

const App = function () {
  return (
    <Onboard
      slides={[
        {
          id: 1,
          ImageComponent: () => {
            return (
              <Image
                source={image1}
                resizeMode="contain"
                style={styles.image}
                accessibilityRole="image"
              />
            );
          },
          title: 'Ride like a king',
          subtitle: 'The future of transport is now in your hands',
          outro: 'Starting from $10',
        },
        {
          id: 2,
          ImageComponent: () => {
            return (
              <Image
                source={image2}
                resizeMode="contain"
                style={styles.image}
                accessibilityRole="image"
              />
            );
          },
          title: 'Order in real time',
          subtitle: 'At the best rates',
          outro: '$99.99 Cap',
        },
        {
          id: 3,
          imageUri:
            'https://t3.ftcdn.net/jpg/06/36/01/48/360_F_636014891_ne8XUB4YU4WoMeUUjr0TU6wH38wNTU6V.jpg',
          title: 'Some other important text',
          subtitle: 'Some subtitle',
          webImage: true,
        },
      ]}
      skipEnabled={true}
      onDone={() => console.log('Move to another screen')}
      backgroundColor={'#fff'}
    />
  );
};

const styles = StyleSheet.create({
  image: {
    width: '100%',
    flex: 0.6,
  },
});

export default App;

Contributing

If you wish to contribute please see Contributing.md.

Customization

react-native-onboard-carousel is designed to be very customizable. You can use the default UI or create your own by implementing the provided interfaces

Get in touch

Questions? Suggestions? Feel free to open an issue, submit a PR, or contact me.

Authors

• Victor Abuka (LinkedIn)

License

ISC License