{"id":13755806,"url":"https://github.com/lukebrandonfarrell/react-native-images-collage","last_synced_at":"2025-05-10T02:33:06.951Z","repository":{"id":265723443,"uuid":"849826210","full_name":"lukebrandonfarrell/react-native-images-collage","owner":"lukebrandonfarrell","description":"Robust interactive image collage component for React Native","archived":false,"fork":true,"pushed_at":"2023-09-28T23:41:14.000Z","size":14900,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-08T01:39:33.723Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Qeepsake/react-native-images-collage","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukebrandonfarrell.png","metadata":{},"created_at":"2024-08-30T10:22:57.000Z","updated_at":"2024-08-30T10:22:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/lukebrandonfarrell/react-native-images-collage","commit_stats":null,"previous_names":["lukebrandonfarrell/react-native-images-collage"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-images-collage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-images-collage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-images-collage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-images-collage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukebrandonfarrell","download_url":"https://codeload.github.com/lukebrandonfarrell/react-native-images-collage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253354489,"owners_count":21895436,"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":["collage","collage-maker","javascript","layout-grid","matrix","photo","photo-editor","photo-organizer","photogrid","react","react-native"],"created_at":"2024-08-03T11:00:30.267Z","updated_at":"2025-05-10T02:33:06.940Z","avatar_url":"https://github.com/lukebrandonfarrell.png","language":null,"funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-images-collage/react-native-images-collage.png\" width=\"190\" height=\"190\"\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-images-collage\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-native-images-collage.svg?style=flat-square\" alt=\"version\" style=\"max-width:100%;\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-images-collage\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"http://img.shields.io/npm/l/react-native-images-collage.svg?style=flat-square\" alt=\"license\" style=\"max-width:100%;\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-images-collage\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"http://img.shields.io/npm/dt/react-native-images-collage.svg?style=flat-square\" alt=\"downloads\" style=\"max-width:100%;\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-images-collage\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square\" alt=\"contributors\" style=\"max-width:100%;\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n  \u003chr /\u003e\n\u003c/p\u003e\n\n\u003cimg align=\"left\" src=\"https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-images-collage/i3.gif\" width=\"48%\" /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-images-collage/i4.gif\" width=\"48%\" /\u003e\n\u003cimg align=\"left\" src=\"https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-images-collage/i2.gif\" width=\"48%\" /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-images-collage/i1.gif\" width=\"48%\" /\u003e\n\nTo keep up to date with the latest fixes. See [CHANGELOG.md](https://github.com/lukebrandonfarrell/react-native-images-collage/blob/master/CHANGELOG.md).\n\n## Install\n\nInstall via npm:\n\n```sh\n npm install @qeepsake/react-native-images-collage --save\n```\n\n## Usage\n\nTo use in React Native. Import:\n\n```js\nimport { DynamicCollage, StaticCollage } from \"react-native-images-collage\";\n```\n\n### Dynamic Collage\n\nA dynamic collage includes panning, scaling, replacing and image arrangement.\n\n```js\n  \u003cDynamicCollage\n    width={400}\n    height={400}\n    images={ photos }\n    matrix={ [ 1, 1, 1, 1 ] }\n    isEditButtonVisible: { true | false },\n    EditButtonComponent: {() =\u003e \u003cYourCustomComponent/\u003e}\n    editButtonPosition: { 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' },\n    onEditButtonPress: { (m, i) =\u003e { collageRef.current.replaceImage( 'NewImage' , m , i ) } }\n    /\u003e\n```\n\n### Static Collage\n\nA static collage does not include any panning, scaling or arrangement logic. Use this if you want to render multiple non-interactive collages. Same props as the dynamic collage.\n\n```js\n\u003cStaticCollage width={400} height={400} images={photos} matrix={[1, 1, 1, 1]} /\u003e\n```\n\n### Layouts\n\nInstead of building your own matrix of collage layouts. There is a JSON file you can import which includes multiple layouts. Up to 6 images.\n\n```js\nimport { LayoutData } from \"react-native-images-collage\";\n```\n\nYou can then access a layout like so:\n\n```js\n matrix={ LayoutData[NumberOfImages][i].matrix }\n direction={ LayoutData[NumberOfImages][i].direction }\n```\n\nThe number in the first bracket will be the configuration you want to access. E.g. configuration for 5 images. The second number is the specific layout you want to access e.g. [2, 2, 1]. You will have to inspect the JSON file to find this out.\n\n### Notes\n\n- If you want to capture the collage as a single image. Take a look at [react-native-view-shot](https://github.com/gre/react-native-view-shot).\n- The number of images has to be equal to the sum of the matrix. e.g. Matrix is [ 1, 2, 1 ] ( 1 + 2 + 1 = 4), there has to be 4 images.\n- The collage scaling will not work when in a [Modal](https://facebook.github.io/react-native/docs/modal) component. [Multiple touches are not registered](https://github.com/facebook/react-native/issues/8094).\n- Do NOT update height or width props dynamically to change the size of the collage (as image sizes won't be re-calculated correctly, this is due to a race condition in measuring the layout of the collage). Use `ref.current.updateCollageSize({ width, height })` instead to adjust size dynamically.\n\n## Replacing Images\n\nThere is a API in DynamicCollage which can be used to replace images. It can be accessed via reference. Setup the ref with the DynamicCollage like so:\n\n```\nconst collageRef = useRef(null);\n\n\u003cDynamicCollage\n  ref={collageRef}\n  ...\n```\n\nYou can then pass the source (url or file asset) m (matrix index) and i (relative image index) to the `replaceImage` function:\n\n```\ncollageRef.current.replaceImage(\"https://picsum.photos/200\", m, i);\n```\n\n## Props\n\n| Prop                 | Type     | Optional | Default  | Description                                                                                                               |\n| -------------------- | -------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |\n| width                | float    | No       |          | Width of component. REQUIRED. Used to calculate image boundaries for switching.                                           |\n| height               | float    | No       |          | Height of component. REQUIRED. Used to calculate image boundaries for switching.                                          |\n| images               | array    | No       |          | Images for the collage.                                                                                                   |\n| matrix               | array    | No       |          | An array [ 1, 1, 1 ] equal to the number of images. Used to define the layout.                                            |\n| isEditButtonVisible  | boolean  | No       |          | A boolean value for the edit button. Used to display the edit button on layout.                                           |\n| EditButtonComponent  | function | Yes      |          | Custom Edit button component to be displayed on each image in the layout if the value `isEditButtonVisible` will be true. |\n| editButtonPosition   | enum     | Yes      | top-left | Enum value to set the position of `EditButtonComponent` on each collage image layout.                                     |\n| editButtonIndent     | number   | Yes      | 20       | Number value to set the indentation of `EditButtonComponent` on each collage image layout.                                |\n| onEditButtonPress    | function | Yes      |          | `EditButtonComponent` when pressed will be triggered to replace the respective image.                                     |\n| direction            | string   | Yes      | row      | Direction of the collage: 'row' or 'column'.                                                                              |\n| panningLeftPadding   | number   | Yes      | 15       | Distance image can go beyond the left edge before it is restricted.                                                       |\n| panningRightPadding  | number   | Yes      | 15       | Distance image can go beyond the right edge before it is restricted.                                                      |\n| panningTopPadding    | number   | Yes      | 15       | Distance image can go beyond the top edge before it is restricted.                                                        |\n| panningBottomPadding | number   | Yes      | 15       | Distance image can go beyond the bottom edge before it is restricted.                                                     |\n| scaleAmplifier       | number   | Yes      | 1.0      | Amplifier applied to scaling. Increase this for faster scaling of images.                                                 |\n| retainScaleOnSwap    | boolean  | Yes      | true     | Keep the scale (width/height) of image when it is swapped.                                                                |\n| longPressDelay       | number   | Yes      | 500      | Delay before long press is activated.                                                                                     |\n| longPressSensitivity | number   | Yes      | 3        | Sensitivity of the long press, float of 1 (low) to 10+ (high).                                                            |\n| imageStyle           | object   | Yes      | style    | Default image style.                                                                                                      |\n| imageSelectedStyle   | object   | Yes      | style    | The style applied to the image when it has been selected. Long Pressed.                                                   |\n| imageSwapStyle       | object   | Yes      | style    | The style applied to the target image which is being swapped. E.g red borders                                             |\n| imageSwapStyleReset  | object   | Yes      | style    | The reverse of imageSwapStyle to reset style after swap. Vital for direct manipulation.                                   |\n| separatorStyle       | object   | Yes      | style    | Style applied to image container. Use border width to create margin between images.                                       |\n| containerStyle       | object   | Yes      | style    | Style applied to the container of the collage. Collage border can be applied here.                                        |\n| imageContainerStyle  | object   | Yes      | style    | Style applied to each image container.                                                                                    |\n| imageFocussedStyle   | object   | Yes      | style    | Style applied to the focused image container.                                                                             |\n\n## API Reference\n\n### `updateCollageSize({ width, height })`\n\nUpdates the collage width or height (NOTE: width and height props should always be static)\n\n- `size: Object` - new size for collage to be calculated. Currently supported options are:\n  - `width : number` new width of the collage.\n  - `height : number` new height of the collage.\n\n### `replaceImage(source, m, i)`\n\nReplaces an image at the matrix and index of the collage\n\n- `source: string | number` - A local file asset or uri\n- `m : number` the matrix of the collage (you can think of this as the row or column).\n- `i : number` index inside the matrix (you can think of this as index inside the row or column)\n\n## Showcase\n\n- Qeepsake - The Text Message Baby Journal on [iOS](https://itunes.apple.com/us/app/qeepsake/id1332312787?mt=8) and [Android](https://play.google.com/store/apps/details?id=co.qeepsake.qeepsakeApp\u0026hl=en_GB).\n\nIf you use the collage in your application then create a pull request to feature it here.\n\n## License\n\nThis project is licensed under the MIT License\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.lukebrandonfarrell.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/18139277?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuke Brandon Farrell\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Qeepsake/react-native-images-collage/commits?author=lukebrandonfarrell\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/Qeepsake/react-native-images-collage/commits?author=lukebrandonfarrell\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-lukebrandonfarrell\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://jramogh.co\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/31567169?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAmogh Jahagirdar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Qeepsake/react-native-images-collage/issues?q=author%3Aamogh-jrules\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.facebook.com/jasim.awan.009\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/31315869?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMuhammad Jasim\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Qeepsake/react-native-images-collage/commits?author=jasimawan\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/Qeepsake/react-native-images-collage/commits?author=jasimawan\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://henryarb.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/13140872?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHenry Arbolaez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Qeepsake/react-native-images-collage/commits?author=harbolaez\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/Qeepsake/react-native-images-collage/commits?author=harbolaez\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukebrandonfarrell%2Freact-native-images-collage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukebrandonfarrell%2Freact-native-images-collage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukebrandonfarrell%2Freact-native-images-collage/lists"}