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