Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qeepsake/react-native-images-collage
Robust interactive image collage component for React Native
https://github.com/qeepsake/react-native-images-collage
collage collage-maker javascript layout-grid matrix photo photo-editor photo-organizer photogrid react react-native
Last synced: 2 days ago
JSON representation
Robust interactive image collage component for React Native
- Host: GitHub
- URL: https://github.com/qeepsake/react-native-images-collage
- Owner: Qeepsake
- License: mit
- Created: 2018-03-21T21:21:08.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-09-28T23:41:14.000Z (over 1 year ago)
- Last Synced: 2024-11-23T10:35:54.319Z (2 months ago)
- Topics: collage, collage-maker, javascript, layout-grid, matrix, photo, photo-editor, photo-organizer, photogrid, react, react-native
- Language: JavaScript
- Homepage:
- Size: 14.2 MB
- Stars: 116
- Watchers: 7
- Forks: 30
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
To keep up to date with the latest fixes. See [CHANGELOG.md](https://github.com/lukebrandonfarrell/react-native-images-collage/blob/master/CHANGELOG.md).
## Install
Install via npm:
```sh
npm install @qeepsake/react-native-images-collage --save
```
## Usage
To use in React Native. Import:
```js
import { DynamicCollage, StaticCollage } from "react-native-images-collage";
```
### Dynamic Collage
A dynamic collage includes panning, scaling, replacing and image arrangement.
```js
}
editButtonPosition: { 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' },
onEditButtonPress: { (m, i) => { collageRef.current.replaceImage( 'NewImage' , m , i ) } }
/>
```
### 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.
```js
```
### 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.
```js
import { LayoutData } from "react-native-images-collage";
```
You can then access a layout like so:
```js
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](https://github.com/gre/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 [Modal](https://facebook.github.io/react-native/docs/modal) component. [Multiple touches are not registered](https://github.com/facebook/react-native/issues/8094).
- Do NOT update height or width props dynamically to change the size of the collage (as image sizes won't be re-calculated correctly, this is due to a race condition in measuring the layout of the collage). Use `ref.current.updateCollageSize({ width, height })` instead to adjust size dynamically.
## Replacing Images
There is a API in DynamicCollage which can be used to replace images. It can be accessed via reference. Setup the ref with the DynamicCollage like so:
```
const collageRef = useRef(null);
Luke Brandon Farrell
💻 📖 🚇
Amogh Jahagirdar
🐛
Muhammad Jasim
💻 📖
Henry Arbolaez
💻 📖
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!