/ Images

Customizable image grid component for React Native

Customizable image grid component for React Native

react-native-images-collage

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:

 LayoutData[NumberOfImages][i]

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.

Props

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

Examples

Todo

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

GitHub

Comments