-
First, install our library | use below npm script
npm i react-native-image-slider-banner
yarn add react-native-image-slider-banner
Well-done.
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 |
import { ImageSlider } from "react-native-image-slider-banner";
<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"
/>
<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}}
/>
<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>