Absolute positioned shared element

[davidpaulsson]

I have a component that acts as a top background for my screens that I want to have on all my screens. It looks like this

  render() {
    return (
      <View
        style={{
          ...StyleSheet.absoluteFillObject,
          width: WINDOW_WIDTH,
          height: 280,
        }}
      >
        <Image
          style={StyleSheet.absoluteFill}
          resizeMode="cover"
          source={require('./image.png')}
        />
        <LinearGradient
          locations={[-0.1, 0.7]}
          colors={this.gradientColors}
          style={StyleSheet.absoluteFill}
        />
      </View>
    );
  }

If I wrap the component above in a Transition with a shared key it doesn't display, I guess it's because it's positioned absolute? If I don't wrap it I get this small flicker of the image between screens when it fades out and in very briefly.

Any ideas how to solve my use case?