A pure JavaScript React Native component for rendering masonry-style image layouts with dynamic columns and progressive loading.
react-native-masonry is a React Native library that renders masonry-style layouts for images, similar to Pinterest grids. It solves the problem of displaying variable-height images in a responsive, performant grid with features like dynamic columns, progressive loading, and support for device rotation. It is designed specifically for React Native applications that need visually appealing image galleries.
React Native developers building image-heavy mobile applications, such as social media apps, photo galleries, or e-commerce product displays. It is ideal for those who need a customizable, high-performance masonry layout without native dependencies.
Developers choose react-native-masonry because it is a pure JavaScript solution with no native linking required, works seamlessly with Expo, and offers extensive customization through third-party image components and interactive handlers. Its built-in optimizations for large lists and dynamic layouts provide a smooth user experience out-of-the-box.
:raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Automatically adjusts the number of columns based on screen size and orientation, ensuring a responsive layout without manual calculations, as highlighted in the key features.
Supports custom image components like FastImage via props, enabling advanced caching and loading optimizations, as demonstrated in the usage examples.
Allows rendering of custom headers and footers for each brick through renderHeader and renderFooter functions, providing flexibility for interactive content.
Works seamlessly with Expo, as indicated by the Expo demo badge, eliminating the need for native linking and simplifying setup.
Being a pure JavaScript solution, it may not match the performance of native modules for handling extremely large or complex image grids, leading to potential lag on lower-end devices.
Lacks out-of-the-box support for features like lazy loading beyond basic progressive loading, or advanced touch interactions such as pinch-to-zoom, requiring additional integrations.
Integrating third-party components or custom styles requires configuration via props like customImageComponent and customImageProps, which can be time-consuming for simple use cases.