React Native Animated Screen

This module includes all the necessary components to generate outstanding scroll-based animated screens and screens header.

The package is both Android and iOS compatible.

Try it out

You can play with our ready-to-use examples from our GitHub repository

|Example 1|Example 2|Example 3|Example 4| |---|---|---|---| |||||

$ git clone https://github.com/giovannidavi/react-native-animated-screen.git

You can check the examples code here examples

Installation

With npm

$ npm install react-native-animated-screen

With yarn

$ yarn add react-native-animated-screen

The solution is implemented in JavaScript so no native module linking is required.

Usage

By default the component exposes 7 sub-components to help you creating the stage.

• AnimatedScreen.Wrapper
• AnimatedScreen.Header
• AnimatedScreen.ScrollView
• AnimatedScreen.FlatList
• AnimatedScreen.SectionList
• AnimatedScreen.Element
• AniamtedScreen.CollapsibleElement

For the animation to work properly you need to wrap your entire view in an AnimatedScreen.Wrapper component which will include the AnimatedScreen.Header and at least one of the scrollable elements:

• AnimatedScreen.ScrollView

• AnimatedScreen.FlatList

• AnimatedScreen.SectionList

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

Is the main component and the wrapper of the entire animated screen, required

Basic parameters

<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

Is one of the children of the Wrapper, is required, and it contains all the header elements. Its dimensions are inherited from the wrapper and define the scroll animation behaviours. It expect at least one child component.

Basic parameters

<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

Extends the react-native ScrollView and can be used as scrollable element for the screen. For the entire list of possible props refer to react-native ScrollView documentation. Never to be used in combination with AnimatedScreen.FlatList or AnimatedScreen.SectionList.

Basic parameters

<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

Extends the react-native FlatList and can be used as scrollable element for the screen. For the entire list of possible props refer to react-native FlatList documentation. Never to be used in combination with AnimatedScreen.ScrollView or AnimatedScreen.SectionList.

Basic parameters

<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

Extends the react-native SectionList and can be used as scrollable element for the screen. For the entire list of possible props refer to react-native SectionList documentation. Never to be used in combination with AnimatedScreen.ScrollView or AnimatedScreen.FlatList.

Basic parameters

<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

Can only be used as a child of AnimatedScreen.Header, it can wrap any type of component that you want to disappear while scrolling

Basic parameters

<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

As the CollapsibleElement can only be used as a child of AnimatedScreen.Header but it should wrap element that you don't want to disappear while scrolling

Basic parameters

<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>

Author

• Giovanni Davì

Contributing

Pull requests are most welcome!

Don't forget to add a title and a description that explain the issue you're trying to solve and your suggested solution. Screenshots and gifs are very helpful.