Uber Eats Sticky Header - “Can it be done in React Native?”

67,302

1,428 0

Published 2019-12-23

In this video, we are building the Uber Eats sticky header:
Hope you enjoy it 🍿

Wanna learn the fundamentals of declarative Gestures and Animations? Check out start-react-native.dev/.

GitHub: github.com/wcandillon/can-it-be-done-in-react-nati…
Snack: snack.expo.io/@git/github.com/wcandillon/can-it-be…
Boilerplate: bit.ly/2EM7QrX

Do you like the series? You can support the channel by buying me a coffee at react-native.shop/buy-me-a-coffee ☕️.

Are you sometimes asking yourself, "Can it be done in React Native"? Send me your suggestions at [email protected]

All Comments (21)

@prakashd842 4 years ago

I always wait for the advertisement to complete for this guys video. You learnt me a lot. Thanks for the great video.
@OmarMohammed-yr6dr 4 years ago

This is great and awesome, although i would like to make a suggestion. The TabHeader could be scroll-able in a horizontal fashion so users could scroll back and press a button.
@mariushincu6831 4 years ago

Thanks William. I've been waiting for this now I'm glad you done it
@jemesmemes9026 4 years ago

Awesome, choice! Thanks a bunch for making these! Looks like you're going to get to 1000 views in less than a day (a few hours) so look at that! Great job
@jackjsy 4 years ago

Incredible stuff!! question... would it make it easier to use a scrollview for the tabs also? I believe this is what the UberEats app uses, as you can manually scroll the tabs, thanks for the amazing video
@osmanmusse6223 4 years ago

Great Video William Condition, I'm a swift engineer, but I must say I do like react native especially how you teach it
@pantelispanayiotou 4 years ago

hey great content! you should export some of the components (sticky tab header) as a separate package! Looks like that there are a lot of people that may need it!
@MrNimerFarahty 4 years ago

Incredible job appreciated , i wanna just ask a question about updating the state after each on layout event , is there any way to keep track the tabs position and width without updating the state ?
@meethub 3 years ago

Hi William, can it be done in reanimated 2? Would love to see this using reanimated 2.
@jpisello 3 years ago

Great tutorial, William. From an accessibility standpoint, I am concerned about the header following the scrollview in the DOM, since a screen reader will announce the content in DOM order. I think some zIndex styling would allow the header to be placed before the scrollview in the DOM. Do you agree, or if not, is there another solution so the content would be read in the correct order?
@mosburger7685 2 years ago

Hi @Willam! This is great and awesome ! Can you make one more tutorial to make the tabs header scrollable?
@alaaal-khater8034 1 year ago

We need a 2022 code refresh to this one!
@MahmutGundogdu 3 years ago

You are so mübarek person. this video helps me a lot. Thanks a lot.
@dityadion249 4 years ago

Your explanation is awesome
@toel_ 4 years ago

Merry Christmas William Candillon, Nice tutorial... Don't forget about the my request to do instagram story transition, bottom indicator on every story. Have a blast!!!
@suriainternationalservices9720 3 years ago

Thanks William Nice video for React native Developers
@zambidzhelov6734 4 months ago

very cool and useful, thanks a lot
@rishabhyadav2313 4 years ago

Hey William , which one is better to use Typescript or propTypes . Or what are the pros and cons of both ? Please reply me
@alpocer 3 years ago

hi, thank you for video. i have a question: image is position absolute but scrollview showing under image. how can i do this?
@adarshjaiswal7334 3 years ago

William please guide how to use "redash" package in Javascript project ?