https://github.com/gapur/react-native-scrollable-animated-header

🤯 React Native Animated Header with ScrollView
https://github.com/gapur/react-native-scrollable-animated-header

animated animation react react-hooks react-native scrollview

Last synced: 5 days ago
JSON representation

🤯 React Native Animated Header with ScrollView

• Host: GitHub
• URL: https://github.com/gapur/react-native-scrollable-animated-header
• Owner: Gapur
• Created: 2020-07-06T16:24:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T10:46:38.000Z (almost 2 years ago)
• Last Synced: 2023-11-07T18:52:00.823Z (about 1 year ago)
• Topics: animated, animation, react, react-hooks, react-native, scrollview
• Language: Java
• Homepage:
• Size: 3.8 MB
• Stars: 113
• Watchers: 3
• Forks: 13
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



# React Native ScrollView Animated Header

React Native Animated Header App with ScrollView

Animated header is the most common design pattern in today’s apps. Animations are an important part of mobile applications.

## Getting Started

1. Clone this repository

```

git clone https://github.com/Gapur/react-native-scrollview-animated-header.git

```

2. Install dependencies

```

yarn

```

3. Launch app

```

npm run ios # for npm

```

## Making Magic Code

We need to define some constants for the animated header which will be used to interpolate the scroll position value.

```js

const HEADER_MAX_HEIGHT = 240;

const HEADER_MIN_HEIGHT = 84;

const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

```

I will display user data with ScrollView component. So We should to change App.js file like this:

```js

const HEADER_MAX_HEIGHT = 240; // max header height

const HEADER_MIN_HEIGHT = 84; // min header height

const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT; // header scrolling value

// create array by 10 fake user data

const DATA = Array(10)

  .fill(null)

  .map((_, idx) => ({

    id: idx,

    avatar: faker.image.avatar(),

    fullName: `${faker.name.firstName()} ${faker.name.lastName()}`,

  }));

function App() {

  const renderListItem = (item) => (

    

      

      {item.fullName}

    

  );

  return (

    

       // it should be under the header 

        {DATA.map(renderListItem)}

      

    

  );

}

```

We need to create the header under the ScrollView. We will use Animated.View

```js

  Management

```

## Magic Animation

React Native provides Animated API for animations. Animated API focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.

We are going to use Animated.ScrollView to make the scroll view, and attach a callback to listen to the onScroll event when it is changed. Then, using interpolation to map value between the y-axis and opacity. The interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions.

Let’s update our App.js file with the following lines of code:

```js

const scrollY = useRef(new Animated.Value(0)).current; // our animated value

// our header y-axis animated from 0 to HEADER_SCROLL_DISTANCE,

// we move our element for -HEADER_SCROLL_DISTANCE at the same time.

const headerTranslateY = scrollY.interpolate({

  inputRange: [0, HEADER_SCROLL_DISTANCE],

  outputRange: [0, -HEADER_SCROLL_DISTANCE],

  extrapolate: 'clamp',

});

// our opacity animated from 0 to 1 and our opacity will be 0

const imageOpacity = scrollY.interpolate({

  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],

  outputRange: [1, 1, 0],

  extrapolate: 'clamp',

});

const imageTranslateY = scrollY.interpolate({

  inputRange: [0, HEADER_SCROLL_DISTANCE],

  outputRange: [0, 100],

  extrapolate: 'clamp',

});

// change header title size from 1 to 0.9

const titleScale = scrollY.interpolate({

  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],

  outputRange: [1, 1, 0.9],

  extrapolate: 'clamp',

});

// change header title y-axis

const titleTranslateY = scrollY.interpolate({

  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],

  outputRange: [0, 0, -8],

  extrapolate: 'clamp',

});

```

Above, we use useRef to persist Animated value. useRef returns a mutable ref object whose .current property is initialized to the passed argument.

Next, We need to update Animated value when we are scrolling ScrollView. We will catch event by Animated.event. It maps directly to animated value scrollY and update it when we are panning or scrolling.

We can use the native driver by specifying useNativeDriver: true in our animation configuration.

Let’s animate our components by the following codes:

```js

  

    {DATA.map(renderListItem)}

  

  

    

  

  

    Management

  

```

## Article on Medium

[React Native Scrollable Animated Header](https://medium.com/javascript-in-plain-english/react-native-scrollable-animated-header-6dfe453d7078)

## How to contribute?

1. Fork this repo

2. Clone your fork

3. Code 🤓

4. Test your changes

5. Submit a PR!