IjzerenHein / react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫
https://github.com/IjzerenHein/react-native-shared-element
MIT License
1.27k stars 124 forks source link

Shared element renders on top of absolute other views #90

Open jonathanmachado opened 4 years ago

jonathanmachado commented 4 years ago

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

2020-07-14_18-26-43


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

AbdulmalickDimnang commented 4 years ago

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

kanelloc commented 4 years ago

Did you find any workaround @jonathanmachado?

AbdulmalickDimnang commented 4 years ago

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

jonathanmachado commented 4 years ago

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

IjzerenHein commented 3 years ago

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.

overlapping