search

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 like instagram circle-view story #193

Open Pietro-Putelli opened 2 years ago

Pietro-Putelli commented 2 years ago

Hi I'm working on a react-native app like instagram and I'm using this library to create a story circle view which, when tapped, shows a list of stories and then dismiss these using shared-element transition. Now I've used one immutable id for the circle view (which is only one), "story", and then when you navigate to the list the ID of the shared element in the list will be "story" when visible otherwise will be "" to dismiss the view according to the selected shared-element. I achived this beahviour by using onScroll and update the selected state every time a new story is selected, but when I first open the screen and I go forward on the list the shared-element works fine, but when I try to go backword on the list and then try to dismiss the screen, the transition don't work.

Here's a commented video of what I mean: https://drive.google.com/file/d/12eE7l9O4uOxgkijzbCBmYNuMCJe-1zsN/view?usp=sharing.

and then my code on expo-snak: https://snack.expo.dev/@pietroputelli/a3130e.

Sorry for my tricky quesiton Hein, but I think they'll be really useful for me and the entire community. Thank you again.

Navipro70 commented 2 years ago

Maybe pass sharedElements to Detail screen with configuration for navigation forward and back

Pietro-Putelli commented 2 years ago

Maybe pass sharedElements to Detail screen with configuration for navigation forward and back

Hi Navipro, can you please make me an example? Thank you very much.