正在加载视频...

视频加载失败

✨ Introducing Apple Music on React Native! UI with a custom modal view, built with expo, react-native-reanimated, and gesture-handler. Took me about two days, but still needs a few fixes. Link to the GitHub project below 👇

81,726 次观看 • 1 年前 •via X (Twitter)

11 条评论

Saúl Sharma 的头像
Saúl Sharma1 年前

It also supports scroll view and horizontal drag-to-close, similar to Instagram and Netflix app. Still need to implement gradient blur and fix a couple of bugs. Feel free to contribute!

Saúl Sharma 的头像
Saúl Sharma1 年前

Can you tell which one is Expo? 🤭 cc @Baconbrix

Expo 的头像
Expo1 年前

It's beautiful.

Stéphane - smo 的头像
Stéphane - smo1 年前

amazing job ! The strategy for the modal routing is very well though ! Didn't know you could put other files than routing in the app folder. Isn't it an anti-pattern @Baconbrix ?

Stéphane - smo 的头像
Stéphane - smo1 年前

I'm curious, how did you find that transparentModal + manual translation pattern ? This is a genius way of having navigation + custom modal behaviour. Never seen it before 🤤 Maybe there are some side effects 🧐🤔 @reactiive_ maybe it can be useful.

Saúl Sharma 的头像
Saúl Sharma1 年前

Was just trying every possible way to animate like Apple Music, using formSheet and modal for stack presentation, but couldn’t replicate it. It was frustrating 🤣 So, decided to control the modal manually with RootScale and Overlay. And no side effects afaik, the animation works fine, and perf isn’t impacted.

Vadim Savin @notJust.dev 的头像
Vadim Savin @notJust.dev1 年前

Wanna re-build it live on yt on notJust Dev channel?

Saúl Sharma 的头像
Saúl Sharma1 年前

Interesting idea 👀 I’m headed to NYC later today for a week, so maybe next week? I’m also already setting up a repo for “native feel” Netflix and WhatsApp apps, so let’s stay in touch and find time for one of those for sure.

Alex Aaron Peña 的头像
Alex Aaron Peña1 年前

does playback control work from control center/lockscreen? play/pause, previous/next, scrub bar

Peter Tountas ⚡️ 的头像
Peter Tountas ⚡️1 年前

Performance looks incredible. well done. 👏

Saúl Sharma 的头像
Saúl Sharma1 年前

Thanks! Reanimated worklets and composed gestures (by @swmansion) are great

相关视频