Gathering detailed insights and metrics for @pembajak/react-native-image-slider-banner
Gathering detailed insights and metrics for @pembajak/react-native-image-slider-banner
A simple and fully customizable React Native Component that implements Image and Banner Slider UI with animations.
1.0.5
28
MIT
TypeScript
27.96 kB
Installations
npm install @pembajak/react-native-image-slider-bannerDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
19.6.0
NPM Version
9.4.0
Releases
Unable to fetch releases
Languages
1
TypeScript
TypeScript (100%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
28 Stars
14 Commits
23 Forks
2 Watchers
3 Branches
4 Contributors
Updated on Feb 26, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.5
Package Id
@pembajak/react-native-image-slider-banner@1.0.5
Unpacked Size
27.96 kB
Size
6.71 kB
File Count
10
NPM Version
9.4.0
Node Version
19.6.0
Published on
Mar 27, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
react-native-image-slider-banner
Support 💰
IOS DEMO
ANDROID DEMO
Install
-
First, install our library | use below npm script
npm i react-native-image-slider-banner
yarn add react-native-image-slider-banner
Well-done.
Usage :
list of available props for customization SliderBox:
| Props | Value Type | Description |
|---|---|---|
| data | Array of image path(or url) as string | Set array of images path- these paths can contain http url link or local images path using require('./pathOfImage') |
| localImg | Boolean default (false) | its define whats type image urls you provide if its true it means you provide local images path |
| showHeader | Boolean default (false) | if its true its shows a header on slider |
| headerRightComponent | React Component default (null) | for displaying right component in header |
| headerLeftComponent | React Component default (null) | for displaying left component in header |
| headerCenterComponent | React Component default (null) | for displaying Center component in header |
| headerStyle | Style object default {} | for change style of header |
| previewImageContainerStyle | Style object | for change style of previewImageContainer |
| previewImageStyle | Style object | for change style of previewImage |
| caroselImageContainerStyle | Style object | for change style of caroselImageContainer |
| caroselImageStyle | Style object | for change style of caroselImage |
| autoPlay | Boolean default (false) | for auto scrolling |
| timer | Number default 2000 | timeinterval for changing slider |
| showIndicator | Boolean default (true) | for Showing indicator |
| activeIndicatorStyle | Style object | for change style of activeIndicator |
| inActiveIndicatorStyle | Style object | for change style of inActiveIndicator |
| indicatorContainerStyle | Style object | for change style of indicatorContainer |
| onItemChanged | Callback ((itemData) => {},) | when item changed its give item data in parameter |
| onClick | Callback ((item, index) => {},) | when click on any item its give item data in parameter |
| closeIconColor | colorCode #000 | Image Preview cross icon color |
| blurRadius | Number default (50) | Image Preview Background Blur Radius |
| preview | Boolean default true | when preivew is false so slider not show IMAGE PREVIEW and then onClick works |
1- add below import in your code :
1import { ImageSlider } from "react-native-image-slider-banner";
2- Show Simple Slider with Image Preview option enable Example
1<ImageSlider 2 data={[ 3 {img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'}, 4 {img: 'https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg'}, 5 {img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'} 6 ]} 7 autoPlay={false} 8 onItemChanged={(item) => console.log("item", item)} 9 closeIconColor="#fff" 10/>
3- Show Slider with Header and onClick Example
1<ImageCarousel 2 data={[ 3 {img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'}, 4 {img: 'https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg'}, 5 {img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'} 6 ]} 7 showHeader 8 preview={false} 9 headerLeftComponent={<Icon name="arrow-back" color="#fff" size={34} onPress={() => Alert.alert("alert")} />} 10 headerCenterComponent={<Text style={{ color: '#fff', fontSize: 24, fontWeight: 'bold' }}>Header</Text>} 11 headerStyle={{ padding: 10, backgroundColor: 'rgba(0,0,0, 0.6)', }} 12 onItemChanged={(item) => console.log("item", item)} 13 caroselImageStyle={{ resizeMode: 'cover' }} 14 onClick={(item, index) => { alert('hello' + index) }} 15 />
4- Show Slider with Header, Children and onClick Example
1 <ImageCarousel 2 data={[ 3 { img: require('../../assets/images/slider1.png') }, 4 { img: require('../../assets/images/slider2.png') }, 5 { img: require('../../assets/images/slider1.png') } 6 ]} 7 localImg 8 showHeader 9 preview={false} 10 headerLeftComponent={<Icon name="arrow-back" color="#fff" size={34} onPress={() => Alert.alert("alert")} />} 11 headerCenterComponent={<Text style={{ color: '#fff', fontSize: 24, fontWeight: 'bold' }}>Header</Text>} 12 headerStyle={{ padding: 10, backgroundColor: 'rgba(0,0,0, 0.6)', }} 13 onItemChanged={(item) => console.log("item", item)} 14 caroselImageStyle={{ resizeMode: 'cover' }} 15 onClick={(item, index) => { alert('hello' + index) }} 16 > 17 <View style={{alignItems: 'center'}}> 18 <Text style={{color: '#000', fontSize: 24, fontWeight: 'bold'}}>Title</Text> 19 </View> 20 </ImageCarousel>
Contribute And Update the Library
Please subscribe and contribute with me to develop this library
License MIT
No vulnerabilities found.
No security vulnerabilities found.