Gathering detailed insights and metrics for react-native-carousel-infinity
Installations
npm install react-native-carousel-infinityDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>= 16.0.0
Node Version
19.7.0
NPM Version
9.5.0
Score
32.4
Supply Chain
55.2
Quality
66
Maintenance
50
Vulnerability
94.1
License
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
9
TypeScript
Java
Ruby
Objective-C
JavaScript
Kotlin
Objective-C++
Swift
C
TypeScript (68.22%)
Java (12.83%)
Ruby (6.38%)
Objective-C (4.69%)
JavaScript (3.09%)
Kotlin (2.1%)
Objective-C++ (1.99%)
Swift (0.53%)
C (0.18%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
shortSparrow
Download Statistics
Total Downloads
287
Last Day
1
Last Week
5
Last Month
21
Last Year
98
GitHub Statistics
MIT License
1 Stars
11 Commits
1 Watchers
1 Branches
2 Contributors
Updated on May 08, 2024
Maintainers
1
Package Meta Information
Latest Version
0.0.6
Package Id
react-native-carousel-infinity@0.0.6
Unpacked Size
63.96 kB
Size
20.99 kB
File Count
29
NPM Version
9.5.0
Node Version
19.7.0
Published on
Jul 03, 2023
Total Downloads
Cumulative downloads
Total Downloads
287
Last Day
0%
1
Compared to previous day
Last Week
-16.7%
5
Compared to previous week
Last Month
133.3%
21
Compared to previous month
Last Year
-48.1%
98
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
22
@commitlint/config-conventional@evilmartians/lefthook@react-native-community/eslint-config@release-it/conventional-changelog@types/jest@types/lodash.debounce@types/react@types/react-nativecommitlintdel-clieslinteslint-config-prettiereslint-plugin-prettierjestlodash.debouncepod-installprettierreactreact-nativereact-native-builder-bobrelease-ittypescript
react-native-carousel-infinity
Fast and smooth infinity carousel for React Native
Installation
1npm install react-native-carousel-infinity
Or uf you use yarn
1yarn add react-native-carousel-infinity
Usage
1import React from 'react' 2import { 3 Carousel, 4 DOTS_ANIMATION_TYPE, 5 SLIDE_ANIMATION_TYPE, 6 SlideItem, 7} from 'react-native-carousel-infinity' 8 9const data: SlideItem[] = [ 10 { id: '1', image: require('someImage.jpeg') }, 11 { 12 id: '2', 13 image: { 14 uri: 'https://some_image.jpg', 15 }, 16 }, 17] 18 19const SLIDE_WIDTH = 300 20const SLIDE_HORIZONTAL_OFFSET = 10 21const FAKE_PER_SIDE = 3 22 23export const SimpleCarousel = () => { 24 return ( 25 <Carousel 26 isInfinity 27 isAutoScroll={false} 28 fakeImagePerSide={FAKE_PER_SIDE} 29 images={data} 30 slideHorizontalOffset={SLIDE_HORIZONTAL_OFFSET} 31 slideWidth={SLIDE_WIDTH} 32 slideAlign='symmetric' 33 slideAnimationType={SLIDE_ANIMATION_TYPE.MOVE_UP} 34 dotsAnimationType={DOTS_ANIMATION_TYPE.SCALE} 35 slideStyles={{ 36 height: SLIDE_WIDTH, 37 }} 38 /> 39 ) 40}
Props
Accepts all ScrollView props and these:
| name | required | default | types | descriptions |
|---|---|---|---|---|
| images | ✅ | { id: string; image: ImageSourcePropType } | Images for carousel, you can add local images and form url as well | |
| fakeImagePerSide | ❌ | 3 | number | Count of fake items per each side |
| slideWidth | ❌ | Dimensions.get('window').width | number | Slide width |
| isAutoScroll | ❌ | false | boolean | Should images auto scrolling or not |
| autoScrollSlideInterval | ❌ | 4000 | number | Time between each autoscroll new slide |
| autoScrollSlideInteractionDelay | ❌ | 1000 | number | If you interrupt auto scrolling or just scroll by fingers autoscroll waiting autoScrollSlideInteractionDelay + autoScrollSlideInterval until start next auto scrolling |
| slideHorizontalOffset | ❌ | 10 | number | Offset between each slide |
| slideAnimationType | ❌ | NEED YO ADD | {MOVE_UP,SCALE,ROLLING,SQUEEZE_ANDROID, SQUEEZE_MOVE_UP_IOS,NO_EFFECTS} | Already implemented animations for slides |
| animationDuration | ❌ | 500 | number | Sliding duration during autoscroll or pressing pagination buttons |
| slideAlign | ❌ | symmetric | 'symmetric' | 'left' | number | left - all you slides start from left edge (typically for scrollView). symmetric - slides looks symmetric, because adds number depends on device size. number - add any number for specific cases when you need to align your slides (like here).If you use paddingHorizontal inside contentContainerStyle this will override slideAlign because technically slideAlign is paddingHorizontal. |
| onSelectSlide | ❌ | undefined | (index: number) => void | Calls on select slide, useful for getting current selected index |
| containerWidth | ❌ | number | This parameter not setting carousel width, it just says parent width. This parameter improves performance. Without one carousel make 1 rerender to defined own width | |
| dotsAnimationType | ❌ | SCALE_WITH_OPACITY | {SCALE_WITH_OPACITY,SCALE,MOVE_UP} | Already implemented animations for dots |
| startFromIndex | ❌ | 0 | number | Sets index of first visible slide |
| isInfinity | ❌ | true | boolean | Define should carousel be infinity or not |
| dotStyles | ❌ | undefined | ViewStyle | Your custom styles for dots |
| dotsContainerStyles | ❌ | undefined | ViewStyle | Your custom styles for dots container |
| imageProps | ❌ | {} | Omit<ImageProps, 'source'> | Image props for slide images, like resizeMode, etc... |
| imageStyles | ❌ | undefined | ImageStyle | Your custom styles for slide images |
| slideStyles | ❌ | undefined | Omit<ViewStyle, 'width'> | Your custom styles for slides |
| customSlides | ❌ | undefined | (slideStyles: any[]) => JSX.Element | Replace developed slides by your own implementation |
| customSlideAnimation | ❌ | undefined | customSlideAnimation?: (hiddenIndexScrolling: undefined | number,i: number,interpolate: (slideItemIndex: number,minValue: number | string,maxValue: number | string) => any) => any | Custom animations fro slides |
| customDots | ❌ | undefined | (dotsStyles: any[]) => JSX.Element | Replace developed dots pagination by your own implementation |
| customDotsAnimation | ❌ | undefined | customDotsAnimation?: (i: number,interpolate: (slideItemIndex: number,minValue: number | string,maxValue: number | string) => any) => any | Custom animations fro slides |
Ref
| name | required | default | types | descriptions |
|---|---|---|---|---|
| getCarouselRef | ❌ | undefined | (ref: {stopAutoPlay: () => void,tryStartAutoPlay: () => void, scrollToIndex: (index: number) => void}) => void | Return CarouselRef for easing handing autoplay and scrolling |
| getScrollViewRef | ❌ | undefined | (ref: React.RefObject | Return ScrollView ref |
Props
Animations You can use already implemented animations or create own. There are two way to create your custom animations
- customDotsAnimation or customSlideAnimation provides you
indexandinterpolatefunction. You need just add to interpolateindex,minValueandmaxValue. This useful for common cases, this animation depends on current selected slide
1 customDotsAnimation={(index, interpolate) => ({ 2 transform: [{ translateY: interpolate(index, 0, -20) }], 3 })}
- Sometimes you may want to add specific animation, for this case nativeEvent for getting current offset and use interpolate on it. For more details see DotsAdvancedAnimation or CustomSlides
1import React from 'react' 2import { Carousel, NativeScrollEvent, NativeSyntheticEvent } from 'react-native-carousel-infinity' 3 4const Component = () => { 5 const myAnim = useRef(new Animated.Value(0)).current 6 7 const _onScroll = ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => { 8 const value = nativeEvent.contentOffset.x 9 myAnim.setValue(value) 10 } 11 12 const renderCustomDots = (dots: any[]) => { 13 return ( 14 <Animated.View 15 style={[ 16 { 17 transform: [ 18 { 19 translateX: myAnim.interpolate({ 20 inputRange: [900, 960, 1440, 1500], 21 outputRange: [-107.5, 0, 140, 252.5], 22 extrapolate: 'clamp', 23 }), 24 }, 25 ], 26 }, 27 ]} 28 /> 29 ) 30 } 31 32 return <Carousel onScroll={_onScroll} customDots={renderCustomDots} /> 33} 34
Examples
Animation SLIDE_ANIMATION_TYPE.MOVE_UP ANDROID
Animation SLIDE_ANIMATION_TYPE.MOVE_UP IOS
Animation SLIDE_ANIMATION_TYPE.SCALE ANDROID
Animation SLIDE_ANIMATION_TYPE.SCALE IOS
Animation SLIDE_ANIMATION_TYPE.ROLLING ANDROID
Animation SLIDE_ANIMATION_TYPE.ROLLING IOS
Animation SLIDE_ANIMATION_TYPE.SQUEEZE_ANDROID ANDROID
Animation SLIDE_ANIMATION_TYPE.SQUEEZE_MOVE_UP_IOS IOS
License
MIT
No vulnerabilities found.
No security vulnerabilities found.