#3 Hide Header on scroll up and visible on scroll down animation in React Native

In this video we will animate TH-cam header. Header will hide on scroll up ans it will be again visible on scroll down. React Native animations
connect with me on -
facebook : / mukesh.phulwani.5
instagram : / mukeshphulwani66
linkedin: / mukesh-phulwani-681450152
github: github.com/mukeshphulwani66
codersneverquit website : www.codersneverquit.in/

[@ASMRAaronLeupp]

You’re a gift to those around you.

[@anazi]

Thanks alot man ! Honestly I am working on a project and I have been avoiding the Animated part of it, until came the time that I need to do exactly that ! The funny part that my project is setup exactly like yours with the flat-list and all ! So it made me more confident to follow your instruction and it worked perfectly man !! THANK YOU ALOT

[@dehumanizer668]

Exactly what I wanted. Thanks!!

[@nguyennhat9516]

i'm from Viet Nam. your channel is the best!

[@Shubh_1QR]

Dude! your videos are very valuable to us... Thanks........

[@LindelaniKgothatsoSodi]

Thanks, It is simple and straight forward

[@arpankkr]

Nice video really helpful in clearing my concepts

[@riorafe]

Thankyou so much sir!! Works perfectly on my company app

[@matkomilic201]

brilliant work. i watched many vids on this, all were 20 times longer and all didnt work thank u.

[@umaralfaruq1304]

I am from Indonesia. Thanks for your tutorials
i waiting for next great videos

[@kalinakibrandon]

Best video ever seen thanks alot!!!!

[@wilsonlopez395]

Great man , thanks , thats just what i need!!

[@LuanaFerreira-bq9xh]

Thank you!! this helped me a lot

[@armindervic9497]

Thanks man, this is very helpful!

[@chndraja]

Thank you... for this video.. it helped 💖👍

[@newtonsazzad748]

Thanks a lot. did not know about this diffClamp function.

[@duyhuynh9587]

Thank you. This helps me a lot! :D

[@gabrielrojonovais]

helped me a lot. thanks

[@rushclintakam7621]

Thank U for this tutorial, it help me

[@programingproject2057]

Awesome videos

[@brunosgaming9574]

Good explanation dude.

[@WesleyGomes-re7zf]

Thanks alot man...

[@someone-pv9fo]

Big Thanks buddy

[@nppull2105]

Great !!! 💖💖💖

[@duytoan4985]

Thank u for video

[@htsscreatorshtsscreators7674]

Awesomr

[@sandeshbirwadkar2384]

Nice tutorials!

[@onuryldrm1840]

Thnx brooooo

[@123daz123daz]

Thanks!!!

[@HolyQuran0992]

Great! If you go to all the way top it will the scroll part is hiding under header

[@raievepic9967]

Ty

[@NaveenKumar-td4hw]

Thanks bro...

[@thealchemist8212]

Bro, is this a website of mobile application..

[@arwysyah2400]

I can hide and show the header but textinput can press when position absolute,do you know how to solve it?

[@gugildak12]

Thanks, thats what i m searching for, mister.

[@nakidm]

hey nice video can u make one where u can add and materialTopTabs like wzzp thanks.

[@jervi_sir]

thank you, How to do this with multiple Flatlist, m having a case where m using tab top navigation, each tab is a flatlist, and I need to collapse header when even i scroll in any tab

[@arwysyah2400]

Can you make a video to hide bottom navigation when scrolling?

[@KaranKamdar1MW]

Hi I am trying to implement this with the SafeAreaView from react-navigation-safeareaview which wraps my header. But the SafeAreaView remains on top. How to do this. Can you give an example?

[@satyaranjannayak1361]

Hi bro I need a help.
I need to nest a sectionlist insidr another sectionlist. Whenever I use scrollToLocation I get error saying this._scrollRef is not a function.
Please give some suggestion.
Basically I need a scrollable header with tabs having name as of section header and should stick to top even if ListHeaderComponent be in its top.

[@pratikbingewar3925]

Hi Mukesh, I am trying an error regarding react native from 2 days. I am following your React native mongo db express and node.js tutorial.
Whenever I try to open my react app in the android studio I get this error.
Caused by: groovy.lang.MissingPropertyException: No such property: applicationVariants for class: java.lang.String
Please let me know if you have any solution.

[@dndeveloper]

You should explain every property or methods you are writing based on the topic you are trying to explain for better experience, We are here to understand what it actually does.. Anyway, I would love to see this improvement. rest was good work

[@stanlymedjo3338]

please i will live to do the reverse i.e header is at display none, when i scroll down is appears when i scroll up it disappears, please can you help ??

[@glowingsun6437]

when i position the animated view then TouchableOpacity and Text Input are note working

[@afj_95]

Thank you my friend for this tutorial you saved my life.
But i have a question how to show the full height of first item in the flatList ? it's hidden behind the header and if i added marginTop to the flatList i still have an empty space on top of screen ???

[@amitdhaterwal8395]

you can give a header to the list ( ListHeaderComponent={} to flatlist) with a height equals to 45(in this case). This is not a good solution but it will work in your case, if you got a better solution please share it with me.

[@afj_95]

@@amitdhaterwal8395 Thank you today i tried your solve 😂 it worked perfectly, but why this is not a good solution ?

[@amitdhaterwal8395]

@@afj_95 Glad it worked for you. its not good solution as we are adding unnecessary header, its should be done using animation or (i don't know). I have read some companies used this approach, but it should have a proper way. Imagine we have 10's of these kind of situation, then we will stuck with adding 10's dummy code. 😃

[@afj_95]

@@amitdhaterwal8395 It's true, I saw a video for someone adding paddingTop to the ScrollView not FlatList, I tried it on the FlatList but i got hidden items in the bottom and i tried to add ScrollView i got a warning telling me Animated.event should have 2 elements

[@DesignedByLeXeLofficial]

Why is my flatlist behind the toolbar when im fully on top?!!!
Can someone help me?

[@matkomilic201]

if you guys are getting error pls use this: const scrollY = new Animated.Value(0);
const diffClamp = Animated.diffClamp(scrollY, 0, 45);
const translateY = Animated.interpolate(diffClamp, {
inputRange: [0, 45],
outputRange: [0, -45],
});

[@anazi]

thanks

[@Brankobereki]

cool but, why it showing interpolate is not a function?

[@cao2106]

I tried and succeeded. However, there is an error that I don't know how to fix. That is when scrolling to the top of the page, a bouncing phenomenon appears, so it is mistakenly thought that it has been scrolled down a little, causing the header to be hidden. We can fix it with bounces={false} for ScrollView, but I want to keep it "true". Please help me find another solution, thank you

[@Brankobereki]

anyone have issue when trying scroll up? I follow the tutorial and I did it for hide when scroll down, but it doesn't happen when scroll up

[@enhanceyourknowledge9892]

after the header is set to the absolute top part of scroll view content is getting hidden is there any solution?

[@guilleclara2640]

Only change the scrollY value if the offset is above 0

[@umaralfaruq1304]

clean code please

[@prabhandpardeep]

but if you scroll to top, the first card is hidden by the header

[@sabirali.836]

Exactly same problem? if you found tell me

[@sabirali.836]

I got it

[@Rkofficials2187]

how
@@sabirali.836

[@simpleguy2020]

What did you do