react-native-image-slider-with-text

Install

1. First, install our library | use below npm script

   npm i react-native-image-slider-with-text

   yarn add react-native-image-slider-with-text

Usage :

list of available props for customization SliderBox:

| Props | Value Type | Description | | ---------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | ImageComponent | Image component, default as Image | default value is React-native Image, if you use third-party library like FastImage use this property | | images | 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') | | onCurrentImagePressed | handler function callback | callback for get pressed image index (index start from 0) | | currentImageEmitter | handler function callback | callback for get current image index (index start from 0) | | disableOnPress | boolean | if present, then onCurrentImagePressed will be disabled | | sliderBoxHeight | int value | default value = 200, you can change height of image slider box | | parentWidth | int | default = screen.width ; in advance mode, if parent is smaller, you can change it. best practice is use onLayout handler in parent component or screen. | | dotColor | color string code | change color of paging dot | | inactiveDotColor | color string code | change color of inactive paging dot | | dotStyle | style object | default style is : {width: 10,height: 10,borderRadius: 5,marginHorizontal: 0,padding: 0,margin: 0,} change style of paging dots if you want | | paginationBoxVerticalPadding | int value | default = 10 ; change the height of paging dots from bottom of Slider-Box | | autoplay | bool value | default = false | | circleLoop | boolean - attribute | if set, when user swiped to last image circularly return to the first image again. | | paginationBoxStyle | object,default values use lib style | customize pagination box | | dotStyle | object,default use lib style | customize dot styles | | resizeMethod | string | default is resize | | resizeMode | string | default is cover | | ImageComponentStyle | object | {} style object for ImageComponent | | imageLoadingColor | string | default is #E91E63 , image loading indicator color | | ImageLoader | React component, default as ActivityIndicator | default value is React-native ActivityIndicator. | | firstItem | number | default is 0 , index of image to display when slider box loads |

##example:

const banners=[{'img':'imagestring','buttonText':'buttonText ','title':'title1'},
                  {'img':'imagestring2','buttonText':'buttonText ','title':'title3'},
                  {'img':'imagestring3','buttonText':'buttonText ','title':'title3'}]
<SliderBox
          images={banners}
          sliderBoxHeight={height}

          parentWidth={width}
          onCurrentImagePressed={index => {console.log('index')}}
          dotColor="#FFEE58"
          inactiveDotColor="#90A4AE"
          paginationBoxVerticalPadding={20}
          autoplay
          circleLoop

          resizeMode={'cover'}
        />

Notice:

This library use react-native-image-slider-box and make easier way to create image slider box with full customization ability.

See original Library https://github.com/intellidev1991/react-native-image-slider-box

we dont edit or modify original library, we just use it with some additional style. (BSD 3 License)