React Native Animated Overlay support IOS & Android.
npm install react-native-animated-overlayThis component just provide a very basic overlay view for you to build something on top of this component.
npm install --save react-native-animated-overlay
javascript
import Raect, { Component } from 'react';
import AnimatedOverlay from 'react-native-animated-overlay';class AnimatedOverlayExample extends Component {
constructor(props) {
super(props);
this.state = {
overlayShow: false,
};
this.openOverlay = this.openOverlay.bind(this);
this.closeOverlay = this.closeOverlay.bind(this);
}
openOverlay() {
this.setState({overlayShow: true});
}
closeOverlay() {
this.setState({overlayShow: false});
}
render() {
return (
text="Open Overlay"
onPress={this.openOverlay}
/>
onPress={this.closeOverlay}
backgroundColor='#000'
opacity={0.5}
duration={200}
overlayShow={this.state.overlayShow}
/>
);
}
}
`Props
$3
| Prop | Type | Default | Note |
|---|---|---|---|
| onPress? | Function | () => {} |
| onAnimationFinished? | Function | () => {} |
| backgroundColor? | String | #000 |
| opacity? | Number | 0.5 |
| duration? | Number | 200 |
| overlayShow? | Bool | false |
| pointerEvents? | string | null |
| initValue? | number | 0 |
| style? | any | null |
| useNativeDriver? | boolean | false |
| children? | any | null` |