Sunday, June 9, 2019

React Native ScrollView Animated Header Example

This tutorial explains how to create animation header in scrollview in react native application. You have noticed in many apps that a fixed height header is positioned on the top of the screen and a scrolling list is used underneath the header. When you start to scroll the list, the header collapses with nice smooth animation from current height to fixed min height based on scrolling list’s scroll value and sticks on the top of the screen. Here you are going to see to similar animation effect in react native application.

React Native ScrollView Animated Header Example


React Native ScrollView Animated Header Example :

Lets see the complete source code App.js component that helps to create animation header in scrollview in react native application.



Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.
import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, Platform, Animated, ScrollView, } from 'react-native';

Step 4: Define two constants named as HEADER_MIN_HEIGHT for animated header min height and HEADER_MAX_HEIGHT for animated header max height.
const HEADER_MIN_HEIGHT = 50;
const HEADER_MAX_HEIGHT = 200;

Step 5: Lets create constructor block inside your App component.
constructor() {
    super();

    this.scrollYAnimatedValue = new Animated.Value(0);

    this.array = [];
  }

Step 6: Lets implement componentWillMount  method.
 componentWillMount() {
    for (var i = 1; i <= 75; i++) {
      this.array.push(i);
    }
  }

Step 7: Implement render method inside the App class and wrapped the below layout design inside the root View component. React Native Animated API allows us to animate a Value as well as allows us to bind animated value to an event. In this tutorial, We have to bind animated value to scroll Y position of ScrollView component. To accomplish this, we have to use Animated.event  on onScroll prop of ScrollView component.
render() {

    const headerHeight = this.scrollYAnimatedValue.interpolate(
      {
        inputRange: [0, (HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT)],
        outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
        extrapolate: 'clamp'
      });

    const headerBackgroundColor = this.scrollYAnimatedValue.interpolate(
      {
        inputRange: [0, (HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT)],
        outputRange: ['#e91e63', '#1DA1F2'],
        extrapolate: 'clamp'
      });

    return (
      <View style={styles.container} >
        <ScrollView
          contentContainerStyle={{ paddingTop: HEADER_MAX_HEIGHT }}
          scrollEventThrottle={16}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.scrollYAnimatedValue } } }]
          )}>
          {
            this.array.map((item, key) =>
              (
                <View key={key} style={styles.item}>
                  <Text style={styles.itemText}>Row No : {item}</Text>
                </View>
              ))
          }
        </ScrollView>

        <Animated.View style={[styles.animatedHeaderContainer, { height: headerHeight, backgroundColor: headerBackgroundColor }]}>
          <Text style={styles.headerText}>Animated Header</Text>
        </Animated.View>

      </View>
    );
  }

Step 8 : Apply the below style sheet design. 
const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",

    },
    animatedHeaderContainer: {
      position: 'absolute',
      top: (Platform.OS == 'ios') ? 20 : 0,
      left: 0,
      right: 0,
      justifyContent: 'center',
      alignItems: 'center'
    },
    headerText: {
      color: 'white',
      fontSize: 22
    },
    item: {
      backgroundColor: '#ff9e80',
      margin: 8,
      height: 45,
      justifyContent: 'center',
      alignItems: 'center'
    },
    itemText: {
      color: 'black',
      fontSize: 16
    }
    
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to create animation header in scrollview in react native application.

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, Platform, Animated, ScrollView, } from 'react-native';


const HEADER_MIN_HEIGHT = 50;
const HEADER_MAX_HEIGHT = 200;

export default class App extends Component {

  constructor() {
    super();

    this.scrollYAnimatedValue = new Animated.Value(0);

    this.array = [];
  }

  componentWillMount() {
    for (var i = 1; i <= 75; i++) {
      this.array.push(i);
    }
  }

  render() {

    const headerHeight = this.scrollYAnimatedValue.interpolate(
      {
        inputRange: [0, (HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT)],
        outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
        extrapolate: 'clamp'
      });

    const headerBackgroundColor = this.scrollYAnimatedValue.interpolate(
      {
        inputRange: [0, (HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT)],
        outputRange: ['#e91e63', '#1DA1F2'],
        extrapolate: 'clamp'
      });

    return (
      <View style={styles.container} >
        <ScrollView
          contentContainerStyle={{ paddingTop: HEADER_MAX_HEIGHT }}
          scrollEventThrottle={16}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.scrollYAnimatedValue } } }]
          )}>
          {
            this.array.map((item, key) =>
              (
                <View key={key} style={styles.item}>
                  <Text style={styles.itemText}>Row No : {item}</Text>
                </View>
              ))
          }
        </ScrollView>

        <Animated.View style={[styles.animatedHeaderContainer, { height: headerHeight, backgroundColor: headerBackgroundColor }]}>
          <Text style={styles.headerText}>Animated Header</Text>
        </Animated.View>

      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",

    },
    animatedHeaderContainer: {
      position: 'absolute',
      top: (Platform.OS == 'ios') ? 20 : 0,
      left: 0,
      right: 0,
      justifyContent: 'center',
      alignItems: 'center'
    },
    headerText: {
      color: 'white',
      fontSize: 22
    },
    item: {
      backgroundColor: '#ff9e80',
      margin: 8,
      height: 45,
      justifyContent: 'center',
      alignItems: 'center'
    },
    itemText: {
      color: 'black',
      fontSize: 16
    }
    
  });

Screenshot :

React Native ScrollView Animated Header Example

React Native ScrollView Animated Header Example

React Native ScrollView Animated Header Example

This is all about React Native ScrollView Animated Header Example. Hope you like this example.

4 comments: