65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import { Animated, Text } from 'react-native';
|
|
|
|
export default class Fade extends React.Component {
|
|
static propTypes = {
|
|
visible: PropTypes.bool.isRequired,
|
|
style: Animated.View.propTypes.style,
|
|
children: PropTypes.oneOfType([
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
PropTypes.node
|
|
])
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
visible: props.visible
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.visible) {
|
|
this.setState({ visible: true });
|
|
}
|
|
Animated.timing(this._visibility, {
|
|
toValue: nextProps.visible ? 1 : 0,
|
|
duration: 300,
|
|
useNativeDriver: true
|
|
}).start(() => {
|
|
this.setState({ visible: nextProps.visible });
|
|
});
|
|
}
|
|
|
|
UNSAFE_componentWillMount() {
|
|
this._visibility = new Animated.Value(this.props.visible ? 1 : 0);
|
|
}
|
|
|
|
render() {
|
|
const { style, children, ...rest } = this.props;
|
|
|
|
const containerStyle = {
|
|
opacity: this._visibility.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [0, 1]
|
|
}),
|
|
transform: [
|
|
{
|
|
scale: this._visibility.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [1.1, 1]
|
|
})
|
|
}
|
|
]
|
|
};
|
|
|
|
const combinedStyle = [containerStyle, style];
|
|
return (
|
|
<Animated.View style={this.state.visible ? combinedStyle : containerStyle} {...rest}>
|
|
<Text>{this.state.visible ? children : null}</Text>
|
|
</Animated.View>
|
|
);
|
|
}
|
|
}
|