Skip to content

Commit

Permalink
Add slide animation view.
Browse files Browse the repository at this point in the history
  • Loading branch information
Sam1301 committed Jun 12, 2017
1 parent 01b4467 commit a4e0490
Showing 1 changed file with 39 additions and 0 deletions.
39 changes: 39 additions & 0 deletions src/common/SlideAnimationView.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/* flow */
import React, { Component } from 'react';
import { Animated } from 'react-native';

export default class SlideAnimationView extends Component {
state = {
animationIndex: new Animated.Value(0),
};

animate() {
const { easing, duration } = this.props;
this.state.animationIndex.setValue(0);
Animated.timing(this.state.animationIndex, {
toValue: 1,
duration,
easing,
useNativeDriver: true,
}).start();
}

componentDidUpdate() {
this.animate();
}

render() {
const { property, from, to, movement, style } = this.props;
const animationValue = this.state.animationIndex.interpolate({
inputRange: [0, 1],
outputRange: movement === 'out' ? [from, to] : [to, from],
});

const slideStyle = { transform: [{ [property]: animationValue }] };
return (
<Animated.View style={[style, slideStyle]}>
{this.props.children}
</Animated.View>
);
}
}

0 comments on commit a4e0490

Please sign in to comment.