Created
September 2, 2018 19:50
-
-
Save FabDuarte/a26cec4c7a51d3beb3e29443483b097d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { Animated, Text, View } from 'react-native'; | |
class FadeInView extends React.Component { | |
state = { | |
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 | |
} | |
componentDidMount() { | |
Animated.timing( // Animate over time | |
this.state.fadeAnim, // The animated value to drive | |
{ | |
toValue: 1, // Animate to opacity: 1 (opaque) | |
duration: 10000, // Make it take a while | |
} | |
).start(); // Starts the animation | |
} | |
render() { | |
let { fadeAnim } = this.state; | |
return ( | |
<Animated.View // Special animatable View | |
style={{ | |
...this.props.style, | |
opacity: fadeAnim, // Bind opacity to animated value | |
}} | |
> | |
{this.props.children} | |
</Animated.View> | |
); | |
} | |
} | |
// You can then use your `FadeInView` in place of a `View` in your components: | |
export default class App extends React.Component { | |
render() { | |
return ( | |
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> | |
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}> | |
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text> | |
</FadeInView> | |
</View> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment