Gathering detailed insights and metrics for react-native-image-carousel
Gathering detailed insights and metrics for react-native-image-carousel
Gathering detailed insights and metrics for react-native-image-carousel
Gathering detailed insights and metrics for react-native-image-carousel
@robinbobin/react-native-image-carousel
An image carousel component for React Native
react-native-carousel-image-slider
A simple and fully customizable React Native Carousel Slider component, support to IOS and Android.
react-native-image-carousel-slider
This package is made to make it easier for you to display the image sliders
@millo-l/react-native-image-carousel
RN Image Carousel using Native
Image carousel with support for fullscreen mode with swiping and pinch-to-zoom.
npm install react-native-image-carousel
Typescript
Module System
Min. Node Version
Node Version
NPM Version
JavaScript (74.85%)
Objective-C (19.08%)
Java (6.07%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
215 Stars
112 Commits
39 Forks
9 Watchers
1 Branches
6 Contributors
Updated on Jan 10, 2025
Latest Version
0.4.6
Package Id
react-native-image-carousel@0.4.6
Unpacked Size
22.25 kB
Size
6.42 kB
File Count
4
NPM Version
6.5.0
Node Version
10.6.0
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
2
22
Image carousel with support for heading, captions, fullscreen mode, image swiping and pinch-to-zoom in fullscreen mode.
Supports both Android and iOS. Zoom feature works on iOS only.
npm install --save react-native-image-carousel
1import ImageCarousel from 'react-native-image-carousel'; 2 3export default class App extends Component<any, any, any> { 4 _imageCarousel: ImageCarousel; 5 6 componentWillMount() { 7 (this: any)._renderHeader = this._renderHeader.bind(this); 8 } 9 10 _renderHeader(): ReactElement<any> { 11 return ( 12 <TouchableWithoutFeedback onPress={this._imageCarousel.close}> 13 <View> 14 <Text style={styles.closeText}>Exit</Text> 15 </View> 16 </TouchableWithoutFeedback> 17 ); 18 } 19 20 _renderFooter(): ReactElement<any> { 21 return ( 22 <Text style={styles.footerText}>Footer!</Text> 23 ); 24 } 25 26 _renderContent(idx: number): ReactElement<any> { 27 return ( 28 <Image 29 style={styles.container} 30 source={{ uri: urls[idx] }} 31 resizeMode={'contain'} 32 /> 33 ); 34 } 35 36 render(): ReactElement<any> { 37 return ( 38 <View style={styles.container}> 39 <ImageCarousel 40 ref={(imageCarousel: ImageCarousel) => { 41 this._imageCarousel = imageCarousel; 42 }} 43 renderContent={this._renderContent} 44 renderHeader={this._renderHeader} 45 renderFooter={this._renderFooter} 46 > 47 {urls.map((url: string): ReactElement<any> => ( 48 <Image 49 key={url} 50 style={styles.image} 51 source={{ uri: url, height: 100 }} 52 resizeMode={'contain'} 53 /> 54 ))} 55 </ImageCarousel> 56 </View> 57 ); 58 } 59}
Check full example in Example folder.
Every prop is optional.
Name | Type | Description |
---|---|---|
activeProps? | Object | Props of each child when in fullscreen mode. (For a component to fill the screen activeProp's style must be flex: 1 ). This prop is ignored in case renderContent prop is provided. |
activeComponents? | [ReactElement<any>] | Active components' bounds will be used for opening/closing fullscreen mode animations. If not provided, the immediate children are used. |
zoomEnabled? | boolean | true by default, if false , children are not zoomable. |
hideStatusBarOnOpen? | boolean | true by default, if false , status bar does not fade out on open. |
renderContent? | (idx: number) => ReactElement<any> | Component to render in fullscreen mode for the given index. |
renderHeader? | () => ReactElement<any> | Component to render at the top when in fullscreen mode. |
renderFooter? | () => ReactElement<any> | Component to render at the bottom when in fullscreen mode. |
onIdxChange? | (idx: number) | Fired on index change in fullscreen mode. |
onOpen? | () => void | Fired on fullscreen mode open. |
onClose? | () => void | Fired on fullscreen mode close. |
react-native-image-carousel also provides two methods for opening and closing the fullscreen mode respectively:
open(startIdx: number)
, close
.
MIT License © Anvilabs LLC
No vulnerabilities found.
Reason
license file detected
Details
Reason
binaries present in source code
Details
Reason
Found 4/23 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
84 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More