jasimawan / react-native-images-collage Goto Github PK

[](#contributors-)

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, replacing and image arrangement.

  <DynamicCollage
    width={400}
    height={400}
    images={ photos }
    matrix={ [ 1, 1, 1, 1 ] }
    isEditButtonVisible: { true | false },
    EditButtonComponent: { ( <YourCustomComponent/> ) }
    editButtonPosition: { 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' },
    onEditButtonPress: { (m, i) => { collageRef.current.replaceImage( 'NewImage' , m , i ) } }
    />

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.

• 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.

This project is licensed under the MIT License

Thanks goes to these wonderful people (emoji key):

Luke Brandon Farrell 💻 📖 🚇

Amogh Jahagirdar 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!