A React Native scroll view component that can be inverted to render content from the bottom or right.
InvertibleScrollView is a React Native component that creates scrollable views which can be inverted to render content starting from the bottom or right. It solves the need for chat-like interfaces and terminal emulators where new content appears at the bottom, requiring users to scroll down to see older items. The component supports both vertical and horizontal scrolling and integrates with other scrollable components via ScrollableMixin.
React Native developers building chat applications, command-line terminal interfaces, or any app requiring inverted scrolling behavior where content loads from the bottom or right.
Developers choose InvertibleScrollView for its efficient inversion using scale transformations, compatibility with ScrollableMixin for easy composition, and dedicated support for common inverted scrolling patterns without needing custom hacks.
An invertible ScrollView 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.
Uses scale transformations to invert the viewport and children efficiently, as described in the Implementation section, minimizing performance overhead.
Conforms to ScrollableMixin, allowing easy composition with other scrollable components like ListView, enhancing flexibility for custom scroll views.
Supports horizontal scroll views to present content from right to left, making it versatile for inverted scrolling in both orientations, as highlighted in the key features.
Specifically designed for chat applications and command-line terminals where content renders from the bottom, addressing common UI patterns without custom hacks.
List section headers are not supported, limiting its use in complex list-based interfaces, as admitted in the Tips and Caveats section.
Styles like padding are not corrected, and properties such as contentOffset are not flipped, requiring manual workarounds that can lead to debugging headaches.
Requires specific delegation to InvertibleScrollView for components like ListView to avoid rendering issues, adding setup complexity and potential for errors.