5

Below is a demo screen of what I want to implement.

enter image description here

So, what I want to do is that when I swipe up on the green area, I want the yellow area to move up along with it, and also the below blue box area (which is FlatList in my case).

When the yellow area is finally hidden, I want the green area to stick at the top of the screen and the user can scroll in the below blue box area.

How can I do it with PanResponder and Animated API? As far as I know, it can be done using Interpolation but I'm not able to get the logic in this case.

halfer
  • 19,824
  • 17
  • 99
  • 186
Shubham Bisht
  • 577
  • 2
  • 26
  • 51
  • You just need to track scrollY value with onScroll function of FLATLIST, and then use translate for the top half to slide. – Manjeet Singh Mar 06 '19 at 17:21
  • @ManjeetSingh But I don't want the yellow and green area to move when I scroll in `FlatList`. What I want to do is that when I scroll up on the entire screen, the yellow area will move up and disappear and only green area will stick to the top. And then I scroll on the `FlatList`. – Shubham Bisht Mar 07 '19 at 05:44
  • did you tried this https://www.npmjs.com/package/react-native-parallax-scroll-view ? if not, have a glance at it. – Jaydeep Galani Mar 07 '19 at 05:51
  • also see this, https://www.npmjs.com/package/react-native-parallax-header – Jaydeep Galani Mar 07 '19 at 05:53
  • @JaydeepGalani No I haven't yet. But I'm not sure if it will work in my case since in the yellow area I've a map and in the green area there are some buttons. – Shubham Bisht Mar 07 '19 at 05:53
  • Sometimes others solutions don't fit in our situation but at least you can check their code and get an idea of how parallax works and create your own solution. – Jaydeep Galani Mar 07 '19 at 06:03
  • @JaydeepGalani thank you for your advice. :) I'll try it, hope it works. – Shubham Bisht Mar 07 '19 at 06:04
  • Put glimpse of your workaround to answer section if it works. so that anyone having the same case could get an idea what to do. – Jaydeep Galani Mar 07 '19 at 06:12
  • @JaydeepGalani Sure. Will definitely do. But I hope I could ask for your help later if I might need in this problem. – Shubham Bisht Mar 07 '19 at 06:15

0 Answers0