react-native-collage-layout
An easy-to-use collage layout component for rendering network images.
yarn add react-native-collage-layoutUsage
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 |