{"_id":"@borgo-dev/react-native-image-slider-box","_rev":"1-622356577fd1c4f3fc1777fa40039476","name":"@borgo-dev/react-native-image-slider-box","dist-tags":{"latest":"1.0.16"},"versions":{"1.0.15":{"name":"@borgo-dev/react-native-image-slider-box","version":"1.0.15","description":"A simple and fully customizable React Native component that implements an Image Slider UI. With the Snap Carousel fix","main":"index.js","scripts":{},"repository":{"type":"git","url":"git+https://github.com/intellidev1991/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/intellidev1991/react-native-image-slider-box/issues"},"homepage":"https://github.com/intellidev1991/react-native-image-slider-box#readme","devDependencies":{"metro-react-native-babel-preset":"latest"},"dependencies":{"react-native-snap-carousel-deprecated-prop-types":"latest"},"gitHead":"52c4f43234e0397b0f3e5698488ca604c5521cbe","_id":"@borgo-dev/react-native-image-slider-box@1.0.15","_nodeVersion":"16.10.0","_npmVersion":"7.24.0","dist":{"integrity":"sha512-WMbEV/9EJoC6Dun7VvlCtiyfTpqo03Lkhh3tMVVxfCGA06kCwdOhUe1EHLWp5rgIY2V6bSju5uOg7aSpE6NNag==","shasum":"46b81c3bbf74cb40fdac4abec8693f1eab9ed45a","tarball":"https://registry.npmjs.org/@borgo-dev/react-native-image-slider-box/-/react-native-image-slider-box-1.0.15.tgz","fileCount":19,"unpackedSize":529217,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBKzBgNT2OmNfmDtVJD1bexzC1jBGHfXUaLwIGuZ0gfgIgdz3Cx2eNQgAW/wNYU/4hJa+mjUvXwQeqTkfNdId+SZc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfziRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpq5BAAldFtL/U6ZwXptQK7LsblCqs4CwKuazWO9O0QC8sj/nogUNsL\r\nIOw23dZDQBiOn3/2G2jVWBXLSEU+AJICiKbv5DnVlcfc24//isnRSlsB8VX9\r\nWmVDoV6gV/sHs1/wzNZF+cpo4y7iD+tWbrFy7s+dSlRY7URKLdprZW/24x51\r\n/jVNZquOmHjiKfTfzKdvj4NKvIxk3fgLjJTCpQrjmLxiVPwNAPOyO6ALE8Xd\r\nq/PVmxX9c4CM8CfG4Uimt0NFwkOFpvvrt/Cf2wdgl2UWjw35nVLFo/qaH5rC\r\nNPAA93xIe4Vi2Nj09nLVFGXvIcU5JW2tvvOJdBS1Mave4ZHCVkwCpChFialb\r\nqF8Yb9Hj9qIVpf0RQWSLwu/A9stFiDTPNlA5mA/4dU1GTqV0u/bL/gREKqX+\r\nLbs450dmB4PM4H/CKTynx4jdvJt5VRJLUdvO+fzcz7FE0gapHAul4hN58lfK\r\nOqhItUt9o88EOZc1TYKgxom4qMeYGCGW7eI/Du+7/E7yQ60Q4S2oR+pyGF2a\r\nA+4DOnZdwVB7DIHNiZwXUBUhXPLLod6G4kb/nppjQUCY0lG3mV00pXUUi+Bw\r\nQXYUJX9EWeZ0R8gT2vk5Dd91v5ocr1Rm4lZbNOFMDwuakYwBeu/pGM3eL4dA\r\nnpZ4ePsrh26TCRs5VjZGeNViLQeqXx0as2c=\r\n=5SSj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"borgo199","email":"thomas.borgognon@bluewin.ch"},"directories":{},"maintainers":[{"name":"borgo199","email":"thomas.borgognon@bluewin.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-slider-box_1.0.15_1669281937627_0.9095545848131414"},"_hasShrinkwrap":false},"1.0.16":{"name":"@borgo-dev/react-native-image-slider-box","version":"1.0.16","description":"A simple and fully customizable React Native component that implements an Image Slider UI. With the Snap Carousel fix","main":"index.js","scripts":{},"repository":{"type":"git","url":"git+https://github.com/Borgo199/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/intellidev1991/react-native-image-slider-box/issues"},"homepage":"https://github.com/intellidev1991/react-native-image-slider-box#readme","devDependencies":{"metro-react-native-babel-preset":"latest"},"dependencies":{"react-native-snap-carousel-deprecated-prop-types":"latest"},"gitHead":"9335a0be6342c3abb2628527c365386a1c73a6a4","_id":"@borgo-dev/react-native-image-slider-box@1.0.16","_nodeVersion":"16.10.0","_npmVersion":"7.24.0","dist":{"integrity":"sha512-YCdy3dlrSMKLttmpJoG4rZquGeGLD6PSo8+UXj2aWS+n9M5FGxDwbdtxvI8WdFS7j9Iuh0Pj1CjC0EvPqzQ2zw==","shasum":"44db1a1e3d03067f6df6e0f78b5c7794e4fb0faf","tarball":"https://registry.npmjs.org/@borgo-dev/react-native-image-slider-box/-/react-native-image-slider-box-1.0.16.tgz","fileCount":19,"unpackedSize":529396,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/YpW6GFqrDkLyYzEBjk8OpMflh7qhdvSYK4EWDrboJAiBPq/lntgoF+aG2uGaqrYfjOsDSD35Az2WxABgVcNITog=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfzrBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol8Q//ZfkpWwRpNXzlD1B/YRKsSe7GY/MoF374UXEnCQquNHpbAMWq\r\nyK5lgwkkysx0Ek6PVpCY/bMBmhJcHPY5Z9Q7nwFjoohNabwaGkWHbL2ND7Ky\r\nXYCXIshIQJogViQirInmU2qEW90j8kw4qmWBfrSLxCQoqypgFald3I3jPL4P\r\n4nf2uZGbH5nUDguWiFKBscOEvZgrIu5dLrBF6eOSCpQSGy/lFqEAh9xRyy01\r\nLPSYtHPaR8DGDhO+Gzg6NI0iy/Gl3xSGgXkFPZ+tNOyHDMRizSJtkiHPkj7c\r\n2DgLZt0G9dnWf+YopOnNzQwRR0CsqL82aTdgfrwtF1UnDjogHRq/sOVXUKvJ\r\nulgO8sMwdRzjLFwz0O2ytD5EoOR3YBW2DSXD5Ke47MUKs5v7rSwjCxSviYPU\r\ni4R8OfmZNWjfyE9idMDW9n0m9xgR+2pQIMI30uaB6ZJ9oq8RBjTl0Dfa05Rv\r\nF97tGwW4zAwCh1mUvEqr3y7Xw6iVJ9+rbIwuF20k8+7e7CVlXx2Pq8zBT7G4\r\nCBDTvbg0WpfeWrhICC+bbJBa0YFhH5ZndhCalc8sYybzn2WlrKTBvgCKLTpH\r\nWKyM0i1MYZ0jsY9QSG/AqBrL2nQ/mFIt0SWCdVzojR+jdEdGjsM9MTYJg98X\r\nFo5XlxsT20ux2xnK+fwLw0GYIixxdl1HH0Q=\r\n=fNXc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"borgo199","email":"thomas.borgognon@bluewin.ch"},"directories":{},"maintainers":[{"name":"borgo199","email":"thomas.borgognon@bluewin.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-slider-box_1.0.16_1669282497496_0.005262759113644266"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-24T09:25:37.545Z","1.0.15":"2022-11-24T09:25:37.798Z","modified":"2022-11-24T09:34:57.820Z","1.0.16":"2022-11-24T09:34:57.713Z"},"maintainers":[{"name":"borgo199","email":"thomas.borgognon@bluewin.ch"}],"description":"A simple and fully customizable React Native component that implements an Image Slider UI. With the Snap Carousel fix","homepage":"https://github.com/intellidev1991/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/Borgo199/react-native-image-slider-box.git"},"author":{"name":"Hamed Taheri"},"bugs":{"url":"https://github.com/intellidev1991/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> I need someone to help me maintain the project. Feel free to send me an email.\n\nAttention this is a fork to react-native-image-slider-box by [intellidev1991](https://github.com/intellidev1991) who fix the  PropTypes error thrown by react-native-snap-carousel.\n\n------\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"}