CODEWITHSUNDEEP
javascriptreact-native
Zygro
Zygro

Reputation: 7119

react native: how to make two images fade to each other?

I want to have two images that after time fade into another.

So far my idea was to make one cover the other and change its transparency via time or animation function. I didn't succeed in formatting the images to overlap.

Is there a better way? And how do I make them overlap?

Upvotes: 2

Views: 4481

Answers (1)

KChen
KChen

Reputation: 1918

<Image style={{position:'absolute'}} />
<Image />

Setting the first Image's position with 'absolute' can make them overlap.

And here is the demo:

getInitialState: function (){
  return {
    fadeAnim: new Animated.Value(0),
  };
},
componentDidMount: function() {
  Animated.timing(          
    this.state.fadeAnim,    
    {
      toValue: 1,
      duration:1000
    },
  ).start();                
},
render: function() {
  <View style={{flex:1}}>
    <Animated.Image source={require('image!image1')} style={{width:320,height:320,resizeMode:'cover',position:'absolute'}}  />
    <Animated.Image source={require('image!image2')} style={{width:320,height:320,resizeMode:'cover',opacity:this.state.fadeAnim}}  />
  </View>
}

Upvotes: 3

Related Questions