react-native-tour-carousel
v0.1.2TypeScript
Tour Carousel for use in react native app tours
0/weekUpdated 1 years agoMITUnpacked: 104.6 KB
Published by chris van gennip
npm install react-native-tour-carouselreact-native-tour-carousel
> Tour Carousel for use in react native app tours
Why
This package aims to enhance user experience through intuitive app tours, effectively showcasing key features, reducing learning curves, and boosting engagement. Its user-friendly design ensures easy integration, offering developers a hassle-free solution for creating immersive onboarding experience for free.
What
The Tour Carousel Component is a versatile component layer that combines the functionality of two popular React Native carousel libraries, react-native-reanimated-carousel and react-native-animated-dots-carousel. This component provides a cohesive and customizable way for users to navigate through a series of screens or slides.
#### Features
- Smooth Animation: Utilizes the power of react-native-reanimated for smooth and performant animations.
- Animated Dots Indicator: Includes a built-in dots indicator powered by react-native-animated-dots-carousel for easy navigation feedback.
- Customizable: Easily customize the carousel behavior, animation settings, and dot styles to match your app's design.
- Callback Functions: Supports callback functions for handling actions when the user completes or skips the carousel.
Preview
Installation
``sh`
yarn add react-native-tour-carousel
package dependancies
`sh`
yarn add react-native-reanimated react-native-gesture-handler
#### Npm links
- react-native-reanimated
- react-native-gesture-handler
Quick usage guide
`js
const data = [{
"illustration": "https://images.unsplash.com/photo-1601379329542-31c59347e2b8?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id.",
"title": "Lorem ipsum dolor sit amet"
}]
``
Prop Types
$3
| Property | Type |
| ----------------------- | ----------------------- |
| data | slide[] |
| viewedCount | number |
| handleBottomButtonPress | (arg0: boolean) => void |
| handleSkipButtonPress | () => void |
| skipButtonConfig | SkipButtonConfig |
| carouselConfig | CarouselConfig |
| PaginationConfig | PaginationConfig |
| buttonConfig | ButtonConfig |
$3
| Property | Type |
| ------------ | ------ |
| illustration | string |
| subtitle | string |
| title | string |
$3
| Property | Type |
| ------------------- | -------------------- |
| slideInnerContainer | StyleProp
| slideImageContainer | StyleProp
| slideTextContainer | StyleProp
| slideTitle | string |
| slideSubtitle | string |
| maxNumberOfLines | number |
$3
| Property | Type |
| ------------------- | -------------------- |
| skipButtonStyle | StyleProp
| skipButtonContainer | StyleProp
| titleStyle | string |
| title | string |
| disabled | boolean |
| skipButtonTestID | string |
| maxSkipCount | number |
| skipable | boolean |
$3
| Property | Type |
| --------------------- | -------------------- |
| buttonTestID | string |
| nextButtonText | string |
| finishButtonText | string |
| bottomButtonContainer | StyleProp
| bottomButtonTextStyle | StyleProp
$3
| Property | Type |
| ----------------------- | -------------------- |
| container | StyleProp
| style | StyleProp
| loop | boolean |
| pagingEnabled | boolean |
| snapEnabled | boolean |
| autoPlayInterval | number |
| scrollAnimationDuration | number |
| autoPlay | boolean |
| vertical | boolean |
| height | number |
| slideConfig | SlideConfig |
$3
| Property | Type |
| ------------------------ | -------------------- |
| showDots | boolean |
| index | number |
| length | number |
| activeIndicatorConfig | DotConfig |
| inactiveIndicatorConfig | DotConfig |
| decreasingDots | DecreasingDot[] |
| paginationContainerStyle | DotConfig[] |
| dotColor | StyleProp
| dotStyle | StyleProp
| maxIndicators | number |
$3
| Property | Type |
| -------- | --------- |
| quantity | number |
| config | DotConfig |
$3
| Property | Type |
| ------------ | ------ |
| size | number |
| opacity | number |
| color | string |
| margin | number |
| borderWidth? | number |
| borderColor? | string |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library