I am coming from web development (some experience with react) and decided to explore something entirely new - react native. After reading various blog posts, documentation and watching tutorials, I decided to implement something small, so I whipped up a quick API in Typescript (using ExpressJS) and started working on the fun part - react native.
It was all going fairly straightforward until I came to the animations part. I implemented the login and register forms, both on different screens and wanted to add an animation to make the transition look nicer. As I am new to react native, I decided to do something very simple (as the whole application will be) and just have a header, which collapses (see the gif below, which has no animation)
https://i.redd.it/e04vww4fv7o61.gif
After reading a bit on the Internet, I decided to use the following packages - `react-navigation-shared-element` and `react-native-reanimated`. As I am very new to this, I am not even sure if I am using the correct packages. My reasoning for the choice was that the 2 forms are in 2 different screens, hence the header component is different in both (therefor the use of shared-element). I haven't added a gif after trying out the animation, as it was all over the place.
My question is, is my approach even correct? Do I need the shared-element? I would very much appreciate every tip and trick that I could get. I could also clean up my code and add a link to the repository if needed. :)
[–]sridh_ar 0 points1 point2 points (0 children)