/ Images

Customizable image grid component for React Native

Customizable image grid component for React Native


Photo collage component for React Native.

Instead of building your own matrix of collage layouts. There is a JSON file you can import which supports various layouts up to 6 images.

 import { CollageMatrix, LayoutData } from 'react-native-images-collage';

You can then access a layout like so:


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.


Note: For this to work as expected, the number of images has to be equal to the result of all numbers in the matrix. e.g. if matrix is [ 1, 2, 1 ] there has to be 4 images.

Prop Type Optional Default Description
images array No Images for the collage.
matrix centered No An array like this [ 1, 1, 1 ] equal to the number of images. Used to define the layout
separators int Yes 0 Amount of space between images.
direction string Yes row Direction of the collage: 'row' or 'column'.
borders int Yes 4 Width of borders.
borderColor string Yes white Border colour.
backgroundColor string Yes white Background color of collage.
containerStyle object Optional 100% Style applied to the container of the collage



  • [ ] Add examples to README
  • [ ] Fix some of the JSON layouts for 5 and 6 images
  • [ ] Test on Android