react-navigation-shared-element

react-navigation-shared-element copied to clipboard

First of all, amazing library! It is helping me a lot with my project.

Regarding this I have the following error which I put a gif of the behavior and I will explain:

I have the image which I want to share and it is being shared perfectly, the problem is that I have two capable of degrading absolutely, one above and one below, these cause an error of a couple of seconds when I return from the animation, could you help me with any advice on how to solve this ?, both buttons and gradients are absolutely

const Outstanding = ({ item, onPlay, onWatchlist, onDiscoverMore }: Props) => {
  const [loaded, setLoaded] = useState(false);
  const { t } = useTranslation('layout');
  return (
    <Container>
      <ContentLoader
        style={!loaded ? show : hide}
        speed={1}
        backgroundColor="#323c51"
        foregroundColor="#171b23"
      >
        <Rect x="0" y="0" width="100%" height="100%" />
      </ContentLoader>
      <GradientTop />
      <SharedElement id={item.id}>
        <Image
          style={image}
          source={{ uri: item.url }}
          resizeMode={FastImage.resizeMode.cover}
          onLoad={() => setLoaded(!loaded)}
        />
      </SharedElement>
      <Actions>
        <ActionButton onPress={() => (onWatchlist ? onWatchlist() : {})}>
          <WatchlistIcon width={32} height={32} />
        </ActionButton>
        <ActionButton onPress={() => (onPlay ? onPlay() : {})}>
          <Action autoPlay loop width={100} height={100} />
        </ActionButton>
        <ActionButton onPress={() => (onDiscoverMore ? onDiscoverMore() : {})}>
          <DiscoverMoreIcon width={32} height={32} />
        </ActionButton>
      </Actions>
      <ActionText>{t('playnow')}</ActionText>
      <Gradient />
    </Container>
  );
};

export default Outstanding;


const Detail = () => {
  const { goBack, getParam, dangerouslyGetParent } = useNavigation();
  const { item } = getParam('item');
  const parent = dangerouslyGetParent();
  console.tron.log({ item });
  const back = () => {
    if (parent) {
      toggleTabs(parent, true);
    }
    goBack();
  };

  return (
    <Container>
      {/* <Image style={styles.background} resizeMode="cover" source={listing.picture} />
       */}
      <View style={styles.wrapper}>
        <SharedElement id={item.id}>
          <Image style={styles.image} resizeMode="cover" source={{ uri: item.url }} />
        </SharedElement>
      </View>
      <View style={styles.thumbnailOverlay}>
        <Button title="X" onPress={() => back()} />
      </View>
    </Container>
  );
};

Detail.sharedElements = (navigation: ReturnType<typeof useNavigation>) => {
  const { item } = navigation.getParam('item');
  return [item.id];
};

export default Detail;

Thanks again

I'm having the same issue... as a temp solution is that i made the component to be displayed above the absolute image with opacity animation with some delay

Did you find any workaround @jonathanmachado?

so far nothing.. but i think this one isn't meant to display components using position absolute

Do not leave it in the background for now because I can not remove the absolute position of the gradient, the client did not find it correct, for that reason I have stopped using the library.

Thanks for your help.

@AbdulmalickDimnang

Hi! The shared-element always renders on top of all other views. If you need to render overlapping views, then please have a look at the OverlappingElements test-case in the example app. You'll need to render these elements as shared-elements as well, even though they only exist on one of the screens. And fade them in as the new screen appears.