r/reactnative • u/politicalmeow • Feb 20 '21

Tutorial Book list app using reanimated 2, shared element transitions and lottie

Enable HLS to view with audio, or disable this notification

607 Upvotes

99% Upvoted

70 comments sorted by

115

u/politicalmeow Feb 20 '21 edited Feb 20 '21

Happy to post a tutorial and/or code if anyone’s interested

edit: https://github.com/himanchau/book-app

5

u/lmestre14 Feb 20 '21

What did you use for navigation?

6

u/politicalmeow Feb 20 '21

react-navigation, you can see more in the source

3

u/Ctlabvietnam Feb 20 '21

There are two solutions I guess:
- react-native-navigation or react-navigation do support shared element in mind
- No navigation at all. Just overlaps the list by another View from the bottom.

14

u/floppyfloflo Feb 20 '21

yes please share 🙏🏼

3

u/gdp_lover Feb 20 '21

Lets do it

3

u/Seeking_Adrenaline Feb 20 '21

Tutorial and/or code please!

The shared elements are amazing

→ More replies (6)

2

u/introversionguy Feb 20 '21 edited Feb 20 '21

How did you angle the books like that? Is that a skew transform? Or a rotate transform?

2

u/politicalmeow Feb 24 '21

transform: perspective, rotate and translate

11

u/Snoo-33768 Feb 20 '21

Source code would be nice :)

7

u/[deleted] Feb 20 '21

Would love to see the code in some of this

1

u/politicalmeow Feb 20 '21 edited Feb 20 '21

Here’s the source code for now, will try to write up a tutorial when I get some time. Forgot to show in the demo, but it supports dark mode as well.

https://github.com/himanchau/book-app

4

u/aTalkingTree Feb 20 '21

Buttery smooth! code would be much appreciated

1

u/robotpoolparty Feb 20 '21

This is amazing. Tutorial and/or source would be a great help.

btw, seems like reanimated 2 is what everyone's using. But is it production ready? Should I be building apps with it?

3

u/politicalmeow Feb 24 '21

It’s production ready for 95% of the use cases.

1

u/BigTamis Feb 25 '21

Hey - this is great stuff! I'm able to run your code on iOS perfectly, however, upon running on my Android Simulator I get the error:

"Exception in HostFunction

java.lang.AssertionError: Illegal type provided

[native code]

updateProps

[native code]

styleUpdater

[native code]

_f

[native code]"

The app crashes very quickly upon opening and am unable to scroll down the stack trace. Do you get this error on Android? Do you or does anyone know what might be causing this issue?

It does mention 'styleUpdater' in the error and so I'm wondering if it has anything to do with the implementation of style in the app.

Thanks!

1

u/politicalmeow Feb 25 '21

I did not test with Android unfortunately. But I suspect it’s Layout Animations. You will need to enable that.

1

u/nic123451 Mar 26 '21

Quick question, from what I can see you get the book data from goodreads. As a noob who would like to implement something similar, but with my own images being uploaded, with title and description. Would I be best served serving them from firebase/headless CMS or should I serve them from an external webpage?

1

u/politicalmeow Mar 27 '21

You can probably get cheap file storage through s3 or digital ocean spaces (cdn) and then serve your api from wherever you see fit. Connect them through some naming convention / id.

→ More replies (1)

5

u/Yokhen Feb 20 '21

Why not do the opposite, whereas all books are slanted except the one being focused on? It would save space, making scrolling faster, AND would give a lot more focus to the item being focused on.

→ More replies (1)

2

u/bennyllama Feb 20 '21

Wow this is awesome!

2

u/[deleted] Feb 22 '21

I'm learning a ton from your source code! Couldn't thank you enough 🙏

That's exactly what I need to get more confident with react native!

1

u/maarzx_ Feb 20 '21

Tutorial please!!

1

u/Revolutionary_Tip855 Jun 16 '24

Which API have you use?

1

u/zenwraight Feb 20 '21

This is really good, can you share source code as well.