![\"Expo](\"./assets/simulator_screenshot_B5DA2B98-A4BA-4B8A-8917-45AE7F50F97A.png\")
\n\n \n
\n A high-performance masonry layout component for React Native and Expo applications\n
\n\n\n ✨ Used in production by WiSaw - a location-based photo sharing app\n
\n\n\n\n## ✨ Features\n\n- 🚀 **High Performance**: Uses VirtualizedList for optimal performance with large datasets\n- 📱 **Responsive**: Automatically adapts to screen size and orientation changes\n- 🎨 **Flexible**: Supports custom aspect ratios and layout configurations\n- 🔄 **Interactive**: Built-in pull-to-refresh and infinite scroll support\n- 📐 **Dual Layout Modes**: Row-based masonry with justified alignment and column-based masonry with shortest-column placement\n- 📊 **Responsive Columns**: Column mode supports responsive breakpoints for adaptive column counts\n- 📝 **Extra Height**: `getExtraHeight` callback for adding dynamic per-item content (captions, badges, buttons) below images\n- 🔍 **Inline Expand**: Expand items to full-width detail view inline, with multi-expand support and automatic height measurement\n- 📏 **Dynamic Height Measurement**: Expanded items auto-measure their rendered height — supports dynamic content like accordions, comment lists, and reply forms\n- � **Shadow-Friendly**: Item containers don't clip overflow, so shadows, badges, and decorations render correctly\n- �🎯 **TypeScript**: Full TypeScript support with comprehensive types\n- ⚡ **Optimized**: Minimal re-renders with memoized calculations\n\n## 🌟 Real-world Usage\n\nThis component is actively used in production by:\n\n- **[WiSaw](https://github.com/echowaves/WiSaw)** - A location-based photo sharing mobile app that displays thousands of user-generated photos in a beautiful masonry layout. WiSaw demonstrates the component's ability to handle large datasets with smooth scrolling and optimal performance.\n\nThe screenshot above is taken directly from the WiSaw app, showcasing real-world usage with actual user photos.\n\n## 🚀 Installation\n\n````bash\nnpm install expo-masonry-layout\n# or\nyarn add expo-masonry-layout\n\n\n## 📖 Quick Start\n\n```tsx\nimport React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport ExpoMasonryLayout from 'expo-masonry-layout';\n\nconst MyMasonryGrid = () => {\n const data = [\n { id: '1', uri: 'https://example.com/image1.jpg', width: 300, height: 400 },\n { id: '2', uri: 'https://example.com/image2.jpg', width: 400, height: 300 },\n { id: '3', uri: 'https://example.com/image3.jpg', width: 300, height: 300 },\n // ... more items\n ];\n\n const renderItem = ({ item, dimensions }) => (\n\n Made with ❤️ by Echowaves Corp.
\n Powering beautiful photo experiences in WiSaw and beyond\n
![\"npm](\"https://img.shields.io/npm/v/expo-masonry-layout.svg\")
\n ![\"npm](\"https://img.shields.io/npm/dm/expo-masonry-layout.svg\")
\n ![\"license\"](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\n