{"_id":"@ai-t/react-native-image-slider-box","_rev":"4-c6c4e0d07def66c442e895f313f7c037","time":{"created":"2023-05-17T09:43:11.939Z","1.0.17":"2023-05-17T09:33:36.196Z","modified":"2023-05-24T07:46:04.320Z","1.0.18":"2023-05-17T09:43:12.365Z","1.0.19":"2023-05-24T07:46:04.211Z"},"name":"@ai-t/react-native-image-slider-box","dist-tags":{"latest":"1.0.19"},"versions":{"1.0.18":{"name":"@ai-t/react-native-image-slider-box","version":"1.0.18","description":"A simple and fully customizable React Native component that implements an Image Slider UI.","main":"index.js","scripts":{},"repository":{"type":"git","url":"git+https://github.com/banv/react-native-image-slider-box.git"},"keywords":["react-native-image-slider-box","react-native-image-slider","react-native","react-native-slider","ReactNative","react-component","react-native-component","react","react native","mobile","ios","android","ui","slider","image slider","image paging slider"],"author":{"name":"Hamed Taheri"},"license":"MIT","bugs":{"url":"https://github.com/banv/react-native-image-slider-box/issues"},"homepage":"https://github.com/banv/react-native-image-slider-box#readme","devDependencies":{"metro-react-native-babel-preset":"latest"},"dependencies":{"@cebolenkosi2579/react-native-snap-carousel":"latest"},"directories":{"example":"example"},"gitHead":"031de412feb258b7469bf79c72fe769260efc738","_id":"@ai-t/react-native-image-slider-box@1.0.18","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-6TkAULrU+p+/bG0/uWzRyNZab85Q1Luns0y+0RWZigBrxtAnw0qmTEavK2O9fz9OW6XUkVEMkIlVaNkS5rEjBw==","shasum":"041bb91dfea3abe15d538a00797282747dda1e3f","tarball":"https://registry.npmjs.org/@ai-t/react-native-image-slider-box/-/react-native-image-slider-box-1.0.18.tgz","fileCount":26,"unpackedSize":532017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEP9U5RbWiDeyp48dY7cr//1b2MCYooEIZ16c5MhTczzAiEAxvGfpHu646LZ/9ZU2lSME8Dv8WRNC98OHW0RzRLvxEE="}]},"_npmUser":{"name":"ai-t","email":"banv+1@ai-t.vn"},"maintainers":[{"name":"ai-t","email":"banv+1@ai-t.vn"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-slider-box_1.0.18_1684316592019_0.9554790935893824"},"_hasShrinkwrap":false},"1.0.19":{"name":"@ai-t/react-native-image-slider-box","version":"1.0.19","description":"A simple and fully customizable React Native component that implements an Image Slider UI.","main":"index.js","scripts":{},"repository":{"type":"git","url":"git+https://github.com/banv/react-native-image-slider-box.git"},"keywords":["react-native-image-slider-box","react-native-image-slider","react-native","react-native-slider","ReactNative","react-component","react-native-component","react","react native","mobile","ios","android","ui","slider","image slider","image paging slider"],"author":{"name":"Hamed Taheri"},"license":"MIT","bugs":{"url":"https://github.com/banv/react-native-image-slider-box/issues"},"homepage":"https://github.com/banv/react-native-image-slider-box#readme","devDependencies":{"metro-react-native-babel-preset":"latest"},"dependencies":{"@cebolenkosi2579/react-native-snap-carousel":"latest"},"directories":{"example":"example"},"gitHead":"34bd54bd6df1fc3b7a345fddc9208b2f88705d55","_id":"@ai-t/react-native-image-slider-box@1.0.19","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-UCLDYAumLUJL9zJcG5wuHYRBXQvgCytxzwbNB2WpqoMSLmuC0/gBQSu4/FU7/LLbLORatUj050dlCUUwubaX2w==","shasum":"e38775895dc8d72ea61e7ef60d3d88394b95172e","tarball":"https://registry.npmjs.org/@ai-t/react-native-image-slider-box/-/react-native-image-slider-box-1.0.19.tgz","fileCount":27,"unpackedSize":531930,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjh4wSpMNJdocW+1CoLGYrUfIxPNPBvzTx/DDx72bEYAiAuaruQNiGjT9K1wPs5eVpje3u0S5xsaj5eFOdmE6z1Ww=="}]},"_npmUser":{"name":"ai-t","email":"banv+1@ai-t.vn"},"maintainers":[{"name":"ai-t","email":"banv+1@ai-t.vn"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-slider-box_1.0.19_1684914363934_0.6205719703150487"},"_hasShrinkwrap":false}},"maintainers":[{"name":"ai-t","email":"banv+1@ai-t.vn"}],"description":"A simple and fully customizable React Native component that implements an Image Slider UI.","homepage":"https://github.com/banv/react-native-image-slider-box#readme","keywords":["react-native-image-slider-box","react-native-image-slider","react-native","react-native-slider","ReactNative","react-component","react-native-component","react","react native","mobile","ios","android","ui","slider","image slider","image paging slider"],"repository":{"type":"git","url":"git+https://github.com/banv/react-native-image-slider-box.git"},"author":{"name":"Hamed Taheri"},"bugs":{"url":"https://github.com/banv/react-native-image-slider-box/issues"},"license":"MIT","readme":"# react-native-image-slider-box\n\n[![npm](https://img.shields.io/npm/v/react-native-image-slider-box.svg)](https://www.npmjs.com/package/react-native-image-slider-box)  ![npm](https://img.shields.io/npm/dt/react-native-image-slider-box.svg)\n\n\n> If you would like to support me, please consider buying me a coffee\n\n <a href=\"https://nowpayments.io/donation?api_key=J02J19H-CB0MDKG-JXN2Z3Z-CZVHVDY\" target=\"_blank\">\n  <img src=\"https://nowpayments.io/images/embeds/donation-button-black.svg\" alt=\"Crypto donation button by NOWPayments\">\n </a>\n\n[How to send a pull-request for this lib??? > Please Read this section before send a pull request\n](#how-to-send-a-pull-request)\n\n---\n\n![SliderBox](assets/pic1.jpg)\n\n![SliderBox](assets/gif.gif)\n\n## Install\n\n1. First, install our library | use below npm script\n\n   > npm i react-native-image-slider-box\n\n   > yarn add react-native-image-slider-box\n\n2. (Optional) : if you want to use third-party image library such as FastImage\n   > npm i react-native-fast-image\n\n   > yarn add react-native-fast-image\n\nWell-done.\n\n## Usage :\n\n### list of available props for customization SliderBox:\n\n| Props                        | Value Type                            | Description                                                                                                                                             |\n| ---------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `ImageComponent`             | Image component, default as `Image`   | default value is React-native Image, if you use third-party library like FastImage use this property                                                    |\n| 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')`                                                                    |\n| onCurrentImagePressed        | handler function callback             | callback for get pressed image index (index start from 0)                                                                                               |\n| currentImageEmitter          | handler function callback             | callback for get current image index (index start from 0)                                                                                               |\n| disableOnPress               | boolean               |               if present, then onCurrentImagePressed will be disabled                            |\n| activeOpacity                | number                             | default value = 0.85, Determines the opacity when touch is active. The value should be between 0 and 1                                                                                           \n| sliderBoxHeight              | int value                             | default value = 200, you can change height of image slider box                                                                                          |\n| 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. |\n| dotColor                     | color string code                     | change color of paging dot                                                                                                                              |\n| inactiveDotColor             | color string code                     | change color of inactive paging dot                                                                                                                     |\n| 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            |\n| paginationBoxVerticalPadding | int value                             | default = 10 ; change the height of paging dots from bottom of Slider-Box                                                                               |\n| autoplay                     | bool value                            | default = false                                                                               |\n| circleLoop                   | boolean - attribute                   | if set, when user swiped to last image circularly return to the first image again.                                                                      |\n| paginationBoxStyle           | object,default values use lib style   | customize pagination box                                                                                                                                |\n| dotStyle                     | object,default use lib style          | customize dot styles                                                                                                                                    |\n| resizeMethod                 | string                                | default is `resize`                                                                                                                                     |\n| resizeMode                   | string                                | default is `cover`                                                                                                                                      |\n| ImageComponentStyle          | object                                | {} style object for ImageComponent   |\n  | imageLoadingColor            | string                                | default is `#E91E63` , image loading indicator color       |\n| ImageLoader            | React component, default as `ActivityIndicator`                                | default value is React-native ActivityIndicator.\n| firstItem            | number                                | default is 0 , index of image to display when slider box loads       |\n| LoaderComponent            | component                                | default is ActivityIndicator , you can pass any component to show as Loader       |\n| autoplayInterval            | number                                | default is 3000ms       |\n\n### 1- add below import in your code :\n\n```js\nimport { SliderBox } from \"react-native-image-slider-box\";\n```\n\n### 2- Define your image array source, for below examples i create array in state.\n\n```js\nexport default class App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      images: [\n        \"https://source.unsplash.com/1024x768/?nature\",\n        \"https://source.unsplash.com/1024x768/?water\",\n        \"https://source.unsplash.com/1024x768/?girl\",\n        \"https://source.unsplash.com/1024x768/?tree\", // Network image\n        require('./assets/images/girl.jpg'),          // Local image\n      ]\n    };\n  }\n  // other component code ...\n}\n```\n\n### 3- Use SliderBox such as these below examples :\n\n### Example 1 : SliderBox without and handler or customization\n\n```js\n<SliderBox images={this.state.images} />\n```\n\n### Example 2 : SliderBox with image press handler and currentImageEmitter\n\n![SliderBox](assets/pic3.jpg)\n\n```js\n<SliderBox\n  images={this.state.images}\n  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}\n  currentImageEmitter={index => console.warn(`current pos is: ${index}`)}\n/>\n```\n\n### Example 3 : SliderBox with image press handler and change slider height (default is 200)\n\n![SliderBox](assets/pic2.jpg)\n\n```js\n<SliderBox\n  images={this.state.images}\n  sliderBoxHeight={400}\n  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}\n/>\n```\n\n### Example 4 : SliderBox with custom width from parent. use `onLayout` function by calling it from `root View` of component.\n\n```js\nonLayout = e => {\n  this.setState({\n    width: e.nativeEvent.layout.width\n  });\n};\n```\n\n```js\nrender() {\n    return (\n        <View style={styles.container} onLayout={this.onLayout}>\n            <SliderBox\n                images={this.state.images}\n                sliderBoxHeight={200}\n                onCurrentImagePressed={index =>\n                    console.warn(`image ${index} pressed`)\n                }\n                parentWidth={this.state.width}\n            />\n        </View>\n    );\n  }\n```\n\n### Example 5 : SliderBox with custom dots color\n\n![SliderBox](assets/pic4.jpg)\n\n```js\n<SliderBox\n  images={this.state.images}\n  sliderBoxHeight={200}\n  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}\n  dotColor=\"#FFEE58\"\n  inactiveDotColor=\"#90A4AE\"\n/>\n```\n\n### Example 6 : SliderBox with custom dot style\n\n![SliderBox](assets/pic6.jpg)\n\n```js\n<SliderBox\n  images={this.state.images}\n  sliderBoxHeight={200}\n  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}\n  dotColor=\"#FFEE58\"\n  inactiveDotColor=\"#90A4AE\"\n  dotStyle={{\n    width: 15,\n    height: 15,\n    borderRadius: 15,\n    marginHorizontal: 10,\n    padding: 0,\n    margin: 0\n  }}\n/>\n```\n\n### Example 7 : SliderBox with change paging box padding (Vertical height from bottom of SliderBox) + add `autoplay` and `circleLoop` attribute for jump to the first image after swipe the last one.\n\n![SliderBox](assets/pic5.jpg)\n\n```js\n<SliderBox\n  images={this.state.images}\n  sliderBoxHeight={200}\n  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}\n  dotColor=\"#FFEE58\"\n  inactiveDotColor=\"#90A4AE\"\n  paginationBoxVerticalPadding={20}\n  autoplay\n  circleLoop\n/>\n```\n\n<hr/>\n\n### Example 8 : use `Custom Image Component`, customize pagination, image `modes` and dotStyles:\n\n![SliderBox](assets/pic7.jpg)\n\n```js\n<SliderBox\n  ImageComponent={FastImage}\n  images={this.state.images}\n  sliderBoxHeight={200}\n  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}\n  dotColor=\"#FFEE58\"\n  inactiveDotColor=\"#90A4AE\"\n  paginationBoxVerticalPadding={20}\n  autoplay\n  circleLoop\n  resizeMethod={'resize'}\n  resizeMode={'cover'}\n  paginationBoxStyle={{\n    position: \"absolute\",\n    bottom: 0,\n    padding: 0,\n    alignItems: \"center\",\n    alignSelf: \"center\",\n    justifyContent: \"center\",\n    paddingVertical: 10\n  }}\n  dotStyle={{\n    width: 10,\n    height: 10,\n    borderRadius: 5,\n    marginHorizontal: 0,\n    padding: 0,\n    margin: 0,\n    backgroundColor: \"rgba(128, 128, 128, 0.92)\"\n  }}\n  ImageComponentStyle={{borderRadius: 15, width: '97%', marginTop: 5}}\n  imageLoadingColor=\"#2196F3\"\n/>\n```\n\n\n### Example 9 : SliderBox with activeOpacity:\n\n![SliderBox](assets/pic6.jpg)\n\n```js\n<SliderBox\n  images={this.state.images}\n  sliderBoxHeight={200}\n  activeOpacity={0.5}\n/>\n```\n\n## Full-Component(Screen) Example:\n\n```js\nimport React, { Component } from \"react\";\nimport { StyleSheet, Text, View } from \"react-native\";\n\nimport { SliderBox } from \"react-native-image-slider-box\";\n\nexport default class App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      images: [\n        \"https://source.unsplash.com/1024x768/?nature\",\n        \"https://source.unsplash.com/1024x768/?water\",\n        \"https://source.unsplash.com/1024x768/?girl\",\n        \"https://source.unsplash.com/1024x768/?tree\",\n        require('./assets/images/girl.jpg'),\n      ]\n    };\n  }\n\n  render() {\n    return (\n      <View style={styles.container}>\n        <SliderBox\n          images={this.state.images}\n          onCurrentImagePressed={index =>\n            console.warn(`image ${index} pressed`)\n          }\n        />\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1\n  }\n});\n```\n\n# Contribute And Update the Library\n\nPlease Edit and use `dist/SliderBox.js` file as src component file.\n## How to send a pull-request\nTo send a pull-request please follow these rules for naming the commit message. Based on the commit messages, increment the version from the lastest release.\n\n- If the string \"`BREAKING CHANGE`\" is found anywhere in any of the commit messages or descriptions the major version will be incremented.\n- If a commit message begins with the string \"`feat`\" then the minor version will be increased. b\"feat: new API\" and \"feature: new API\".\n- All other changes will increment the `patch version`.\n\n### ! `Important: Please update the README.MD file corresponding with your added features.`\n## Please subscribe and contribute with me to develop this lib\n\n---\n\n## Notice:\n\nThis library use `react-native-snap-carousel` and make easier way to create image slider box with full customization ability.\n\nSee original Library [https://github.com/archriss/react-native-snap-carousel](https://github.com/archriss/react-native-snap-carousel)\n\nwe dont edit or modify original library, we just use it with some additional style. (BSD 3 License)\n\n---\n### License MIT\n","readmeFilename":"README.md"}