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

const  Component = () => {
   return (
     <AnimatedScreen.Wrapper>
       <AnimatedScreen.Header>
         <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>
   );
};

<AnimatedScreen.Wrapper
  // Set header max and min height (before and after scroll)
  
  // headerMaxHeight?: number; (default: 200)
  hederMaxHeight={200}
  // headerMinHeight?: number; (default: 70)
  headerMinHeight={70}

  // Select if the screen should take care of avoiding safe area
  // avoidSafeArea?: boolean; (default: false)
  avoidSafeArea={true}

  // Select if want your body and header to scroll with a parallax effect or not
  // disableParallaxEffect?: boolean; (default: false)
  disableParallaxEffect={false}

  // Function triggered on scroll event taking the `event` object as a parameter
  // onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) =>  void;
  onScroll={() => null}

>
  // at least an AnimatedScreen.Header and an AnimatedScreen scrollable element required as children
  { children }
</AnimatedScreen.Wrapper>

<AnimatedScreen.Header
  // if the header content has to wrapped in boxed content
  // boxed?: boolean; (default: false)
  boxed={true}
  
  // Expects a callback returning a style object that can interpolate the Animated.Value
  // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
  animatedStyle={ scrollY => ({
   opacity: scrollY.interpolate({
     inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
     outputRange: [1, 0]
    })
   })
  }

  // Expects a callback returning the component to be used as background
  // renderBackground?: (scrollY: Animated.Value) =>  JSX.Element;
  renderBackground={ scrollY => (
    <Animated.View style={[style.background, getBackgroundOpacity(scrollY)]}/>
  )

  // Set if your header should generate a shadow on scroll
  // withShadow?: boolean; (default: false)
  withShadow={ true }

  // Set if your header should have a translucent blured effect on scroll
  // (ONLY Android - not recommended in iOS)
  // blur?: boolean; (default: false)
  blur={ false }

  // Expects a string or undefined containing the background color to be passed to the style
  // backgroundColor?: string; (default: undefined)
  backgroundColor="#303030"

  // Select if the header should take care of SafeArea
  // withSafeArea?: boolean; (default: true)
  withSafeArea={ true }

  // Expect a style object that can extend the header style
  // (preferred to animatedStyle if static)
  // style?: ViewStyle; (default: undefined)
  style={{ paddingBottom: 10 }}
>
  // at least one child is required, can be any component (AnimatedScreen.CollapsibleElement and AnimatedScreen.Element are provided to create animated effects)
  { children }
</AnimatedScreen.Header>

<AnimatedScreen.ScrollView
  // Expects a callback returning a style object that can interpolate the Animated.Value
  // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
  animatedStyle={ scrollY => ({
   opacity: scrollY.interpolate({
     inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
     outputRange: [1, 0]
    })
   })
  }

  // Expect a style object that can extend the header style
  // (preferred to animatedStyle if static)
  // style?: ViewStyle; (default: undefined)
  style={{ paddingBottom: 10 }}

  // Expect a React.RefObject to be attached to the ScrollView
  // scrollViewRef?: React.RefObject<ScrollView>;
  scrollViewRef={ scrollViewRef }
>
  { children }
</AnimatedScreen.ScrollView>

<AnimatedScreen.FlatList
  // Expects a callback returning a style object that can interpolate the Animated.Value
  // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
  animatedStyle={ scrollY => ({
   opacity: scrollY.interpolate({
     inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
     outputRange: [1, 0]
    })
   })
  }

  // Expect a style object that can extend the header style
  // (preferred to animatedStyle if static)
  // style?: ViewStyle; (default: undefined)
  style={{ paddingBottom: 10 }}

  // Expect a React.RefObject to be attached to the ScrollView
  // flatlistRef?: React.RefObject<FlatList<T>>;
  flatlistRef={ flatlistRef }

  { ...restOfFlatListProps }
/>

<AnimatedScreen.SectionList
  // Expects a callback returning a style object that can interpolate the Animated.Value
  // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
  animatedStyle={ scrollY => ({
   opacity: scrollY.interpolate({
     inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
     outputRange: [1, 0]
    })
   })
  }

  // Expect a style object that can extend the header style
  // (preferred to animatedStyle if static)
  // style?: ViewStyle; (default: undefined)
  style={{ paddingBottom: 10 }}

  // Expect a React.RefObject to be attached to the ScrollView
  // sectionlistRef?: React.RefObject<SectionList<T>>;
  sectionlistRef={ sectionlistRef }

  { ...restOfSectionListProps }
/>

<AnimatedScreen.CollapsibleElement
  // Expects a callback returning a style object that can interpolate the Animated.Value
  // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
  animatedStyle={ scrollY => ({
   opacity: scrollY.interpolate({
     inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
     outputRange: [1, 0]
    })
   })
  }

  // Expect a style object that can extend the header style
  // (preferred to animatedStyle if static)
  // style?: ViewStyle; (default: undefined)
  style={{ paddingBottom: 10 }}

  // Set if you want the content of the element to overflow the boxed header (and take full-width)
  // only to be used if AnimatedScreen.Header is set to `boxed`
  // unboxed?: boolean; (default: false)
  unboxed={ true }

  // Expects an object containing all the style elements to interpolate on scroll, can be considered as a shortcut for animatedStyle
  // interpolate?: { [key: string]: string[] | number[] };
  interpolate={ height: [200, 0] } // will interpolated from an height of 200 to an height of 0 while scrolling
>
  { children }
</AnimatedScreen.CollapsibleElement>

<AnimatedScreen.Element
  // Expects a callback returning a style object that can interpolate the Animated.Value
  // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
  animatedStyle={ scrollY => ({
   opacity: scrollY.interpolate({
     inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
     outputRange: [1, 0]
    })
   })
  }

  // Expect a style object that can extend the header style
  // (preferred to animatedStyle if static)
  // style?: ViewStyle; (default: undefined)
  style={{ paddingBottom: 10 }}

  // Set if you want the content of the element to overflow the boxed header (and take full-width)
  // only to be used if AnimatedScreen.Header is set to `boxed`
  // unboxed?: boolean; (default: false)
  unboxed={ true }

  // Expects an object containing all the style elements to interpolate on scroll, can be considered as a shortcut for animatedStyle
  // interpolate?: { [key: string]: string[] | number[] };
  interpolate={ height: [200, 0] } // will interpolated from an height of 200 to an height of 0 while scrolling
>
  { children }
</AnimatedScreen.Element>