react-native-collage-layout

An easy-to-use collage layout component for rendering network images.

yarn add react-native-collage-layout

Usage

Simple examples

One Image	Two Images	Three Images

This component is similar to how Facebook shows images in post.

import React from 'react';
import { StyleSheet } from 'react-native';
import CollageLayout from 'react-native-collage-layout';

const images = [
  {
    uri : "https://images.unsplash.com/photo-1678219718773-db0186c9ce63?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
    aspectRatio : 1.5,
  },
];

export default class App extends React.Component {
  render() {
    return (
        <View>
            <CollageLayout
                spacing={2}
                images={photos}
            />
        </View>
    )
  }
}

Props and methods

The component extends FlatList so all FlatList-props are valid.

Props

Name	Type	Default	Description
images	object	None, required	An array of objects. Each object should contain uri and aspectRatio keys
onTapImage	function	void	Called when user taps on any image. Function returns image index
spacing	number	1.5	Spacing amount between images
layoutMinHeight	number	23% of Screen	Minimum allowed height for layout
layoutMaxHeight	number	70% of Screen	Maximum allowed height for layout