A high-performance, cross-platform animated header component for React Native applications

by React Native Example

React Native Header

React Native Header is a high-performance, cross-platform animated header component for React Native applications. It provides an easy-to-use interface for developers to quickly create beautiful and dynamic navigation headers.

iOS Android

Features

  • Maintains a similar experience between iOS and Android.
  • Uses Reanimated for better animation performance
  • Works with ScrollView and FlatList
  • Compatible with Expo Go and React Native CLI projects
  • Written in TypeScript

Prerequisites

Before you can use react-native-header, you need to have the following libraries set up in your React Native project:

If you haven’t installed these libraries yet, please follow the installation instructions on their respective documentation pages.

Installation

Once you have react-native-reanimated and react-native-safe-area-context set up in your project, you can install react-native-header using yarn or npm:

yarn add @codeherence/react-native-header

or:

npm install @codeherence/react-native-header

Example

Let’s implement a regular ScrollView with a large header:

First, we import the library:

import {
  Header,
  LargeHeader,
  ScalingView,
  ScrollViewWithHeaders,
} from '@codeherence/react-native-header';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

Then we create our header component:

const HeaderComponent = ({ showNavBar }) => (
  <Header
    showNavBar={showNavBar}
    headerCenter={<Text style={{ fontSize: 16, fontWeight: 'bold' }}>react-native-header</Text>}
  />
);

and our large header component:

const LargeHeaderComponent = ({ scrollY }) => (
  <LargeHeader>
    <ScalingView scrollY={scrollY}>
      <Text style={{ fontSize: 14 }}>Welcome!</Text>
      <Text style={{ fontSize: 32, fontWeight: 'bold' }}>react-native-header</Text>
      <Text style={{ fontSize: 12, fontWeight: 'normal', color: '#8E8E93' }}>
        This project displays some header examples using the package.
      </Text>
    </ScalingView>
  </LargeHeader>
);

and finally, use them in a ScrollViewWithHeaders component like so:

const Example = () => {
  const { bottom } = useSafeAreaInsets();

  return (
    <ScrollViewWithHeaders
      HeaderComponent={HeaderComponent}
      LargeHeaderComponent={LargeHeaderComponent}
      contentContainerStyle={{ paddingBottom: bottom }}
    >
      <View style={{ padding: 16 }}>
        <Text>Some body text...</Text>
        <Text>Some body text...</Text>
      </View>
    </ScrollViewWithHeaders>
  );
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

GitHub

View Github