A React Native component that brings CSS-like 'display: none' functionality to conditionally render components with smooth animations.
React Native Display is a React Native component library that provides CSS-like 'display: none' functionality to conditionally show or hide UI elements. It solves the problem of inefficient conditional rendering in React Native by preventing components from rendering when not needed, while adding smooth animations for transitions.
React Native developers building mobile apps who need to optimize performance and add polished animations when toggling component visibility.
Developers choose React Native Display for its simplicity, performance benefits, and seamless integration with react-native-animatable, offering a declarative way to manage visibility with customizable animations.
This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
The enable prop provides a simple, declarative way to toggle component rendering, reducing unnecessary render cycles and improving app performance, as emphasized in the README.
Seamlessly integrates with react-native-animatable to offer customizable enter/exit animations like fade and slide, demonstrated in the GIF examples and usage code.
The keepAlive prop allows hiding components without unmounting them, preserving state and avoiding re-initialization of complex modules such as cameras, per the README's documentation.
Independent control over enter and exit animation durations, with default and custom settings, enabling fine-tuned transitions as shown in the property table.
Relies entirely on react-native-animatable for animations, adding an external dependency that may conflict with other animation solutions or increase bundle size.
As noted in the TODO section, on start and exit animation done events are not implemented, limiting control over animation sequences and user interactions.
Focused solely on visibility toggling with animations; for more complex animation needs or layout changes, a broader library like React Native's Animated API might be necessary.