Skip to content

Instantly share code, notes, and snippets.

@kmagiera
Created March 24, 2016 21:46
Show Gist options
  • Save kmagiera/39de37faf07480fcd7d1 to your computer and use it in GitHub Desktop.
Save kmagiera/39de37faf07480fcd7d1 to your computer and use it in GitHub Desktop.
/**
* @providesModule Playground
*/
'use strict';
var React = require('react-native');
var {
Animated,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var FadeInView = React.createClass({
getInitialState: function() {
return {
firstAnim: new Animated.Value(0),
secondAnim: new Animated.Value(0),
}
},
componentDidMount: function() {
Animated.timing(
this.state.firstAnim,
{
toValue: 200,
duration: 2000,
useNativeDriver: true,
},
).start();
Animated.timing(
this.state.secondAnim,
{
toValue: -200,
duration: 4000,
useNativeDriver: true,
},
).start();
},
render: function() {
return (
<Animated.View // Special animatable View
style={{
translateX: Animated.add(this.state.firstAnim, this.state.secondAnim),
}}>
{this.props.children}
</Animated.View>
);
}
});
var Playground = React.createClass({
getInitialState: function() {
return {
show: true,
}
},
render: function() {
return (
<View>
<TouchableHighlight onPress={() => {
this.setState((state) => (
{show: !state.show}
));
}}>
<View style={styles.content}>
<Text>Press to {this.state.show ? 'Hide' : 'Show'}</Text>
</View>
</TouchableHighlight>
{this.state.show && <FadeInView>
<View style={styles.content}>
<Text>FadeInView</Text>
</View>
</FadeInView>}
</View>
);
}
});
var styles = StyleSheet.create({
content: {
backgroundColor: 'deepskyblue',
borderWidth: 1,
borderColor: 'dodgerblue',
padding: 20,
margin: 20,
borderRadius: 10,
alignItems: 'center',
},
});
module.exports = Playground;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment