Airbnb Header Animation | React Native | Reanimated

You'll learn how to create the header animation similar to the Airbnb App.
New To React Native?
React Native Foundation + Firebase + Redux :
www.udemy.com/course/react-na...
Project Files: Coming Soon
Affiliate links:
Love Reading but have no time to read?
Checkout Blinkist: jump.blinkist.com/aff_c?offer_...
Twitter / nathvarun
Instagram / nathvarun25
Facebook / nathvarun

[@AsadAli-hn8yk]

Hey Man, great videos, just started working in mobile development and your videos are of great help to keep up with the ui standards!

[@souravde2283]

You are doing amazing job bro. Look and feel is really needed to make the app beautiful. I highly appreciate your job. Do more such staff. Cheers to React-Native and surely for Unsure Programmer !!!!!

[@focus.motywacja]

I just spent 3 dayst trying to figure it out. You made it look so easy! I have done it similar way as you did, but I didn't know diff clamp. I was trying to implement it by myself :joy:

[@HoaNguyen-mx6xj]

awesome tutorial, thank a lot

[@ihateorangecat]

thanks! it all works.

[@andremktpg]

Nice. More about animation please.

[@thientranduy9806]

note: Reanimated 2 interpolate was renamed to interpolateNode.

[@andreaintech4305]

Thank you so much!

[@devanshsadhotra9649]

U make the most relevant videos !! Thanks a lot for quality content . Please make video about ducks approach of redux

[@codewithfongoh]

Awesome

[@muhammad_adhi]

Amazingh

[@maxiequa567]

Hey! If you are thinking up new ideas for future tutorials perhaps you'd consider the Shazam app overlay UI system. Its pretty impressive from clicking a track image (in the library) which launches a 'hidden' description modal as well as the lower third vertical draw purchase/content modal. :)

[@excalibur885]

Thank you very much. But im thinking about how can i hide my header instantly with a animation? For example in this tutorial header goes up as much as you scroll down right? but how it would be if it is disaappear completely even you scroll 10 pixels to down.

[@Accentier]

Hi there, nice tutorial for animation. I'm following the code and its worked, but unfortunately if the apps contain of bottom tabs e.g (react navigation 5), the end of the content will be blocked by bottom tabs. Planned to used "Hide" bottom tabs when scrolling but seems like Animated.ScrollView from react-native-reanimated doesn't support listener (onScroll) call back yet. Any solution? Thanks.

[@buthex]

if I use padding top in the scrollview style , the refresh icon gets hidden behind the header when I pull to refresh , do you know how to solve it? thanks

[@tigpalmas]

is it possible to use with flatlist ?

[@makisetakashi]

how to handle pull and refresh with disable bouncer?

[@alakdam3970]

Nice tutorial mate. Do you have git repo about this?
Cheers!

[@mufaddalhamid333]

When will you upload project files...

[@purple_85]

Does anyone have a solution with a refreshable Animated.Flatlist? Im able to get really close but my header is variable height.

[@fynneleven2531]

Hey, I already send you a twitter dm, but maybe you see it here faster. I want to build a animated header like in the AppStire Games Section. There Is a big Title and when you scroll down, it transforms in a normal header. I would be very happy if you could make a video to this or tell me an Idea how to solve this.

[@mohammedsulthana9305]

🖤🖤

[@mohammedsulthana9305]

upload more vdios on animation

[@MHP2738]

Great tutorial!!! But is there a way to use bounces with this animated HEADER?

[@viricel01]

🙏🏼

[@z1haze]

I know this is very outdated, but could anyone please explain how simply adding a different clamp to the interpolation magically makes the scrolling up to transition the header back into view, regardless of the scroll offset? It doesn't make sense why this worked in old reanimated, and I've not been able to find anything to work similarly in the new reanimated.

[@umaralfaruq1304]

how to do this feat with react-native-pager-view

[@mayowaodunsi7954]

Do you have an updated code?? Documentation has changed greatly since your last video

[@mohammedhuchpeer9946]

Bro please make a video on react native firebase phone authentication

[@rg-du4ou]

Its not working. TypeError: null is not an object (evaluating 'value.__val')

[@matkomilic201]

Working for android right?

[@mohamdalmhde1322]

I created a animated header as explained in the video and added back button to the header with a tochableopacity. but when i tried to call onPress function in tochableopacity onpress not triggered. I tried to find a solution for this but i couldn't. It is very helpful if you can provide a solution for this or an alternative method that i can achieve this functionality.

[@mohamdalmhde1322]

@@godzii_bgmi i solved this problem
must use component TouchableOpacity from
react-native gesture handler
and animated.view from react-native reanimated
and mus set code in
i spent a lot of time to know it

[@johanvillamil2407]

this animaiton is posible with flatlist and infinifty scroll, i have problems

[@Yurio]

yes it is

[@yubliwarokka]

not working...

[@f-f-daily]

bounces={false} breaks pull to refresh in iOS, it would be better fixing this bug without it. 👎

[@musicbox9005]

I created a animated header as explained in the video and added back button to the header with a tochableopacity. but when i tried to call onPress function in tochableopacity onpress not triggered. I tried to find a solution for this but i couldn't. It is very helpful if you can provide a solution for this or an alternative method that i can achieve this functionality.

[@mohamdalmhde1322]

hello man
i have same proplem
can you help me

[@DezzFreeman]

Im having the same problem right now, did either of you ever figure it out? I know its because of the position: absolute property, but I cant find a workaround.