https://github.com/jkomyno/react-native-animated-hide-view
A performant-wise and configurable react-native component that can toggle the opacity of its children, with or without animation. :octocat:
https://github.com/jkomyno/react-native-animated-hide-view
animation component react-native
Last synced: 5 months ago
JSON representation
A performant-wise and configurable react-native component that can toggle the opacity of its children, with or without animation. :octocat:
- Host: GitHub
- URL: https://github.com/jkomyno/react-native-animated-hide-view
- Owner: jkomyno
- License: mit
- Created: 2017-08-09T09:32:03.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-11T10:18:25.000Z (about 3 years ago)
- Last Synced: 2025-09-21T09:53:07.102Z (10 months ago)
- Topics: animation, component, react-native
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 10
- Watchers: 3
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### React Native Animated Hide View
---
A performant-wise and configurable react-native component that can toggle the opacity of its children, with or without animation. Developed with proper touch event handling in mind (pointerEvents).
## Installation
`yarn add react-native-animated-hide-view`
Or, if you prefer using npm:
`npm i -S react-native-animated-hide-view`
## How to use
```
import AnimatedHideView from 'react-native-animated-hide-view';
...
const isChildVisible = true;
```
## Props
Prop | Type | Default | Required | Description
----------------- | -------- | -------- | ------------------ | --------------------
visible | bool | - | :heavy_check_mark: | Show/Hide the View
duration | int | 500 | | Animation time (ms)
unmountOnHide | bool | false | | Unmount component when visible === false
animated | bool | true | | If false, disables the animation
style | style | {} | | Custom style to be passed to the wrapper Animated.View **(*)**
children | node | - | :heavy_check_mark: | Children components
You can also pass every other valid Animated.View's props.
**(*)**: you don't need to handle zIndex or pointerEvents when the `visible` property changes: it's already handled automatically by this library!
## Known Issues
Nothing here yet!
## Contributing
PRs are obviously welcome! :octocat: