To keep up to date with the latest fixes. See CHANGELOG.md.
Install via npm:
npm install react-native-images-collage --save
To use in React Native. Import:
import { DynamicCollage, StaticCollage } from 'react-native-images-collage';
A dynamic collage includes panning, scaling and image arrangement.
<DynamicCollage
width={400}
height={400}
images={ photos }
matrix={ [ 1, 1, 1, 1 ] } />
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.
<StaticCollage
width={400}
height={400}
images={ photos }
matrix={ [ 1, 1, 1, 1 ] } />
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.
import { LayoutData } from 'react-native-images-collage';
You can then access a layout like so:
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.
- If you want to capture the collage as a single image. Take a look at 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 react-native component. Multiple touches are not registered.
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
width | float | No | Width of component. REQUIRED. Used to calculate image boundaries for switching. | |
height | float | No | Height of component. REQUIRED. Used to calculate image boundaries for switching. | |
images | array | No | Images for the collage. | |
matrix | array | No | An array [ 1, 1, 1 ] equal to the number of images. Used to define the layout. | |
direction | string | Yes | row | Direction of the collage: 'row' or 'column'. |
panningLeftPadding | number | Yes | 15 | Distance image can go beyond the left edge before it is restricted. |
panningRightPadding | number | Yes | 15 | Distance image can go beyond the right edge before it is restricted. |
panningTopPadding | number | Yes | 15 | Distance image can go beyond the top edge before it is restricted. |
panningBottomPadding | number | Yes | 15 | Distance image can go beyond the bottom edge before it is restricted. |
scaleAmplifier | number | Yes | 1.0 | Amplifier applied to scaling. Increase this for faster scaling of images. |
retainScaleOnSwap | boolean | Yes | true | Keep the scale (width/height) of image when it is swapped. |
longPressDelay | number | Yes | 500 | Delay before long press is activated. |
longPressSensitivity | number | Yes | 3 | Sensitivity of the long press, float of 1 (low) to 10+ (high). |
imageStyle | object | Yes | style | Default image style. |
imageSelectedStyle | object | Yes | style | The style applied to the image when it has been selected. Long Pressed. |
imageSwapStyle | object | Yes | style | The style applied to the target image which is being swapped. E.g red borders |
imageSwapStyleReset | object | Yes | style | The reverse of imageSwapStyle to reset style after swap. Vital for direct manipulation. |
separatorStyle | object | Yes | style | Style applied to image container. Use border width to create margin between images. |
containerStyle | object | Yes | style | Style applied to the container of the collage. Collage border can be applied here. |
If you use the collage in your application then create a pull request to feature it here.
- Luke Brandon Farrell - Author
This project is licensed under the MIT License