{"id":4287,"url":"https://github.com/dev-yakuza/react-native-image-modal","last_synced_at":"2025-05-16T07:02:41.754Z","repository":{"id":36990619,"uuid":"234505722","full_name":"dev-yakuza/react-native-image-modal","owner":"dev-yakuza","description":"the simple image modal for React Native","archived":false,"fork":false,"pushed_at":"2025-01-29T00:09:37.000Z","size":73207,"stargazers_count":628,"open_issues_count":5,"forks_count":46,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-14T23:43:46.766Z","etag":null,"topics":["image-modal","react","react-native","react-native-ui"],"latest_commit_sha":null,"homepage":"https://dev-yakuza.github.io/en/react-native/react-native-image-modal/","language":"TypeScript","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/dev-yakuza.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["dev-yakuza"],"custom":["https://www.buymeacoffee.com/j0cXhWiza"]}},"created_at":"2020-01-17T08:33:07.000Z","updated_at":"2025-05-12T18:39:32.000Z","dependencies_parsed_at":"2024-05-18T12:45:54.226Z","dependency_job_id":"5f658174-b851-4a81-bc82-263eb5de25c1","html_url":"https://github.com/dev-yakuza/react-native-image-modal","commit_stats":{"total_commits":201,"total_committers":6,"mean_commits":33.5,"dds":0.09452736318407962,"last_synced_commit":"318eec7d83c47630565a70341be0382638b6cbff"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-yakuza%2Freact-native-image-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-yakuza%2Freact-native-image-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-yakuza%2Freact-native-image-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-yakuza%2Freact-native-image-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-yakuza","download_url":"https://codeload.github.com/dev-yakuza/react-native-image-modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485025,"owners_count":22078764,"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","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":["image-modal","react","react-native","react-native-ui"],"created_at":"2024-01-05T20:17:06.952Z","updated_at":"2025-05-16T07:02:39.569Z","avatar_url":"https://github.com/dev-yakuza.png","language":"TypeScript","funding_links":["https://github.com/sponsors/dev-yakuza","https://www.buymeacoffee.com/j0cXhWiza"],"categories":["Components","TypeScript","Mobile"],"sub_categories":["UI","React Native \u0026 Expo"],"readme":"# react-native-image-modal\n\n`react-native-image-modal` is a simple full size modal image for iOS and Android.\n\nYou can pinch zoom-in/out, double-tap zoom-in/out, move and swipe-to-dismiss.\n\n## Document\n\n- [Blog](#blog)\n- [Installation](#installation)\n- [How to use](#how-to-use)\n- [Properties](#properties)\n- [Demo](#demo)\n- [Example code](#example-code)\n- [Contribute](#contribute)\n\n## Blog\n\nThere are blog posts about how to use `react-native-image-modal`.\n\n- English: [how to use react-native-image-modal](https://dev-yakuza.github.io/en/react-native/react-native-image-modal/)\n- 한국어: [react-native-image-modal 사용법](https://dev-yakuza.github.io/ko/react-native/react-native-image-modal/)\n- 日本語: [react-native-image-modal 使い方](https://dev-yakuza.github.io/react-native/react-native-image-modal/)\n\n## Installation\n\nExecute the command to install `react-native-image-modal`.\n\n```bash\n# npm\nnpm install --save react-native-image-modal\n\n# yarn\nyarn add --dev react-native-image-modal\n\n# pnpm\npnpm add --save react-native-image-modal\n```\n\n## How to use\n\nImport react-native-image-modal.\n\n```js\nimport ImageModal from 'react-native-image-modal'\n```\n\nAdd the source code below to where you want to use it.\n\n```js\nreturn (\n  \u003cImageModal\n    resizeMode='contain'\n    imageBackgroundColor='#000000'\n    style={{\n      width: 250,\n      height: 250,\n    }}\n    source={{\n      uri: 'https://cdn.pixabay.com/photo/2019/07/25/18/58/church-4363258_960_720.jpg',\n    }}\n  /\u003e\n)\n```\n\n### Custom Image component\n\nIf you want to use a custom image component like `react-native-fast-image` or `expo-image`, you can use `renderImageComponent` property.\n\n```js\nimport FastImage, {ImageStyle, ResizeMode} from 'react-native-fast-image';\n\n\u003cImageModal\n  style={{\n    width: imageWidth,\n    height: 250,\n  }}\n  source={{\n    uri: 'https://cdn.pixabay.com/photo/2018/01/11/09/52/three-3075752_960_720.jpg',\n  }}\n  renderImageComponent={({source, resizeMode, style}) =\u003e (\n    \u003cFastImage\n      style={style as StyleProp\u003cImageStyle\u003e}\n      source={source as ImageRequireSource}\n      resizeMode={resizeMode as ResizeMode}\n    /\u003e\n  )}\n/\u003e\n```\n\n## Properties\n\nYou can use All props of React Native Image for the original image(not full size modal image).\nBelow are `react-native-image-modal` specific properties.\n\n| Prop                           | required | Type                                                                                                                             | Description                                                                                                                                |\n| ------------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| renderToHardwareTextureAndroid | X        | boolean                                                                                                                          | It is for Android animation. Default is `true`. If you don't want to use Hardware Texture on Android, set `false`.                         |\n| isTranslucent                  | X        | boolean                                                                                                                          | if you use `translucent` status bar in android, set `true` to prevent wrong position animation. (In Expo, `translucent` default is `true`) |\n| swipeToDismiss                 | X        | boolean                                                                                                                          | set `true` to swipe to dismiss (`default: true`)                                                                                           |\n| imageBackgroundColor           | X        | string                                                                                                                           | background color for `the original image`                                                                                                  |\n| overlayBackgroundColor         | X        | string                                                                                                                           | background color for `the full size modal`(`default: #000000`)                                                                             |\n| (Deprecated) modalRef          | X        | ImageDetail                                                                                                                      | You can use this Ref for closing the Modal programmatically. (This pros is deprecated. Please use the ref props.)                          |\n| ref                            | X        | ReactNativeImageModal                                                                                                            | You can use this Ref for opening or closing the Modal programmatically.                                                                    |\n| disabled                       | X        | boolean                                                                                                                          | disable opening the modal                                                                                                                  |\n| modalImageStyle                | X        | ImageStyle                                                                                                                       | Image Style in Modal                                                                                                                       |\n| resizeMode                     | X        | ResizeMode('contain', 'cover', 'stretch','center')                                                                               | Image resizeMode                                                                                                                           |\n| modalImageResizeMode           | X        | ResizeMode('contain', 'cover', 'stretch','center')                                                                               | Image resizeMode for modal image. If it is not passed, it will follow the `resizeMode`.                                                    |\n| parentLayout                   | X        | { x: number; y: number; width: number; height: number; }                                                                         | Parent layout of image modal to hide overflow of image.                                                                                    |\n| animationDuration              | X        | number                                                                                                                           | Duration of animation. Default is 100ms.                                                                                                   |\n| hideCloseButton                | X        | boolean                                                                                                                          | hide hide the default close button                                                                                                         |\n| onLongPressOriginImage         | X        | () =\u003e void                                                                                                                       | long press event callback for `the original image`                                                                                         |\n| renderHeader                   | X        | (close: () =\u003e void) =\u003e ReactNode                                                                                                 | You can customize the header of `the full size modal` with react native components                                                         |\n| renderFooter                   | X        | (close: () =\u003e void) =\u003e ReactNode                                                                                                 | You can customize the footer of `the full size modal` with react native components                                                         |\n| renderImageComponent           | X        | ({ source: ImageSourcePropType, style?: StyleProp\u003cImageStyle\u003e, resizeMode?: ImageResizeMode, isModalOpen: boolean}) =\u003e ReactNode | You can customize the footer of `the full size modal` with react native components                                                         |\n| isRTL                          | X        | boolean                                                                                                                          | You can use this library with right-to-left-devices. ([#35](https://github.com/dev-yakuza/react-native-image-modal/issues/35))             |\n| onTap                          | X        | (eventParams: {locationX: number; locationY: number; pageX: number; pageY: number;}) =\u003e void                                     | one tap event callback for `the full size modal`                                                                                           |\n| onDoubleTap                    | X        | () =\u003e void                                                                                                                       | double tap event callback for `the full size modal`                                                                                        |\n| onLongPress                    | X        | () =\u003e void                                                                                                                       | long press event callback for `the full size modal`                                                                                        |\n| onOpen                         | X        | () =\u003e void                                                                                                                       | open event callback for `the full size modal`                                                                                              |\n| didOpen                        | X        | () =\u003e void                                                                                                                       | event callback after open for `the full size modal`                                                                                        |\n| onMove                         | X        | (position: {type: string; positionX: number; positionY: number; scale: number; zoomCurrentDistance: number;}) =\u003e void            | move event callback for `the full size modal`                                                                                              |\n| responderRelease               | X        | (vx?: number, scale?: number) =\u003e void                                                                                            | responder release event callback for `the full size modal`                                                                                 |\n| willClose                      | X        | () =\u003e void                                                                                                                       | event callback before close for `the full size modal`                                                                                      |\n| onClose                        | X        | () =\u003e void                                                                                                                       | close event callback for `the full size modal`                                                                                             |\n\n## Demo\n\n- Open and close the image modal.\n\n![open and close image modal](demo/open-and-close-image-modal.gif)\n\n- Pinch zoom in/out and move.\n\n![pinch zoom in/out and move](demo/pinch-zoom-and-move.gif)\n\n- Double tap zoom in/out.\n\n![double tap zoom in/out](demo/double-tap-zoom.gif)\n\n- Swipe to dismiss.\n\n![swipe to dismiss](demo/swipe-to-dismiss.gif)\n\n- Customize the component with the close button.\n\n![customize the component](demo/custom-button.png)\n\n## Example code\n\nYou can see the example code and demo.\n\nClone the repository\n\n```bash\ngit clone https://github.com/dev-yakuza/react-native-image-modal.git\n```\n\nInstall libraries\n\n```bash\ncd Example\nnpm install\n\n# iOS\ncd ios\npod install\n```\n\nExecute the example project.\n\n```bash\n# Example folder\n# iOS\nnpm run ios\n# Android\nnpm run android\n```\n\n## Contribute\n\nYou can follow below to contribute react-native-image-modal.\n\nClone the repository.\n\n```bash\ngit clone https://github.com/dev-yakuza/react-native-image-modal.git\n```\n\nInstall libraries.\n\n```bash\nnpm install\nnpx lefthook install\n```\n\nExecute the following command to start the project.\n\n```bash\nnpm start\n```\n\nExecute the Develop project via the commands below.\n\n```bash\ncd Develop\nnpm install\n\n# android\nnpm run android\n\n# ios\ncd ios\npod install\ncd ..\nnpm run ios\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-yakuza%2Freact-native-image-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-yakuza%2Freact-native-image-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-yakuza%2Freact-native-image-modal/lists"}