Package Exports
- innovare-react-native-image-slider-banner
- innovare-react-native-image-slider-banner/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (innovare-react-native-image-slider-banner) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-image-slider-banner
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 and when onClick Present so slider not show IMAGE PREVIEW on Click |
| closeIconColor | colorCode #000 |
Image Preview cross icon color |
| blurRadius | Number default (50) |
Image Preview Background Blur Radius |
1- add below import in your code :
import { ImageSlider } from "react-native-image-slider-banner";2- Show Simple Slider with Image Preview option enable Example
<ImageSlider
data={[
{img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'},
{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'},
{img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'}
]}
autoPlay={false}
onItemChanged={(item) => console.log("item", item)}
closeIconColor="#fff"
/>3- Show Slider with Header and onClick Example
<ImageCarousel
data={[
{img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'},
{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'},
{img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'}
]}
showHeader
headerLeftComponent={<Icon name="arrow-back" color="#fff" size={34} onPress={() => Alert.alert("alert")}/>}
headerCenterComponent={<Text style={{color: '#fff', fontSize: 24, fontWeight: 'bold'}}>Header</Text>}
headerStyle={{padding: 10, backgroundColor: 'rgba(0,0,0, 0.6)',}}
onItemChanged={(item) => console.log("item", item)}
onClick={(item, index) => {alert('hello'+index)}}
caroselImageStyle={{height: 210}}
indicatorContainerStyle={{top: 50}}
/>4- Show Slider with Header Chilren and onClick Example
<ImageCarousel
data={[
{img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'},
{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'},
{img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'}
]}
showHeader
headerLeftComponent={<Icon name="arrow-back" color="#fff" size={34} onPress={() => Alert.alert("alert")}/>}
headerRightComponent={<Icon name="share" color="#fff" size={34} onPress={() => Alert.alert("alert")}/>}
headerCenterComponent={<Text style={{color: '#fff', fontSize: 24, fontWeight: 'bold'}}>Title</Text>}
headerStyle={{padding: 10, backgroundColor: 'rgba(0,0,0, 0.6)',}}
onItemChanged={(item) => console.log("item", item)}
onClick={(item, index) => {alert('hello'+index)}}
caroselImageStyle={{height: 210}}
indicatorContainerStyle={{bottom: 20}}
>
<View style={{alignItems: 'center'}}>
<Text style={{color: '#000', fontSize: 24, fontWeight: 'bold'}}>Title</Text>
</View>
</ImageCarousel>