react-native-collage-layout v1.0.2

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