Customizable image grid component for React Native

To get started install via npm:

 npm install react-native-images-collage --save

To use in React Native. Import:

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

Then add this to your code:

<CollageMatrix
  images={ photos }
  matrix={ [ 1, 1, 1, 1 ] }
  direction={ 'row' } />

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.

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.

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

If you want to issue a PR, go ahead ;)

• Luke Brandon Farrell - Author

This project is licensed under the MIT License