Image flashing on Animation

Expo SDK
1

I have a card stack similar to tinder. After updating from SDK 22 to 24 the image will flash at the end of Animated.spring (I updated to SDK 25 and the problem persists)

The image is flashing white and the the backgroundColor of the View is white. If I remove the backgroundColor then the image flashes invisible and I can see the next card behind it.

Only flashing on Android iOS is okay

example2

Here is what the Card view renders

 <Animated.View
{...this.cardPanResponder.panHandlers}
        style={[styles.card, animatedStyle]} >
//////This is the flashing Image///////////
        <Image
          style={{flex:1}}
          source={{uri: fbImage}}
        />
        <Animated.View style={[styles.likeContainer, {
            transform: [
              {rotate: '-15deg'},
            ],
            opacity: this.pan.x.interpolate({
              inputRange: [0, SWIPE_THRESHOLD-10],
              outputRange: [0, 1],
            })
          }]}>
            <Image
              source={require('../images/like.png')}
              style={styles.theImage}
            />
          </Animated.View>

          <Animated.View style={[styles.nopeContainer, {
            transform: [
              {rotate: '15deg'},
            ],
            opacity: this.pan.x.interpolate({
              inputRange: [-(SWIPE_THRESHOLD+10), 0],
              outputRange: [1, 0],
            })
          }]}>
            <Image
              source={require('../images/nope4.png')}
              style={styles.theImageNope}
            />
          </Animated.View>

        <View style={styles.name}> 
          <Text style={{fontSize:20}}>{first_name}, {profileAge}</Text>
          {bio ? <Text style={{fontSize:18, color:'dimgrey'}}>{bio}</Text> : <View />}
        </View> 

</Animated.View>
2

Hey @pickettn58 thanks for using Expo!

I’m sorry that you’re having this issue, I hope this doesn’t sound redundant but have you had a chance to look at: https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html? Maybe the flashing image is because the code is executing instruction to reload the asset?

3

I gave the entire card component a flex of 1 and the flashing went away

3 Likes
4

I guess, there is a problem with horizontal swipe animation for sdk 23-24-25 .

1 Like
5

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.