React Native Onboard Carousel

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

1yarn add react-native-onboard-carousel

With npm

1npm install react-native-onboard-carousel

Quick start

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

1import { Image, StyleSheet } from 'react-native';
2import Onboard from 'react-native-onboard-carousel';
3
4import image1 from './assets/image1.png';
5import image2 from './assets/ipad.jpeg';
6
7const App = function () {
8  return (
9    <Onboard
10      slides={[
11        {
12          id: 1,
13          ImageComponent: () => {
14            return (
15              <Image
16                source={image1}
17                resizeMode="contain"
18                style={styles.image}
19                accessibilityRole="image"
20              />
21            );
22          },
23          title: 'Ride like a king',
24          subtitle: 'The future of transport is now in your hands',
25          outro: 'Starting from $10',
26        },
27        {
28          id: 2,
29          ImageComponent: () => {
30            return (
31              <Image
32                source={image2}
33                resizeMode="contain"
34                style={styles.image}
35                accessibilityRole="image"
36              />
37            );
38          },
39          title: 'Order in real time',
40          subtitle: 'At the best rates',
41          outro: '$99.99 Cap',
42        },
43        {
44          id: 3,
45          imageUri:
46            'https://t3.ftcdn.net/jpg/06/36/01/48/360_F_636014891_ne8XUB4YU4WoMeUUjr0TU6wH38wNTU6V.jpg',
47          title: 'Some other important text',
48          subtitle: 'Some subtitle',
49          webImage: true,
50        },
51      ]}
52      skipEnabled={true}
53      onDone={() => console.log('Move to another screen')}
54      backgroundColor={'#fff'}
55    />
56  );
57};
58
59const styles = StyleSheet.create({
60  image: {
61    width: '100%',
62    flex: 0.6,
63  },
64});
65
66export 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