hide header base on scroll delta not scroll position

Question

how I can get scroll change from start to end with react native flat list and change the height of header base on that like bellow example

example-screenshot

for instance

const delta = end_scroll_pos - start_scroll_pos; // for example delta = 60

for example between scroll postion 220 and 280 delta 60

score 0 · Accepted Answer · answered Nov 22 '20 at 19:15

I've recently developed a new package, react-native-animated-screen, that does exactly what you need

Check it out

https://www.npmjs.com/package/react-native-animated-screen

import  React  from  'react';
import { Image, Text, View } from  'react-native';
import AnimatedScreen from  'react-native-animated-screen';

const  Component = () => {
   const animationStart = 90; 
   const animationEnd = 300; // the header will be totally collapsed by screen scrolled 300
   return (
     <AnimatedScreen.Wrapper>
       <AnimatedScreen.Header headerMinHeight={animationStart} headerMaxHeight={animationEnd}>
         <View>
           <Text>Title</Text>
           <AnimatedScreen.CollapsibleElement>
             <Text>Subtitle</Text>
           </AnimatedScreen.CollapsibleElement>
         </View>
       </AnimatedScreen.Header>
       <AnimatedScreen.ScrollView>
         <View  style={{ height: '300%' }}>
           <View>
             <Text>Body</Text>
           </View>
         </View>
       </AnimatedScreen.ScrollView>
     </AnimatedScreen.Wrapper>
   );
};

In the example above only the title is going to remain after scrolling, the subtitle (as all the elements wrapped in a CollapsibleElement) will disappear. You can use the two params headerMinHeight and headerMaxHeight of the AnimatedHeader wrapper component to define exactly after how much scroll the animation should start and complete

hide header base on scroll delta not scroll position

1 Answers1