react-native-images-collage v3.3.5
To keep up to date with the latest fixes. See CHANGELOG.md.
Install
Install via npm:
npm install react-native-images-collage --save
Usage
To use in React Native. Import:
import { DynamicCollage, StaticCollage } from 'react-native-images-collage';
Dynamic Collage
A dynamic collage includes panning, scaling and image arrangement.
<DynamicCollage
width={400}
height={400}
images={ photos }
matrix={ [ 1, 1, 1, 1 ] } />
Static Collage
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 ] } />
Layouts
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.
Notes
- 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.
Props
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. |
Showcase
Qeepsake - The Text Message Baby Journal on iOS and Android.
If you use the collage in your application then create a pull request to feature it here.
Authors
- Luke Brandon Farrell - Author
License
This project is licensed under the MIT License
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago