search

IjzerenHein / react-native-shared-element

Native shared element transition "primitives" for react-native 💫
MIT License
2.2k stars 95 forks source link

Question: understandable example without navigation #31

Closed hirbod closed 3 years ago

hirbod commented 4 years ago

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 commented 4 years ago

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

hirbod commented 4 years ago

@IjzerenHein a friendly ping

valdrox commented 4 years ago

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 commented 4 years ago

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

IjzerenHein commented 3 years ago

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 commented 3 years ago

@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.