High-performanc Animated Header Component For React Native

Description:

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

Required react-native-reanimated and react-native-safe-area-context.

How to use it:

1. Install & import.

# Yarn
$ yarn add @codeherence/react-native-header
# NPM
$ npm i @codeherence/react-native-header

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

2. Create the header component.

// small header
const HeaderComponent = ({ showNavBar }) => (
  <Header
    showNavBar={showNavBar}
    headerCenter={<Text style={{ fontSize: 16, fontWeight: 'bold' }}>react-native-header</Text>}
  />
);
// large header
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>
);

3. use them in a ScrollViewWithHeaders component.

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>
  );
};

Preview: