import React, {Component} from 'react'; import {AppRegistry, StyleSheet, Text, Image, View} from 'react-native'; import Swiper from 'react-native-swiper'; import R from '../../assets/R'; import {HEIGHTXD} from '../../Config/Functions'; const styles = StyleSheet.create({ container: { marginHorizontal: 20, marginBottom: 10, borderRadius: 5, height: HEIGHTXD(400), marginTop: HEIGHTXD(70), borderBottomColor: R.colors.borderGray, borderTopColor: R.colors.borderGray, shadowColor: '#000', shadowOffset: { width: 0, height: 1, }, shadowOpacity: 0.25, shadowRadius: 2.84, elevation: 2, }, text: { color: '#fff', fontSize: 30, fontWeight: 'bold', }, }); const SwiperComponent = (props) => { return ( <View style={styles.container}> <Swiper dotColor={R.colors.color777} activeDotColor={R.colors.white} paginationStyle={{bottom: 5}} style={styles.wrapper} loop={true} autoplay={true}> <View style={{borderRadius: 10}}> <Image style={{height: HEIGHTXD(400), width: '100%', borderRadius: 5}} source={{uri: props.listImage[0].url}} resizeMode={'cover'} /> </View> <View style={{borderRadius: 10}}> <Image style={{height: HEIGHTXD(400), width: '100%', borderRadius: 5}} source={{uri: props.listImage[1].url}} resizeMode={'cover'} /> </View> <View style={{borderRadius: 10}}> <Image style={{height: HEIGHTXD(400), width: '100%', borderRadius: 5}} source={{uri: props.listImage[2].url}} resizeMode={'cover'} /> </View> </Swiper> </View> ); }; export default SwiperComponent;