@farfarawaylabs/react-native-animatable-header

Animatable and collapsible screen header based on attached scroll behavior for React Native

Installation

This library is dependant on a few other libraries in order to run animations in a performant way and only on the native thread.

npm install react-native-reanimated react-native-gesture-handler react-native-redash

npm install @farfarawaylabs/react-native-animatable-header

Architecture and design choices

This componenet was design as a composite control. Although this pattern is more verbose in code, it give you a lot more flexibility. You can use all the built in componenets or replace just some of them with your own implementation. It also prefers coding in a declarative way instead of having just one component with a list of tens of props for customization. That said, each of the coponents in this library accepts also a style and {...rest} props so you can easily customize them as well.

Basic Usage Example

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import {
  AnimatableHeader,
  CollapsedHeader,
  CollapsedHeaderTitle,
  CollapsedHeaderSection,
  HeaderBackground,
  ScrollableContent,
} from '@farfarawaylabs/react-native-animatable-header';

export default function App() {
  return (
    <View style={styles.container}>
      <AnimatableHeader backgroundColor="#000">
        <HeaderBackground image={bgOne} />
        <ScrollableContent
          title="Great Title"
          titleColor="#FFF"
          titleStyle={{ fontSize: 48 }}
        >
          {items.map((currItem, index) => {
            return (
              <Text style={[styles.item]} key={`item${index}`}>
                {currItem.title}
              </Text>
            );
          })}
        </ScrollableContent>
        <CollapsedHeader>
          <CollapsedHeaderSection />
          <CollapsedHeaderTitle title="Great Title" />
          <CollapsedHeaderSection />
        </CollapsedHeader>
      </AnimatableHeader>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    color: 'white',
    fontSize: 30,
    paddingVertical: 15,
  },
});

Components

AnimatableHeader

This is the parent component that holds both the expanded header, the collapsed header and the scrollbar with all the content. Inside it you should put the rest of the components this library exposes, or replace some with your own implementation. The AnimatableHeader will inject two props to each of its children:

• scrollY. An animatable value which reflects the current scroll location of scrollbar.
• headerHeight: The full header height. This prop is used internally to calculate the different animations

Props

• headerHeight: header height. Defaults to 30% of the window height
• backgroundColor: Set the background color for all the child components. Not set by default
• style: Additional styles or styles to override default style

HeaderBackground

This compoenent holds the background image of the expanded header as well as gradiant overlay and controls their animations.

Props

• image: image to use as background of the header
• backgroundColor: The background color to use. Defaults to '#000'
• style: Additional styles or styles to override default style

ScrollableContent

This component is the container scrollbar that knows to report it's scroll location and allow all other components to animate accordingly.

Props

• backgroundColor: The background color to use. Defaults to '#000'
• title: The expanded header title
• titleColor: The title color. Defaults to '#FFF'
• titleStyle: Additional styles or override default styles for the header title
• titleContainerStyle: Additional or overide default style for the container of the title. By default it centers the title horizontally and put it on the bottom vertically
• style: Additional styles or styles to override default style

CollapsedHeader

This is the container for the header when it is in the collapsed mode. You can use the two provided components (CollapsedHeaderSection and CollapsedHeaderTitle) as children or provide your own header implementation. If you use the CollapsedHeaderTitle as a child component, the CollapsedHeader will provide it with the scroll position automatically in order for it to animate the title better.

Props

• backgroundColor: The background color to use. Defaults to '#000'
• collapsedHeight: The height of the header when it is collapsed. Defaults to 30% of the header height
• style: Additional styles or styles to override default style

CollapsedHeaderSection

Container component to be used only as a child of CollapsedHeader. You will mostly use it in order to add buttons or other controls to the left or righ side of the collapsed header.

CollapsedHeaderTitle

Displays a title on the collpased header and controls animations for it.

Props

• title: The expanded header title
• titleColor: The title color. Defaults to '#FFF'
• titleStyle: Additional styles or override default styles for the header title

License

MIT