{"id":4261,"url":"https://github.com/codemers/react-native-comparison-slider","last_synced_at":"2025-08-04T01:31:40.137Z","repository":{"id":47200174,"uuid":"99515728","full_name":"codemers/react-native-comparison-slider","owner":"codemers","description":"Comparison slider for 2 images for React-Native.","archived":true,"fork":false,"pushed_at":"2022-10-27T16:48:25.000Z","size":2772,"stargazers_count":51,"open_issues_count":3,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-22T03:21:13.801Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codemers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-06T22:02:12.000Z","updated_at":"2025-06-18T13:33:04.000Z","dependencies_parsed_at":"2023-01-20T14:47:44.571Z","dependency_job_id":null,"html_url":"https://github.com/codemers/react-native-comparison-slider","commit_stats":null,"previous_names":["charlot567/react-native-comparison-slider"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codemers/react-native-comparison-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemers%2Freact-native-comparison-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemers%2Freact-native-comparison-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemers%2Freact-native-comparison-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemers%2Freact-native-comparison-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemers","download_url":"https://codeload.github.com/codemers/react-native-comparison-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemers%2Freact-native-comparison-slider/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268630353,"owners_count":24281198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:06.169Z","updated_at":"2025-08-04T01:31:39.705Z","avatar_url":"https://github.com/codemers.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"## React Native Comparison Slider\n- A simple component to display two image in comparison with a slide-over feature.\n- Help you to compare two images\n- Lightweight, fast, flexible, customizable.\n- Support both iOS and Android devices\n\n## Install\n```\nnpm install --save react-native-comparison-slider\n\nRequire React-Native \u003e 0.45.0\n```\n\n## Demo\n![Demo](https://github.com/charlot567/react-native-comparison-slider/blob/master/demo_comparison_slider.gif)\n\n## Example code\nPS: For a more detailed example, see: react-native-comparison-slider-example -\u003e to run the example, cd to the example folder and do `react-native start` lunch the iOS simulator by running `react-native run-ios`\n\nWhen you want to use the comparison slider with local images, simply add these lines: \n```\nimport ComparisonSlider from \"react-native-comparison-slider\";\n\n\u003cComparisonSlider \n  imageWidth={667}\n  imageHeight={400}\n  initialPosition={50}\n  leftImage={require(\"./img/left.jpeg\")}\n  rightImage={require(\"./img/right.jpeg\")} \n/\u003e \n```\n\nThese code will use the left.jpeg image as the left image and the right.jpeg as the right image.\nThe slider will be half between the image (50).\nThe imageWidth and imageHeight are the size you want your comparison slider to be.\n\nWhen you want to use the comparison slider with remote images, simply add these lines:\n```\nimport ComparisonSlider from \"react-native-comparison-slider\";\n\n\u003cComparisonSlider \n  initialPosition={50}\n  leftImageURI=\"https://...\"\n  rightImageURI=\"https://...\"\n/\u003e \n```\n\nThese code will use the leftImageURI as the left image and the rightImageURI as the right image.\nThe slider will be half between the image (50).\nThe default size for the comparison slider will be the image size of the remote url.You can bypass the size by adding the two props: `imageWidth and imageHeight`.\n\n## Props\n| Prop | Description | Default value |\n|---|---|---|\n|**`initialPosition`**|The initial position of the slider hover the image. Value are from (0 to 100)|`50`|\n|**`imageWidth`**|Width of the image/comparison slider|If local image: `no default value`. If remote image `image width`|\n|**`imageHeight`**|Height of the image/comparison slider|If local image: `no default value`. If remote image `image height`|\n|**`leftImage`**|Left image for the comparison slider. Use as `require()` |`No default value`|\n|**`rightImage`**|Right image for the comparison slider. Use as `require()` |`No default value`\n|**`leftImageURI`**|URL for the left image of the comparison slider. Use as `{ uri:  \"http://...\" }`|`No default value`|\n|**`rightImageURI`**|URL for the left image of the comparison slider. Use as `{ uri:  \"http://...\" }`|`No default value`|\n|**`onValueChange`**|Function that get called when the slider value changed. (value) =\u003e console.log(value)|`No default value`|\n|**`onSlidingStart`**|Function that get called when the slider starts to change. () =\u003e console.log(value)|`No default value`|\n|**`onSlidingComplete`**|Function that get called when the slider ends changing. () =\u003e console.log(value)|`No default value`|\n|**`thumbnailRender`**|Function that return a view. The view will be the middle slider|`Slider you can see in the demo`|\n|**`thumbnailWidth`**|Width of the view that is returned by the thumbnailRender|`No default value`|\n|**`imageStyle`**|Style property you can pass to apply to image of the comparison slider|`No default value`|\n|**`resizeMode`**|ResizeMode property to apply to the image of the comparison slider|`No default value`|\n\n## License\n\nMIT License\n\nCopyright (c) 2017 Charles-Olivier Demers\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n## Other\n\nThis package use these two libraries:\n\n- https://github.com/jhampton/react-native-cropping.git from 2jhampton\n- https://github.com/jeanregisser/react-native-slider from @jeanregisser\n\n@copyright of the image used in the demo:\n- http://www.basketetsacados.com/top-10-des-plus-belles-plages-du-monde\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemers%2Freact-native-comparison-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemers%2Freact-native-comparison-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemers%2Freact-native-comparison-slider/lists"}