Question: understandable example without navigation

[hirbod]

Hi @IjzerenHein,

once again a big thank you to your great library. You are a big win for the RN community.

Can you please provide an understandable example without the usage of any navigation/router? The reason why I can't use any navigation bindings right now (I tried with react-navigation v4 and it worked great and understandable) is that I am on EXPO SDK 37 and I am using react-native-screens/native-stack on navigation v5, which is under development by you (at least the v5 stack) but since I'm on EXPO I can't try out your new bindings (correct me if its possible with 0.5.6, then I would give it a try).

Below you can see 2 videos of transitions I've done without the use of native-shared-element using Animated API and the React Modal + a couple of hacky things. It works "OK", pretty smooth on iOS but not really nice on android.

The question I have right now: can I create a "zoomable image" component, which gives me an Avatar and do a transition in the same view using your shared element (like mounting/unmounting a view) without any navigation-lib on tap? Reading the "basic setup" in your README, I just don't get how I could achieve this in a single component.

I wanted to define the small image in my component and on click share it to get the big interpolation and display the modal backdrop. I will use the PanGestureHandler afterwards to implement the flick to dimiss.

Here are my hacky and self-developed examples (using a native-stack navigator and a native-stack iOS Page Sheet modal)

https://streamable.com/8c366t
https://streamable.com/jxupzu

Thanks for pointing me into the right direction!
PS: in order to render above everything including tabs, I am using a PORTAL (react-native-portalize)

[hirbod]

Looks like this is a duplicate of #9 since he has the exact same question as me

[hirbod]

@IjzerenHein a friendly ping

[valdrox]

I had a same problem and was stuck for a little while. I found a basic single component example from test-app, which got me unstuck. Hope this helps!

https://github.com/IjzerenHein/react-native-shared-element/blob/641d0beeeeadd38225b31d05a80bd3ca247c255d/test-app/basic/App.tsx

[hirbod]

@valdrox thank you so much man. That was exactly what I was looking for.

[IjzerenHein]

The example app contains a basic bare bone implementation, you can find it here:
https://github.com/IjzerenHein/react-native-shared-element/tree/main/example/basic

Please follow the instructions in the README to run the basic example:
https://github.com/IjzerenHein/react-native-shared-element/tree/main/example

[ghost]

@hirbod were you able to proceed with the implementation without the navigation library following the example?
I wish there was a simple example of this using function components instead of classes.