rn-weblineindia-banner-view
Version:
A react native component for showing banner that automatically swipe.
257 lines (227 loc) • 8.09 kB
JavaScript
/**
Author Name : WeblineIndia | https://www.weblineindia.com/
For more such software development components and code libraries, visit us at
https://www.weblineindia.com/software-development-resources.html
Our Github URL : https://github.com/weblineindia
**/
import React, { Component } from 'react';
import { View, FlatList, StatusBar, Text, TouchableOpacity, Image, Alert } from 'react-native';
import styles from './Styles';
import BannerItem from './BannerItem';
type IProps = {
activeIndicatorColor: String,
passiveIndicatorColor: String,
isAutoPlay: Boolean,
};
let isAutoScroll = true;
let pageIndexNum = 0;
var animaInterval = null;
let timeInterval;
export default class BannerView extends Component<IProps> {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
pageIndex: pageIndexNum,
isAutoScroll: isAutoScroll,
};
if (this.props.timeDuration === undefined) {
timeInterval = 5000;
} else if (this.props.timeDuration <= 2000) {
timeInterval = 3000;
} else {
timeInterval = this.props.timeDuration;
}
}
componentWillMount() {
if (this.props.isAutoPlay === false) {
this.setState({ isAutoScroll: false });
isAutoScroll = false;
} else {
this.setState({ isAutoScroll: true });
isAutoScroll = true;
}
let new_data = this.state.data;
// To accept maximum 10 items in the list
if (this.state.data.length >= 10) {
new_data = this.state.data.slice(0, 10);
} else {
new_data = this.state.data;
}
this.setState({ data: new_data });
this.setIntervalToScroll();
}
setIntervalToScroll() {
// To set time interval for jump to next page
animaInterval = setInterval(
function () {
if (isAutoScroll === true) {
const { pageIndex } = this.state;
let nextIndex = 0;
if (pageIndex < this.state.data.length - 1) {
nextIndex = pageIndex + 1;
}
// if (this.props.onChangeIndex) {
// Alert.alert(JSON.stringify(nextIndex))
// this.props.onChangeIndex(nextIndex);
// }
this.setState({ pageIndex: nextIndex }, () => {
this.scrollToIndex(nextIndex, nextIndex === 0 ? false : true);
});
} else {
clearInterval(animaInterval);
// if (this.props.onChangeIndex) {
// Alert.alert(JSON.stringify(this.state.pageIndex))
// this.props.onChangeIndex(this.state.pageIndex);
// }
}
}.bind(this),
timeInterval,
);
}
/**
* Method for verifying list refrence exists or not
* Apply animation when move to next page or index with timeout
*
* @param {*} index
* @param {*} animated
*/
scrollToIndex = (index, animated) => {
this.flatList && this.flatList.scrollToIndex({ index, animated });
this.flatList_Ref && this.flatList_Ref.scrollToIndex({ index, animated });
if (this.props.onChangeIndex) {
// Alert.alert(JSON.stringify(index))
this.props.onChangeIndex(index);
}
};
/**
* Method for find current index
* Apply animation when move to next page or index with gesture
*/
onScrollEnd(e) {
const contentOffset = e.nativeEvent.contentOffset;
const viewSize = e.nativeEvent.layoutMeasurement;
const pageNum = Math.floor(contentOffset.x / viewSize.width); // Current Page Index
this.setState({ pageIndex: pageNum });
this.flatList_Ref.scrollToIndex({ animated: true, index: pageNum });
if (this.props.onChangeIndex) {
// Alert.alert(JSON.stringify(pageNum))
this.props.onChangeIndex(pageNum);
}
}
/**
* Method for render indicator list
* Show active and passive indicator with active index of the list
*
* @param {*} index
*/
renderIndicatorList = (index) => (
<View style={styles.indicatorListView}>
<View
style={[
styles.indicatorView,
{
backgroundColor:
this.state.pageIndex == index
? this.props.activeIndicatorColor != undefined &&
this.props.activeIndicatorColor != ''
? this.props.activeIndicatorColor
: 'black'
: this.props.passiveIndicatorColor != undefined &&
this.props.passiveIndicatorColor != ''
? this.props.passiveIndicatorColor
: 'grey',
},
]}
/>
</View>
);
closeAutoScroll(val) {
isAutoScroll = val;
this.setState({ isAutoScroll: val });
// Clear AutoScroll Here
if (val == false) {
// clearInterval(animaInterval);
} else {
this.setIntervalToScroll();
}
}
render() {
console.log('Banenr data in library =====>', this.props.data);
return (
<>
{
this.state.data.length === 0 ?
<View style={[this.props.imageStyle, { backgroundColor: '#dcdde0', alignSelf: 'center', alignItems: 'center', justifyContent: 'center'}]}>
<Text style={{fontSize: 18 }}>No banner added.</Text>
</View> :
(
<View>
<StatusBar barStyle="dark-content" backgroundColor="black" />
<FlatList
ref={(ref) => (this.flatList = ref)}
horizontal
bounces={false}
pagingEnabled
showsHorizontalScrollIndicator={false}
data={this.state.data}
// titleKey={this.props.titleKey}
// subTitleKey={this.props.subTitleKey}
extraData={this.state}
renderItem={({ item }) => (
<BannerItem
{...item}
{...this.props}
viewStyle={this.props.viewStyle}
imageStyle={this.props.imageStyle}
isAutoScroll={(val) => this.closeAutoScroll(val)}
scrollVal={isAutoScroll}
url={item}
/>
)}
// keyExtractor={(item) => item.id.toString()}
keyExtractor={(index) => index.toString()}
onMomentumScrollEnd={(e) => this.onScrollEnd(e)}
/>
{/* Show button for play Autoswipe */}
{/* {this.state.isAutoScroll === true ? null : (
<View style={[styles.playView, this.props.viewStyle]}>
<TouchableOpacity
onPress={() => this.closeAutoScroll(true)}
>
<Image
source={images.banner.play}
resizeMode="contain"
style={{
height: 40, width: 40, tintColor: 'white',
borderRadius: 40 / 2,
shadowColor: '#cbcdd1',
shadowOffset: { width: 1, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 50,
}} />
</TouchableOpacity>
</View>
)} */}
{/* second flatlist for indicator */}
<View style={[styles.indicatorMainView, {}]}>
<FlatList
ref={(ref) => (this.flatList_Ref = ref)}
horizontal
bounces={false}
pagingEnabled
showsHorizontalScrollIndicator={false}
data={this.state.data}
extraData={this.state}
renderItem={({ item, index }) => this.renderIndicatorList(index)}
// keyExtractor={(item) => item.id.toString()}
keyExtractor={(index) => index.toString()}
/>
</View>
</View>
)
}
</>
);
}
}