A responsive grid view component for React Native that adapts to screen size using item dimensions.
React Native Super Grid is a library that provides responsive grid view components for React Native applications. It solves the problem of creating adaptive grid layouts that work across different screen sizes and orientations by using a dimension-based approach instead of fixed column counts. The library includes FlatGrid, SectionGrid, and SimpleGrid components built on top of React Native's native list components.
React Native developers who need to display data in grid layouts that automatically adapt to various screen sizes, particularly those building media galleries, dashboards, product listings, or any grid-based UI.
Developers choose React Native Super Grid because it offers a simple, responsive grid system that automatically calculates optimal item arrangement, supports full-width items, and provides multiple grid types while maintaining the performance benefits of native React Native list components.
Responsive Grid View for React Native
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 calculates items per row based on itemDimension and screen size, ensuring responsiveness across devices without manual breakpoints, as shown in the portrait and landscape screenshot examples.
Built on React Native's FlatList and SectionList, providing efficient rendering and virtualization for large datasets, which is highlighted in the README as a key optimization.
Offers FlatGrid for lists, SectionGrid for grouped data, and SimpleGrid for ScrollView integration, catering to different layout needs with clear usage examples.
Easily make items span the full grid width by adding _fullWidth: true to the data object, simplifying layout variations without extra CSS, as documented in the 'Full width items' section.
Lacks support for fixed column counts, which can be restrictive for designs needing precise grid structures; the fixed prop only allows exact itemDimension without adaptation, limiting control.
Requires different versions for various React Native releases (e.g., 6.0.0 for RN 0.74.0+ vs. 5.1.0 for older), leading to compatibility hassles and maintenance overhead, as noted in the 'Versions' section.
Needs careful handling with the listKey prop for nested grids, increasing setup complexity and potential for errors, as mentioned in the props documentation.