react-native-image-slider-banner

---

IOS DEMO

https://user-images.githubusercontent.com/39431881/134768485-61c9a7a5-236e-493a-b5e8-e623b995eb61.mp4

ANDROID DEMO

https://user-images.githubusercontent.com/39431881/134768557-17ac11c8-f7ea-4d82-8c15-47f3a750149a.mp4

Install

1. 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 :

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    headerLeftComponent={<Icon name="arrow-back" color="#fff" size={34} onPress={() => Alert.alert("alert")}/>}
9    headerCenterComponent={<Text style={{color: '#fff', fontSize: 24, fontWeight: 'bold'}}>Header</Text>}
10    headerStyle={{padding: 10, backgroundColor: 'rgba(0,0,0, 0.6)',}}
11    onItemChanged={(item) => console.log("item", item)}
12    onClick={(item, index) => {alert('hello'+index)}}
13    caroselImageStyle={{height: 210}}
14    indicatorContainerStyle={{top: 50}}
15    />

4- Show Slider with Header Chilren 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    headerLeftComponent={<Icon name="arrow-back" color="#fff" size={34} onPress={() => Alert.alert("alert")}/>}
9    headerRightComponent={<Icon name="share" color="#fff" size={34} onPress={() => Alert.alert("alert")}/>}
10    headerCenterComponent={<Text style={{color: '#fff', fontSize: 24, fontWeight: 'bold'}}>Title</Text>}
11    headerStyle={{padding: 10, backgroundColor: 'rgba(0,0,0, 0.6)',}}
12    onItemChanged={(item) => console.log("item", item)}
13    onClick={(item, index) => {alert('hello'+index)}}
14    caroselImageStyle={{height: 210}}
15    indicatorContainerStyle={{bottom: 20}}
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 lib

License MIT