Advertisement
crutch12

react-native - transform header

Sep 27th, 2022 (edited)
1,066
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Box, ScrollView } from 'native-base';
  2. import type { IScrollViewProps } from 'native-base';
  3. import { SafeAreaView } from 'react-native-safe-area-context';
  4. import Header from './Header';
  5. import Footer from './Footer';
  6. import { useRef, useState } from 'react';
  7. import { Animated } from 'react-native';
  8.  
  9. const Layout = ({ children, ...otherProps }: IScrollViewProps) => {
  10.   const scrollOffsetY = useRef(new Animated.Value(0)).current;
  11.   const [height, setHeight] = useState(0);
  12.  
  13.   const headerScrollY = scrollOffsetY.interpolate({
  14.     inputRange: [0, height],
  15.     outputRange: [0, height],
  16.     extrapolate: 'identity',
  17.   });
  18.  
  19.   return (
  20.     <SafeAreaView style={{ flex: 1 }}>
  21.       <Box flex={1} bg="muted.50">
  22.         <ScrollView
  23.           {...otherProps}
  24.           onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }], {
  25.             useNativeDriver: true,
  26.           })}
  27.           onLayout={(ev) => {
  28.             setHeight(ev.nativeEvent.layout.height);
  29.           }}
  30.           scrollEventThrottle={1}
  31.         >
  32.           <Animated.View
  33.             style={{
  34.               transform: [{ translateY: headerScrollY }],
  35.               width: '100%',
  36.               zIndex: 999,
  37.             }}
  38.           >
  39.             <Header />
  40.           </Animated.View>
  41.           {children}
  42.           <Footer />
  43.         </ScrollView>
  44.       </Box>
  45.     </SafeAreaView>
  46.   );
  47. };
  48.  
  49. export default Layout;
  50.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement