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 ???
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 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. 😃
@@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
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
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?
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
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.
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 ??
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.
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
You’re a gift to those around you.
Great! If you go to all the way top it will the scroll part is hiding under header
Good explanation dude.
i'm from Viet Nam. your channel is the best!
I am from Indonesia. Thanks for your tutorials
i waiting for next great videos
Dude! your videos are very valuable to us... Thanks........
Thanks a lot. did not know about this diffClamp function.
Thanks, It is simple and straight forward
I can hide and show the header but textinput can press when position absolute,do you know how to solve it?
brilliant work. i watched many vids on this, all were 20 times longer and all didnt work thank u.
Exactly what I wanted. Thanks!!
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],
});
thanks
cool but, why it showing interpolate is not a function?
Nice video really helpful in clearing my concepts
Thanks man, this is very helpful!
Best video ever seen thanks alot!!!!
Thankyou so much sir!! Works perfectly on my company app
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 ???
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.
@@amitdhaterwal8395 Thank you today i tried your solve 😂 it worked perfectly, but why this is not a good solution ?
@@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. 😃
@@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
hey nice video can u make one where u can add and materialTopTabs like wzzp thanks.
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
Thank U for this tutorial, it help me
Great man , thanks , thats just what i need!!
Thank you... for this video.. it helped 💖👍
It is not working for down scroll behaviour. Because when I am slowly scrolling downward the header is flickering and coming twice
Thank you!! this helped me a lot
helped me a lot. thanks
Big Thanks buddy
Great !!! 💖💖💖
Thank u for video
Thank you. This helps me a lot! :D
Awesome videos
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?
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
Why is my flatlist behind the toolbar when im fully on top?!!!
Can someone help me?
Thanks alot man...
Thanks, thats what i m searching for, mister.
when i position the animated view then TouchableOpacity and Text Input are note working
Can you make a video to hide bottom navigation when scrolling?
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
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.
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 ??
it's not working for the downscroll behaviour
Nice tutorials!
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.
but if you scroll to top, the first card is hidden by the header
Exactly same problem? if you found tell me
I got it
how
@@sabirali.836
What did you do
after the header is set to the absolute top part of scroll view content is getting hidden is there any solution?
Only change the scrollY value if the offset is above 0
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
Thanks!!!
Awesomr
Thanks bro...
Bro, is this a website of mobile application..
Thnx brooooo
Ty
clean code please