Hide Header When Scrolling Down in React Native without Package

Result

In mobile app development, creating a smooth and visually pleasing user interface is paramount. One way to enhance the user experience is to hide the header when users scroll down a list or a content view. This effect can make the app feel more immersive and user-friendly. In this article, we’ll explore how to achieve this effect in React Native without relying on external packages or complicated data management.

We’ll create a simple React Native application that hides the header as the user scrolls down using the Animated API. Let’s dive into the code step by step.

Setting up the Project

Before we start coding, make sure you have a React Native project set up. If you haven’t already, you can create a new one using the following command:

npx react-native init ScrollHeaderExample

Now, let’s create the main component for our example.

The Code

In this example, we’ll use the Animated module from React Native to handle the header animation as the user scrolls down. Here's the core code snippet:

import React from 'react';
import { View, ScrollView, StyleSheet, Animated } from 'react-native';

import {Animated, ScrollView, StyleSheet, View} from 'react-native';
import {AnimtedAppBar} from './AnimatedAppbar';

function App(): JSX.Element {
  const scrollY = new Animated.Value(0);
  const diffClamp = Animated.diffClamp(scrollY, 0, 64);
  const translateY = diffClamp.interpolate({
    inputRange: [0, 64],
    outputRange: [0, -64],
  });

  return (
    <View style={{flex: 1}}>
      {AnimtedAppBar(translateY, navigation)}
      <ScrollView
        style={styles.container}
        onScroll={e => {
          scrollY.setValue(e.nativeEvent.contentOffset.y);
        }}>
        {/** This View For AppBar Because zIndex*/}
        <View style={{height: 64}}></View>
      </ScrollView>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    flex: 1,
    paddingHorizontal: 20,
  },
});
export default App;

import {Animated} from 'react-native';
import {CustomAppBar} from '../../components/molecules/customAppBar';

export const AnimtedAppBar = (translateY: any, navigation: any) => {
  return (
    <Animated.View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-around',
        // backgroundColor: 'rgba(52, 52, 52, 0)',
        backgroundColor: 'red',
        width: '100%',

        //for animation
        height: 64,
        transform: [{translateY: translateY}],
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
        elevation: 4,
        zIndex: 1,
      }}>
      {
//You can use your component for header.
CustomAppBar(
        '',
        ['play-circle-outline', 'share-variant-outline', 'dots-vertical'],
        [],
        navigation,
      )}
    </Animated.View>
  );
};

Let’s break down what’s happening in this code:

1. We create an Animated.Value called scrollY to track the vertical scroll position.
2. We use Animated.diffClamp to ensure that the value of scrollY stays within the range of 0 to 64. This range represents the height of the header.
3. We interpolate the diffClamp value to calculate the translateY value for our header animation. This value will smoothly move the header up as the user scrolls down.
4. Inside the App component, we render the AnimtedAppBar component, passing in the translateY value.
5. In the ScrollView, we use the onScroll prop to update the scrollY value as the user scrolls.
6. The AnimtedAppBar component is an Animated.View that wraps our header content. It uses the translateY value for its transform style to create the hide-on-scroll effect.
7. You can customize the appearance of your header by adjusting the styles and content within the AnimtedAppBar component.

That’s it! With this code, you’ll have a header that smoothly hides when the user scrolls down and reappears when they scroll up. Feel free to replace the placeholder content with your own header elements.

Conclusion

Creating a hidden header effect when scrolling down in React Native can significantly improve the user experience of your mobile app. By using React Native’s Animated API, we can achieve this effect without relying on external packages or complex data management. This example provides a foundation for implementing this feature in your own React Native applications.