Animated Header in React Native

Aditya Singh

Lets animate that boring header in your react native app.

I have also put up a video regarding this. Skip it, if you prefer reading.

First things first, lets create a basic App.js file and route it to another component which we will call Main.js. Also, we add our own custom Header.js to our app.

import React from 'react';
import { createStackNavigator } from "react-navigation";
import Main from "./Main";
import Header from "./Header";
const MainStack = createStackNavigator({
Main: {
screen: Main,
navigationOptions: ({ navigation, screenProps }) => {
return {
header: <Header {...navigation} {...screenProps} />
};
}
}
});
export default class App extends React.Component {
render() {
return <MainStack />;
}
}

Now, we need to animate the height of our header based on the amount of scroll a user does. To do that, we need to take an input from our Main.js component and pass it to our header component.

We are going to use a ScrollView and it’s onScroll event.

The onScroll event will give us the amount of scroll a user does while inside ScrollView. From the onScroll event, we get the yOffset value which we use to change the height of our header. Next, we assign it to this.scrollY which is variable that we interpolate. We are going to use this value, modify (interpolate) it and then pass it to our Header.js component using React Navigation’s

this.props.navigation.setParams({ paramName: paramValue })

Our final Main.js file should look like so.

import React from "react";
import { View, Text, ScrollView, Animated } from "react-native";
export default class Main extends React.Component { componentDidMount() {
this.scrollY = new Animated.Value(0);
this.changingHeight = this.scrollY.interpolate({
inputRange: [0, 50],
outputRange: [120, 60],
extrapolate: "clamp"
});
this.props.navigation.setParams({
changingHeight: this.changingHeight
});
}
render() {
return (
<View style={{ flex: 1 }}>
<ScrollView
style={{ height: 1000 }}
scrollEventThrottle={16}
onScroll = { Animated.event([
{
nativeEvent: {
contentOffset: {
y: this.scrollY
}
}
}
])}
>
<View style={{ height: 120 }} />
<Text>Batman Forever!</Text>
</ScrollView>
</View>
);
}
}

scrollEventThrottle is a prop that allows us to set how frequently we receive onScroll events from the user. A larger value will result in a good performance but will output lesser events whereas a smaller value will give us more frequent events but will come at a cost of poor performance.

It is now time to start writing our Header.js component.

We should position our header absolutely, otherwise we will see a jerky animation.

import React from "react";
import { View, Animated, Image } from "react-native";
export default class Header extends React.Component {
render() {
let { params } = this.props.state;
return (
<Animated.View
style={{
height:
params !== undefined &&
params.changingHeight !== undefined
? params.changingHeight
: 120,
position: "absolute",
top: 0,
left: 0,
backgroundColor: "#fff",
width: "100%",
justifyContent: "center",
alignItems: "center"
}}
>
<Text>Custom header</Text>
</Animated.View>
);
}}

Here is a Snack for the same!

There it is, a custom animated header component using Animated API from React Native.

I work as a Javascript developer at Morfsys. I love writing about technology, science and more.

Follow me for more interesting stories.

Aditya Singh

Written by

Javascript develover | Coffee | 420 | Beer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade