react-native-intro-carousel
An introduction page carousel animated with pagination
Installation
npm install react-native-intro-carousel
or
yarn add react-native-intro-carousel
Usage
import Carousel from "react-native-intro-carousel";
// ...
<Carousel
data={[
{
key: '1',
title: 'Cool package',
description: 'This is a cool package',
backgroundColor: '#e879f2',
image: require('./..'),
titleStyle: {
color: 'white',
},
descriptionStyle: {
color: 'white',
},
},
]}
paginationConfig={{
...
dotSize: 20,
}}
buttonsConfig={{
...
// useBottomButtons: true,
}}
/>
Demo
| Default | useBottomButtons |
|---|
 |  |
Customizable
You can use your own component
<Carousel
data={[
{
key: '1',
title: 'Cool package',
description: 'This is a cool package',
image: require('./..'),
data: {
... // you can add any data here
}
},
]}
buttonsConfig={{
disabled: true,
}}
renderItem={({ item, index }, goToSlide) => (
<View style={styles.content}>
<Image
source={item.image}
style={styles.image}
/>
<Text>{item.title}</Text>
<Text>{item.description}</Text>
<View style={styles.buttonsContainer}>
<Pressable
style={styles.button}
onPress={() => goToSlide(index - 1)}
>
<Text>Previous</Text>
</Pressable>
<Pressable
style={[styles.button, { marginLeft: 10 }]}
onPress={() => goToSlide(index + 1)}
>
<Text>Next</Text>
</Pressable>
</View>
</View>
)}
/>
will result in:
Customizable buttons
You can use your own component
<Carousel
data={[...]}
buttonsConfig={{
next: {
renderButton: (index, onChangeSlider) => (
<Pressable onPress={() => onChangeSlider(index + 1)}>
<Image source={arrowIcon} />
</Pressable>
)
},
prev: {
disabled: true,
},
done: {
renderButton: (index, onChangeSlider) => (
<Pressable onPress={() => {...}}>
<Image source={checkIcon} />
</Pressable>
)
},
}}
/>
will result in:
Banners
you can also use this lib to create cool banners, look the example code here
Props
| Name | Type | Default | Description |
|---|
| data | object | None, required | Array of pages in carousel |
| paginationConfig | object | None | Pagination configurations (see table below) |
| renderItem | function | None | You can create your own component to be rendered on the page |
| onPressSkip | function | None | Called when user press 'skip' (null = hide skip button) |
| onFinish | function | None | Called when user press 'Done' on last slider |
| buttonsConfig | object | None | Buttons configuration (see table below) |
paginationConfig
| Name | Type | Default | Description |
|---|
| dotSize | number | 15 | Size of pagination dots |
| bottomOffset | number | 50 | pagination distance from bottom |
| animated | boolean | true | allows disabling dots animation |
| disabled | boolean | false | hide the pagination |
| dotIncreaseSize | number | 1.4 | size the dot will grow when it is on a page (hint: use 1 if you don't want the dot to grow) |
| color | string | #ffffff80 | Default dot color |
| activeColor | string | #fff | Active dot color |
| dotSpacing | number | 12 | spacing between pagination dots |
| activeDotStyle | ViewStyle | None | styles for the dot indicating the current page |
buttonsConfig
| Name | Type | Default | Description |
|---|
| disabled | boolean | false | Hide the buttons |
| next | {
label?: string;
textStyle?: TextStyle;
buttonStyle?: ViewStyle;
renderButton?: ( currentIndex: number, goToSlide: (index: number) => void ) => JSX.Element; // render your own button
} | None | Next button configurations |
| prev | same as the line above | None | Previous button configurations |
| skip | same as the line above | None | Skip button configurations |
| done | same as the line above | None | Last slide button configurations |
| useBottomButtons | boolean | false | Show buttons below pagination |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
