Transition flashes the end position of elements first

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> ); } }`

[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