Transition flashes the end position of elements first

[rohan-jansen]

Transition flashes the end position of elements first, then starts animation, causing a jarring flicker.

This is intermittent as well, most the first time, but every now and then when repeatedly trying, it works.

`class DemoClass extends PureComponent<PaymentTypeSelectionProps> {

transitionMoveUpAndFadeIn = (transitionInfo) => { const { progress, start, end } = transitionInfo; const moveUpInterpolation = progress.interpolate({ inputRange: [0, start, end, 1], outputRange: [100, 100, 0, 0], }); const opacityInterpolation = progress.interpolate({ inputRange: [0, start, 0.9, end, 1], outputRange: [0, 0, 0.5, 0.8, 1], }); return { transform: [{ translateY: moveUpInterpolation }], opacity: opacityInterpolation, }; };

transitionNoFade = (transitionInfo) => { const { progress, start, end } = transitionInfo; const opacityInterpolation = progress.interpolate({ inputRange: [0, start, end, 1], outputRange: [0, 0, 0, 0], }); return { opacity: opacityInterpolation, }; };

transitionFadeOut = (transitionInfo) => { const { progress, start, end } = transitionInfo; const opacityInterpolation = progress.interpolate({ inputRange: [0, start, end, 1], outputRange: [1, 1, 0, 0], }); return { opacity: opacityInterpolation, }; };

handleNavigation = (spread: any) => { this.props.initPaymentMethods(spread); };

render() { return ( <PfView.View.Flex backgroundColor={Colors.veryLightGrey}> <SafeAreaView> <StatusBar backgroundColor="transparent" barStyle="dark-content" /> <ScrollView> <PfView.Column.FlexStart margin={[0, 10]}> <Transition appear={transitionInfo => this.transitionMoveUpAndFadeIn(transitionInfo)} disappear={transitionInfo => this.transitionFadeOut(transitionInfo)} > <PfText.Regular fontSize={20} color={Colors.greyMid} margin={[24, 18, 5, 18]}> Filler text here </PfText.Regular> </Transition> <PfView.View.Stretch> {this.props.combinedPaymentSpread.map(spread => ( <InfoCard showShadow tranistionDirection="top" key={spread.reference} handleNavigation={() => this.handleNavigation(spread)} sharedElementRef={spread.reference} title={spread.title} subTitle={spread.subTitle} amount={spread.amount} symbol={spread.symbol} /> ))} </PfView.View.Stretch> </PfView.Column.FlexStart> </ScrollView> </SafeAreaView> </PfView.View.Flex> ); } }`

[rohan-jansen]

Current package breakdown "react": "^16.5.2", "react-native": "^0.55.4", "react-navigation": "^2.16.0", "react-navigation-fluid-transitions": "^0.2.6",

[chrfalch]

Hi, @rohan-jansen! Thanks for submitting an issue. Your example is a complex one, would it be possible to reproduce this in a smaller example on snack.expo.io?

[rohan-jansen]

Hi @chrfalch I tried to create an example on but could not replicate thus resorted to a video :)

What I did find is that if I remove the transitions from the page content, which have shared transitions to move to the next screen, the flicker is gone. Also if I just wrap the entire component in a transition, there is no flicker.

Have you encountered something similar perhaps where components that have multiple shared element transitions on one page that animates up causes a flicker?

Apologies that I don't have more info on this

[rohan-jansen]

@chrfalch feels like it could be related to this? https://github.com/fram-x/FluidTransitions/issues/111

The effect seems similar?

[chrfalch]

Unfortunately It's unclear to me what the problem is just from watching the GIF...

[njacob1001]

I have the similar problem with a Image, I just change the transformf from translateY: 0 to TranslateY: -100, then the image start to move with a one flicker.

[iwikal]

I have a similar problem: I have this setup:

import React, { Component } from 'react'
import {
  StyleSheet,
  Animated
} from 'react-native'

const styles = StyleSheet.create({
  image: {
    height: 100,
    width: 100,
    borderRadius: 50,
    backgroundColor: '#eeeeee'
  }
})

const GROW_FACTOR = 1.5
const SMALL = 1.0 / GROW_FACTOR
const LARGE = 1.0

export default class extends Component {
  render () {
    const { progress, large, source } = this.props
    let scale = large ? LARGE : SMALL
    if (progress) {
      scale = progress.interpolate({
        inputRange: [0, 1],
        outputRange: [SMALL, LARGE]
      })
    }
    return (
      <Animated.Image
        source={{ uri: source }}
        style={[
          styles.image,
          {
            transform: [{ scale }]
          }
        ]}
      />
    )
  }
}

But sometimes when I transition from <MyImage /> to <MyImage large />, during a frame or two, the final, large size can be seen before starting to animate from small to large. I haven't observed it when going back, from progress 1 to progress 0.

[R1D3]

same issue