---

To keep up to date with the latest fixes. See [CHANGELOG.md](https://github.com/lukebrandonfarrell/react-native-images-collage/blob/master/CHANGELOG.md). ## Install Install via npm: ```sh npm install react-native-images-collage --save ``` ## Usage To use in React Native. Import: ```js import { DynamicCollage, StaticCollage } from "react-native-images-collage"; ``` ### Dynamic Collage A dynamic collage includes panning, scaling, replacing and image arrangement. ```js } editButtonPosition: { 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' }, onEditButtonPress: { (m, i) => { collageRef.current.replaceImage( 'NewImage' , m , i ) } } /> ``` ### Static Collage A 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. ```js ``` ### Layouts Instead of building your own matrix of collage layouts. There is a JSON file you can import which includes multiple layouts. Up to 6 images. ```js import { LayoutData } from "react-native-images-collage"; ``` You can then access a layout like so: ```js matrix={ LayoutData[NumberOfImages][i].matrix } direction={ LayoutData[NumberOfImages][i].direction } ``` The 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. ### Notes - 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). - 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. - 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). - 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. ## Replacing Images There 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: ``` const collageRef = useRef(null);

Luke Brandon Farrell 💻 📖 🚇

Amogh Jahagirdar 🐛

Muhammad Jasim 💻 📖

Henry Arbolaez 💻 📖

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!